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

《网页设计与制作案例教程 教学课件 陈承欢 第10单元.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、7.2　使用布局表格布局网页在制作网页之前，应该对网页进行布局，页面布局是网页设计中最基本、最重要的工作之一。Dreamweaver8提供了一个非常方便的布局工具：布局表格。使用布局表格，页面布局将变得轻松自如。课程引导（1）掌握切换视图的操作方法。（2）掌握绘制布局表格的操作方法（3）掌握绘制布局单元格、移动布局单元格的操作方法（4）掌握调整布局表格大小和布局单元格大小的操作方法（5）掌握布局表格和布局单元格的属性设置方法知识技能目标网页浏览效果展示应用布局表格所制作的网页05.html的浏览效果如

2、图所示。图7-21布局表格操作项目展示效果本章操作任务（1）在“长沙世界之窗”站点文件夹“05布局表格”中创建一个网页，该网页命名为“05.html”，页面标题为“长沙世界之窗的文明山”。（2）网页05.html应用“布局表格”布局网页元素。（3）在布局单元格中输入文本、插入图像。7.2.1　布局视图方式为了简化使用表格进行页面布局的过程，Dreamweaver8提供了布局视图。布局视图是网页设计中的一项重要内容，利用页面布局功能可以将原来繁琐的页面布局工作变得简单而轻松。在“长沙世界之窗”站点文件夹

3、“05布局表格”中创建一个网页，该网页应用布局表格对页面元素进行布局。具体操作过程如下：7.2.2　布局表格的基本操作（1）在“长沙世界之窗”站点文件夹“05布局表格”中创建一个网页，该网页命名为“05.html”，页面标题为“长沙世界之窗的文明山”（2）保存该网页文档。1．新建网页（1）在“插入”工具栏上，单击按钮，在下拉菜单中单击菜单项【布局】，切换到“布局”插入工具栏。（2）在“布局”插入工具栏中单击【布局】按钮，弹出“从布局模式开始”对话框，在该对话框单击【确定】按钮，即可进入布局视图模式。2

4、．切换到布局视图模式绘制布局表格的操作要求如下：（1）在文档窗口插入一个布局表格，该表格的固定宽度为“734px”，高度为“424px”，其他的参数取默认值。（2）布局表格的背景图像设置为“image/bj05.jpg”。3．绘制布局表格和布局单元格在“布局模式”中，单击“布局”插入工具栏中的【布局表格】按钮或者单击菜单【插入】→【布局对象】→【布局表格】。当光标变成“+”形状时，在绘制表格的区域，按住鼠标左键并拖动。拖到合适的位置释放鼠标，在编辑窗口中就会出现一个布局表格绘制布局表格的操作过程如下：

5、绘制布局单元格的操作要求如下：（1）布局表格的左边绘制三个布局单元格，上面的布局单元格的固定宽度为“492”，高度为“56”；中间的布局单元格的固定宽度为“492”，高度为“27”；下面的布局单元格的固定宽度为“492”，高度为“200”。其他参数设置为默认值。（2）布局表格的右边也绘制三个布局单元格，这三个布局单元格的固定宽度都为“152”，高度都为“104”。其他参数设置为默认值。单击“布局”插入工具栏中的【绘制布局单元格】按钮或者单击菜单【插入】→【布局对象】→【布局单元格】。在编辑窗口中光标变

6、成“+”形状时，在要绘制单元格的位置，按住鼠标左键并拖动。拖动到合适的位置释放鼠标，在布局表格中就会出现一个布局单元格。绘制布局单元格的操作过程如下：（1）选择布局表格用鼠标单击布局表格的标签或者布局表格内部的灰色区域，该布局表格的右边线中点和右下顶点会出现小正方形的控制点。4．选择布局表格和布局单元格（2）选择布局单元格用鼠标单击布局单元格外边框，该布局单元格四个顶点和四条边的中点会出现8个小正方形的控制点。也可以按住“Ctrl”键后，在单元格的任意位置单击鼠标左键，选中布局单元格。5．调整布局表格

7、和布局单元格的尺寸选中布局表格。光标移动到右下顶点，光标变成斜双箭头形状时，按住鼠标左键且拖动，可以改变布局表格的宽度和高度。光标移动到右边中点，光标变成水平方向的双箭头形状时，按住鼠标左键且拖动，可以改变布局表格的宽度。（1）调整布局表格的尺寸选中布局单元格。将光标移动到控制点，根据箭头方向拖动鼠标可以调整布局单元格的大小。（2）调整布局单元格的尺寸移动布局单元格的方法是：将鼠标指针移动到布局单元格边框线上，鼠标指针变成形状时，按住鼠标左键且拖动鼠标，移到合适的位置时释放鼠标键，即可完成移动操作。6

8、．移动布局单元格（1）设置布局表格的属性选中布局表格，属性面板中显示对应布局表格的属性。（2）设置布局单元格的属性选中一个布局单元格，属性面板中显示对应布局单元格的属性。7．设置布局表格和布局单元格的属性★课堂实践★（1）打开“课堂实践”网站文件夹“05布局表格”中的网页文档“05.html”。（2）利用布局表格布局网页05.html的页面元素。（3）绘制一个较大的布局表格A，然后在布局表格A中再绘制两个布局表格B、C，B和C布局表格上下排列。1．操作要