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

课程教案

授课内容 授课班级 教学方法与手段 项目五 用表格构建网页布局 授课学时 12课时 讲授法、演示法、讨论法。多媒体教学 本项目的工作是为某珠宝饰品公司设计网站，具体要求如下。 1.具有产品发布管理系统。通过该系统可以实现产品的展示发布，管理者可以任意添加、修改产品类别和产品列表，可以上传产品图片，通过可视化文章编辑器添加、修改产品说明文字。 2.在线留言系统。留言系统是一种电子便签管理系统，客户可以将他的意提交表单同时发送邮件和信息至系统数据库。 项目内容 见和要求通过电子表单进行提交，要完成上述任务，在网站制作时必须要注意网页的布局，特别是在产品发布系统中，网页布局在网页制作中起着至关重要的作用。只有学会设计网页布局，才能让网页中的元素“各就各位”，制作出高水平的网页。目前来说，构建网页布局最常用的是表格。设计网页时，将不同的网页元素放在不同表格和单元格中，让网页变得井然有序。 学生通过本项目的学习，能： 1、 熟悉各种表格的选择方法 教学目标 2、 理解并掌握表格的嵌套 3、 熟练掌握表格的编辑 4、 理解并掌握布局表格的使用 教学重点： 1、熟练掌握表格的编辑 2、正确使用嵌套表格布局页面 教学难点： 正确使用嵌套表格布局页面 项目效果 教学重点与难点 教学过程设计 【任务一】布局主页 index.html——表格的基本应用 所谓表格（Table）就是由一个或多个单元格构成的集合，表格中横向的多个单元格称为行（在XHTML语言中以标签开始，标签结束），垂直的多个单元格称为列（以标签开始，标签结束），如图5—1所示。行与列的交叉区域称为单元格，网页中的元素就放置在这些单元格中。 （一）插入表格 Dreamweaver CS3提供了非常完善的表格编辑功能，首先介绍如何在网页文档中插入表格。 步骤 1 首先在文档页面上要插入表格的位置单击，以确定插入点位置。 步骤 2 单击“常用”插入栏中的“表格”按钮，打开“表格”对话框，设置各项参数后，单击“确定”按钮，即可插入表格，如图所示。 下面简单介绍一下“表格”对话框中几个重要选项的意义。 ? 表格宽度（Width）：设置表格宽度值，否则，其宽度将随其中的内容而改变。 ? 在Dreamweaver中，最常使用的单位是像素和百分比。像素使用0或大于0的整数表示；百分比是相对于浏览器而言的，使用 0 或百分比表示。 ? 边框粗细（Border）：是指整个表格边框的粗细，标准单位是像素。整个表格外部的边框叫外边框，表格内部单元格周围的边框叫内边框。 ? 单元格边距（Cell padding）：也叫单元格填充，是指单元格内部的文本或图像与单元格边框之间的距离，标准单位是像素。 ? 单元格间距（Cell spacing）：是指相邻单元格之间的距离，标准单位是像素。 （二）选择表格和单元格 在Dreamweaver中选择表格的方法非常简单，只需用鼠标单击表格边框线即可。当表格外框显示为黑色粗实线时，就表示该表格被选中，另外，还可以通过“标签选择器”选择表格。具体做法是：在表格内部任意处单击鼠标，然后在“标签选择器”中单击对应的“