资源简介

任务三 添加表格内容
一、提出任务
1．任务目标
在“作品展示”网页中添加表格内容。
2. 解决的问题
通过在“作品展示”网页的表格中添加内容，学习在表格中添加内容并设置格式。
3. 本任务所涉及原有知识要点
完成本任务所涉及原有知识要点有：表格的创建和编辑。
二、教学目标
1. 知识目标
⑴ 掌握在单元格中插入图片。
⑵ 掌握在单元格中设置图片格式。
⑶ 掌握在单元格中插入文字。
⑷ 掌握在单元格中设置文字格式。
⑸ 掌握使用表格的“扩展”视图模式。
⑹ 掌握使用表格的“布局”视图模式。
2. 能力目标
通过完成本任务使学生掌握在表格中添加内容并设置格式。
3. 情感目标
培养学生耐心、踏实的学习态度；给学生以成功的体验，提高学习网页知识的积极性。
三、教学分析与准备
1. 教学重点
⑴ 在表格中插入内容。
⑵ 表格的三种视图模式。
2．教学难点
表格三种视图模式的使用。
3. 教学方法
任务引领学习、任务驱动学习、协作学习和探究拓展学习相结合。
4. 课时安排
4课时。
5. 教学环境
多媒体网络教室。
四、学习过程（组织课堂、复习知识、教师引领完成任务占2学时；举一反三占2学时。）
教学环节及手段 教学内容 备注
组织课堂 复习提问 任务流程 导入任务 分析任务 完成任务 知识小结 举一反三 任务目标 启发思路 分组完成任务 学生自评或互评 教师点评总结 布置作业 集中学生注意力，准备上课。 通过提问考察学生对插入表格的掌握情况和上节课作业的完成情况。 1．总结表格属性面板和单元格属性面板的不同。 2．提问学生，谈谈自己用表格制作并编辑环保为主题的网页页面布局，想做成一张什么样的网页。其他同学可以进行评论。 用表格布局好页面后，就可以添加相应内容了，本次课任务就是在上一任务完成的表格内添加内容。 提出任务：向表格中添加内容 任务二已完成“作品展示”页面表格的编辑，页面布局部分已经完成，本任务需要将准备好的内容添加进去，并设置其格式。 1．添加并编辑表格内容 ⑴ 向表格“table1”中添加内容 利用第二单元所学的方法，在“文件”面板中打开“works”文件夹，把“wkimages”文件夹下的“title.jpg”图像添加到表格“table1”的第1行中。 将光标放入表格“table1-1”的第1列的单元格中，输入导航文字“首页”。在第2至5列的单元格中分别输入文字“作品展示”、“心情日记”、“家乡山水”和“访客信息”。 用鼠标拖拽选中表格“table1-1”的全部单元格，在单元格“属性”面板中设置各单元格内容的对齐方式为“居中”，文字大小保持默认值，文字颜色为“#5E5C5D”并加粗显示。 ⑵ 向表格“table2”、“table3”中添加内容 将光标放入表格“table2”的第2个单元格中，添加图像“works.jpg”。 将光标放入表格“table2”的第3个单元格中，添加图像“link.jpg”。 将光标放入表格“web1”的第1个单元格中，在“属性”面板中设置单元格水平对齐方式为“居中”，在其中添加图像“arrow.gif”。然后将光标放入表格“web1”的第2个单元格中，输入文字“网页作品”，设置文字大小为14像素，颜色为“#336666”、字体为加粗。 使用同样方法在表格“flash1”和“3D1”中添加图像“arrow.gif”和文本，文本内容分别为“flash作品”和“3D作品”，并与“网页作品”文字进行同样的样式设置。 选择表格“web2”的第2至4个单元格，在“属性”面板中将单元格水平对齐方式设为“居中”。在“web2”的第2个单元格中，添加图像“w1.gif”；在“web2”的第3个单元格中，添加图像“w2.gif”；在“web2”的第4个单元格中，添加图像“w3.gif”。添加好图像文件后，可以看到图像与所在行等高，为了网页美观，让图像与表格边框之间适当留白，将表格“web2”的行高设置为159像素。 接下来分别选择上述三幅图像，在图像“属性”面板里设置边框为1。为这三幅图像加上边框。 采用如上方法分别在表格“flash2”和“3D2”中添加内容：在“flash2”中添加的图像文件分别为“f1.gif”、“f2.gif”和“f3.gif”，在“3D2”中添加的图像文件分别为“d1.jpg”、“d2.jpg”和“d3.jpg”。 ⑶ 向表格“table4”中添加内容 将光标放入表格“table4”第3行的单元格中，将其行高设为48像素，单元格水平对齐方式为“居中”，文字大小为12像素，然后在其中输入文字“版权所有：幽幽我心　欢迎来信　QQ:123456789”。 ⑷ 添加网页背景图像 单击“页面属性”按钮，在“分类”中选择“外观”，在“外观”中设置背景图像为“D:\mysite\works\wkimages\bgfill.jpg”。 至此，页面内容添加完毕。 思考：单元格设置背景图像和插入图像又什么区别呢？你能区别开吗？单元格背景图像的大小对单元格的显示又什么影响呢？ 2．知识讲解：表格的三种布局模式 Dreamweaver 8在“插入”栏的“布局”类别中提供了“标准”、“扩展”和“布局”三种表格视图模式，如图所示。 “标准”模式：标准模式是表格默认的视图模式，对于表格及其内容的绝大部分操作适合在该模式下进行。 “扩展”模式：在标准模式中，当图像填满整个单元格时，很难直接将光标定位在单元格中，为了解决这个问题，可以切换到“扩展表格”模式。在“扩展”模式下，Dreamweaver 8临时向文档中的所有表格添加单元格边距和间距，并且增加表格的边框以使编辑操作更加容易。利用这种模式，可以方便地选择表格中的内容或者精确地定位插入点。 “布局”模式：在“布局”模式中，可以在表格添加内容前，使用“布局”单元格和“布局”表格对页面进行灵活的布局。文档窗口的顶部显示“布局模式”，指示当前正处于“布局”模式中，原来页面上的每个表格都显示为布局表格。 “布局”模式的主要功能是绘制或编辑复杂的表格。“布局单元格”不能存在于布局表格之外，可以在“布局表格”中任意位置绘制“布局单元格”。单击绘制“布局表格”或“布局单元格”按钮后，可以通过拖拽鼠标来绘制“布局表格”或“布局单元格”，也可以按住Ctrl键拖拽鼠标，实现连续绘制多个“布局表格”或“布局单元格”。在布局表格内，布局单元格可以任意移动。 如果页面中没有其他内容，则新建的“布局表格”自动定位在页面的左上角。不能在文档、图像、表格等内容的旁边绘制“布局表格”。如果要在内容之下绘制布局表格时出现禁止绘制光标，表示布局表格的插入点距离内容太近。“布局”单元格可以自由移动，也可以利用控制柄灵活地调整大小。 通过完成本任务学习了： 1．在单元格内插入图片，并设置图片格式。 2．在单元格内插入文字，并设置文字格式。 3．使用表格的三种视图模式。 打开上一任务作业中创建的以环保为主题的网页，从互联网或其他途经搜索需要的素材，插入到表格中，并设置相应格式。 自己搜索素材，把素材插入到表格中并设置格式。根据最终要完成的效果可调整素材或单元格。若在操作单元格时遇到问题，可以考虑用“扩展”或“布局”模式来配合操作。 学生分组完成任务，教师巡视指导，指出问题，纠正学生不良操作习惯。 点评自己及他人作品的优点和缺点 总结学生点评结果，补充不足， 完成课本中本任务举一反三练习题。 学生回答，教师补充归纳 教师引导学生动手完成任务。完成的给予鼓励，完不成的一定要给予其提示 学生自己找答案。学生、教师一起总结 教师讲授

展开更多......

收起↑