第4讲网页布局及设计.docVIP

第4讲网页布局及设计 DW可以通过以下一些方法来创建和设计页面： 通常，主要依靠表格来实现－比较困难 使用层－定位问题（层在后面讲到） 排版视图－较简单 1、设定精确的工作环境 1）网格：“查看”菜单 2）标尺：“查看”菜单 3）页面边空：参考前面页面属性设置内容 默认状态下，页面内容和页面边框之间空着大约10个象素的距离，需要在页面属性中设定这个间距为0 4）跟踪图像：页面属性设置，不同于背景图像，主要用于作为定位参考作用 2、用表格排版 布局方法： 由于浏览器显示内容时是下载完整个表格后才显示此表格中的所有内容，因此应尽可 能将表格活分为多个独立的表格，这样可以加快显示速度，而不应将所有的页面内容都放 置在一个大表格中。 表格布局主要是插入表格，调整表格大小小，然后再在表格里面把表格拆分为合适的单元格，或者在表格里面再嵌套表格。 左边图为一简单表格布局例子，由三个大表格组成，表格的边框和间距都为0 其中，上面的大表格有两个单元格，中间的大表格有四个单元格，下面是一个表格。 3、排版视图（布局视图） 1）绘制布局表格和单元格 布局表格和布局单元格实际上也是表格和单元格。在布局表格里面绘制布局单元格，布 局单元格不能在绘制布局单元格和布局表格，但布局表格既可以绘制布局单元格也可以嵌 套布局表格 首先，在“插入栏布局”选项选择“布局视图”，切换到布局视图 然后，选择“绘制布局表格”，在文档中直接拖动绘制表格 左边为绘制了三个布局表格 绘制完表格之后，可以选择“绘制布局单元格”，在布局表格里面绘制单元格 直接在布局表格里面拖动绘制单元格 如果要对表格或单元格进行进一步的调整，最好在绘制完了布局表格和单元格后，把视图切换会“标准视图”，在标准视图里处理表格，因为在布局视图里，有时绘制单元格时一不小心会弄得表格比较混乱 2)移动和调整布局表格和单元格 把布局表格或单元格选定就可以直接想表格那样进行调整操作，移动一般是移动布局单元格，选中，直接拖动即可。 注意问题： 1）在一个空文档中绘制表格时，表格总能自动捕捉到页面窗口上的左上角 2）布局单元格都包含在布局表格中，布局单元格不能重叠或交叉；不能在表格的右边画表格 3）如果页面已经存在内容，布局表格只能在内容的下方，也就是说表格不能是平行的，不能在布局表格的右边再画布局表格 3）向布局单元格添加内容 绘制布局表格时，表格以灰色填充，表示该区域不能插入内容，因此，必须在表格中创建布局单元格，才能在布局单元格中插入所需要的文本和图像等。建议在布局视图绘制好后，切换会标准视图，进行表格操作。 4）格式化 选定布局表格或布局单元格，可以在属性面板进行相关设置，注意其中的宽选项，看下图，可以设置列宽度。 设置布局表格（单元格）列宽度 在布局视图中，设置列宽度有两类： 固定宽度和自由伸缩。自由伸缩时 根据浏览器窗口大小自动设置的。（显示为波浪线） 1）自动伸缩 2）固定宽度 3）使用分隔图像 分隔图像是透明图像，它不能在浏 览器中显示，但是它在自动伸缩宽 度的表格中用于控制列宽度。分隔 图像保持着页面上的每一个表格和 单元格的设置的宽度。如果在自动 伸缩宽度的表格里没有选择分隔图 像，列的宽度将无法控制 5）设置布局视图参数：“编辑”-“参数选择” 4、框架 框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。 框架主要由两个主要部分－框架页和单个框架组成。 框架页是一个在文档内定义一组框架结构的HTML网页，它定义了一页网页显示的框架数，框架的大小，载入框架的网页源和其它可定义的属性等等。 单个框架是指在网页上定义的一个区域。 框架页：父框架 框架:子框架 如果某个页面被划分为两个框架，那么它实际上包含的是三个独立的文件，一个框 架集文件和两个框架内容文件。框架内容文件就是显示在页面框架中的内容。 框架通常被用来定义页面的导航区和内容区域。 1）创建框架 使用预定义框架格式创建框架 首先，“查看”-“可视化助理”-“框架边框”，使框架边框可见 在“插入栏框架”选项下可以使用选择使用预定义的框架格式 左图为一框架格式 自定义：“修改”-“框架页”或 拖一条框架边（注意alt选择问题） 图1 “查看”-“可视化助理”-“框架边框” ，使框架边框可见,然后直接拖动框架边框 图2 图3 这是要注意的是直接拖动的选定问题（后面部分讲到） 如果我们现在要在图1右边的框架拖动为上下两个框架，直接拖动边框的话，选定的会是整个大的框架，就会拖了一个十字的框架出来，图2所示。 这时，正确的做法是，按alt键然后点击图1右边的框架，