项目4使用表格布局制作页面及有效结合.docVIP

项目4 使用表格布局制作页面 一、教学建议 该项目主要介绍表格布局在网页中的应用，学生除了掌握利用表格进行简单的网页布局，还需要学会使用嵌套表格制作复杂的网页布局。 该项目理论知识详尽，要求结合上机实践操作，巩固学生的理论知识，提高学生的学习兴趣，以“项目总结”的形式小结所学知识，加深学生的印象，增强学习效果。 以掌握实际应用能力为导向，建议教师在教学的过程中辅导好项目后面“技能巩固”的操作题，让学生在实际操作的过程中提高专业技能，达到理论实践一体化的效果，以便学生更好更牢固的掌握知识点，学以致用。 二、教学简案 课题 任务1 使用表格布局制作简单页面 参考资料 教材 教学配套 光盘素材 教学方法 教师讲解、演示。学生讨论，上机实践操作。 授课节数 2课时 教学目标 1.使用表格布局制作简单页面。 2.设置表格的相关属性。 相关知识 1.表格布局。 2.表格的相关属性。 3.单元格的相关属性。 学习重点 1.能熟练使用表格布局进行网页页面的设计。 教学内容 表格布局 使用表格进行页面布局，能很好的控制文本、图像等网页元素在页面上出现的位置。通过设置表格和单元格的属性，实现对页面元素的准确定位，可以达到整齐划一的页面显示效果。 表格的相关属性 表格ID：表格在网页中的唯一标识 行、列：用于设置表格的行数和列数 宽：用于设置表格的宽度 填充：用于设置单元格中的内容与单元格边框之间的距离 间距：用于设置单元格与单元格之间的距离 对齐：用于设置表格的对齐方式 边框：用于设置表格边框的宽度 边框颜色：用于设置表格的背景颜色 背景颜色：用于设置表格的背景颜色 背景图像：用于设置表格的背景图像 注：表格中设置了背景颜色又设置了背景图像时，背景图像将会遮住背景颜色显示。 单元格相关属性 字体：用于设置表格中文本的字体 大小：用于设置表格的大小 水平：用于设置单元格内容的水平对齐方式 垂直：用于设置单元格内容的垂直对齐方式 宽、高：用于设置单元格的宽度和高度 背景：用于设置单元格的背景图像 背景颜色：用于设置单元格的背景颜色 边框：用于设置单元格边框的颜色 链接：用于设置单元格中内容的超链接 任务实施： 在Windows环境下使用“我的电脑”或“资源管理器”搜集见面素材。将“素材”文件夹中project04\images中的图片文件到我们已经建立的站点文件nwnw中的images文件夹中。 运行Dreamweaver CS3软件，在exapmple站点中新建一个网页文件，命名为ex01.html. 单击“插入”→“常用”工具栏的“表格”按钮，打开“表格”对话框，设置1行1列，宽度为“1000像素”，边框为“0”像素，“单元格边距”和“单元格间距”均为“0”像素。单击“确定”按钮，则在编辑区插入了一个1行1列的表格。设置表格ID为“top”。 将光标定在单元格中，设置单元格高度为70。单击“插入”→“常用”工具栏的“图像”按钮，在打开的“选择图像源文件”对话框中选择images文件夹中的图像logo.jpg，单击“确定”，即可将图像插入在当前单元格中。 选中该表格，在“属性”面板中设置背景颜色为“#333300”，在各单元格中输入文本。 逐一选中各单元格，设置单元格的高为“50像素”文本颜色为“#FFFFFF”对齐方式为水平“居中对齐”在各单元格输入相应文本。 逐一选中各单元格中的文本，设置字符大小为12，颜色为白色（#FFFFFF）。 同样的方法再插入一个1行1列的表格，宽度为“242像素”，边框为“0像素”，单元格边距和单元格间均为“0像素”。设置表格ID为“pic” 将光标定位在单元格中，在“属性”面板中设置水平为“居中对齐”垂直“居中”，高度为“288像素”。 插入images文件夹中的ct_01.jpg图像。 插入一个2行1列的表格，宽度为“242像素”，边框为“0像素”，单元格间距和边距为“0像素”设置表格ID为“nav” 选中第一个单元格，设置背景颜色为“#336600”，高度为“30像素”。再输入文本“栏目导航”，设置文本大小为“12”颜色为“白色（#FFFFFF）” 选中第二个单元格。设置高度为“150”垂直对齐方式为“居中”输入5行文本。选中这些文本，单击“文本”菜单→“列表”→“项目列表”。 同样的方法制作一个“联系方式”表格。设置表格ID为“cont”。第一个单元格的高度为“30”。第二个单元格的高度为“170”。第二个单元格中的文本换行采用ctrl+Enter方式。 同样的方法制作一个2行1列的表格，宽度为“746像素”边框为“0像素”单元格边距和单元格间距为“0像素”。设置表格ID为“company“。 选中第一个单元格，设置背景颜色为“#336600”，高度为“30像素”。其他设置同前。 在第二个单元格