安徽师范大学物理与电子信息学院网页设计与制作第7章 7.1.页面布局.pdfVIP

第6章 页面布局 中国科学技术大学出版社 布局概念 在网页设计制作过程中，网页的布局是非常重要的，也 就是网页中的文字、图像与动画等对象如何安排。布局 的作用是在插入对象以前先对网页进行区域分割，也就 是设计网页中的文字、图像与动画等对象如何安排。 网页布局可以使用框架、层或表格，使用最多的是表格 。常规的方法是插入表格，但是需要进行表格的合并和 拆分等调整。 DW 中的“布局”栏有两个工具按钮，即“布局表格 ”和“ 布局单元格 ”。利用它们可以方便地对网页进行布局 操作。 HTML代码 布局技术 DW操作设置 网页页面布局主要技术： 网页页面布局主要技术： 表格： 简略布局 表格 框架： 大概布局 框架 层 ： 精细布局 层 CSS+DIV布局: 样式布局 CSS+DIV布局具有易维护,易整体控制网站,易 见效网页大小,易节省流量,易推广等优势 。 HTML代码 页面布局 DW操作设置 HTML代码 布局视图 DW操作设置 布局视图 布局视图 (一) 切换布局视图 (一) 切换布局视图 1．执行以下操作之一： •单击菜单栏中“视图”|“表格视图”|“布局视图”命令。 •在“插入”栏的“布局”类别中，单击“布局模式”按钮。 2．打开“从布局模式开始”对话框 HTML代码 页面布局 DW操作设置 HTML代码 布局视图 DW操作设置 3．单击“确定”按钮，进入布局视图模式。 4．单击“退出”按钮，或单击相应的其他视图按钮，退出布 局视图。 HTML代码 表格布局 DW操作设置 (二)布局工具按钮 (二)布局工具按钮 在“插入栏”的“布局”类别中，有布局用各种工具按钮。 从上到下依次为： • “标准”：单击进入标准视图模式。 • “扩展”：单击进入扩展表格模式。 • “布局”：单击进入布局视图模式。 “ ”：绘制布局表格。 “ ”：绘制布局单元格。 “ ”：添加布局框架。 “ ”：导入表格数据。 HTML代码 表格布局 DW操作设置 表格概念 表格概念 在表格中横向为行，纵向为列。行列交叉部分就叫做单元 格。单元格中的内容和边框之间的距离叫边距。单元格 和单元格之间的距离叫间距。表格的边线叫做边框。 HTML代码 表格布局 DW操作设置 表格概念 表格概念 插入表格 插入表格 （一）插入表格 （一）插入表格 1．定位光标在要插入表格的位置，然后执行以下操作之一： •单击菜单栏中的“插入” |“表格”命令。