《DIV样式和设置》PPT课件

网页制作应用教程,2012.11,创建DIV标签DIV标签操作和设置应用实例,本节讲堂：DIV标签和设置,1、创建DIV样式,了解的知识点：DIV标签简介DIV与TABLE对比创建DIV标签层视图的基本组成,1.1DIV标签简介,DIV（层）是一个块级元素，是一种网页元素定位技术，用来为HTML文档内块（block-level）的内容提供结构和背景的元素，DIV以像素为单位实现页面元素的精确定位。DIV中的元素可以包含文本、图像或其它html文档等，通过DIV可以对页面元素进行重叠和更为复杂的布局，使网页页面布局（设计）从二维平面扩展到三维立体。,1.2DIV与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,层和表格都是对网页进行精确定位的工具，用层定位比表格定位使用起来更加灵活，但层只有在InternetExplorer4.0或NetscapeNavigator4.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）则时间轴上自动添加刚才绘制的图