网页制作第3讲网页的布局与定位.ppt

1、2020/7/25，1，本章知识点和技能点：如何使用版结构视图、表、层、信息帧进行页面版结构和表格提交和验证设置Dreamweaver内置行为的应用，2020/7/25，2，2但是，仅这些个知识在一盏茶2020/7/25，3，3，什么是web版结构定位，因为无法解决对象位置随浏览器窗口大小而变化的问题？ 此外，所谓web版结构的定位，是指根据需要将web要素、例如文本、图像等放置在适当的位置，Dreamweaver提供版结构视图、表、信息帧、层等web页的定位技术，只有把握它们才能真正地学习web页制作技术的精髓网站制作的思想和排版方式，需要web制作者根据自己的灵感思维和艺术思想来生成。 因

2、此，制作网页之前，制作者一般需要具有设计的整体修订图像，然后按照修订图像的思想完成网页的制作。2020/7/25,4、4、4、(1)、版结构视图版结构、Dreamweaver提供了标准、扩展和版结构三种视图模式，“版结构”插入条如图1所示。 请注意，Dreamweaver的某些功能仅在一个视图模式(如混合层)中可用，仅在标准视图中有效，在版结构视图中无效。 在2020/7/25、5、图1的版结构插入栏、2020/7/25、6以及版结构视图中，用户能够使用版结构表和版结构单元进行页版结构，页版结构的效果如图2所示。2020/7/25，7、图2页版结构效果、2020/7/25，8，1 .使用掌门人

3、页版结构、版结构视图的掌门人页版结构的操作过程，能够通过执行步骤1 :新页index.htm、设定过程2 :【显示】【表模式】【版结构模式】或者“ray 切换到版结构视图模式后，在“文档”窗口的工具条下显示横线，中央显示“版结构模式【结束】”。 这意味着当前处于版结构模式，不会出现在浏览器中。 要进入标准视图模式，请在“版结构”插入栏中喀呖声“标准”，或在该栏中喀呖声“退出”。2020/7/25，9，9，步骤3 :喀呖声版结构插入栏中的版结构表按钮，喀呖声并拖动页面空白以绘制版结构表。 在专业技术腻子粉面板中，设置版结构表的宽度760和高度420。 图3示出创建的版结构表，图4示出版结构表的属

4、性腻子粉面板。 在差动奥尔特下，版结构表格显示为灰色，顶部有标签条，底部有横条，包含栏宽和菜单、表格宽度和菜单。 另外，根据需要，如图6所示，在现有的版结构表中插入按照其它版结构带，即2020/7/25，10、图3的版结构表、2020/7/25，11、图4的版结构表的提供者面板、2020/7/25，12、步骤760420步骤5 尽管提供了粗略的版结构结构，但在“版结构”视图中，无法添加内容，因为无法将内容添加到版结构表中，只能将内容添加到版结构单元格中。2020/7/25、13、图5嵌套版结构表、2020/7/25、14、图6嵌套版结构表、2020/7/25、15，注意：以一个版结构绘制的版结

5、构表和现有的相邻版结构表之间的距离小于8个像素时，为dread 、2020/7/25，16，步骤6 :使用“版结构”插入栏中的版结构单元格工具绘制版结构单元格。第一行的版结构表格将绘制三个版结构单元格：宽度为80、600、80；在第二行的版结构表格中绘制版结构单元格；在第三行绘制三个版结构单元格；以及在第四行绘制版结构单元格。 在缺省奥尔特下，版结构单元格显示为白色，绘制的版结构单元格如图7所示。 描绘2020/7/25、17、图7版结构单元，2020/7/25、18、鼠标指针在版结构单元的框上移动时变为红色，喀呖声时可选择该版结构单元，选择时版结构单元的框变为蓝色，显示驾驶盘。 版结构单元格

6、不能复盖其他单元格，也不能移出版结构表格。 在“版结构单元格专业腻子粉”面板中，可以设置单元格的宽度、高度、内容对齐方式等。 图8是第一行右侧版结构单元格的专业腻子粉面板设置。 注意：在版结构模式下，不能在一个表格单元格中绘制版结构表格。 要在表格单元格中嵌套表格，必须使用标准模式。2020/7/25、19、图8的版结构单元的属性腻子粉面板、2020/7/25、20在版结构表和版结构单元的属性腻子粉面板中都具有“自动扩展”选项，以便可以根据浏览器窗口的变化自动扩展表或单元的宽度在某个版结构表中，只能自动延伸一列。 如果将一列设置为自动拉伸，则该列中的所有单元格都具有自动拉伸特性。 2020/7

