2024年2月19日发(作者：隐丹山)
中等专业学校2022-2023-2教案
编号：
备课组别
授课教师
课题
计算机
课程名称
授课系部
网页设计
所在
年级
授课班级
二年级
主备
教师
授课
日期
模块三 3.1表格布局
了解网格布局的基础知识
教学
目标
掌握表格的基本操作
重点
难点
教法
教学设备
教学
环节
教
学
内
容
掌握表格的基本操作
掌握合并和拆分单元格，使用拓展表格模式
讲练法、演示法、任务驱动法
多媒体机房
教学活动内容及组织过程
【复习导入】
引导学生回顾上节课学习内容
【教学过程及内容】
3.1表格布局
预备知识：
为了使网页更加美观大方，在制作网页时，需要先对网页的轮廓进行规划，将文字、图片等网页元素进行精确定位，这就需要用到网页的布局。表格布局是目前最常见的网页布局方式之一，灵活方便、简单易学。
表格由行和列组成，每行或每列又由单元格组成，如图3-19所示，当将某行或某列设为标题行或标题列后，默认情况下，标题单元格中的内容将自动加粗并
个案补充
教
学
内
容
居中显示。
任务实施：
（1）创建表格
①在“文档”窗口中，将光标定位到要插入表格的位置，执行以下操作之一，打开“表格”对话框，如图3-20所示。
选择菜单“插入→表格（table）”命令。
单击“插入”面板“html”标签中的“表格（table）”按钮 。
按【Ctrl+Alt+T】组合键。
图3-20 “表格”对话框
（2）设置表格属性
图3-29 “表格”属性面板
“填充(cellpad)”：指的是单元格边距，即单元格的内容和单元格边框之间的像素数。
间距(cellspace)”：指的是单元格间距，即相邻单元格之间的像素数。
“对齐(align)”：用于设置表格相对于同一段落中其他元素（例如文本和图像）的显示位置。
“边框(border)”：指定表格边框的宽度（单位为像素），若表格仅用于页面布局可将值设为0。
“清除列宽”按钮 ：从表格中删除所有明确指定的列
教
学
内
容
宽。
“清除行高”按钮 ：从表格中删除所有明确指定的行高。
“将表格宽度转换成像素”按钮 ：将表格中每列的宽度和整个表格的宽度设置为以像素为单位的当前宽度。
“将表格宽度转换成百分比”按钮 ：将表格中每列的宽度和整个表格的宽度设置为按百分比表示的宽度。
（3）设置单元格属性
图3-30 “单元格”属性面板
合并单元格” ：将所选的单元格、行或列合并为一个单元格。
“拆分单元格” ：将一个单元格拆分成多个单元格。
“宽”和“高”：用来设置所选单元格的宽度和高度，可以在文本框中输入以像素为单位的数字，也可以输入按表格宽度或高度的百分比指定的以百分号“%”结尾的数字。
“不换行”复选框：如果选中了该复选框，当单元格中的文本超过单元格的宽度时，单元格会自动加宽以容纳所有文本；如果没有选中该复选框，当单元格内的数据超过单元格的宽度时，会自动换行。
“标题”复选框：如果选中该复选框，则选择的单元格被设置为表格标题单元格。
（4）使用拓展表格模式
Dreamweaver中有两种表格模式，分别为标准模式和扩展表格模式，如图3-40所示。标准模式是表格默认的视图模式，表格及其内容的绝大部分操作适合在该模式下进行。在扩展表格模式下，Dreamweaver会临时向文档中的所有表格添加单元格边距和间距，并且增加
教
学
内
容
表格的边框，可使编辑操作更加直观。使用这种模式，可以方便选择表格中的内容或精确的定位插入点。
图3-40 标准模式和扩展表格模式
提醒：
①要进入扩展表格模式，可以右键选择菜单“表格→扩展表格模式”命令。
②在扩展表格模式下，选择内容或定位插入点后，可使用以下方法返回标准模式。
Ⅰ.直接单击“文档”窗口上方的“退出”。
Ⅱ.选择再次单击右键选择菜单“表格→表格扩展模式”命令。
【课堂小结】
教师引导学生小结本课所学内容。
【作业布置】
总结本课所学操作实用技巧。
板
书
设
计
教后札记
中等专业学校2022-2023-2教案
编号：
备课组别
授课教师
课题
计算机
课程名称
授课系部
网页设计
所在
年级
授课班级
二年级
主备
教师
授课
日期
模块三 3.1表格布局
任务7 奋扬青春-表格布局页面
1.掌握表格的创建方法和表格、单元格的属性设置；
教学
2.掌握嵌套表格的创建方法和属性的设置。
目标
3.学会使用表格布局页面的方法和技巧。
重点 学会使用表格布局页面的方法和技巧
难点 通过布局“奋扬青春”网页，学会使用表格布局页面的方法和技巧
教法
教学设备
教学
环节
讲练法、演示法、任务驱动法
多媒体机房
教学活动内容及组织过程
【复习导入】
引导学生回顾上节课学习内容
【教学过程及内容】
1. 任务描述：
通过布局“奋扬青春”网页，学会使用表格布局页面的方法和技巧。
.任务解析
在本任务中，需要完成以下操作：
个案补充
教
学
内
容
2
(1) 掌握表格的创建方法和表格、单元格的属性设置；
(2) 掌握嵌套表格的创建方法和属性的设置。
(3) 学会使用表格布局页面的方法和技巧。
3.任务实施：
(1)将素材中的renwu8文件夹复制到D盘根目录。运行Dreamweaver CC，新建站点“奋扬青春”，站点文件夹为D:renwu8，在站点根目录下新建网页文件；打开“页面属性”对话框，在“外观（css）”分类选项卡中设置背景颜色为#ccc，左、上边距为0；在“链接”分类选项卡中设置链接颜色为黑色，变换图像链接颜色为红色，已访问链接颜色为绿色，始终无下划线，页面属性设置如图3-1所示。
图3-1 “页面属性”对话框
(2) 选择“插入→表格(table)”命令，设置表格大小为1行2列，表格宽度为1200像素，其他项为0，如图3-1所示，单击“确定”按钮插入表格。
教
学
内
容
图3-3 第一个表格效果
(4) 将光标定位到第2列单元格，在“代码”视图中为单元格添加背景图像“renwu8_”；代码如下所示。再次光标定位该单元格，选择“插入→表格”命令，设置表格大小为4行1列，表格宽度为100%，其他项为0，单击“确定”按钮插入嵌套表格tab1；分别设置嵌套单元格的第1、2、3、4行行高为38、40、40、40，如图3-4所示。
图3-2 “表格”对话框
(3)单击表格的边框线，选中整个表格，在“表格”属性面板中设置“对齐”为“居中对齐”。
(4)将光标定位到表格第1个单元格中，在属性面板中设置宽度为1000，选择“插入→图像”命令，在打开的“选择图像源文件”对话框中选择“renwu8_”文件，单击“确定”按钮插入图像,如图3-3所示。
教
学
内
容
板
书
设
计
图3-4 第2列单元格的嵌套表格
(6)光标定位到嵌套表格的第2行单元格，选择输入法“软键盘”中的“特殊字符”项，在单元格中输入◆，然后在单元格中输入文字“设为首页”；同样的方法，在第3行和第4行输入“◆联系我们”和“◆加入收藏”，效果如图3-5所示
图3-7 表格效果1
【课堂小结】
教师引导学生小结本课所学内容。
【作业布置】
总结本课所学操作实用技巧。
教后札记
中等专业学校2022-2023-2教案
编号：
备课组别
授课教师
课题
计算机
课程名称
授课系部
网页设计
所在
年级
授课班级
二年级
主备
教师
授课
日期
模块三 3.1表格布局
任务7 奋扬青春-表格布局页面
1.掌握表格的创建方法和表格、单元格的属性设置；
教学
2.掌握嵌套表格的创建方法和属性的设置。
目标
3.学会使用表格布局页面的方法和技巧。
重点 学会使用表格布局页面的方法和技巧
难点 通过布局“奋扬青春”网页，学会使用表格布局页面的方法和技巧
教法
教学设备
教学
环节
【复习导入】
引导学生回顾上节课学习内容
【教学过程及内容】
2. 任务描述：
通过布局“奋扬青春”网页，学会使用表格布局页面的方法和技巧。
2.任务解析
在本任务中，需要完成以下操作：
讲练法、演示法、任务驱动法
多媒体机房
教学活动内容及组织过程 个案补充
教
学
内
容
(5) 掌握表格的创建方法和表格、单元格的属性设
置；
(6) 掌握嵌套表格的创建方法和属性的设置。
(7) 学会使用表格布局页面的方法和技巧。
3.任务实施：
(7)将光标定位到第二个表格，在“代码”视图中为表格添加背景图像“renwu8_”,代码如下所示。再次光标定位该表格，选择“插入→表格”命令，设置表格大小为1行9列，表格宽度为100%，其他项为0，单击“确定”按钮，插入嵌套表格tab2；分别设置嵌套表格的第1列列宽373，第9列列宽为113，第2列到第8列平均分配列宽为102，高均为41；如图3-7所示。
图3-7 第2个表格的嵌套设置
(8)在第二个表格的嵌套表格中的第2列到第8列，分别输入文本“部门简介，规章制度，教育管理，资助工作，咨询服务，心理服务和宿舍管理”；创建CSS样式表ys01，定义ys01样式表的字体为黑体、大小为16px、颜色为白色、加粗、居中显示，分别为7个单元格的文本内容套用ys01样式，如图3-8所示。
图3-8 第2个表格效果
(9) 将光标定位到第2个表格的后面或下一行，选择
教
学
内
容
“插入→表格”命令，设置表格大小为1行3列，表格宽度为1200像素，其他项为0，单击“确定”按钮插入表格。在表格属性面板中设置对齐为居中对齐，单元格属性面板中设置高为542，第三个表格的布局图和参数如图3-9所示。
图3-9 第3个表格的布局参数
(10)分别设置第三个表格的第1列和第3列列宽为100，第2列列宽为1000。选择表格切换为扩展模式，光标定位在第2列单元格中，插入为4行2列，表格宽度为100%，其他项为0的嵌套表格tab3，分别设置第1行高为207，第2行高位40，第3行高为160，第4行高为45，第1列列宽为390，第2列列宽为610，合并第1行单元格；光标定位在tab3的第3行第1列单元格，插入1行3列，表格宽度为100%，其他项为0的嵌套表格tab3-1，设置tab3-1的高为160，第1列和第3列列宽分别为4%；在tab3的下方，插入1行2列，表格宽度为100%，其他项为0的嵌套表格tab4，设置tab4的高为90，第1列单元格宽为355；单击“插入”面板“布局”类别中的“标准”按钮，切换表格为标准模式。
(11)为第3个表格部分单元格插入图片。第三个表格第1列和第3列插入图片 “renwu8_”和“renwu8_”；第2列嵌套表格tab3的第1行插入图片“renwu8_”，第2行第1列和第2列分别插入图片“renwu8_”和“renwu8_”，
教
学
内
容
第4行第1列和第2列分别插入图片“renwu8_”和“renwu8_”；第5列嵌套表格tab4的第2列插入图片“renwu8_”
图3-11 第三个表格插入图片的效果
【课堂小结】
教师引导学生小结本课所学内容。
【作业布置】
总结本课所学操作实用技巧。
板
书
设
计
教后札记
中等专业学校2022-2023-2教案
编号：
备课组别
授课教师
课题
计算机
课程名称
授课系部
网页设计
所在
年级
授课班级
二年级
主备
教师
授课
日期
模块三 3.1表格布局
任务7 奋扬青春-表格布局页面
1.掌握表格的创建方法和表格、单元格的属性设置；
教学
2.掌握嵌套表格的创建方法和属性的设置。
目标
3.学会使用表格布局页面的方法和技巧。
重点 学会使用表格布局页面的方法和技巧
难点 通过布局“奋扬青春”网页，学会使用表格布局页面的方法和技巧
教法
教学设备
教学
环节
讲练法、演示法、任务驱动法
多媒体机房
教学活动内容及组织过程
【复习导入】
引导学生回顾上节课学习内容
【教学过程及内容】
3. 任务描述：
通过布局“奋扬青春”网页，学会使用表格布局页面的方法和技巧。
2.任务解析
在本任务中，需要完成以下操作：
(8) 掌握嵌套表格的创建方法和属性的设置。
(9) 完成上机实训
个案补充
教
学
内
容
3.任务实施：
(13)为第3个表格部分单元格添加文字。将text文件夹下的“通知通告.doc”内容复制到tab3-1的第2列
单元格中。创建CSS样式表ys02，定义ys02样式表的
字体大小为12px、行高为20px，选中通知通告文本内
容套用ys02样式；同样的方法复制和设置“学生动态”的”文本内容；在“下载专区”中手动输入文本内容““困难学生补助申请书、学生会干部竞聘申请书、缓交学费申请表”按效果图进行分段和缩进，并套用ys02样式，如图3-13所示。
图3-13 添加文字后的第三个表格效果
添加的CSS样式如下：
.ys02 {
font-size: 12px;
line-height: 20px;}
(14)为“学生动态”和“下载专区”文字设置空链接，创建滑动文字变色效果。选中“学生动态”中的第一行文字，在属性面板的链接框中输入“#”。同样的办法为其它各行文字创建空链接。
（15）在第3个表格下方，插入1行1列，表格宽度为1200像素，其他项为0的表格，在表格属性面板中设置对齐为居中对齐，单元格属性面板中设置高为60，水平居中对齐;在”代码“视图为表格设置背景图像为
教
学
内
容
“renwu8_”，将光标定位单元格中，输入文本内容“@版权所有|站点地图|友情链接、建议使用1280*800分辨率”，并套用ys02样式表，如图3-15所示。
图3-15 效果图
4. 布置任务：课本123页上机实训1
（1）任务要求：创建文件，插入一个5行1列的表格，表格的宽度为700像素，边框、间距、填充均为0，居中对齐，并按下面表格进行具体设计。
（2）实训步骤提示：
①第三行表格设置：第三行表格，在属性面板中选择“拆分”按钮，将单元格拆分为5列并平均分配列宽。创建并套用CSS样式表t2。（t2样式表为加粗、居中、颜色为#060）。
②第四行表格设置：需要插入4行4列表格table4-1
|
图3-2 “表格”对话框 (3)单击表格的边框线，选中整个表格，在“表格”属性面板中设置“对齐”为“居中对齐”。 (4)将光标定位到表格第1个单元格中，在属性面板中设置宽度为1000，选择“插入→图像”命令，在打开的“选择图像源文件”对话框中选择“renwu8_”文件，单击“确定”按钮插入图像,如图3-3所示。
教 学 内 容
板 书 设 计
图3-4 第2列单元格的嵌套表格 (6)光标定位到嵌套表格的第2行单元格，选择输入法“软键盘”中的“特殊字符”项，在单元格中输入◆，然后在单元格中输入文字“设为首页”；同样的方法，在第3行和第4行输入“◆联系我们”和“◆加入收藏”，效果如图3-5所示
图3-7 表格效果1 【课堂小结】 教师引导学生小结本课所学内容。 【作业布置】 总结本课所学操作实用技巧。 教后札记
中等专业学校2022-2023-2教案 编号： 备课组别 授课教师 课题 计算机
课程名称 授课系部 网页设计
所在 年级 授课班级 二年级
主备 教师 授课 日期
模块三 3.1表格布局 任务7 奋扬青春-表格布局页面 1.掌握表格的创建方法和表格、单元格的属性设置； 教学 2.掌握嵌套表格的创建方法和属性的设置。
目标 3.学会使用表格布局页面的方法和技巧。
重点 学会使用表格布局页面的方法和技巧 难点 通过布局“奋扬青春”网页，学会使用表格布局页面的方法和技巧 教法 教学设备 教学 环节
【复习导入】 引导学生回顾上节课学习内容
【教学过程及内容】
2. 任务描述： 通过布局“奋扬青春”网页，学会使用表格布局页面的方法和技巧。
2.任务解析 在本任务中，需要完成以下操作：
讲练法、演示法、任务驱动法 多媒体机房 教学活动内容及组织过程 个案补充
教 学 内 容
(5) 掌握表格的创建方法和表格、单元格的属性设
置；
(6) 掌握嵌套表格的创建方法和属性的设置。
(7) 学会使用表格布局页面的方法和技巧。
3.任务实施： (7)将光标定位到第二个表格，在“代码”视图中为表格添加背景图像“renwu8_”,代码如下所示。再次光标定位该表格，选择“插入→表格”命令，设置表格大小为1行9列，表格宽度为100%，其他项为0，单击“确定”按钮，插入嵌套表格tab2；分别设置嵌套表格的第1列列宽373，第9列列宽为113，第2列到第8列平均分配列宽为102，高均为41；如图3-7所示。
图3-7 第2个表格的嵌套设置
(8)在第二个表格的嵌套表格中的第2列到第8列，分别输入文本“部门简介，规章制度，教育管理，资助工作，咨询服务，心理服务和宿舍管理”；创建CSS样式表ys01，定义ys01样式表的字体为黑体、大小为16px、颜色为白色、加粗、居中显示，分别为7个单元格的文本内容套用ys01样式，如图3-8所示。
图3-8 第2个表格效果
(9) 将光标定位到第2个表格的后面或下一行，选择
教 学 内 容
“插入→表格”命令，设置表格大小为1行3列，表格宽度为1200像素，其他项为0，单击“确定”按钮插入表格。在表格属性面板中设置对齐为居中对齐，单元格属性面板中设置高为542，第三个表格的布局图和参数如图3-9所示。
图3-9 第3个表格的布局参数 (10)分别设置第三个表格的第1列和第3列列宽为100，第2列列宽为1000。选择表格切换为扩展模式，光标定位在第2列单元格中，插入为4行2列，表格宽度为100%，其他项为0的嵌套表格tab3，分别设置第1行高为207，第2行高位40，第3行高为160，第4行高为45，第1列列宽为390，第2列列宽为610，合并第1行单元格；光标定位在tab3的第3行第1列单元格，插入1行3列，表格宽度为100%，其他项为0的嵌套表格tab3-1，设置tab3-1的高为160，第1列和第3列列宽分别为4%；在tab3的下方，插入1行2列，表格宽度为100%，其他项为0的嵌套表格tab4，设置tab4的高为90，第1列单元格宽为355；单击“插入”面板“布局”类别中的“标准”按钮，切换表格为标准模式。 (11)为第3个表格部分单元格插入图片。第三个表格第1列和第3列插入图片 “renwu8_”和“renwu8_”；第2列嵌套表格tab3的第1行插入图片“renwu8_”，第2行第1列和第2列分别插入图片“renwu8_”和“renwu8_”，
教 学 内 容
第4行第1列和第2列分别插入图片“renwu8_”和“renwu8_”；第5列嵌套表格tab4的第2列插入图片“renwu8_”
图3-11 第三个表格插入图片的效果
【课堂小结】 教师引导学生小结本课所学内容。
【作业布置】 总结本课所学操作实用技巧。
板 书 设 计
教后札记
中等专业学校2022-2023-2教案 编号： 备课组别 授课教师 课题 计算机
课程名称 授课系部 网页设计
所在 年级 授课班级 二年级
主备 教师 授课 日期
模块三 3.1表格布局 任务7 奋扬青春-表格布局页面 1.掌握表格的创建方法和表格、单元格的属性设置； 教学 2.掌握嵌套表格的创建方法和属性的设置。
目标 3.学会使用表格布局页面的方法和技巧。
重点 学会使用表格布局页面的方法和技巧 难点 通过布局“奋扬青春”网页，学会使用表格布局页面的方法和技巧 教法 教学设备 教学 环节 讲练法、演示法、任务驱动法 多媒体机房 教学活动内容及组织过程 【复习导入】
引导学生回顾上节课学习内容
【教学过程及内容】 3. 任务描述：
通过布局“奋扬青春”网页，学会使用表格布局页面的方法和技巧。 2.任务解析 在本任务中，需要完成以下操作： (8) 掌握嵌套表格的创建方法和属性的设置。 (9) 完成上机实训
个案补充
教 学 内 容
3.任务实施： (13)为第3个表格部分单元格添加文字。将text文件夹下的“通知通告.doc”内容复制到tab3-1的第2列
单元格中。创建CSS样式表ys02，定义ys02样式表的 字体大小为12px、行高为20px，选中通知通告文本内
容套用ys02样式；同样的方法复制和设置“学生动态”的”文本内容；在“下载专区”中手动输入文本内容““困难学生补助申请书、学生会干部竞聘申请书、缓交学费申请表”按效果图进行分段和缩进，并套用ys02样式，如图3-13所示。
图3-13 添加文字后的第三个表格效果 添加的CSS样式如下： .ys02 {
font-size: 12px; line-height: 20px;} (14)为“学生动态”和“下载专区”文字设置空链接，创建滑动文字变色效果。选中“学生动态”中的第一行文字，在属性面板的链接框中输入“#”。同样的办法为其它各行文字创建空链接。 （15）在第3个表格下方，插入1行1列，表格宽度为1200像素，其他项为0的表格，在表格属性面板中设置对齐为居中对齐，单元格属性面板中设置高为60，水平居中对齐;在”代码“视图为表格设置背景图像为
教 学 内 容
“renwu8_”，将光标定位单元格中，输入文本内容“@版权所有|站点地图|友情链接、建议使用1280*800分辨率”，并套用ys02样式表，如图3-15所示。
图3-15 效果图 4. 布置任务：课本123页上机实训1 （1）任务要求：创建文件，插入一个5行1列的表格，表格的宽度为700像素，边框、间距、填充均为0，居中对齐，并按下面表格进行具体设计。 （2）实训步骤提示： ①第三行表格设置：第三行表格，在属性面板中选择“拆分”按钮，将单元格拆分为5列并平均分配列宽。创建并套用CSS样式表t2。（t2样式表为加粗、居中、颜色为#060）。 ②第四行表格设置：需要插入4行4列表格table4-1 |