周庄——中国第一水乡网页设计与制作教案

《周庄——中国第一水乡网页设计与制作教案》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、《网页设计与制作》电子教案（第17-20课时）授课时间：_3_月__28_日第_6_周星期四（第1-4节）授课班级：1135【教学目标】l了解表格在网页设计中的用途l掌握网页中表格的插入和编辑方法l能在网页中插入表格并设置格式l能在网页中利用表格布局页面【教学重点、难点】l表格的插入与格式设置l表格的嵌套【授课内容】一、复习导入点评学生作业，展示“ASAweb”网页效果，引入新课。二、新课讲授：项目：“zhouzhuang”页面制作1．创建站点文件夹及创建站点1)在最后一盘符下创建站点文件夹“周庄”；2)在站点下新

2、建images文件夹，将素材复制到该文件夹下。2．创建主页文件1)新建index.html文件。2)设置网页标题为“周庄——中国第一水乡”。3)设置页面属性①默认字体为12像素②文本颜色为“#003300”，背景颜色为“#9D977C”，背景图片为“bgcloud.gif”，左右上下边距均为0像素。③链接颜色设置为“#000000”，变换图像链接“#006600”，已访问链接“#666666”活动链接“#00ffff”，下划线设置为“始终无下划线④新建库项目⑤设置页面属性，链接颜色“#000000”已访问链接“#0

3、00000”始终无下划线。⑥插入2行1列表格，宽750像素，居中对齐。⑦在第1行插入图片“banner.JPG”，在第二行输入“首页

4、景区景点

5、都市风貌

6、生活购物

7、宾馆酒店

8、节日风情

9、现代建筑

10、古迹名胜

11、特色小吃

12、导游指南

13、旅游地图

14、其他图片”居中显示。保存在zhouzhuang文件夹下“Library”内文件名为“top.lbi”。4）插入表格，添加文字图片①浮动工具文件选项卡中的资源，把top拖入网页中②新建3行1列表格，宽度750.，居中。③在该表格第2行插入10行1列表格，宽度100%，设置背景颜色为“#C

15、DCAB9”，设置第1行高度30，输入文字“=最新加入=”，设置第2行对齐方式居中，插入图片“ad.GIF”，设置第3行高度30，插入宽度为95%高度为1的水平线④设置第10行背景颜色“#BEB8A8”输入文字“版权所有陈琪建议使用1024*768分辨率copyrignt@2007_2009”（所有文字在images下的文本内有）⑤保存网页，关闭Dreamweaver，到站点文件夹下把index.html复制10个，分别命名为“ditu.html、dushi.html、gouwu.html、guji.html、ji

16、eri.html、jiudian.html、qita.html、xiandai.html、xiaochi.html、zhinan.html”。⑥打开“index.html”设置第4行高度为30，输入“=精彩频道=”。⑦设置第5行居中对齐，插入2行6列宽度为95%表格，合并第2、4、6列，设置第1行第1列行宽15%高23、第2列宽19%、第3列宽14%、第4列宽19%、第5列宽15%、第6列宽18%，输入文字“：沈厅：”加粗，设置第2行第1列行高50，输入文字（所有文字在images下的文本内有），在第2列中插入图片

17、“image1.JPG”，第4列插入图片“image2.JPG”，第6列插入图片“image3.JPG”。⑧设置第6行行高30，插入宽度为95%高度为1的水平线。设置第7行居中对齐，插入2行6列宽度为95%表格，合并第2、4、6列，设置第1行第1列行宽14%高23、第2列宽19%、第3列宽14%、第4列宽20%、第5列宽14%、第6列宽19%，输入文字“：道院：”加粗，设置第2行第1列行高50，输入文字（所有文字在images下的文本内有），在第2列中插入图片“image4.JPG”，第4列插入图片“image5.

18、JPG”，第6列插入图片“image6.JPG”。⑨设置第8行行高30，插入宽度为95%高度为1的水平线。⑩设置第9行居中对齐，插入2行6列宽度为95%表格，合并第2、4、6列，设置第1行第1列行宽14%高23、第2列宽19%、第3列宽15%、第4列宽19%、第5列宽14%、第6列宽19%，输入文字“：全福寺：”加粗，设置第2行第1列行高50，输入文字（所有文字在images下的文本内有），在第2列中插入图片“image7.JPG”，第4列插入图片“image8.JPG”，第6列插入图片“image9.JPG”。3

19、．对“ditu.html”网页接着完成下列设置1）设置第4行高度为15输入文字“=旅游地图=”加粗。2）设置第5行高度为354插入图片“dt.jpg”居中显示。3）在第7行插入图片“dt2.jpg”居中显示。保存。4．对“dushi.html”网页接着完成下列设置1）设置第4行高度为15输入文字“=都市风貌=”加粗。2）把第5行拆分为2列，设置左边1列宽63