7、/25、21、2 .在掌门人页制作、掌门人页制作的过程中，需要插入由Fireworks制作的web素材，例如Logo图标、Banner广告、导航仪表条等。 步骤760420将版结构表的背景色设置为#DDFFDF。 步骤2 :在第一行的三个版结构单元格中插入Logo图标，插入Banner广告栏，然后输入文本。 第2020/7/25，22步，第3步：在第2行插入在Fireworks中创建的导航仪表栏。 如果喀呖声“主页”插入栏中的Fireworks HTML按钮，将出现“插入Fireworks HTML”对话框，使用“浏览”按钮选择所需的文件dh.htm，如图9所示。 并且，当按下【ok】按钮时，

8、如图10所示，2020/7/25，23，图9是插入Fireworks HTML对话计程仪，插入2020/7/25，24，图10是Logo，bannnned的字符的大小为10pt，进行版权标记整在图11中示出内容的添加完成的结果。 步骤5 :切换到标准视图模式，选择最外面的表格并将其置中，然后保存文档，可以获得预览效果，如上图2所示。2020/7/25、26、图11的内容追加完成效果、2020/7/25、27、(2)、利用表格进行布局、表格是能够有效地描述信息的组织方式。 在网页中，还可以使用表格来控制“空白区域”，即空白文本、格拉夫快速键和所有其他页面元素之间的空间和外围区域。 也就是说，表格

9、可以用来控制页面版结构。 下面，将利用表来制作如图12所示的动物大观页面daguan.htm。2020/7/25、28、图12插入动物概观页版结构、2020/7/25、29、1 .表，在一个表中插入别的表来实现表的嵌套，这是web排版的一般手段之一。 要在Dreamweaver的“文档”窗口中插入表，请在步骤1 :创建新页面daguan.htm并设置页面的专业技术腻子粉。 标题是动物的大观，上、下、左、右边界都是0。2020/7/25，30，步骤2 :在标准视图模式下，喀呖声“版结构”或“常用”插入栏上的“插入表格”按钮，将显示“表格”设置对话框，其中表格行数为4，列数为1，宽度设置为：如果设

10、置表格宽度，其单位为在版结构页面时，最好使用像素作为定义页面使用范围的第一级表格宽度单位。2020/7/25、31、图13设定表格对话框、2020/7/25、32、步骤3 :当喀呖声“ok”按钮时，如图14所示，在页面中插入4行1列的表格。图14插入表格、2020/7/25、33、步骤4 :选择表格、对其属性面板进行设定属性.表的高度为420，中央对齐，表的专业腻子粉面板如图15所示。 另外，使用图15的表属性面板、2020/7/25、34、步骤5 :图16所示的单元属性面板来设定各单元的属性。 四行的高度分别为80、30、280、30，每个单元格居中，定径套的结果如图17所示。2020/7/

11、25、35、图17是定径套单元格后的效果，2020/7/25、36、步骤5 :在第一行插入1行3列的表，3个单元格的宽度分别为80、600、80。在第三行插入3行4列的表。 三行的高度分别是40、120、120，四列的宽度分别是190，所有单元格都居中。 效果如图18所示。 将2020/7/25、37、图18嵌套插入表格的效果、2020/7/25、38、2 .追加内容、步骤760420表格的背景色设为#99CCFF。 步骤2 :在第一行的三个版结构单元格中分别插入Logo图标、Banner广告条和输入文本在第二行插入Fireworks创建的导航仪表条在第三行输入相关字符，在要插入所需图像的第四

12、行输入版权标记。 步骤3 :保存文档后，预览效果，如图12所示。2020/7/25、39、(3)、层应用、Dreamweaver层相当于包含HTML文件中出现的所有元素的挤压筒。 层可以放置在页面上的任意位置，使用层可以轻松、准确地放置页面元素。 图层可让您将页面中元素的位置设定为像素层级的精确度。 层的一个更重要的作用是实现页面元素的复盖说唱乐。 图层与Dreamweaver的许多高级特性密切相关，下面我们将介绍如何创建和使用图层、组织页面元素以及创建如图19所示的页面。2020/7/25，40、使用图19图层技术创建的页面预览效果、2020/7/25，41，1 .创建图层，并创建可以使用插

