第五课 使用表格布局网页(二).doc

吉林华桥外国语学院教案用纸课 题第5课 使用表格布局网页（2）授课时间2教学目的通过本节课学习，使学生进一步掌握使用表格进行网页布局的方法，掌握圆角表格的制作方法及超链接样式的设置。教学重点 使用表格进行网页布局 制作圆角表格 设置超链接样式教学难点 表格布局网页教学方法 理论讲解，少讲多练 实例引导 样文演示教学手段 广播教学教 学 过 程教学环节教 学 内 容1导入新课使用表格可以定位网页中的元素，使网页显得井然有序。通过本节课实例的学习，使同学们进一步熟悉表格的基本操作和运用表格布局网页的方法。2讲授新课第5课 使用表格布局网页（2）一、表格的基本操作（1）如何新建表格？（2）如何选择表格、如何插入行和列？（3）表格的间距、填充分别代表什么含义？（4）如何为表格设置背景色及背景图像？（5）如何选择单元格？如何设置单元格内对象的对齐方式？（6）如何修改单元格的背景色？如何合并单元格？二、实例应用创建产品展示型网站首页index.html的制作：（1）新建“adorning”站点，拷贝素材文件到站点“images”文件夹中。（2）新建主页index.html。（3）打开index.html文档，修改页面属性，如下图所示。（4）新建表格，设置行数和列数分别是1和2，表格宽度是778像素，其他为0，暂称表格1。（5）在表格1第1行第1列单元格中插入图像index_1.jpg，对齐方式为“左对齐”和“顶端”对齐；第1行第2列单元格中插入图像index_2.jpg，对齐方式为“右对齐”和“顶端”对齐。利用吸管工具设置表格的背景色同图片背景色一致。（6）将光标定位在表格1的右侧，插入一个1行6列，宽为778像素的表格，暂称表格2。（7）设置表格2居中对齐，填充、边框、间距均为0，高度为32px，背景颜色为“#B80303”,如图所示。（8）设置表格2第一个单元格的宽度为380px,第2、3、4、5个单元格的宽度为75px，并输入相应文字，修改文字属性到合适，如图所示。（9）运用前面的方法，在表格2的下方插入一个1行、3列，宽为778像素的表格，暂称表格3。（10）设置表格3的居中对齐，背景颜色为白色，在第1个单元格中插入图像index_3.jpg。（11）在表格3第2个单元格中插入一个2行2列，宽度为387像素的表格，暂称表格4。在表格4第1行的两个单元格中插入图片index_4.jpg和index_5.jpg，第2行两个单元格中输入文本“镶钻发抓”、“镶钻发卡”，设置文字的颜色为红色，居中对齐。为了让页面看起来更合理，将表格4的单元格间距改为10.（12）在表格4下方插入一个1行、2列，宽为387像素的表格，暂称表格5。在表格5第1列插入图像index_6.jpg，在第2列单元格中输入文本，设置属性到合适。(13)在表格3的第三个单元格中插入一个5行1列，宽为145像素，单元格间距为5的表格，暂称表格6.（14）设置表格6的第一个单元格高度为25px，在其中输入文本“产品展示”，左对齐，在下面的4个单元格中分别插入图片index_7.jpg、index_8.jpg、index_9.jpg、index_10.jpg，如图所示。（15）在表格3的下方插入一个1行、2列，宽为778的表格，暂称表格7，设置其高度为50，背景色为黑色，居中对齐。在表格7第2个单元格中输入文本copyright2007 版权所有。（16）按F12，预览网页。三、圆角表格 在做网页时，为了美化页面，常常要把表格制作成圆角表格，这样可以使整个页面看起来更加柔和、美观。 子页面ear.html的制作：（1）复制首页index.html，粘贴到站点中，重命名为ear.html。（2）编辑文档ear.html。删除表格4、表格5。（3）在表格3第2和单元格中插入一个1行、1列宽度为387像素的表格，居中对齐，并使用图片product_01.jpg和product_02.jpg制作鼠标经过图像。（4）在鼠标经过图像表格下方插入一个3行、3列，宽为92%像素的表格，居中对齐。（5）在该表格的第1、3、7、9单元格中分别插入图片EAR_1.jpg、EAR_3.jpg、EAR_7.jpg和EAR_9.jpg。（6）将该表格的第2、4、6、8单元格的背景图像分别设置为EAR_2.jpg、EAR_4.jpg、EAR_6.jpg和EAR_8.jpg，调整单元格大小到合适，如图所示。（7）在第5个单元格中输入文本，左对齐。（8）按F12，预览文档。四、设置超链接样式 （1）打开index.html。（2）选中文本“产品展示”，超链接到子页ea