2016网页设计与制作DreamWeaver教案：第八讲 使用表格布局网页.docVIP

第八讲　使用表格布局网页 授课日期 班级名称 授课地点 教学课题 第七讲使用表格布局网页 课时 2学时 教学目的 1．学会添加表格、设置表格属性。 2．掌握设置表格中行和列属性的方法。 3．掌握拆分单元格，合并单元格的方法。 4．掌握在表格中输入文字并定位的方法。 5．掌握在表格中插入图像并定位的方法。 知识目标 1．添加表格、设置表格属性。 2．设置表格中行和列属性的方法。 3．拆分单元格，合并单元格的方法。 4．在表格中输入文字并定位的方法。 5．在表格中插入图像并定位的方法。 能力目标 熟练记住用表格布局网页的操作要点 素质目标 培养学生创新能力和独立思考能力，并使其具有分析问题、解决问题的能力 重点 表格的基本操作、表格及单元格的属性设置 难点 利用表格布局页面的技巧和方法 课型 讲授型 教学方法 采用启发示的教学方式循序渐进的讲解新课内容 教学手段 多媒体教学 教参 《网页设计与制作》教程人民邮电出版社 教学环节 时间安排 复习提问： 在新窗口打开链接页，需要将链接目标的打开方式设置为什么？ 5 2.新课引入 表格是常用的页面元素，制作网页经常要借助表格进行排版，在网页布局方面，表格可谓起着举足轻重的作用，通过设置表格以及单元格的属性，对页面中的元素进行准确定位，表格能够有序地排列数据又能对页面进行更加合理的布局。灵活地使用表格的背景、框线等属性可以得到更加美观的效果。 5 知识技能目标说明：介绍本次课要掌握的知识目标 8 讲解各知识点：具体讲述本次课新课内容 45 课堂实践：了解学生对知识点的掌握情况 15 疑难解析： 问题探讨：与学生一起引申问题留作思考 5 8.归纳总结： 本次课主要学习了表格的创建方法，表格及单元格的基本操作，设置表格及单元格的属性，格式化表格的方法；要学会应用表格技术对网页中的各个对象进行定位，并通过表格在网页上更直观、更有条理地显示各类信息。 4 作业布置 3 总计 90 新授内容 1.认识表格： 表格的组成元素、表格的应用 2．表格的基本操作 （1）新建网页 （2）插入表格 （3）选择表格和表格元素 （4）设置表格及单元格的属性 （5）调整表格的结构 （6）在表格中输入文本和插入图像 （7）重新设置表格的边框，保存网页，且在浏览器中预览效果 案例4：创建网站相册（初识表格）——足球明星页面（photo.htm） 操作步骤： 创建网站像册 方法： 将需制作相册的图片放在源图像文件夹ch4/img中，同时建立一个空目标文件夹photo，用来存放系统生成的图片和文件。 执行 “命令|创建网站相册”命令 在【创建网站相册】对话框中输入相应的参数，即可。 相册标题：足球明星 副标信息：2009版 源图像文件夹：素材/ch4/img 目标文件夹：d:/myfootball/photo/ 缩略图：100×100 列：5 缩略图格式：JPEG-较高品质 选择为每张相片建立导览页面 网站相册的修改 选择“页面属性”，可以进行文字、背景、颜色：#009900，以及表格的一些修改。 标题文字：标题1，居中，#ffff00，字体：华文彩云，大小：36像素 定位在每一幅图片下面，改为每位球星的名字，（在素材ch4文件夹下的文本文件中提供）。 拖动光标选中整个页面的文字，设置文字颜色：##CC6600。 相册表格的美化 选择“命令|格式化表格”命令。 设置如下：行颜色，第一行，最左列，边框等。 在标题和图片表格之间插入一行五列表格，宽度为600px，分别制作网站各页的链接。 课堂实践 案例：我的第一页 （1）打开“实战演练”文件夹ch4。 （2）利用表格布局网页04.html的页面。 （3）用表格布局 (4)插入网页元素 (5)初识CSS样式 疑难解析 问题1：Dreamweaver CS3提供了一些事先设计好的表格外观样式，如何让网页中的表格套用这些表格外观样式？ 问题2：网页中的表格除了用于布局网页外，还可以存储数据，如何对表格中的数据象Excel表一样进行排序操作呢？ 问题3：怎样向网页中导入外部Excel文件中的数据和文本格式文件中的数据呢？ 问题4：怎样将网页中表格内的数据输出为数据文件？ 课外拓 展实践 1．在“个人网站设计”站点文件夹“04表格布局”中创建网页“04.html”， 对该页面进行表格进行布局。 课后评析