《DIV样式和设置实用教案》由会员分享，可在线阅读，更多相关《DIV样式和设置实用教案（24页珍藏版）》请在金锄头文库上搜索。
1、1、创建(chungjin)DIV样式 了解的知识点：DIV标签简介DIV与TABLE对比创建DIV标签 层视图(sht)的基本组成 第1页/共23页第一页，共24页。1.1DIV标签(bioqin)简介 DIV（层）是一个块级元素，是一种网页元素定位技术，用来为HTML文档内块（block-level）的内容提供结构和背景(bijng)的元素，DIV以像素为单位实现页面元素的精确定位。 DIV中的元素可以包含文本、图像或其它html文档等，通过DIV可以对页面元素进行重叠和更为复杂的布局，使网页页面布局（设计）从二维平面扩展到三维立体。第2页/共23页第二页，共24页。1.2 DIV1.2
2、DIV与与TABLETABLE对比对比(dub)(dub)DIVDIVTABLETABLE相同点相同点页面布局页面布局不同点不同点绝对定位绝对定位相对定位相对定位三维布局三维布局二维布局二维布局灵活、复杂、不易掌握灵活、复杂、不易掌握简单、方便、容易上手简单、方便、容易上手技术要求高、开发周期长、后期维护不便技术要求高、开发周期长、后期维护不便简单、易用、维护方便简单、易用、维护方便如附件如附件(fjin)1(fjin)1所所示示第3页/共23页第三页，共24页。1.3 创建(chungjin)DIV标签操作：插入-布局(bj)对象-DIV标签第4页/共23页第四页，共24页。1.3 1.3
3、创建创建(chungjin)DIV(chungjin)DIV标签标签操作(cozu)：插入-布局对象-层层是层是DIVDIV标签标签(bi(bioqioqin)n)的特殊形式。的特殊形式。divid=Layer2第5页/共23页第五页，共24页。1.4层视图(sht)的基本组成选择(xunz)柄调整(tiozhng)柄DIV元素（块区间)第6页/共23页第六页，共24页。2、DIV标签操作(cozu)和设置了解的知识点：“层”面板(min bn)操作：选择、移动和对齐层 “层”属性设置DIV和表格的转换第7页/共23页第七页，共24页。2.1层面板操作(cozu) “层”面板是对层进行管理的场
4、所，可以方便地查看(chkn)层的结构。要显示或隐藏“层”面板，可选择窗口层菜单命令或按【F2】键。 第8页/共23页第八页，共24页。2.1层面板操作(cozu)：选择选择单个层： （1）在文档编辑区中单击层边框。 （2）在层中单击鼠标左键，再单击该层的选择柄。 （3）在“层”面板(min bn)中单击要选择的层的名称。 （4）按住【Ctrl+Shift】键并在层中单击即可选择层。 选择多个层 （1）按住【Shift】键，在需要(xyo)选择的多个层中单击，同时“层”面板中选择的层以反白显示。 （2）按住【Shift】键，在“层”面板中单击要选择的多个层的名称。 第9页/共23页第九页，共2
5、4页。2.1层面板操作(cozu)：移动 在网页制作中往往需要精确定位层的位置，这就需要对创建的层进行(jnxng)移动。 （1）移动(ydng)选择柄；（2）确定X轴和Y轴坐标值第10页/共23页第十页，共24页。2.12.1层面板操作层面板操作(cozu)(cozu)：对齐：对齐 在网页(wn y)制作中常常需要将某些层按照一定的规定对齐。在进行层的对齐操作时，嵌套层中所有子层并不参与层的对齐操作，它们只随父层的移动而移动，并始终与父层保持相对的固定位置。 注：是将层中的元素内容进行对齐设置，而非对层本身进行对齐。 第11页/共23页第十一页，共24页。2.22.2层属性层属性(shxng
6、)(shxng)设设置置选中层，在“属性”面板(min bn)中进行相关设置。第12页/共23页第十二页，共24页。层编号：DIV的唯一ID。只应使用标准的字母数字字符。左和右：DIV的左上角相对于页面左上角的位置（像素）。DIV嵌套则为父DIV相对左上角的位置。宽和高： DIV元素的宽度和高度（像素）。如果DIV元素的内容超过指定大小， 在Dreamwaver设计视图中， DIV元素的底边会自动延伸以容纳这些内容，如果“溢出”属性设置为“不可见”，则在浏览器中，超过宽度和高度的内容将不会延伸。溢出：当DIV元素内容超过设定(sh dn)宽度和高度的处理设置。 Visible:可见 Hidde
7、n:隐藏 Scroll:滚动 Auto:自动第13页/共23页第十三页，共24页。Z轴：DIV元素的Z轴或堆叠顺序。编号大的元素出现在编号小的元素的前面。（需将防止重叠设置取消）可见性： DIV元素最初的可见状态。default:默认(mrn)(可见) inherit:继承（使用父级的可见属性） Visible:可见 hidden:隐藏第14页/共23页第十四页，共24页。2.3DIV和Table的相互(xingh)转换：层-Table 层和表格都是对网页进行精确定位的工具，用层定位比表格定位使用起来更加灵活，但层只有在Internet Explorer 4.0或Netscape Naviga
8、tor 4.0以上的版本中才能够(nnggu)正确显示。表格对浏览器的版本高低没有要求，如果要使设计的网页在更低版本的浏览器中也能被正确显示，那么可将用层设计的网页转换为表格形式。第15页/共23页第十五页，共24页。2.3DIV2.3DIV和和TableTable的相互的相互(xingh)(xingh)转换：层转换：层-Table-Table（1）用层进行布局设置（如附件3所示）（2）选中层（多个）(3)【修改(xigi)】-【转换】-【层到Table】第16页/共23页第十六页，共24页。3、应用(yngyng)实例 实际案例(n l):飘移的图片第17页/共23页第十七页，共24页。3.
9、1、DIV层设置(shzh)（1）创建可见(kjin)层；（2）层中插入图片或文字；第18页/共23页第十八页，共24页。3.2、时间轴设置(shzh)（1）打开(d ki)时间轴面板：【窗口】-【时间轴】；（2）选中DIV层；（3）将层拖放到时间轴：【修改】-【时间轴】-添加对象到时间轴；第19页/共23页第十九页，共24页。3.3、运行(ynxng)样式设置（1）单击选择第一帧和最后一帧，调整该帧层的位置等属性；（2）设置时间轴属性：自动播放、循环(xnhun)（3）保存预览第20页/共23页第二十页，共24页。3.4、复杂效果(xiogu)设置（1）选中层（2）执行【修改】-【时间轴】-
10、【录制层路径】（3）移动层并任意绘制路径，结束位置释放鼠标（4）则时间轴上自动添加(tin ji)刚才绘制的图层路径。保存预览。第21页/共23页第二十一页，共24页。上机练习(linx) 在网页中进行DIV样式和设置的练习。在练习过程中，运用课堂讲解(jingji)的创建DIV方法、DIV格式设置、层的选择、移动、对齐和属性设置，及综合应用等知识，进行综合练习。第22页/共23页第二十二页，共24页。感谢您的欣赏(xnshng)！第23页/共23页第二十三页，共24页。内容(nirng)总结1、创建DIV样式。要显示或隐藏“层”面板，可选择窗口层菜单命令或按【F2】键。（2）在层中单击鼠标左键，再单击该层的选择柄。（4）按住【Ctrl+Shift】键并在层中单击即可选择层。（2）确定X轴和Y轴坐标值。宽和高： DIV元素的宽度和高度（像素）。Z轴：DIV元素的Z轴或堆叠(dudi)顺序。可见性： DIV元素最初的可见状态。感谢您的欣赏第二十四页，共24页。