13、入、拖动、绘制等方法的图层。 建立图层后，您可以套用图层面板来选取图层、将图层巢状化或变更图层的堆叠顺序。 层的残奥仪表选择决定了层的默认配置腻子粉(标签、可见性、高度、宽度等)。 要更改这些个设置，请选择【编辑】【首选项】命令，在弹出的“首选项”对话框计程仪框中选择层选项，然后如图20所示重新设置属性。 使用2020/7/25，42、图20偏好设定中的图层选项、2020/7/25，43、图层来版结构页面的动作如下： 步骤1 :新页面katong.htm、页面部署腻子粉的设定步骤2 :在标准视图模式下，喀呖声“版结构”插入栏的“插入版结构”按钮，或者执行“插入”“版结构对象”“版结构”命令，在

14、页面内喀呖声&拖动鼠标制作版结构选择一个层，然后在该层的“专业技术腻子粉”面板中进行专业技术腻子粉设置，如图21所示。 绘制图层的效果如图22所示。2020/7/25、44、图21层的属性面板、图22制作层、2020/7/25、45、步骤3 :在第一层嵌入其他层，效果如图23所示。 与巢状图层不同的图层中所包含的图层，建立巢状图层的好处是，您可以确认该图层位于父图层上方。 在Shift牛鼻子下云同步选择多层，执行【修正】【排列】【设定宽度相同】【修正】【设定高度相同】指令，可使多层的宽度、高度一致。 2020/7/25、46和图23绘制嵌套层，插入2020/7/25、47和2 .内容，将光标置

15、于要插入内容的层上，然后键入文本或插入图像。 预览效果如图19所示。 2020/7/25、48、3 .“层”面板、“窗口”“层”命令打开“层”面板，图24是katong.htm文件中的“层”面板。 在图24层面板、2020/7/25、49、层面板中，层以层名栈内存列表的形式表示，最老师制作的层位于列表的最下面，最后制作的层位于列表的最上面。 嵌套层通过连接器连接到父层，表示从属关系。 喀呖声父图层旁边的减号会隐藏嵌套的子图层，喀呖声父图层旁边的加号会显示嵌套的子图层。 此外，图层名称前面的闭合眼睛图标表示该图层当前不可见。喀呖声此图标后，将变为打开的眼睛图标，表示该层出现在页面上。 如果您喀呖

16、声图层名称，则会选取该图层，并且会出现深蓝色的选取标记。 的双曲馀弦值。 2020/7/25，50。 在“图层”面板中，可以禁止叠加说唱乐图层、更改图层可见性、更改图层的栈内存顺序以及选择一个或多个图层。 如果不希望在创建层时与其他层发生重叠说唱乐，请选中“层”面板中的“防止重叠说唱乐”复选框。 2020/7/25，51，注意：在HTML查询密码中，栈内存顺序或Z-Index决定浏览器的中间阶层顺序。 要在“图层”面板中更改图层的栈内存顺序，请执行步骤1 :选择“窗口”“图层”命令，然后创建“图层”面板。 步骤2 :在“层”面板的z栏中，喀呖声与要更改的层对应的数值。 输入一个大于当前数字的数

17、字，将层的堆叠顺序向后移动；输入一个小于当前数字的数字，将层的堆叠顺序向前移动。 在“层专业技术腻子粉”面板的“z轴”字符框中键入数值，或更改层的堆叠顺序。2020/7/25、52、4 .层与表的交互转换可以使用层在页面中放置内容，与表相比，层的操作和页面设计的更改更加容易。 因此，用户可以利用层的特征快速设置和修改页面，优化页面设置和修改，并将其转换为表格。 【修改】【变换】通过选择【从表到层】或【从层到表】命令，可以进行层和表之间的相互变换。 要将katong.htm文件中的图层转换为表，请执行以下步骤：打开2020/7/25，53，步骤1:katong.htm的“图层”面板，删除嵌套图层

18、，然后删除叠加关说唱乐图层。 当您建立图层转换表格时，页面不能包含叠加堆说唱乐图层和巢状图层。 步骤2 :选择【修改】【转换】【层到表】指令后，会显示如图25所示的对话计程仪框。 2020/7/25，54，图25的转换层为表格计程仪，2020/7/25，55，步骤3 :进行设定后，喀呖声【ok】按钮。 效果如图26所示，图26层转换成表格后的效果，2020/7/25，56，(4)，信息帧的应用，信息帧主要用于在一个阅读窗口中显示多个HTML文档。 通过建构这些个文档之间的相互关系，实现文档的导航仪表、阅读、操作等目的。 2020/7/25、57、1 .在信息帧工作技术中，可以使用信息帧工作将浏览器窗口分割为多个不同的区域，并在各个区域中显示不同的文档内容。 最常见的方法是，将左侧或上方的区域作为目录区域，将文档页的目录