DIV样式和设置.ppt

,*,*,*,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,网页设计教程,网页制作应用教程,2012.11,创建,DIV,标签,DIV,标签操作和设置,应用实例,本节讲堂：,DIV,标签和设置,1,、创建,DIV,样式,了解的知识点,：,DIV,标签简介,DIV,与,TABLE,对比,创建,DIV,标签,层视图的基本组成,1.1DIV,标签简介,DIV,（层）是一个块级元素，是一种网页元素,定位,技术，,用来为,HTML,文档内,块,（,block-level,）的内容提供结构和背景的元素，,DIV,以像素为单位实现,页面元素的,精确定位,。,DIV,中的,元素可以包含文本、图像或其它,html,文档等，通过,DIV,可以对页面元素进行,重叠,和更为,复杂,的布局，使网页,页面布局,（设计）,从二维平面扩展到,三维,立体,。,1.2 DIV,与,TABLE,对比,DIV,TABLE,相同点,页面布局,不同点,绝对定位,相对定位,三维布局,二维布局,灵活、复杂、不易掌握,简单、方便、容易上手,技术要求高、开发周期长、后期维护不便,简单、易用、维护方便,如附件,1,所示,1.3,创建,DIV,标签,操作：插入,-,布局对象,-DIV,标签,1.3,创建,DIV,标签,操作：插入,-,布局对象,-,层,层,是,DIV,标签的特殊形式。,1.4,层视图的基本组成,选择柄,调整柄,DIV,元素（块区间,),2,、,DIV,标签操作和设置,了解的知识点,：,“层”面板操作：选择、移动和对齐层,“层”属性设置,DIV,和表格的转换,2.1,层面板操作,“,层”面板是对层进行,管理,的场所，可以方便地查看层的结构。要显示或隐藏“层”面板，可选择,窗口,层菜单命令或按【F2】键。,2.1,层面板操作：选择,选择单个层：,（,1,）在文档编辑区中单击层边框。,（,2,）在层中单击鼠标左键，再单击该层的选择柄。,（,3,）,在,“,层,”,面板中单击要选择的层的名称。,（,4,）按住,【,Ctrl+Shift,】,键并在层中单击即可选择层。,选择多个层,（,1,）按住,【,Shift,】,键，在需要选择的多个层中单击，同时,“,层,”,面板中选择的层以反白显示。,（,2,）,按住,【Shift】,键，在,“,层,”,面板中单击要选择的多个层的名称。,2.1,层面板操作：移动,在网页制作中往往需要,精确定位,层的位置，这就需要对创建的层进行移动。,（,1,）移动选择柄；,（,2,）确定,X,轴和,Y,轴坐标值,2.1,层面板操作：对齐,在网页制作中常常需要将某些层按照一定的规定对齐。在进行层的对齐操作时，嵌套层中所有子层并不参与层的对齐操作，它们只随,父层,的移动而移动，并始终与父层保持,相对,的固定位置。,注：是将层中的,元素内容,进行对齐设置，而非对层本身进行对齐。,2.2,层属性设置,选中层，在,“,属性,”,面板中进行相关设置。,层编号：,DIV,的唯一,ID,。只应使用标准的字母数字字符。,左和右：,DIV,的左上角相对于页面左上角的位置（像素）。,DIV,嵌套则为父,DIV,相对左上角的位置。,宽和高：,DIV,元素的宽度和高度（像素）。如果,DIV,元素的内容超过指定大小，,在,Dreamwaver,设计视图中，,DIV,元素的底边会自动延伸以容纳这些内容，如果,“,溢出,”,属性设置为,“,不可见,”,，则在浏览器中，超过宽度和高度的内容将不会延伸。,溢出,：当,DIV,元素内容超过设定宽度和高度的处理设置。,Visible:,可见,Hidden:,隐藏,Scroll:,滚动,Auto:,自动,Z,轴：,DIV,元素的,Z,轴或堆叠顺序。编号大的元素出现在编号小的元素的前面。（需将防止重叠设置取消）,可见性：,DIV,元素最初的可见状态。,default:,默认,(,可见,),inherit:,继承（使用父级的可见属性）,Visible:,可见,hidden:,隐藏,2.3DIV,和,Table,的相互转换：层,-Table,层和表格都是对网页进行,精确定位,的工具，用,层,定位比表格定位使用起来更加,灵活,，但层只有在,Internet Explorer 4.0,或,Netscape Navigator 4.0,以上的版本中才能够正确显示。表格对浏览器的版本高低没有要求，如果要使设计的网页在更低版本的浏览器中也能被正确显示，那么可将用层设计的网页转换为表格形式。,2.3DIV,和,Table,的相互转换：层,-Table,（,1,）用层进行布局设置（如附件,3,所示）,（,2,）选中层（多个）,(3)【,修改,】-【,转换,】,-,【,层到,Table】,3,、应用实例,实际案例,:,飘移的图片,3.1,、,DIV,层设置,（,1,）创建可见层；,（,2,）层中插入图片或文字；,3.2,、时间轴设置,（,1,）打开时间轴面板：,【,窗口,】-【,时间轴,】,；,（,2,）选中,DIV,层；,（,3,）将层拖放到时间轴：,【,修改,】-【,时间轴,】-,添加对象到时间轴；,3.3,、运行样式设置,（,1,）单击选择第一帧和最后一帧，调整该帧层的位置等属性；,（,2,）设置时间轴属性：自动播放、循环,（,3,）保存预览,3.4,、复杂效果设置,（,1,）选中层,（,2,）执行,【,修改,】-【,时间轴,】-【,录制层路径,】,（,3,）移动层并任意绘制路径，结束位置释放鼠标,（,4,）则时间轴上自动添加刚才绘制的图层路径。保存预览。,上机练习,在网页中进行,DIV,样式和设置,的练习。在练习过程中，运用课堂讲解的,创建,DIV,方法、,DIV,格式设置、层的选择、移动、对齐和属性设置，,及综合应用等知识，进行综合练习。,