资源简介

任务一 创建表格
一、提出任务
1．任务目标
完成“作品展示”网页中表格的创建。
2．解决的问题
通过在“作品展示”网页中创建表格理解表格布局页面的重要性，学习网页的布局分析，掌握创建表格的几种方法。
3．本任务所涉及原有知识要点
完成本任务所涉及原有知识要点有：在页面添加文本，设置文本格式，插入图像，设置图像格式。
二、教学目标
1. 知识目标
⑴ 理解表格在网页设计中的作用。
⑵ 掌握利用表格布局页面。
⑶ 掌握创建表格的基本方法。
⑷ 掌握创建嵌套表格。
⑸ 掌握在网页中利用表格进行排版。
2. 能力目标
掌握表的创建和编辑，能够根据具体需求灵活应用表格，并能利用表格进行页面布局和排版。
3. 情感目标
⑴ 通过参与作品评价，提高学生的审美能力与鉴别能力。
⑵ 鼓励学生根据任务需求进行科学合理的设计，提高学生分析问题与解决问题能力。
三、教学分析与准备
1. 教学重点
⑴ 理解表格在网页设计中的作用。
⑵ 分析页面的表格布局。
⑶ 创建表格的基本方法。
2．教学难点
⑴ 分析页面的表格布局。
⑵ 创建嵌套表格。
3. 教学方法
任务驱动学习、协作学习、探究拓展学习与举一反三相结合。
4. 课时安排
4课时。
5. 教学环境
多媒体网络教室。
四、学习过程（组织课堂、复习知识、教师引领完成任务占2学时，举一反三占2学时。）
教学环节及手段 教学内容 备注
组织课堂 复习提问 任务流程 导入任务 分析任务 完成任务 分析网页布局 创建本栏目目录结构 创建表格知识 完成任务 知识小结 举一反三 任务目标 启发思路 分组完成任务 学生自评或互评 教师点评总结 布置作业 集中学生注意力，准备上课。 通过提问考察学生对插入图像基础知识的了解。 如何在网页上插入一张图片，并调整图片的大小、位置？ 学生分组讨论如何在网页上制作一个班级通讯录，每行内容有“姓名、照片、地址、联系电话”。 通过上面讨论，引导学生认识利用表格制作通讯录是方便快捷的方式，再引导学生联想生活中用到的表格，进而了解表格在网页制作中的广泛应用。 在Dreamweaver 8中，表格是用于在页面上显示表格式数据及对文本和图像等元素进行布局的强用力的工具。本任务将学习在网页制作中如何灵活运用表格。 提出任务：利用表格规划、布局作品展示网页。 依据设计图样，可以使用四个表格把页面划分为四个区域，四个表格分别命名为“table1”、“table2”、“table3”和“table4”。依据不同的设计内容，这四个表格还需要进行相应的编辑与嵌套。 1．分析网页布局 ⑴ 见课本图3-2，教师带领学生进行页面表格分析。 引导学生了解：“table1”是一个2行1列的表格。第一行用于放置网站标题及图像，第二行嵌套一个1行5列的表格“table1-1”，用于放置五个导航按钮。 “table2”是一个1行4列的表格。左右单元格为空白区域，中间两个单元格分别用于放置“作品展示”和“友情链接”两张图像。 “table3”是一个1行3列的表格。左右单元格为空白区域，中间单元格用于放置作品分类标题和图像。在中间单元格嵌套一个6行1列的表格“table3-1”。“table3-1”表格的每一行再嵌套一个表格，其中第一、三、五行分别嵌套一个1行2列的表格，用于放置图标及作品题目；第二、四、六行分别嵌套一个1行5列的表格，放置三幅作品及左右两个空白区域。 “table4”是一个3行1列的表格，第一行是空白区域，第二行通过设置行属性显示为一条细线，第三行放置版权信息。 重点理解如下内容： ａ．课本图3-1页面布局由4个大表格组成，分别分析每个表格的作用。 b．什么是嵌套表格（插入嵌套表格是指在表格的单元格中插入新的表格。）和嵌套表格的作用。 ⑵ 教师举一些网页布局的实际例子让学生进行协同分析。总结：通过以上几个实际网站页面的例子，介绍表格布局知识，即许多网页的表格布局可分为上、中、下三个部分，上面部分放置网页的标题，中间部分放置网页的主要内容,下部分放置制作者的信息及版权信息等。上、中、下三个部分又包含各自的嵌套表格来布局相应的内容。 提问：回想以前打开一张网页的时候是所有的内容都同时全部显示吗？如果不是的话是怎样进行显示的呢？为什么这样显示？表格布局在这里有什么作用？ 总结：如果使用表格布局网页结构不合理，会降低网页浏览速度。因为浏览器在解析网页时，先将整个网页的结构下载完后才显示内容，如果不使用嵌套表格布局网页只使用一个表格会非常复杂，浏览者要等待很长时间才能看到网页内容。通常用表格布局页面时，应该遵循以下几点： a．整个网页不要放在一个表格里，尽量使用多个表格来进行布局。 b．表格的嵌套层次尽量要少。 c．单一表格的结构尽量整齐，不要太复杂。 2．创建目录结构 在Dreamweaver 8中打开“幽幽我心的个人网站”，依据第一单元建立的网站目录结构，在本栏目“works”文件夹中新建文件“works.html”，然后把光盘中本单元素材中的“wkimages”、“flash”、“links”文件夹复制到本栏目“works”文件夹中。本栏目目录结构如课本表3-1所示。 3．创建表格的知识 ⑴ 练习插入一个表格：学会使用菜单、“插入”栏、快捷键创建表格。 ⑵ 回答表格对话框中如下选项的作用： “页眉”选项组、“标题”、“对齐标题”、“摘要”。 ⑶ 要求学生回答下列问题： a．大多数浏览器默认显示单元格边距、间距是多少？若要确保浏览器显示的表格没有边距和间距，必须把单元格边距和单元格间距设置为多少？ b．如果没有明确指定边框的值，则浏览器怎么显示表格边框呢？大多数浏览器默认显示边框粗细是多少？若要确保浏览器显示的表格没有边框应该怎么办？若把边框设置为0，则如何查看单元格和表格的边框呢？ c．在网页制作过程中，元素的长度单位可以选用百分比或像素来表示。请解释什么是像素、百分比？它们的区别是什么？“百分比”是相对于谁说的？（教师在最后总结时一定要强调是父元素，其绝对大小会随所属父元素的大小变化而发生变化。） d．在用表格布局页面时，宽度设置为多少时页面不会出现水平方向的滚动条？（教师总结：为防止浏览过程中出现水平方向的滚动条，通常在800*600分辨率下，把表格宽度最大设置为778像素，在1024*768分辨率下最大设置为1002像素。） e．如何给当前表格命名？如何删除当前选中的表格？ f．嵌套表格的宽度受所在单元格宽度的限制吗？ 4．自己动手 根据所学知识，创建课本图3-1页面所需表格结构。 通过完成本任务学习了： ⑴ 创建表格 ⑵ 表格布局页面 ⑶ 表格在页面中的作用： 让学生讨论表格在网页制作中的作用：网页中既有明显的表格，也有隐含的表格；表格在网页中有两种作用：布局与真正的表格。 创建网页“practice3-1.html”，在网页中插入一个6行5列的表格，宽500像素，边框粗细与单元格间距均为5像素，页眉选择“顶部”，标题为“产品信息”，保存并预览网页。 回想插入表格的几种方法，考虑页眉、标题等选项出现在哪个对话框的选项卡中，并考虑如何设置创建表格的相关属性。 学生分组完成任务，教师巡视指导，指出问题，纠正学生不良操作习惯。 由各组学生代表分析说明自己完成的任务。 对完成任务的学生给予鼓励，完不成的帮助其找到原因并引导完成。 1．创建网页“practice3-2.html”，在网页中插入如图JYFS3-1所示的嵌套表格，保存并预览网页。 图JYFS3-1 2．创建网页“practice3-3.html”，在网页中插入如图JYFS3-2所示的嵌套表格，保存并预览网页。 图JYFS3-2 3．制作一个以环保为主题的网页，首先利用已学知识设计栏目和目录结构，创建表格布局网页。 学生回答，教师按照步骤操作。 学生展开讨论 教师展示“作品展示”网页成品 PPT给出课本图3-1页面布局及课本图3-2 让学生积极讨论实际例子的布局结构，教师归纳总结。 给一定时间学生自己学习或讨论找出答案，教师最后总结。

展开更多......

收起↑