当前位置:首页 >> 政史地 >> 周庄——中国第一水乡网页设计与制作教案

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


《网页设计与制作》电子教案(第

17-20

课时)
授课班级:1135

授课时间:_ 3_月__28_日 第_ 6_周 星期 四 (第 1-4 节) 【教学目标】 ? 了解表格在网页设计中的用途 ? 掌握网页中表格的插入和编辑方法

? 能在网页中插入表格并设置格式 ? 能在网页中利用

表格布局页面 【教学重点、难点】 ? 表格的插入与格式设置 ? 表格的嵌套 【授课内容】 一、复习导入 点评学生作业,展示“ASAweb”网页效果,引入新课。 二、新课讲授: 项目: “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)插入表格,添加文字图片 ① 浮动工具文件选项卡中的资源,把 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、 行设置宽度 29%, 2 插入图片 “j1.jpg” 设置第 4 列宽度 27%设置第 4 列宽度 27% , 插入图片“j2.jpg”

3)设置第 7 行行高 30,插入宽度为 95%高度为 1 的水平线。 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 列输入文字。

3)设置第 7 行行高 30,插入宽度为 95%高度为 1 的水平线。 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”

3)设置第 7 行行高 30,插入宽度为 95%高度为 1 的水平线。 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” 。

3)设置第 7 行行高 30,插入宽度为 95%高度为 1 的水平线。 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”网页接着完成下列设置 1)设置第 4 行高度为 30 输入文字“=其他图片=”加粗。 2)合并第 5 行第 6 行,居中对齐,插入 2 行 2 列宽度 95%表格,设置第 1 行第 1 列宽度为 21%高度 34 输入文字“爱渡风情小镇” ,设置第 2 行第 1 列高度 50 输入文字,合并第 2 列 1、2 行居中对齐,插入图片“x2.jpg” 。

3)设置第 7 行行高 30,插入宽度为 95%高度为 1 的水平线。 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” 。

3)设置第 7 行行高 30,插入宽度为 95%高度为 1 的水平线。 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%,在中间一列输入文字, “周庄 —— 一地行程及报价”“一、 、 行程” 、 “二、 报价” 、 “联系方式:、 ” “售票中心导游门市部热线:、 ” “古牌楼导游门市部热线:、 ” “联系人:、 ”“邮 箱:、 Q:”加粗。保存 ”“Q

13、复制 index.html 改名为“jingqu.html” 。 14、打开浮动工具文件选项卡中的资源,双击 top 文件,设置“首页”等超链接。 “首页|景 区景点”链接到“jingqu.html”“都市风貌”链接到“dushi.html”等。 ,

15、检查所有页面的超链接,查看是否能使用。
三、课堂小结: 学生总结本次课的知识要点,展示作品,互相评价,教师总结。 四、作业: 进一步完善 “zhouzhuang”页面。 通过上网,为下次课制作网页“中国第一水乡——周庄”搜集相关素材。


更多相关文档:

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

周庄——中国第一水乡网页设计与制作教案_政史地_高中教育_教育专区。周庄——中国第一水乡,网页制作教案《网页设计与制作》电子教案(第 17-20 课时)授课班级:113...

《网页设计与制作》教案

教案2012 ~ 2013 学年第 二 学期学 部 工程技术学部 教研室 ( 实验室 ) 动漫 课授主职程课讲名班教称 网页设计与制作 级 11 动漫 师称 讲师 网页设计...

周庄教案

周庄教案_语文_小学教育_教育专区。课题:周庄水韵 ...周庄中国水乡之美” 周庄被 成为中国第一水乡...周庄水韵教案设计 暂无评价 9页 免费 周庄水韵教案...

网页设计与制作教案

任务一 创建框架网页 五、重难点: 会创建框架网页 (2016 年春学期电子档教案) 网页设计与制作 授课班级 1407 第 4 周第 1 次课 六、教学准备: 无七、教学...

周庄水教案

周庄教案_语文_初中教育_教育专区。电教优质课教案...的水乡古镇,毫无疑问,她就是“中国第一水乡周庄...附板书设计: 第一课时 水中倒影——美丽 对周庄...

网页设计与制作教案

网页设计与制作教案_工学_高等教育_教育专区。网页设计和发布流程第一步是对站点进行规划 第二步是创建站点的基本结构 第三步即可开始具体的网页创作过程 最后一步...

中国第一水乡——周庄

中国第一水乡——周庄_职业规划_求职/职场_实用文档。中国第一水乡——周庄 中国第一水乡——周庄广东省华南师范大学附小三年级罗丹我去过这么多地方,令我印象最 ...

周庄水韵教案设计

周庄水韵教案设计_语文_初中教育_教育专区。———...3、情感态度与价值观 (1)整体感知周庄水乡动人的...江苏苏州的周庄被誉为 “中国第一水乡” 则展示了...

网页设计与制作 教案

主要参考 书目 赵喜清,崔海涛《网页设计与制作》哈尔滨工业大学出版社,2010.9 孙振业《网页设计与制作》高等教育出版社,2009.3 备注 第 1 页 课程教案(№:1...
更多相关标签:
水乡周庄 | 江苏水乡周庄旅游 | 周庄水乡一日旅游 | 水乡周庄一日游 | 周庄梦里水乡客栈 | 周庄水乡旅游 | 周庄水乡游 | 江南水乡周庄 |
网站地图

文档资料共享网 nexoncn.com copyright ©right 2010-2020。
文档资料共享网内容来自网络,如有侵犯请联系客服。email:zhit325@126.com