《DIV样式和设置》PPT课件

3、层“层”属性设置DIV和表格的转换2.1层面板操作“层”面板是对层进行管理的场所，可以方便地查看层的结构。要显示或隐藏“层”面板，可选择[窗口][层]菜单命令或按【F2】键。2.1层面板操作：选择选择单个层：（1）在文档编辑区中单击层边框。（2）在层中单击鼠标左键，再单击该层的选择柄。（3）在“层”面板中单击要选择的层的名称。（4）按住【Ctrl+Shift】键并在层中单击即可选择层。选择多个层（1）按住【Shift】键，在需要选择的多个层中单击，同时“层”面板中选择的层以反白显示。（2）按住【Shift】键，在

4、“层”面板中单击要选择的多个层的名称。2.1层面板操作：移动在网页制作中往往需要精确定位层的位置，这就需要对创建的层进行移动。（1）移动选择柄；（2）确定X轴和Y轴坐标值2.1层面板操作：对齐在网页制作中常常需要将某些层按照一定的规定对齐。在进行层的对齐操作时，嵌套层中所有子层并不参与层的对齐操作，它们只随父层的移动而移动，并始终与父层保持相对的固定位置。注：是将层中的元素内容进行对齐设置，而非对层本身进行对齐。2.2层属性设置选中层，在“属性”面板中进行相关设置。层编号：DIV的唯一ID。只应使用标准的字母数字字

5、符。左和右：DIV的左上角相对于页面左上角的位置（像素）。DIV嵌套则为父DIV相对左上角的位置。宽和高：DIV元素的宽度和高度（像素）。如果DIV元素的内容超过指定大小，在Dreamwaver设计视图中，DIV元素的底边会自动延伸以容纳这些内容，如果“溢出”属性设置为“不可见”，则在浏览器中，超过宽度和高度的内容将不会延伸。溢出：当DIV元素内容超过设定宽度和高度的处理设置。Visible:可见Hidden:隐藏Scroll:滚动Auto:自动Z轴：DIV元素的Z轴或堆叠顺序。编号大的元素出现在编号小的元素的前面

6、。（需将防止重叠设置取消）可见性：DIV元素最初的可见状态。default:默认(可见)inherit:继承（使用父级的可见属性）Visible:可见hidden:隐藏2.3DIV和Table的相互转换：层->Table层和表格都是对网页进行精确定位的工具，用层定位比表格定位使用起来更加灵活，但层只有在InternetExplorer4.0或NetscapeNavigator4.0以上的版本中才能够正确显示。表格对浏览器的版本高低没有要求，如果要使设计的网页在更低版本的浏览器中也能被正确显示，那么可将用层设计的网页

7、转换为表格形式。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）设置时间轴属性：

8、自动播放、循环（3）保存预览3.4、复杂效果设置（1）选中层（2）执行【修改】->【时间轴】->【录制层路径】（3）移动层并任意绘制路径，结束位置释放鼠标（4）则时间轴上自动添加刚才绘制的图层路径。保存预览。上机练习在网页中进行DIV样式和设置的练习。在练习过程中，运用课堂讲解的创建DIV方法、DIV格式设置、层的选择、移动、对齐和属性设置，及综合应用等知识