《网页布局设计》

网页布局设计好的网页布局创意后，还必须掌握网页布局的一些方法和技巧。只有这样才能让设计者的绝妙构思得到很好的表现整理课件7.1用表格布局页面在“布局”模式中，可以使用表格作为基础结构来设计您的网页，同时也避免了使用传统的方法创建基于表格的设计时经常出现的一些问题。整理课件7.1.1用布局表格布局网页1.切换到布局模式整理课件2．布局顶部部分整理课件3.布局主体部分整理课件4.布局底部信息部分5.美化网页运行效果整理课件7.1.2关于“布局”模式

在“布局”模式中，可以在添加网页内容前使用布局表格和布局单元格对页面进行布局，就象实例中的页面一样，根据自己的设计绘制出布局表格和单元格，然后在里面添加自己的内容。在“布局”模式中能对单元格直接添加内容，这样可以按需要随时移动单元格位置、调整其大小。绘制的布局表格外框默认颜色为绿色，而布局单元格外框默认颜色为蓝色。执行【编辑】｜【首选参数】命令，在弹出的对话框中执行【布局模式】命令，在这里可以更改布局表格和布局单元格的颜色，还可以在这里指定间隔图像文件。相关的信息可以选择对话框中的【帮助】按钮获得。整理课件7.1.3绘制“布局表格”和“布局单元格”1．绘制“布局表格”2．绘制“布局单元格”3．绘制嵌套布局表格整理课件7.1.4在“布局单元格”添加内容在“布局”模式中可以将文本、图像和其他内容添加到布局单元格中，就像在“标准”模式中将内容添加到表格单元格一样。单击要添加内容的单元格，然后键入文本或插入其他内容。整理课件7.1.5“布局表格”和“布局单元格”的调整及设置1．清除自动设置的单元格高度单击表格标题菜单，然后选择“清除所有高度”。选中所要清除高度的布局表格，使表格四边出现八个控制点，然后执行【窗口】｜【属性】命令，调出属性面板，单击【清除行高】按钮2．调整布局表格、布局单元格的大小以及移动它们调整布局表格、布局单元格的大小的方法如下：（1）选中所要调整的布局表格或布局单元格。该布局表格或布局单元格周围出现选择控制点。（2）拖动选择控制点来调整表格或单元格的大小。移动布局表格的方法如下：（1）单击该布局表格中的空白区域或过单击表格顶部的标签。（只有当布局表格嵌套在另一个布局表格中时，才可以移动该布局表格。）（2）将表格拖到页上的另一个位置。也可以按键盘上箭头键移动该表格，每次移动1个像素。整理课件3．设置布局单元格和表格的格式在属性面板中设置布局表格的多种属性，包括宽度、高度、边距和间距设置布局单元格的格式：在属性面板中设定布局单元格内容对齐方式，宽度和高度，以及背景色。4．设置列宽度在【布局】视图中使用两种类型的宽度：【固定】宽度和【自动伸展】。每列的宽度都在列顶部或底部的列头区域显示。整理课件7.2框架布局页面Dreamwaver还提供了一种更方便的工具——框架。框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。访问者浏览站点时，可以使某个区域的文档永远不更改，通过导航条的链接更改主要内容框架的内容，从而达到网页布局的相对统一。一般情况下，可以用框架来保持网页中固定的几个部分，如网页大标题、链接按钮等，剩下的框架用来展现所选择的网页内容。整理课件7.2.1用框架布局页面1．建立框架2．编辑各框架内的文件3．制作其他需要调用至各框架的文件4．框架页面之间链接运行效果整理课件7.2.2创建框架和框架集1．使用预定义的框架集2．自己设计框架集3．拆分或删除框架4．创建嵌套框架整理课件7.2.3设置框架及框架集属性1．首先应该选取要进行更改的框架和框架集。在视图窗口中选择框架在“框架”面板中选择框架在视图窗口中选择框架集在“框架”面板中选择框架集2．设置框架属性3.设置框架集属性

整理课件7.2.4保存框架和框架集1．保存框架集内所有的文件执行【文件】｜【保存全部】命令。此时会弹出一个对话框要求选择保存路径和文件名。粗框的范围表明了此时正要保存的文件，如粗框围住整个视图说明此时保存的是框架集，所有没有保存的框架文档都将在框架的周围出现粗边框，并且出现一个对话框要求选择保存路径和文件名。2．保存框架中显示的文档在需要保存的框架内单击，执行【文件】｜【保存框架】命令或者执行【文件】｜【框架另存为】命令。3．要保存框架集文件在【框架】面板或视图窗口中选择框架集，执行【文件】｜【保存框架页】命令或者执行【文件】｜【框架集另存为】命令。整理课件7.2.5控制带有链接的框架内容（1）在文档中选择需要链接的文本或者对