电子教案-《Dreamweaver网页设计与制作第二版》-A06-3954示例项目五.docx

课程教案

授课内容

项目五 用表格构建网页布局

授课班级

授课学时

12 课时

教学方法

讲授法、演示法、讨论法。多媒体教学

与手段

项目内容

教学目标

教学重点

与难点



本项目的工作是为某珠宝饰品公司设计网站，具体要求如下。

1.具有产品发布管理系统。通过该系统可以实现产品的展示发布，管理者

可以任意添加、修改产品类别和产品列表，可以上传产品图片，通过可视化文章编辑器添加、修改产品说明文字。

2.在线留言系统。留言系统是一种电子便签管理系统，客户可以将他的意

见和要求通过电子表单进行提交， 提交表单同时发送邮件和信息至系统数据库。

要完成上述任务，在网站制作时必须要注意网页的布局，特别是在产品发布系统中，网页布局在网页制作中起着至关重要的作用。只有学会设计网页布

局，才能让网页中的元素“各就各位” ，制作出高水平的网页。目前来说，构建网页布局最常用的是表格。设计网页时，将不同的网页元素放在不同表格和单

元格中，让网页变得井然有序。

学生通过本项目的学习，能：

1、 熟悉各种表格的选择方法

2、 理解并掌握表格的嵌套

3、 熟练掌握表格的编辑

4、 理解并掌握布局表格的使用

教学重点：

1、熟练掌握表格的编辑

2、正确使用嵌套表格布局页面

教学难点：

正确使用嵌套表格布局页面

项目效果

教学过程

设计

【任务一】布局主页 index.html ——表格的基本应用

所谓表格 （Table ）就是由一个或多个单元格构成的集合， 表格中横向的多

个单元格称为行（在 XHTML语言中以 <tr> 标签开始， </tr> 标签结束），垂直的

多个单元格称为列（以 <td> 标签开始， </td> 标签结束），如图 5— 1 所示。行与

列的交叉区域称为单元格，网页中的元素就放置在这些单元格中。

（一）插入表格