第七讲使用布局表格布局网页.
网页布局设计PPT课件
7.1.5 “布局表格”和“布局单元格” 的调整及设置
1．清除自动设置的单元格高度 单击表格标题菜单，然后选择“清除所有高度”。 选中所要清除高度的布局表格，使表格四边出现八个控制点，然后执
行【窗口】｜【属性】命令，调出属性面板，单击【清除行高】按钮 2．调整布局表格、布局单元格的大小以及移动它们 调整布局表格、布局单元格的大小的方法如下： （1）选中所要调整的布局表格或布局单元格。该布局表格或布局单元格
3.设置框架集属性
7.2.4保存框架和框架集
1．保存框架集内所有的文件 执行 【文件】｜【保存全部】命令。此时会弹出一个对话
框要求选择保存路径和文件名。粗框的范围表明了此时正 要保存的文件，如粗框围住整个视图说明此时保存的是框 架集，所有没有保存的框架文档都将在框架的周围出现粗 边框，并且出现一个对话框要求选择保存路径和文件名。 2．保存框架中显示的文档 在需要保存的框架内单击，执行【文件】｜【保存框架】 命令或者执行【文件】｜【框架另存为】命令。 3．要保存框架集文件 在【框架】面板或视图窗口中选择框架集，执行【文 件】｜【保存框架页】命令或者执行【文件】｜【框架集 另存为】命令。
7.1.3 绘制“布局表格”和“布局单 元格”
1．绘制“布局表格”
2．绘制“布局单元格”
3．绘制嵌套布局表格
7.1.4 在“布局单元格”添加内容
在“布局”模式中可以将文本、图像和其 他内容添加到布局单元格中，就像在“标 准”模式中将内容添加到表格单元格一样。 单击要添加内容的单元格，然后键入文本 或插入其他内容。
周围出现选择控制点。 （2）拖动选择控制点来调整表格或单元格的大小。 移动布局表格的方法如下： （1）单击该布局表格中的空白区域或过单击表格顶部的标签。（只有当
用表格为网页布局
1 2
网页的布局
表格定位
3
表格的修改
标题栏 导航栏
栏目内容
版权说明
导航栏型
半包围型
主题突出 型
居中型
页面布局的设计没有限定的规则， 只要配合网站内容，让访问者感觉网 页布局能烘托主题、简洁、美观、操 作方便就可以了。
网络拾贝 网络交流 网络安全 网络生活
标题栏
导航栏导航栏主题图源自导航栏 导航栏请你根据自己确定的主题， 设计主页布局图吧！
使用表格布局网页 表格能实现网页中元素的定位，排版 的功能，使页面布局整齐、美观。 使用表格布局网页是普遍使用的办法哦！
标题栏
网络拾贝 网络交流 主题图 网络安全 网络生活 版权说明
6行3列
根据自己设计好的网站主页布局草图，利用表格进行布局。
在网站主页中插入图片、输入文字。
做好后保存上传整个站点文件夹。
第7章 用表格来布局页面
图7-17 选择列
图7-18 选择菜单命令
• （2）在弹出的快捷菜单中选择“选择列”命令，如图718所示。 • （4）经过上面操作，第一列的两个单元格边框颜色都加 粗了，说明此列已经被选取了。如图7-19所示。
图7-19 选中表中列
•2.行的操作 •（1）利用图7-17的表格。 •（2）将鼠标指针移到表的第一行左侧边框上，鼠标指针 变成指向右侧的箭头时，单击则出现如图7-20所示。
图7-23 定位参照行或列
图7-25 插入了行和列
• （2）在菜单栏选择“插入”→“表格对象”→“在上面 插入行”命令。在插入列时只是选择“在左边插入列”命 令。如图7-24所示。
图7-24 图插入行或列菜单命令
• （3）插入行和列的结果如上图7-25所示。 • 另外，若在表格中的最一个单元格中按Tab键，则自动在 表格中最后一行之后添加一个新行。 • （4）若要插入多行多列时操作如下： • ①将光标定位在作为参照的某一单元格。 • ②在菜单栏选择“修改”→“表格”→“插入行或列”命 令。 • ③弹出“插入行或列”对话框，在“插入”中选择“行” 或“列”。在“行数”或“列数”文本框中输入所需要的 行或列的数目。在“位置”中选择在参照光标之上还是之 下单选选项。如图7-26所示。“确定”后结果如图7-27所 示。
图7-6 嵌套表格
7.1.2 在表格中输入网页元素
• 在表格创建完成后，就可以向表格中添加相应的 网页元素。在表格中插入文本或图像的方法与直 接在网页中插入的方法基本相同，下面介绍在表 格中插入元素的操作方法。 • 1. 在表格中输入文本 • （1）打开或新建一个网页。 • （2）在网页中插入创建一个表格。 • （3）将光标定位在要输入内容的单元格。 • （4）向所定位的单元格输入文本。如图7-7所示。
《利用表格布局网》课件
最佳实践和技巧
合并单元格 控制单元格大小 细分行列 避免嵌套
CSS框架
使用表格布局网的CSS框架（如 Bootstrap）减少工作量。
表格布局网的优势和局限性
表格布局网有很多优势，例如更加直观明了的布局、兼容性强、可以细分行列等。但是它也有一些局限性， 如不易维护、不适用于跨设备适应。
1
优势
更加直观明了的布局
2
优势
兼容性强，适用于各种浏览器
3
优势
可以细分行列，进行网页布局及页面元素设计
总结和要点
通过本教程，您已经了解了表格布局网的优劣势、实际应用、最佳实践和技巧。表格布局网虽然有一些 限制，但在特定场景下仍是一种优势
更加直观明了的布局 兼容性强，适用于各种浏览器 可以细分行列，进行网页布局及页面元素设计
表格布局网的局限性
不易维护，需要多次调整单元格的大小和位置 不适用于跨设备适应，容易导致布局错乱
利用表格布局网
我们将介绍表格布局网的优势和特点，学习如何使用表格布局网，分享实际 应用案例以及最佳实践和技巧。
什么是表格布局网？
表格布局网是一种基于HTML表格元素实现的网格布局。它可以让你更加简单快捷地实现网页布 局，而且兼容性良好。
特点
表格布局网可以细分行列，进行网页布局及页面元素设计。
优势
相比传统布局方式，表格布局可以节约代码，布局更直观明了。
如何优化表格布局网？
如果你想让表格布局网的效果更加出色，可以参考以下最佳实践和技巧。
1 合并单元格
使用合并单元格的技巧，可以让布局更加美 观简洁。
2 控制单元格大小
通过控制单元格大小，可以让布局更加灵活 多变。
3 细分行列
使用表格布局网页
:::::21世纪职业教育数字艺术规划教材:::::
3.3设置表格属性
除了可以设置整个表格的属性外，还可以单独设 置某行、某列或某些单元格的属性。首先选择要 设置属性的单元格的组合，就会显示出单元格的 【属性】面板，如下图所示。
:::::21世纪职业教育数字艺术规划教材:::::
3.3设置表格属性
:::::21世纪职业教育数字艺术规划教材:::::
3.1表格概述
（3）利用表格合成尺寸较大的图像。网页中经常用到图像，若图像太大， 会影响用户的浏览速度，网页中的单个图像应该控制在15KB以内，不要超过 20KB；对于不得不使用的大幅图像，可以使用Fireworks 8 等一些图像处理 软件将其分割成几个小图像，然后在Dreamweaver CS3中借助表格把这些小 图像合成一个大图像
:::::21世纪职业教育数字艺术规划教材:::::
3.1表格概述
3．选中表格和表格元素 要对表格进行编辑，必须首先选中被操作的对象。选中表格操作包括下列情况 ： （1）选择整个表格。 将光标移动到表格左边框之外，待其变成向右的箭头形式时，单击鼠标左键。 将光标移动到表格右边框之外（不在表格之内），向左拖动鼠标。 将光标置于某个单元格中，执行【修改】>【表格】>【选择表格】命令。 将光标置于某个单元格中，按两次【Ctrl+A】组合键。 将光标置于某个单元格中，单击状态栏中的【<table>】按钮。 按住【Shift】键的同时，在表格中任意位置单击鼠标左键。 将鼠标指针指向表格边框线，若出现红色外框线，则单击鼠标左键。 将鼠标指针置于表格的边框线上，当变成双向箭头时，单击鼠标左键。
:::::21世纪职业教育数字艺术规划教材:::::
用表格为网页布局
表格布局的优点
简单易用
01
表格布局简单直观，容易上手，适合初学者使用。
结构清晰
02
表格能够清晰地展示页面内容，使页面结构化，便于阅读和理
解。
兼容性好
03
表格布局在各种浏览器中都有较好的兼容性，不易出现排版问
用表格为网页布局
目录
CONTENTS
• 表格布局的基本概念 • 表格布局的常见应用场景 • 使用表格进行网页布局的技巧 • 表格布局的未来发展 • 表格布局的实例分析
01 表格布局的基本概念
CHAPTE种使用HTML表格元素 来创建网页布局的方法。它通过将页 面内容组织成表格形式，实现页面的 结构化和排版。
腾讯问卷表单制作
腾讯问卷表单制作使用表格来构建问卷的结构和问题选项。
表格布局使得问卷结构清晰，易于填写和提交，提高了问卷的完成率和准 确性。
腾讯问卷表单制作的表格布局还支持多种表单元素，如单选框、复选框、 文本框等，以满足不同问卷的需求。
谢谢
THANKS
数据展示
数据对比
表格是展示数据对比的理想方式，可以将不 同数据列进行比较，方便用户快速了解数据 之间的差异。
数据汇总
表格可以用于数据汇总，将大量数据按照一定规则 进行分类和整理，以表格形式呈现，方便用户查看 和分析。
数据可视化
通过使用颜色、字体、边框等样式属性，可 以将表格数据以可视化的方式呈现，提高数 据的可读性和易用性。
加载页面，提高用户体验。
淘宝网首页的表格布局还结合了CSS样式，实现了美观的页面效
03
果。
新浪微博数据展示页
利用表格布局网页教案
利用表格布局网页教案教案标题：利用表格布局网页教案教学目标：1. 了解表格布局的基本概念和原理。
2. 掌握使用HTML和CSS创建基本的表格布局。
3. 能够灵活运用表格布局设计网页。
教学准备：1. 计算机和互联网连接。
2. HTML和CSS编辑器软件。
3. 示例网页代码和相关图片素材。
4. 课堂展示设备。
教学过程：Step 1: 引入表格布局概念（5分钟）介绍表格布局的基本概念和原理，解释为什么表格布局在网页设计中非常有用。
Step 2: HTML表格结构（10分钟）解释HTML表格的基本结构，包括表格、行和单元格的标签及其属性。
演示如何创建一个简单的表格。
Step 3: CSS样式设置（15分钟）说明如何使用CSS样式设置表格的外观，包括表格边框、背景颜色、字体样式等。
演示如何应用样式到表格中。
Step 4: 表格布局设计（20分钟）展示一些常见的表格布局设计示例，如网站导航菜单、产品特性比较、课程时间表等。
解释如何将内容合理地安排在表格中。
Step 5: 实践操作（30分钟）让学生动手实践，在编辑器中创建自己的网页，并使用表格布局设计页面结构。
提供示例代码和图片素材供学生参考。
Step 6: 学生展示和讨论（15分钟）让学生展示他们设计的网页，并就设计选择、布局优化等方面进行讨论和反馈。
Step 7: 总结和拓展（5分钟）总结表格布局的优点和应用场景，并鼓励学生进一步探索其他网页布局方式。
教学评估：1. 学生在实践操作中的表现和成果。
2. 学生对表格布局的理解和应用能力。
3. 学生在展示和讨论环节的参与和表达能力。
教学延伸：1. 鼓励学生进一步研究和尝试其他网页布局方式，如Flexbox和Grid布局。
2. 引导学生学习响应式设计，掌握如何使用媒体查询和表格布局来适应不同屏幕尺寸。
教学反思：根据学生的实际情况和学习进度，灵活调整教学过程中的时间分配和内容讲解，确保学生能够理解和掌握表格布局的基本原理和应用技巧。
使用表格排版网页
教学目的:
1．掌握页面中表格的使用及属性设置 2．掌握表格的基本操作 3．掌握表格布局页面 4．掌握利用布局表格布局
5．了解布局表格的使用
教学重难点：
1、表格、单元格的属性设置
2、利用表格进行整体布局 3、利用布局表格布局
一、表格的使用 1、插入表格
执行“插入”—“表格”
三、 布局表格的使用
1、绘制布局表格和布局单元格
2、布局表格的属性设置 3、布局表格的嵌套 4、利用布局掌握页面中表 格的使用及属性设置以及其基本操作,利用布局 表格布局页面。
课堂作业：
如何插入表格，表格的属性有哪些；怎样进行添加删除行和 列。 我们在EXCEL中处理了一些数据，如何导入到网页中。 请你设计出个人主页面的表格布局，要求有个人形象标志， 及颜色主调 上机任务： 请你将设计的表格付出于行动！ 上网看页面,请你模仿做
通过快捷键CTRL+ALT+T 点击“常用”工具栏上的
2、表格的属性设置：
插入表格时的属性设置
通过属性面板设置
3、导入行列数据
导入数据：文件---导入---- Excel 注：Excel中已经将表格文件另存为使用分隔符标记格 式的文件形式。 导出数据:文件---导出---- 表格
注：相邻单元格的内容可以由逗号、昌号或空格等分 隔符隔开，导出的表格时，只能导出整个表格。
4、选择表格元素
选择单行：鼠标放在要选中的行左方表格外，当鼠标 变成一个指向右方的黑色箭头形状时即可。
选择多行：在选择单行基础上，向上下拖动鼠标，可 以选中多行。 同理选择单列、多列。 选择单元格：按住Ctrl键同时单击左键、选择签。
5、调整表格和单元格的大小（在布局视图下调整）
《使用表格布局网页》课件
本课程将介绍如何使用表格布局创建网页。掌握表格布局技术，让你的网页 布局更加灵活、美观。
表格布局介绍
什么是表格布局
表格布局是一种使用HTML表格元素进行网页布 局的技术。
表格布局的特点
表格布局具有结构清晰、适用性强等特点，可 用于多种网页布局需求。
表格布局语法
表格元素
总结
表格布局的总结
表格布局是一种强大的网页布局技术，适用于多种布局需求。
今后如何学习表格布局技术
深入学习HTML和CSS知识，结合实践项目不断提升表格布局的技能。
使用<table>标签定义一个表格。
行元素
使用<tr>标签定义表格中的行。
单元格元素
使用<td>标签定义表格中的单 元格。
创建表格布局网页1美化表格布局2
通过添加样式和背景色以及调整单元格 大小和行高等方式，让表格布局更美观。
创建表格元素
使用<table>标签创建一个基本的表格元 素。
优缺点分析
1 表格布局的优点
结构清晰、适用性强，可以实现复杂的网页布局需求。
2 表格布局的缺点
不适用于响应式设计，较难实现某些现代化布局效果。
应用场景
电子商务网站
表格布局适用于展示商品列表和 购物车等功能。
仪表盘界面
表格布局可用于显示数据统计和 信息概览等。
新闻网站布局
表格布局容易呈现多列文章列表 和分类导航等。
用表格布局网页教案
用表格布局网页教案第一章：表格布局网页概述1.1 教学目标了解表格布局网页的概念和作用掌握表格布局网页的基本方法1.2 教学内容表格布局网页的定义表格布局网页的优势表格布局网页的基本方法1.3 教学步骤引入表格布局网页的概念讲解表格布局网页的优势演示表格布局网页的基本方法1.4 课后作业学生自行设计一个简单的表格布局网页第二章：表格布局网页的基本操作2.1 教学目标掌握表格布局网页的基本操作2.2 教学内容插入表格调整表格大小合并单元格2.3 教学步骤插入表格并调整大小合并单元格和拆分单元格2.4 课后作业学生自行设计一个包含表格布局的网页第三章：表格布局网页的样式设置3.1 教学目标掌握表格布局网页的样式设置3.2 教学内容表格样式设置单元格样式设置3.3 教学步骤讲解表格样式设置的方法讲解单元格样式设置的方法3.4 课后作业学生自行设计一个包含表格布局和样式设置的网页第四章：表格布局网页的高级应用4.1 教学目标掌握表格布局网页的高级应用4.2 教学内容跨列单元格嵌套表格4.3 教学步骤讲解跨列单元格和跨行单元格的应用方法讲解嵌套表格的应用方法4.4 课后作业学生自行设计一个包含跨列单元格、跨行单元格和嵌套表格的网页第五章：表格布局网页的优化与调试5.1 教学目标掌握表格布局网页的优化与调试方法5.2 教学内容优化表格布局网页的性能调试表格布局网页的问题5.3 教学步骤讲解优化表格布局网页性能的方法讲解调试表格布局网页问题的方法5.4 课后作业学生自行设计一个包含优化与调试的表格布局网页第六章：响应式表格布局网页6.1 教学目标理解响应式网页设计的基本概念掌握使用表格进行响应式布局的方法6.2 教学内容响应式网页设计的基本原则使用CSS媒体查询调整表格布局实现表格的响应式布局6.3 教学步骤介绍响应式网页设计的基本原则演示如何使用CSS媒体查询调整表格布局示例实现一个表格的响应式布局6.4 课后作业学生完成一个表格布局的响应式网页设计，并在不同设备上测试其表现。
使用表格讲义布局网页
•在表格内部任意单元格中单击鼠标左键，然后在标签选择器 中单击对应的“<table>”标签 。
•将插入点置于表格的任意单元格中，表格上方或下方将显示 绿线标志，单击最上方或最下方标有表格宽度的绿线中的 ， 在弹出的下拉菜单中选择“选择表格”命令。
2．合并单元格
所谓合并单元格，就是将相邻的两个或多个单元 格合并成一个单元格。 拖动鼠标选中要合并的连续单元格（此处为第1行 中间的2个单元格），然后单击属性检查器上的 “合并所选单元格，使用跨度”按钮 ，则2个单 元格合并为1个单元格
4.2.2 插入、删除行和列
在使用表格组织大量信息时，往往需要在创建好的 表格中添加或删除行与列，以增加或减少记录。
此处表示未
明确设置单
元格宽度
列
行
此处显示了表格 的宽度。如果只 显示一个“▼”
单元格
符号，表示未明 确设置表格宽度
4.1.1 创建表格
Dreamweaver CS4拥有非常完善的表格编辑 功能，本节我们首先来看一下如何在网页文档中 创建表格。
4.1.2 选择表格和单元格
1．选择表格
•将鼠标光标移至单元格边框线上，当鼠标光标变为 或 形 状时单击鼠标左键。
精品jing
使用表格布局网页
4.1 表格基本操作
表格（Table）是由一个或多个单元格构成的集合， 表格中横向的多个单元格称为行（在HTML语言中 以<tr>标签开始，</tr>标签结束），垂直的多个 单元格称为列（以<td>标签开始，</td>标签结
束），行与列的交叉区域称为单元格，网页中的元 素就放置在这些单元格中 。
《网页设计与制作》教案-第7讲 布局技术之一-表格一
第7讲布局技术之一-表格一1.1教学目标：◆知识目标1.掌握表格的基本操作2.掌握表格各项属性设置的作用◆技能目标能合理运用表格进行页面布局，能合理设置表格属性◆品质目标培养学生认真细致、踏实进取的精神1.2教学重点：掌握表格的插入和表格属性的设置。
1.3 教学难点理解表格进行页面布局的好处和表格各属性的作用。
1.4教学方法：讲练结合，任务驱动、分子任务操练1.5课时安排：2课时1.6教学对象分析：这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。
1.7教学过程：一、激趣导入，揭示课题表格是网页设计制作时不可缺少的重要元素。
无论是用于对齐数据还是在页面上对文本进行排版，表格都体现出强大的功能。
它以简洁明了和高效快捷的方式将数据、文本、图像、表单等元素有序地显示在页面上，从而设计出版式漂亮的页面。
对于使用表格绘制页面布局，而非着重文字数据编排的设计来说，手动绘制表格布局是最佳方法，虽然这种方法极其容易建立表格，但不容易掌握尺度，因为其手动操作的特性，所以非常适合于制作网页版面，但对于内容的编排，就不如标准模式的标准那么方便。
标准表格是表格应用的另一种方法，它以几行几列的方式插入到页面，然后将图像、文字等内容插入表格，即可定位和编排这些内容。
二、使用表格在Dreamweaver MX 2004中，可以导入外部数据文件，还可以将网页中的数据表格导出为纯文本的数据文件。
表格的格式控制能力使设计者可以使用表格来构造网页的框架。
先用较大的表格对网页的版面进行大致的控制，再使用嵌套的表格对细节进行刻画。
使用表格排版的页面在不同的平台、不同的分辨率的浏览器里都能保持布局，所以表格是网页中常用的版面控制和制作模板的强有力的工具。
0.1插入表格Dreamweaver MX 2004提供了强大的工具进行表格编辑，使网页设计者可以对几乎所有的表格属性进行控制。
用表格为网页布局课件
CSS Grid是一种二维布局系统，适用于创建复杂的网页布局。它提供了 强大的对齐和定位控制，使得设计复杂的网页布局变得更加容易。
03
CSS框架
Bootstrap、Foundation等CSS框架提供了丰富的布局和样式选项，可
以快速构建美观、响应式的网页布局，减少了对传统表格布局的依赖。
HTML5和CSS3的新特性
可以通过CSS样式来设置表格 的宽度和高度，常用的单位是 像素（px）和百分比（%）。
也可以使用CSS的min-width 和max-width属性来限制表格 的最小和最大宽度。
表格边框和背景设置
表格边框是用来分隔单元格和表 格边缘的线条，可以通过CSS样 式来设置边框的颜色、宽度和样
式。
背景设置包括背景颜色、背景图 片等，可以用来美化表格的外观。
支持。
谢谢
THANKS
CHAPTER
简单的表格布局实例
总结词：基础布局
详细描述：使用表格进行简单的网页布局，如将标题、段落和图片等元素分别放 在不同的单元格中，实现基本的页面结构。
复杂的表格布局实例
总结词：复杂布局
详细描述：通过嵌套表格、合并单元格等技术，实现复杂的网页布局，如导航菜单、产品展示等。
响应式表格布局实例
使用边框和背景设置时，需要注 意保持整体风格的协调和一致。
表格对齐方式设置
表格对齐方式是指表格中单元格 内容的排列方式，常用的对齐方 式有左对齐、右对齐、居中对齐
等。
通过CSS样式可以设置表格的对 齐方式，也可以单独设置单元格
的对齐方式。
对齐方式的合理使用可以提高网 页的可读性和美观度。
04 表格布局的实例分析
03 表格布局的常见技巧
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
总计
90
新授内容
1.布局视图方式
2.布局表格的基本操作
（1）新建网页
（2）切换视图到布局视图模式
（3）绘制布局表格和布局单元格
（4）选择布局表格和布局单元格
（5）调整布局表格和布局单元格的大小
（6）移动布局单元格
（7）设置布局表格和布局单元格的属性
课堂实践
操作要求
（1）打开“课堂实践”网站文件夹“05布局表格”中的网页文档“05.html”。
授课日期
班级名称
授课地点
教学课题
第七讲使用布局表格布局网页
课时
2学时
教学目的
（1）掌握切换视图的操作方法。
（2）掌握绘制布局表格的操作方法
（3）掌握绘制布局单元格、移动布局单元格的操作方法
（4）掌握调整布局表格大小和布局单元格大小的操作方法
（5）掌握布局表格和布局单元格的属性设置方法
知识目标
（1）切换视图。
依据项目评价表对作品进行自我评价、小组评价和教师评价，挖掘作品优点，并指出问题所在，给出具体改进及修改意见；
评选出“最佳美工设计”、“最佳网页制作”、“最佳组织协作”、“最佳员工”等先提问学生总结，让学生谈本项目的收获；
教师对本次课的实际意义、重点、难点、容易出错处等及时进行总结。并针对项目的不足之处，进行引申和提高。
课型
讲授型
教学方法
任务驱动法、分组讨论法、理论实践一体化
教学手段
多媒体教学
教参
《网页设计与制作》教程人民邮电出版社
教学环节
时间安排
1.复习提问：
表格中单元格的边距与间距有何区别？
5
2.情境设置，项目引入
情境设置：BZ旅行社想在“E游天下”网站中设计制作一个介绍各大江湖景点的页面，请你使用表格布局结合图片、文本设计并制作。
问题2：布局表格中的间隔图像有什么作用？
课外拓
展实践
为“快乐e游”网站制作以布局表格布局的介绍中国名湖的网页
课后评析
组长（项目经理）负责向组员（网页设计师）讲述客户需求，组员集思广益，产生完成项目的初步方案。
10
6.方案展示，确定目标
各项目经理将讨论后的方案进行展示，各组组员可做补充说明；
教师与其他组成员点评，经改进后最终确定可实施的、能够达成知识和技能目标的工作方案。
15
7.任务分解，实战操练
教师将项目分解为多个任务：
（2）绘制布局表格
（3）绘制布局单元格、移动布局单元格
（4）调整布局表格大小和布局单元格大小
（5）布局表格和布局单元格的属性设置
能力目标
熟记布局表格及布局单元格的使用方法
素质目标
培养学生创新能力和独立思考能力，并使其具有分析问题、解决问题的能力
重点
布局表格与布局单元格的使用方法
难点
布局表格与布局单元格属性的设置
任务1:布局表格布局网页
任务2:设计制作“江湖游”网页
任务3：编辑“江湖游”网页
每组成员按照客户需求分步进行设计制作，教师巡视指导。针对学生中普遍存在的问题利用教学广播讲解演示；针对个别问题，进行个别指导。
20
8.成果展示，考核评价
由小组观摩评选出一个优秀设计作品进行成果展示。介绍过程中要求说明设计思路及制作过程中遇到的问题，如何解决问题，同时其他组成员也可提出问题，让设计者解释设计所用的相关技术及特点；
通过具体情境引入本次课要学的“布局表格布局网页”，并展示项目最终效果网页。
5
3.教学目标说明：介绍本次课的项目要求、项目目标、项目重点难点。
5
4.项目资讯，发放资料
简要介绍项目制作所需的主要知识及操作方法；
将学习资料以PPT及视频动画的形式发给学生。
5
5.角色扮演，形成方案
每组学生既模拟客户又模拟网站设计公司，既负责向下一组提出客户需求，又负责为上一组设计制作网页；
（2）利用布局表格布局网页05.html的页面元素。
（3）绘制一个较大的布局表格A，然后在布局表格A中再绘制两个布局表格B、C，B和C布局表格上下排列。
（4）在布局表格B中绘制1个布局单元格，在布局表格C中绘制6个布局单元格。
（5）分别在各个布局单元格中输入文字和插入图像。
疑难解析
问题1：布局表格中的列可以设置为自动伸展或固定宽度两种方式，“自动伸展”列有何特点？网页实际布局时如何应用自动伸展的列？
小结：本次课主要学习了布局表格和布局单元格的使用方法，可以像使用层一样在页面上直接画一个或多个布局表格或布局单元格，并且可以任意拖动单元格。使用布局视图制作网页就像画画一样轻松。
5
10．布置作业，举一反三
（1）基础作业：
继续改进作品；
填写项目总结报告；
布置下次课任务。
（2）提高作业：
制作以布局表格布局的展示三峡旅游景点的网页