表格布局（一）.doc

新课导入 3’ 新课教学 65’ 教学评价 17’ 课堂小结 5’ 教师讲解演示 教师布置任务、 学生探索学习、 教师讲解 学生展示并自评 教师评议完成情况 要设计一个网页，就要涉及到很多网页元素，例如图像、文本、动画、视频等等。如何将这些网页元素有机的组合起来，达到满意的视觉效果，这不仅需要网页元素有自身的特点，还必须把这些元素放在合适的位置上，这就是网页元素的定位，或称页面布局。 利用Dreamwever，可实现三种方式的页面布局：即表格布局、Div+CSS布局、框架布局。采用这些页面布局方法，可以简洁明了和高效快捷的将文本、图片和多媒体对象等网页元素有序地显示在页面上，从而设计出版式美观的页面效果。 本节课熟悉一下表格布局的基本操作及方法。 教师演示：表格布局基本操作（任务1）的效果。 任务一 表格布局基础 教师布置任务：表格基本操作。效果如下图： 学生讨论练习：根据操作提示步骤，自行探索、讨论、练习设计方法。 教师讲解：演示讲解学生操作中的问题。 参考操作步骤： 1．新建站点task1，指向文件夹E:\web3\task1，在站点中新建网页table.html。网页标题为“任务一——表格布局基础”。 2．设置table.html的页面属性，字体大小为12px，文本颜色为#333333。 3．使用任一种插入表格的方法插入一个6行4列的表格，表格宽度为600px，边框粗细为1px，并“居中对齐”。 4．切换至“代码”视图。修改代码： table width=600 border=1 align=center cellpadding=0 cellspacing=1 如下： table width=600 border=1 align=center cellpadding=0 cellspacing=1 bordercolor=#666666 !--设置表格边框颜色为#66666-- 5．选中最左侧一列的所有单元格，在单元格的属性窗口中设置高度为20px。 6．选择最上面一行所有单元格（tr），在单元格的属性窗口中设置背景颜色为#FFCCCC。 7．选择右下角5个单元格，在属性窗口中点击合并所选单元格按钮，合并单元格。 8．在所有相应单元格中填充内容，设置单元格属性“水平”为“居中对齐”。并设置最右一个单元格宽度为100px。完成上图所示效果。 教师布置任务：表格数据排序：组织数据是表格的一个重要的功能，“表格数据的排序”是一个比较实用的功能。效果如下图： 学生讨论练习：根据操作提示步骤，自行探索、讨论、练习设计方法。 教师讲解：演示讲解学生操作中的问题。 参考操作步骤： 1．复制“素材\任务1\排序表格源文件.doc”中表格至table.html中，效果如下： 2．表格属性：“居中对齐”，边框为0；所有的单元格，在单元格属性面板中设置“水平”“居中对齐”，高度为20px。 3．选择菜单【命令】－【排序表格】命令，打开“排序表格”对话框，设置以列1为序排列数据。 4．设置表格奇数行背景色为#D3D3D3，实现任务效果图。 教师布置任务：细线表格制作：在网页制作中，为了达到美观的效果，经常需要设置细线表格或只有外框线的表格。效果如下图： 学生讨论练习：根据操作提示步骤，自行探索、讨论、练习设计方法。 教师讲解：演示讲解学生操作中的问题。 参考操作步骤： 1.复制第一个任务中的表格, 选中表格，设置表格属性，间距为1，边框为0。 2.切换到“代码”视图，修改代码： table width=600 border=0 align=center cellpadding=0 cellspacing=1 为 table width=600 border=0 align=center cellpadding=0 cellspacing=1 bgcolor=#333333 !--设置表格背景颜色为#333333-- 3. 选中除标题行以外的单元格，设置单元格属性：背景颜色为#FFF