周庄中国第一水乡网页设计与制作教案Word格式文档下载.docx
- 文档编号:19112683
- 上传时间:2023-01-03
- 格式:DOCX
- 页数:18
- 大小:9.08MB
周庄中国第一水乡网页设计与制作教案Word格式文档下载.docx
《周庄中国第一水乡网页设计与制作教案Word格式文档下载.docx》由会员分享,可在线阅读,更多相关《周庄中国第一水乡网页设计与制作教案Word格式文档下载.docx(18页珍藏版)》请在冰豆网上搜索。
●表格的插入与格式设置
●表格的嵌套
【授课内容】
1、复习导入
点评学生作业,展示“ASAweb”网页效果,引入新课。
2、新课讲授:
项目:
“zhouzhuang”页面制作
1.创建站点文件夹及创建站点
1)在最后一盘符下创建站点文件夹“周庄”;
2)在站点下新建images文件夹,将素材复制到该文件夹下。
2.创建主页文件
1)新建index.html文件。
2)设置网页标题为“周庄——中国第一水乡”。
3)设置页面属性
①默认字体为12像素
②文本颜色为“#003300”,背景颜色为“#9D977C”,背景图片为“bgcloud.gif”,左右上下边距均为0像素。
③链接颜色设置为“#000000”,变换图像链接“#006600”,已访问链接“#666666”活动链接“#00ffff”,下划线设置为“始终无下划线
④新建库项目
⑤设置页面属性,链接颜色“#000000”已访问链接“#000000”始终无下划线。
⑥插入2行1列表格,宽750像素,居中对齐。
⑦在第1行插入图片“banner.JPG”,在第二行输入“首页|景区景点|都市风貌|生活购物|宾馆酒店|节日风情|现代建筑|古迹名胜|特色小吃|导游指南|旅游地图|其他图片”居中显示。
保存在zhouzhuang文件夹下“Library”内文件名为“top.lbi”。
4)插入表格,添加文字图片
1浮动工具文件选项卡中的资源,把top拖入网页中
②新建3行1列表格,宽度750.,居中。
③在该表格第2行插入10行1列表格,宽度100%,设置背景颜色为“#CDCAB9”,设置第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、jieri.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列中插入图片“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.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.对“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%居中对齐插入图片“d3.jpg”,拆分第2列为2行设置第1行宽度为37%输入文字“万三巡游”加粗,在第2行输入文字。
3)在第7行插入3行3列宽度为95%表格居中对齐。
设置第1行第1列单元格宽度50%,居中对齐,插入图片“d1.jpg”,设置第1行第2列单元格宽度4%,设置第1行第3列单元格宽度46%居中对齐,插入图片“d2.jpg”,分别在第2行第1列、第2行第3列、第3行第1列和第3行第3列输入文字。
5.对“gouwu.html”网页接着完成下列设置
1)设置第4行高度为30输入文字“=生活购物=”加粗。
2)合并第5行第6行,居中对齐,插入2行6列宽度为95%表格,合并第2、4、6列,设置第1行第1列行宽11%高34、第2列宽19%、第3列宽17%、第4列宽19%、第5列宽15%、第6列宽19%,输入文字“主编艺品”加粗,居中,设置第2行第1列行高50,输入文字(所有文字在images下的文本内有),在第2列中插入图片“g1.jpg”,第4列插入图片“g2.jpg”,第6列插入图片“g3.jpg”。
3)设置第7行行高30,插入宽度为95%高度为1的水平线。
4)合并第8行第9行,居中对齐,插入2行6列宽度为95%表格,合并第2、4、6列,设置第1行第1列行宽11%高34、第2列宽19%、第3列宽17%、第4列宽20%、第5列宽14%、第6列宽19%,输入文字“虎头鞋”加粗,居中,设置第2行第1列行高50,输入文字(所有文字在images下的文本内有),在第2列中插入图片“g5.jpg”,第4列插入图片“g4.jpg”。
保存
6.对“guji.html”网页接着完成下列设置
1)设置第4行高度为30输入文字“=古迹名胜=”加粗。
2)合并第5行第6行,居中对齐,插入2行4列宽度95%表格,设置第1行第1列单元格宽21%高34输入文字“张厅”加粗,居中对齐,设置第2行第1列高50输入文字,合并第2列1、2行设置宽度29%,插入图片“j1.jpg”,设置第4列宽度27%设置第4列宽度27%插入图片“j2.jpg”
4)合并第8行第9行,居中对齐,插入2行4列宽度95%表格,设置第1行第1列单元格宽21%高34输入文字“周庄南湖”加粗,居中对齐,设置第2行第1列高50输入文字,合并第2列1、2行设置宽度29%,插入图片“j3.jpg”,设置第4列宽度27%设置第4列宽度27%插入图片“j4.jpg”。
7.对“Jieri.html”网页接着完成下列设置
1)设置第4行高度为30输入文字“=节日风情=”加粗。
2)合并第5行第6行,居中对齐,插入2行2列宽度95%表格,合并第1列第1、2行,居中对齐,设置宽度为54%插入图片“f1.jpg”,设置第1行第2列宽度为46%输入文字“财神节”加粗,14像素,颜色为“#AD1311”,在第2行第2列输入文字。
4)合并第8行第9行,居中对齐,插入2行2列宽度95%表格,合并第1列第1、2行,居中对齐,设置宽度为54%插入图片“f2.jpg”,设置第1行第2列宽度为46%输入文字“打春牛”加粗,14像素,颜色为“#AD1311”,在第2行第2列输入文字。
8.对“jiudian.html”网页接着完成下列设置
1)设置第4行高度为30输入文字“=宾馆酒店=”加粗。
2)合并第5行第6行,居中对齐,插入2行4列宽度95%表格,设置第1行第1列单元格宽21%高34输入文字“周庄红庭别院主题客栈”加粗,居中对齐,设置第2行第1列高50输入文字,合并第2列1、2行设置宽度29%,插入图片“l1.jpg”,设置第1行第3列宽度23%,设置第4列宽度27%插入图片“l2.jpg”
4)合并第8行第9行,居中对齐,插入2行4列宽度95%表格,设置第1行第1列单元格宽21%高34输入文字“周庄花间堂唯美人文客栈”加粗,居中对齐,设置第2行第1列高50输入文字,合并第2列1、2行设置宽度29%,插入图片“l3.jpg”,设置第4列宽度27%设置第4列宽度27%插入图片“l4.jpg”。
9.对“qita.html”网页接着完成下列设置
1)设置第4行高度为30输入文字“=其他图片=”加粗。
2)合并第5行第6行,居中对齐,插入1行2列宽度95%表格,设置第1行第1列单元格宽19%高84插入图片“a.jpg”,设置第1行第2列宽19%,插入图片“b.jpg”。
4)合并第8行第9行,居中对齐,插入3行3列宽度95%表格,合并第1行,设置宽度20%高度20,插入图片“d.jpg”和“e.jpg”,设置第3行第1列高度41,插入图片“i.jpg”,第2列插入图片“f.jpg”,第3列插入图片“h.jpg”。
10.对“xiandai.html”网页接着完成下列设置
2)合并第5行第6行,居中对齐,插入2行2列宽度95%表格,设置第1行第1列宽度为21%高度34输入文字“爱渡风情小镇”,设置第2行第1列高度50输入文字,合并第2列1、2行居中对齐,插入图片“x2.jpg”。
4)合并第8行第9行,居中对齐,插入2行4列宽度95%表格,设置第1行第1列宽度为21%高度31输入文字“星座ktv”,设置第2行第1列高度50输入文字,合并第2列1、2行,设置宽度29%插入图片“x1.jpg”,设置第1行第3列宽度为22%输入文字“全福讲寺”,设置第2行第3列输入文字,合并第4列1、2行,设置宽度28%插入图片“x3.jpg”。
11.对“xiaochi.html”网页接着完成下列设置
1)设置第4行高度为30,输入“=特色小吃=”。
2)合并第5行第6行,居中对齐,插入2行6列宽度为95%表格,合并第2、4、6列,设置第1行第1列行宽11%高34、第2列宽19%、第3列宽17%、第4列宽19%、第5列宽15%、第6列宽19%,输入文字“袜底酥”加粗,设置第2行第1列行高50,输入文字(所有文字在images下的文本内有),在第2列中插入图片“1.jpg”,第4列插入图片“3.jpg”,第6列插入图片“2.jpg”。
4)合并第8行第9行,居中对齐,插入2行6列宽度为95%表格,合并第2、4、6列,设置第1行第1列行宽11%高31、第2列宽19%、第3列宽17%、第4列宽20%、第5列宽14%、第6列宽19%,输入文字“撑腰糕”加粗,设置第2行第1列行高50,输入文字(所有文字在images下的文本内有),在第2列中插入图片“4.jpg”,第4列插入图片“5.jpg”,第6列插入图片“6.jpg”。
12.对“zhinan.html”网页接着完成下列设置
1)设置第4行高度为15,输入“=导游指南=”。
2)设置第5行高度为354,插入图片“dy.jpg”
3)合并第6行第7行第8行第9行,拆分3列,设置最左一列宽度为6%,中间一列宽度为89%,最右一列宽度为5%,在中间一列输入文字,“周庄——一地行程及报价”、“一、行程”、“二、报价”、“联系方式:
”、“售票中心导游门市部热线:
”、“古牌楼导游门市部热线:
”、“联系人:
”、“邮箱:
”、“QQ:
”加粗。
13、复制index.html改名为“jingqu.html”。
14、打开浮动工具文件选项卡中的资源,双击top文件,设置“首页”等超链接。
“首页|景区景点”链接到“jingqu.html”,“都市风貌”链接到“dushi.html”等。
15、检查所有页面的超链接,查看是否能使用。
三、课堂小结:
学生总结本次课的知识要点,展示作品,互相评价,教师总结。
四、作业:
进一步完善“zhouzhuang”页面。
通过上网,为下次课制作网页“中国第一水乡——周庄”搜集相关素材。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 中国 第一 水乡 网页 设计 制作 教案