DIV样式和设置.ppt

《DIV样式和设置.ppt》由会员分享，可在线阅读，更多相关《DIV样式和设置.ppt（24页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、网页设计教程网页制作应用教程网页制作应用教程2012.112012.11网页设计教程创建创建DIVDIV标签标签DIVDIV标签操作和设置标签操作和设置应用实例应用实例本节讲堂：本节讲堂：DIV标签和设置标签和设置网页设计教程1、创建、创建DIV样式样式 了解的知识点了解的知识点：DIV标签简介DIV与TABLE对比创建DIV标签 层视图的基本组成 网页设计教程1.1DIV1.1DIV标签简介标签简介 DIV（层）是一个块级元素，是一种网页元素定位技术，用来为HTML文档内块（block-level）的内容提供结构和背景的元素，DIV以像素为单位实现页面元素的精确精确定位定位。DIV中的元素可

2、以包含文本、图像或其它html文档等，通过DIV可以对页面元素进行重叠和更为复杂的布局，使网页页面布局（设计）从二维平面扩展到三维三维立体。网页设计教程1.2 DIV1.2 DIV与与TABLETABLE对比对比DIVDIVTABLETABLE相同点相同点页面布局页面布局不同点不同点绝对定位绝对定位相对定位相对定位三维布局三维布局二维布局二维布局灵活、复杂、不易掌握灵活、复杂、不易掌握简单、方便、容易上手简单、方便、容易上手技术要求高、开发周期长、后期维护不便技术要求高、开发周期长、后期维护不便简单、易用、维护方便简单、易用、维护方便如附件如附件1 1所示所示网页设计教程1.3 1.3 创建创

3、建DIVDIV标签标签操作：插入-布局对象-DIV标签网页设计教程1.3 1.3 创建创建DIVDIV标签标签操作：插入-布局对象-层层层是DIV标签的特殊形式。网页设计教程1.41.4层视图的基本组成层视图的基本组成选择柄调整柄DIV元素（块区间)网页设计教程2、DIV标签操作和设置标签操作和设置了解的知识点了解的知识点：“层”面板操作：选择、移动和对齐层“层”属性设置DIV和表格的转换网页设计教程2.12.12.12.1层面板操作层面板操作层面板操作层面板操作 “层”面板是对层进行管理的场所，可以方便地查看层的结构。要显示或隐藏“层”面板，可选择窗口层菜单命令或按【F2】键。网页设计教程2

4、.12.12.12.1层面板操作：选择层面板操作：选择层面板操作：选择层面板操作：选择选择单个层：选择单个层：（1）在文档编辑区中单击层边框。（2）在层中单击鼠标左键，再单击该层的选择柄。（3）在“层”面板中单击要选择的层的名称。（4）按住【Ctrl+Shift】键并在层中单击即可选择层。选择多个层选择多个层 （1）按住【Shift】键，在需要选择的多个层中单击，同时“层”面板中选择的层以反白显示。（2）按住【Shift】键，在“层”面板中单击要选择的多个层的名称。网页设计教程2.12.12.12.1层面板操作：移动层面板操作：移动层面板操作：移动层面板操作：移动 在网页制作中往往需要精确定位

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

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

7、DIV元素最初的可见状态。default:默认(可见)inherit:继承（使用父级的可见属性）Visible:可见 hidden:隐藏网页设计教程2.3DIV2.3DIV2.3DIV2.3DIV和和和和TableTableTableTable的相互转换：层的相互转换：层的相互转换：层的相互转换：层-Table-Table-Table-Table 层和表格都是对网页进行精确定位的工具，用层定位比表格定位使用起来更加灵活，但层只有在Internet Explorer 4.0或Netscape Navigator 4.0以上的版本中才能够正确显示。表格对浏览器的版本高低没有要求，如果要使设计的网页

8、在更低版本的浏览器中也能被正确显示，那么可将用层设计的网页转换为表格形式。网页设计教程2.3DIV2.3DIV2.3DIV2.3DIV和和和和TableTableTableTable的相互转换：层的相互转换：层的相互转换：层的相互转换：层-Table-Table-Table-Table（1）用层进行布局设置（如附件3所示）（2）选中层（多个）(3)【修改】-【转换】-【层到Table】网页设计教程3、应用实例、应用实例 实际案例:飘移的图片网页设计教程3.1、DIV层设置层设置（1）创建可见层；（2）层中插入图片或文字；网页设计教程3.2、时间轴设置、时间轴设置（1）打开时间轴面板：【窗口】-

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