网页设计与制作案例教程课件陈承欢第10单元.pptVIP

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