第六课主页页面布局（一）.docVIP

第六章：主页页面布局（一） 课题名称：6．1运用表格构造网页页面 课时：2节 教学目标 1．知识与技能目标 掌握运用表格进行页面的布局。 2．操作技能目标 熟练掌握 1）插入表格完成网页布局。 2）设置表格的边框和间距等调整表格，及单元格的分割和合并等。 3）在布局模式中绘制布局表格和绘制布局单元格。 4）用图像和文字填充表格。 5）表格属性面板的有关设置。 教学分析与准备 1．教学重点 1）设置表格的边框和间距等调整表格，及单元格的分割和合并等。 2）在布局模式中绘制布局表格和绘制布局单元格。 3）表格属性面板的有关设置。 2．教学难点 运用表格或者表格嵌套进行页面的布局。 3．教学策略 讲授、演示、讨论相结合 4．教学环境 多媒体网络机房 学习过程 教学组织 教学内容 备注 课前准备 范例欣赏与评述 （建议教学1分钟） 要点分析（建议教学4分钟） 操作示范与学生同步练习（建议教学40分钟） 教师应注意要点的介绍和应用示范。 学生练习（建议教学40分钟） 学生练习中存在问题的评述与知识小结（建议教学4分钟） 作业布置（建议教学1分钟） 在Dreamweaver中建立站点temp，本章资源包中的“第六章”文件夹作为站点文件夹。 欣赏范例：实例一\index.html 在Dreamweaver编辑视图中打开该网页，删去页面中的图像和文字可得页面的表格布局主体结构如图所示。其中分别用绿色、红色和蓝色框线表示四个表格，察看表格之间相互包含和嵌套的关系。 讲述时让学生熟悉设计视图中的标签选项，以选中表格。 完成第1步至第21步的步骤，要点如下： 1、在第1步至第3步中重点在于插入表格和表格属性面板的使用。 2、在第4步中重点在于表格的嵌套。 3、在第5步至第7步中重点在于单元格拆分、合并、调整及插入图像。 4、在第8步至第11步中重点在于运用布局模式随心所欲布局表格和单元格。 5、在第12步至第14步中重点在于单元格拆分、合并、调整及设置文本。 6、在第15步至第16步中重点在于熟练运用布局模式。 7、在第21步中重点在于“#”表示空链接。 教材中的技能拓展： 请修改“技能拓展\表格布局\第一题\index初始.htm”至如图6-1-27红色框所示的页面效果。参考网页：index（完成）方法一.htm（布局模式中绘制布局单元格实现）和index（完成）方法二.htm（在标准模式中插入3行3列的表格，然后调节单元格宽度和高度而实现）。 图6-1-27 图6-1-28 图6-1-30 2、关于表格应用的技巧： （4）制作精美圆角表格（效果可参见：技能拓展\表格布局\第二题\制作精美圆角表格\index.htm） 为了美化网页，常常把表格边框的拐角处做成圆角，这样可以避免直接使用表格直角的生硬，使得网页整体更加美观。用图片制作圆角表格是最常用的方法，它能很好地适应各种浏览器和不同分辨率。 在Dreamweaver中images/t1.gif，从视觉上形成了表格的圆角效果。 1、插入表格完成网页布局。 2、设置表格的边框和间距等调整表格，及单元格的分割和合并等。 3、在布局模式中绘制布局表格和绘制布局单元格。 4、用图像和文字填充表格。 5、“#”表示空链接。 教材中的技能拓展： 2、关于表格应用的技巧： （1）一个象素宽的分隔线 （2）利用“cellspacing”属性制作细线表格 （3）利用“cellpadding”属性制作等间距细线表格 可以组织学生自行浏览。 部分组织学生思考与回答。 指导学生跟做，并理解其中的要点。 教师指导 教师指导