发布时间 : 星期六 文章《网页制作》项目式教案 - 图文更新完毕开始阅读1395aa8aa1116c175f0e7cd184254b35eefd1a07
任务流程 导入任务 分析任务 完成任务 分析网页布局 如何在网页上插入一张图片，并调整图片的大小、教师按照步骤操作。 位置？ 学生展开 学生分组讨论如何在网页上制作一个班级通讯录，讨论 每行内容有“姓名、照片、地址、联系电话”。 通过上面讨论，引导学生认识利用表格制作通讯录 是方便快捷的方式，再引导学生联想生活中用到的表 格，进而了解表格在网页制作中的广泛应用。 在Dreamweaver 8中，表格是用于在页面上显示表 格式数据及对文本和图像等元素进行布局的强用力的 工具。本任务将学习在网页制作中如何灵活运用表格。 提出任务：利用表格规划、布局作品展示网页。 教师展示 依据设计图样，可以使用四个表格把页面划分为四“作品展示”网个区域，四个表格分别命名为“table1”、“table2”、页成品 “table3”和“table4”。依据不同的设计内容，这四 个表格还需要进行相应的编辑与嵌套。 PPT给出课 本图3-1页面布1．分析网页布局 ⑴ 见课本图3-2，教师带领学生进行页面表格分局及课本图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．什么是嵌套表格（插入嵌套表格是指在表格的极讨论实际例单元格中插入新的表格。）和嵌套表格的作用。 ⑵ 教师举一些网页布局的实际例子让学生进行协子的布局结构，同分析。总结：通过以上几个实际网站页面的例子，介教师归纳总结。 25
绍表格布局知识，即许多网页的表格布局可分为上、中、 下三个部分，上面部分放置网页的标题，中间部分放置 网页的主要内容,下部分放置制作者的信息及版权信息 等。上、中、下三个部分又包含各自的嵌套表格来布局 相应的内容。 提问：回想以前打开一张网页的时候是所有的内容 都同时全部显示吗？如果不是的话是怎样进行显示的 呢？为什么这样显示？表格布局在这里有什么作用？ 总结：如果使用表格布局网页结构不合理，会降低 网页浏览速度。因为浏览器在解析网页时，先将整个网 页的结构下载完后才显示内容，如果不使用嵌套表格布 局网页只使用一个表格会非常复杂，浏览者要等待很长 时间才能看到网页内容。通常用表格布局页面时，应该 遵循以下几点： 创建本栏目目录结a．整个网页不要放在一个表格里，尽量使用多个 构 表格来进行布局。 b．表格的嵌套层次尽量要少。 c．单一表格的结构尽量整齐，不要太复杂。 2．创建目录结构 在Dreamweaver 8中打开“幽幽我心的个人网站”，创建表格知识 依据第一单元建立的网站目录结构，在本栏目“works” 文件夹中新建文件“works.html”，然后把光盘中本单 元素材中的“wkimages”、“flash”、“links”文件夹复 给一定时制到本栏目“works”文件夹中。本栏目目录结构如课 间学生自己学本表3-1所示。 习或讨论找出3．创建表格的知识 ⑴ 练习插入一个表格：学会使用菜单、“插入”栏、答案，教师最后 总结。 快捷键创建表格。 ⑵ 回答表格对话框中如下选项的作用： “页眉”选项组、“标题”、“对齐标题”、“摘要”。 ⑶ 要求学生回答下列问题： a．大多数浏览器默认显示单元格边距、间距是多 少？若要确保浏览器显示的表格没有边距和间距，必须 把单元格边距和单元格间距设置为多少？ b．如果没有明确指定边框的值，则浏览器怎么显 示表格边框呢？大多数浏览器默认显示边框粗细是多 少？若要确保浏览器显示的表格没有边框应该怎么 办？若把边框设置为0，则如何查看单元格和表格的边 框呢？ c．在网页制作过程中，元素的长度单位可以选用 百分比或像素来表示。请解释什么是像素、百分比？它 们的区别是什么？“百分比”是相对于谁说的？（教师 在最后总结时一定要强调是父元素，其绝对大小会随所 属父元素的大小变化而发生变化。）
26
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所示的嵌套表格，保存并预览网页。 27
图JYFS3-1 2．创建网页“practice3-3.html”，在网页中插入如图JYFS3-2所示的嵌套表格，保存并预览网页。 图JYFS3-2 3．制作一个以环保为主题的网页，首先利用已学知识设计栏目和目录结构，创建表格布局网页。
28