DIV样式和设置.ppt

1、网页制作应用教程,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对比

2、,如附件1所示,1.3 创建DIV标签,操作：插入-布局对象-DIV标签,1.3 创建DIV标签,操作：插入-布局对象-层,层是DIV标签的特殊形式。,1.4层视图的基本组成,选择柄,调整柄,DIV元素（块区间),2、DIV标签操作和设置,了解的知识点： “层”面板操作：选择、移动和对齐层 “层”属性设置 DIV和表格的转换,2.1层面板操作,“层”面板是对层进行管理的场所，可以方便地查看层的结构。要显示或隐藏“层”面板，可选择窗口层菜单命令或按【F2】键。,2.1层面板操作：选择,选择单个层： （1）在文档编辑区中单击层边框。 （2）在层中单击鼠标左键，再单击该层的选择柄。 （3）在“层”面

3、板中单击要选择的层的名称。 （4）按住【Ctrl+Shift】键并在层中单击即可选择层。,选择多个层 （1）按住【Shift】键，在需要选择的多个层中单击，同时“层”面板中选择的层以反白显示。 （2）按住【Shift】键，在“层”面板中单击要选择的多个层的名称。,2.1层面板操作：移动,在网页制作中往往需要精确定位层的位置，这就需要对创建的层进行移动。,（1）移动选择柄； （2）确定X轴和Y轴坐标值,2.1层面板操作：对齐,在网页制作中常常需要将某些层按照一定的规定对齐。在进行层的对齐操作时，嵌套层中所有子层并不参与层的对齐操作，它们只随父层的移动而移动，并始终与父层保持相对的固定位置。 注：

4、是将层中的元素内容进行对齐设置，而非对层本身进行对齐。,2.2层属性设置,选中层，在“属性”面板中进行相关设置。,层编号：DIV的唯一ID。只应使用标准的字母数字字符。 左和右：DIV的左上角相对于页面左上角的位置（像素）。DIV嵌套则为父DIV相对左上角的位置。 宽和高： DIV元素的宽度和高度（像素）。如果DIV元素的内容超过指定大小， 在Dreamwaver设计视图中， DIV元素的底边会自动延伸以容纳这些内容，如果“溢出”属性设置为“不可见”，则在浏览器中，超过宽度和高度的内容将不会延伸。 溢出：当DIV元素内容超过设定宽度和高度的处理设置。 Visible:可见 Hidden:隐藏

5、Scroll:滚动 Auto:自动,Z轴：DIV元素的Z轴或堆叠顺序。编号大的元素出现在编号小的元素的前面。（需将防止重叠设置取消） 可见性： DIV元素最初的可见状态。 default:默认(可见) inherit:继承（使用父级的可见属性） Visible:可见 hidden:隐藏,2.3DIV和Table的相互转换：层-Table,层和表格都是对网页进行精确定位的工具，用层定位比表格定位使用起来更加灵活，但层只有在Internet Explorer 4.0或Netscape Navigator 4.0以上的版本中才能够正确显示。表格对浏览器的版本高低没有要求，如果要使设计的网页在更低版本

6、的浏览器中也能被正确显示，那么可将用层设计的网页转换为表格形式。,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）则时间轴上自动添加刚才绘