《网页设计与制作》 教学课件 主讲人：湖南铁道职业技术学院陈承欢 HUNAN RAILWAY PROFESSIONAL TECHNOLOGY COLLEGE
Hunan Railway Professional Technology College 主讲人：湖南铁道职业技术学院 陈承欢 《网页设计与制作》 教学课件
教学单元9：使用表格布局网页 一、课程引导 湖南城道营政外学院 二、 明确知识技能目标 三、展示网页浏览效果 四、分析操作任务 要教学环节 五、知识讲解与操作示范 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题 网页设计与制作
教学单元9：使用表格布局网页 主 要 教 学 环 节 五、知识讲解与操作示范 一、课程引导 二、明确知识技能目标 三、展示网页浏览效果 四、分析操作任务 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题
课程引导 南城道 在制作网页之前，应该对网页进行布局， 页面布局是网页设计中最基本、最重要的工作 之一。Dreamweaver8提供了一个非常方便的 布局工具：布局表格。使用布局表格，页面布 局将变得轻松自如。 戏 拳院 网页设计与制作
（一）课程引导 在制作网页之前，应该对网页进行布局， 页面布局是网页设计中最基本、最重要的工作 之一。Dreamweaver 8提供了一个非常方便的 布局工具：布局表格。使用布局表格，页面布 局将变得轻松自如
(二)明确知识技能目标 湖南 (1)掌握切换视图的操作方法。 (2)掌握绘制布局表格的操作方法 道 (3)掌握绘制布局单元格、移动布局单元格的 操作方法 蒸 (4)掌握调整布局表格大小和布局单元格大小 的操作方法 琴 (5)掌握布局表格和布局单元格的属性设置方 克 法 网页设计与制作
（二）明确知识技能目标 （1）掌握切换视图的操作方法。 （2）掌握绘制布局表格的操作方法 （3）掌握绘制布局单元格、移动布局单元格的 操作方法 （4）掌握调整布局表格大小和布局单元格大小 的操作方法 （5）掌握布局表格和布局单元格的属性设置方 法
(三) 网页浏览效果展示 应用布局表格所制作的网页05.html的浏览效果如图所示。 召长沙世界之窗的文明山-icrozoft Internet Explore园 回☒ 查看 工具C 湖南城道营政似学院 文明山 装 德国新天堡 利型现肉慕爱翼不胜黎：茶串调界的：感是语团新天船厦语团新天鹅坐落在巴线 器经 云营天餐餐器架是立于河你斯仙的是星之上，直 该景与原型的比例为1：2，它所表现的界如同古更 我的电 图7-21 布局表格操作项目展示效果 网页设计与制作
（三）网页浏览效果展示 应用布局表格所制作的网页05.html的浏览效果如图所示。 图7-21 布局表格操作项目展示效果
(四) 本章操作任务 湖南 (1)在“长沙世界之窗”站点文件夹“05布局 表格”中创建一个网页，该网页命名为 道 “05.html',页面标题为“长沙世界之窗的文 明山”。 薰 (2)网页05.htm应用“布局表格”布局网页 爽 元素。 (3)在布局单元格中输入文本、插入图像。 拳院 网页设计与制作
（四）本章操作任务 （1）在“长沙世界之窗”站点文件夹“05布局 表格”中创建一个网页，该网页命名为 “05.html”，页面标题为“长沙世界之窗的文 明山”。 （2）网页05.html应用“布局表格”布局网页 元素。 （3）在布局单元格中输入文本、插入图像
(五)知识讲解与操作示范（1) 南 7.2.1 布局视图方式 为了简化使用表格进行页面布局的过程， 道 Dreamweaver8提供了布局视图。布局视图是网页设计 中的一项重要内容，利用页面布局功能可以将原来繁琐 的页面布局工作变得简单而轻松。 御 吃 网页设计与制作
为了简化使用表格进行页面布局的过程， Dreamweaver 8提供了布局视图。布局视图是网页设计 中的一项重要内容，利用页面布局功能可以将原来繁琐 的页面布局工作变得简单而轻松。 7.2.1 布局视图方式 （五）知识讲解与操作示范（1）
(五)知识讲解与操作示范（2) 7.2.2布局表格的基本操作 南 道 在“长沙世界之窗”站点文件夹“05布局表格”中 创建一个网页，该网页应用布局表格对页面元素进行布 局。具体操作过程如下： 薰 1.新建网页 (1)在“长沙世界之窗”站点文件夹“05布局表格” 中创建一个网页，该网页命名为“05.html”,页面标题 琴 为“长沙世界之窗的文明山” (2)保存该网页文档。 克 网页设计与制作
7.2.2 布局表格的基本操作 在“长沙世界之窗”站点文件夹“05布局表格”中 创建一个网页，该网页应用布局表格对页面元素进行布 局。具体操作过程如下： 1．新建网页 （1）在“长沙世界之窗”站点文件夹“05布局表格” 中创建一个网页，该网页命名为“05.html”，页面标题 为“长沙世界之窗的文明山” （2）保存该网页文档。 （五）知识讲解与操作示范（2）
五) 知识讲解与操作示范（3) 2.切换到布局视图模式 线 (1)在“插入”工具栏上，单击常用 按钮，在下拉菜单中单击菜单项【布局】，切换到 “布局”插入工具栏。 (2)在“布局”插入工具栏中单击【布局】按钮，弹 爽 出“从布局模式开始”对话框，在该对话框单击【确定】 按钮，即可进入布局视图模式。 娄 网页设计与制作
2．切换到布局视图模式 （1）在“插入”工具栏上，单击 （2）在“布局”插入工具栏中单击【布局】按钮，弹 出 “从布局模式开始”对话框，在该对话框单击【确定】 按钮，即可进入布局视图模式。 按钮，在下拉菜单中单击菜单项【布局】，切换到 “布局”插入工具栏。 （五）知识讲解与操作示范（3）
(五)知识讲解与操作示范（4) 南 3.绘制布局表格和布局单元格 道 绘制布局表格的操作要求如下： (1)在文档窗口插入一个布局表格，该表格的固 质 定宽度为“734px”,高度为“424px”,其他的参数 取默认值。 (2)布局表格的背景图像设置为 爽 “image/bj05.jpg”。 龙 网页设计与制作
3．绘制布局表格和布局单元格 绘制布局表格的操作要求如下： （1）在文档窗口插入一个布局表格，该表格的固 定宽度为“734px”，高度为“424px”，其他的参数 取默认值。 （2）布局表格的背景图像设置为 “image/bj05.jpg”。 （五）知识讲解与操作示范（4）