IASAweb网页设计与制作教案.docVIP

《网页设计与制作》电子教案（第 17-20 课时） 授课时间：_ 3_月__28_日 第_ 6_周 星期 四 （第 1-4节） 授课班级：1135 【教学目标】 了解表格在网页设计中的用途 掌握网页中表格的插入和编辑方法 能在网页中插入表格并设置格式 能在网页中利用表格布局页面 【教学重点、难点】 表格的插入与格式设置 表格的嵌套 【授课内容】 复习导入 点评学生作业，展示“中国网通”网页效果，引入新课。 新课讲授： 项目：“ASAweb”页面制作 1．创建站点文件夹及创建站点 在最后一盘符下创建站点文件夹“ASAweb”； 在站点下新建images文件夹，将素材复制到该文件夹下。 2．创建主页文件 新建index.html文件。 设置网页标题为“ASAweb”。 插入表格，设置表格属性。 ①插入5行1列表格，表格宽度为900像素，边框粗细为0，单元格边距和间距都为0。 ②设置第一个单元格背景图片为“img01.jpg”，宽度为“900”，高度为“423”。然后设置单元格顶端右对齐，再在其中插入2行2列、宽度为800像素的表格。 ③在刚插入的那张2行2列表格中第2行第1列插入图片“img02.gif”。设置第2行第2列背景图片为“img03.gif”，在其中再插入1行4列表格，宽度为90%，居中对齐。 输入文字“首页、公司简介、产品介绍、联系我们”，文字设置加粗、居中对齐、大小为16像素、白色。效果如图所示： ④新建jianjie.html文件。设置网页标题为“公司简介”。复制index.html的表格。 ⑤回到index.html中，设置最外层表格的第2行高度为168，然后插入1行3列，宽度为96%的表格，设置边框粗细为2像素，填充1像素，间距1像素，边框颜色为“#66cccc”，设置本表格居中对齐。 ⑥在刚才这个表格的第2列中插入1行2列宽度为98%的表格，输入文字（在images文件夹“文本.txt”提供），插入图片“img05.jpg”。设置第三列表格背景图片为“img06.jpg”，修改本表的单元格大小，宽度第一列为37%，第二列为40%，第三列为23%，高度为140，小标题字体为16像素，华文楷体、颜色#1A3181，内容字体为12像素，按照样张修改文字颜色。 ⑦设置最后两行高度为32像素，背景颜色为“#000032”，输入文字“Tel： 010/?Fax：（02） 123-4567?/?E - mail ：asaweb@”“Copyright ??2008?ASAWEB?All Rights?Reserved”，水平垂直均为居中对齐，白色，12像素大小。 3．对“公司简介”页面接着完成下列设置 1）修改页首单元格背景图片为“img07.jpg”。 2）设置最外层表格的第2行高度为564，然后插入2行2列，宽度为100%表格，边框粗细为0，单元格边距和间距都为0。 3）在刚插入的那张2行2列表格中第2行第1列插入5行2列、宽度为91%表格，边框粗细为0，单元格边距和间距都为0。 4）再把第1列5行合并，设置宽度为8%，在第2列第1行中设置背景图片“img08.gif”，设置行高258。在这个单元格内插入6行1列、宽度80%的表格，水平垂直均居中对齐，输入文字，设置“公司简介”下面一个单元格高度为1，背景颜色为白色，设置“公司简介”字体为黑体、白色。“创建历史”-“主要业务”单元格背景设置为白色。 5）设置左侧表格宽度为195像素，第3行背景图片为“img06.jpg”，高度为139，输入文字，设置文字颜色和字体。在第4行插入图片“img08.jpg”。 6）新建jieshao.html文件。设置网页标题为“产品介绍”。复制jianjie.html中的表格。 7）回到jianjie.html中，在右侧空白单元格内中插入2行2列宽度为100%的表格，输入文字（在images文件夹“文本.txt”提供），在第2行第1列中插入图片“img09.jpg”，设置第1行第1列宽度为45%，高度为88，第2行高度为478。 8）设置最后两行背景颜色为“#12296F”，高度各为32 ，输入文字，水平垂直均为居中对齐。 9）完成后样张如下： 4．对“产品介绍”页面接着完成下列设置 1）修改相关文字内容。 2）在右侧空白单元格内中插入2行2列表格，宽度为100%，合并左边1列单元格，插入1行2列宽度为100%表格，插入图片“img10.jpg”，输入文字。设置边框为2像素，颜色为“#33cccc”。 3）在第1行第2列中插入1行2列表格，输入文字，插入图片“img05.jpg”。 4）在第2行第2列中插入1行2列表格，输入文字，插入图片“img05.