10单元0702第7章网页的布局

（一）课程引导在制作网页之前，应该对网页进行布局，页面布局是网页设计中最基本、最重要的工作之一。Dreamweaver8提供了一个非常方便的布局工具：布局表格。使用布局表格，页面布局将变得轻松自如。（二）明确知识技能目标（1）掌握切换视图的操作方法。（2）掌握绘制布局表格的操作方法（3）掌握绘制布局单元格、移动布局单元格的操作方法（4）掌握调整布局表格大小和布局单元格大小的操作方法（5）掌握布局表格和布局单元格的属性设置方法（三）网页浏览效果展示应用布局表格所制作的网页05.html的浏览效果如图所示。图7-21布局表格操作项目展示效果（四）本章操作任务（1）在“长沙世界之窗”站点文件夹“05布局表格”中创建一个网页，该网页命名为“05.html”，页面标题为“长沙世界之窗的文明山”。（2）网页05.html应用“布局表格”布局网页元素。（3）在布局单元格中输入文本、插入图像。为了简化使用表格进行页面布局的过程，Dreamweaver8提供了布局视图。布局视图是网页设计中的一项重要内容，利用页面布局功能可以将原来繁琐的页面布局工作变得简单而轻松。7.2.1布局视图方式（五）知识讲解与操作示范（1）7.2.2布局表格的基本操作在“长沙世界之窗”站点文件夹“05布局表格”中创建一个网页，该网页应用布局表格对页面元素进行布局。具体操作过程如下：1．新建网页（1）在“长沙世界之窗”站点文件夹“05布局表格”中创建一个网页，该网页命名为“05.html”，页面标题为“长沙世界之窗的文明山”（2）保存该网页文档。（五）知识讲解与操作示范（2）2．切换到布局视图模式（1）在“插入”工具栏上，单击（2）在“布局”插入工具栏中单击【布局】按钮，弹出“从布局模式开始”对话框，在该对话框单击【确定】按钮，即可进入布局视图模式。按钮，在下拉菜单中单击菜单项【布局】，切换到“布局”插入工具栏。（五）知识讲解与操作示范（3）3．绘制布局表格和布局单元格绘制布局表格的操作要求如下：（1）在文档窗口插入一个布局表格，该表格的固定宽度为“734px”，高度为“424px”，其他的参数取默认值。（2）布局表格的背景图像设置为“image/bj05.jpg”。（五）知识讲解与操作示范（4）绘制布局表格的操作过程如下：在“布局模式”中，单击“布局”插入工具栏中的【布局表格】按钮或者单击菜单【插入】→【布局对象】→【布局表格】。当光标变成“+”形状时，在绘制表格的区域，按住鼠标左键并拖动。拖到合适的位置释放鼠标，在编辑窗口中就会出现一个布局表格（五）知识讲解与操作示范（5）绘制布局单元格的操作要求如下：（1）布局表格的左边绘制三个布局单元格，上面的布局单元格的固定宽度为“492”，高度为“56”；中间的布局单元格的固定宽度为“492”，高度为“27”；下面的布局单元格的固定宽度为“492”，高度为“200”。其他参数设置为默认值。（2）布局表格的右边也绘制三个布局单元格，这三个布局单元格的固定宽度都为“152”，高度都为“104”。其他参数设置为默认值。（五）知识讲解与操作示范（6）绘制布局单元格的操作过程如下：单击“布局”插入工具栏中的【绘制布局单元格】按钮或者单击菜单【插入】→【布局对象】→【布局单元格】。在编辑窗口中光标变成“+”形状时，在要绘制单元格的位置，按住鼠标左键并拖动。拖动到合适的位置释放鼠标，在布局表格中就会出现一个布局单元格。（五）知识讲解与操作示范（7）4．选择布局表格和布局单元格（1）选择布局表格用鼠标单击布局表格的标签或者布局表格内部的灰色区域，该布局表格的右边线中点和右下顶点会出现小正方形的控制点。（2）选择布局单元格用鼠标单击布局单元格外边框，该布局单元格四个顶点和四条边的中点会出现8个小正方形的控制点。也可以按住“Ctrl”键后，在单元格的任意位置单击鼠标左键，选中布局单元格。（五）知识讲解与操作示范（8）5.调整布局表格和布局单元格的尺寸（1）调整布局表格的尺寸选中布局表格。光标移动到右下顶点，光标变成斜双箭头形状时，按住鼠标左键且拖动，可以改变布局表格的宽度和高度。时，按住鼠标左键且拖动，可以改变布局表格的宽度。光标移动到右边中点，光标变成水平方向的双箭头形状（五）知识讲解与操作示范（9）（2）调整布局单元格的尺寸选中布局单元格。将光标移动到控制点，根据箭头方向拖动鼠标可以调整布局单元格的大小。6.移动布局单元格移动布局单元格的方法是：将鼠标指针移动到布局单元格边框线上，鼠标指针变成形状时，按住鼠标左键且拖动鼠标，移到合适的位置时释放鼠标键，即可完成移动操作。（五）知识讲解与操作示范（10）7．设置布局表格和布局单元格的属性（1）设置布局表格的属性选中布局表格，属性面板中显示对应布局表格的属性。（2）设置布局单元格的属性选中一个布局单元格，属性面板中显示对应布局单元格的属性。（五）知识讲解与操作示范（11）1．操作要求（1）打开“课堂实践”网站文件夹“05布局表格”中的网页文档“05.html”。（2）利用布局表格布局网页05.html的页面元素。（3）绘制一个较大的布局表格A，然后在布局表格A中再绘制两个布局表格B、C，B和C布局表格上下排列。（4）在布局表格B中绘制1个布局单元格，在布局表格C中绘制6个布局单元格。（5）分别在各个布局单元格中输入文字和插入图像。（六）课堂模仿实践2．效果展示课堂实践的网页05.html在浏览器中浏览效果如图所示。图7-32课堂实践网页的浏览效果（六）课堂模仿实践1．在“湖铁职院学院网站”站点文件夹“05布局表格”中创建网页文档“05.html”。2．利用“普通表格”和“布局表格”相结合的方式布局网页。（七）课外拓展实践布局表格和布局单元格可以在页面上直接绘制一个或多个布局表格或布局单元格，并且可以任意拖动单元格。使用布局视图制作网页就像画画一样轻松。（八）本章总结