贵州理工大学-高考英语

《设计网站首页》教案设计
本资料为woRD文档，请点击下载地址下载全文下载地址
一、教学设计部分
教学内容分析
R本课的主要内容与地位
本节课学习的内容是设计网站的首页。首页如同一本书
的封面、一个戏曲人物的脸谱，应该能够反映出整 个网站的
整体风格和特色，让访问者通过网站首页就能对整个网站有
所了解。所以，网站首页的 设计是整个网站设计的重点。
R本课与前后内容的关系
本课是在第一课的规划设计 基础之上进行的学习活动。
首页的设计一定要按照规划进行。本节中涉及的知识点（编
辑网页： 文字输入和编辑、插入图片、插入水平线；保存、
预览和新建网页）是网站制作过程中需要反复用到的， 所以
学生应熟练掌握。
教学目标分析
R知识目标技能目标
·知识目标
⑴认识网页的工作原理；
⑵了解网页编辑的一般过程。
·技能目标
⑴熟练掌握在网页中输入文字、插入图片、插入水平线

的操作；
⑵掌握网页的新建、预览和保存。
R过程与方法目标
⑴对网页操作中基本概念（首页、网页、网页标题等）
有清晰的认识；
⑵在操作中体会网 页中图文混排遇到的困难，探索解决
之道，为下一节课──用表格布局网页的学习埋下伏笔。
R情感态度与价值观目标
感受身边版面设计的素材：广告、报刊、课本，学以致
用，将其用于网页设计中。
R本课的重难点
重点：插入图片和水平线。
难点：图片和水平线属性的设置、嵌入式文件的保存。
R本课的课时分配建议
1课时
教学策略设计建议
R教法建议
因FrontPage与学生 之前学习的word、Excel同属微软
的office家庭软件，在操作上有许多相同或相似之处， 所
以在教学过程中，教师应鼓励学生对照word中的操作完成
文字的输入与编辑、插入与编辑 图片等操作；采用分组设置、
对比效果的形式探究“水平线属性”对话框中各参数的含义，

从而加深学生对水平线的理解；在网页保存环节中，嵌入式
文件的保存是学生从来没有接触过 的知识点，教师应安排学
生将不同的网页素材保存在站点中的不同文件夹中，以此达
到强化的目 的；组织学生进行网页预览时，提醒学生注意站
点文件夹中文件的变化和HTmL窗口中代码的变化；讲 解新
建网页时，可以让学生尝试使用其它网页格式新建网页，拓
展学生网页设计的思路。
R学法建议
对照以前学过的word中的操作，总结FrontPage与其
在操作上的不同，大胆尝试以不同的方式和途径完成老师交
给的任务。
教学资源与环境建议
R本课教学资源索引
教师应为学生提供足够多的各种格式、各种大小的图片
素材。
R教学环境准备建议
教学评价建议
R自评、互评、师评要注意的问题
学生在设计网站首页时是否能对照word完成相似的操
作，是否能对新网页中的素材进行灵活的设置。
教学过程参考案例
第一阶段：导入新课，明确学习目标

教学环节
教师活动
学生活动
设计理念
导入新课
播放《说唱脸谱》音乐。
师：脸谱能准确反映出人物的性格，一个网站的“脸”
是什么？
师：我们如何给我们的网站设计脸谱呢？这就是本节课
我们要学习的内容──设计网站首页（出示）。
学生讨论答案──网站首页。
结合第一节课的规划，讨论如何设计首页。
通过脸谱联想到首页，激发学生学习网页设计的热情。
第二阶段：范例精讲，学生自主探究，完成范例
教学环节
教师活动
学生活动
设计理念
学习与探究
任务一：输入文字
出示网页输入文字后的效果。
任务二：插入图片

出示插入图片后的效果，并提示图片存放位置。
要求学生分别使用控制柄和设置图片属性的方法调整
图片大小。
任务三：插入水平线
根据教材提示，使用默认值插入水平线，然后分组修改
“水平线属性”对话框各参数。
将前面输入的“=”组成的线替换为水平线。
任务四：保存网页
出示任务，由学生探索嵌入式文件保存的技巧。
任务五：预览网页
分组尝试两种预览网页的方法，并作比较。
任务六：添加新网页
根据教材提示为网站添加新网页。
对比老师出示网页效果进行文字的输入和编辑，比较与
word中操作的异同。
根据样例插入相应图片。
尝试操作并比较说明二者的区别。
分组实验，填写表1-2-1。
操作并体验二者在表现效果上的差异。
预览网页。
完成操作，并探索新建网页的其它方法。比较它们的优
缺点。

前两个任务与word操作大同小异，让学生通过对比强
化记忆。

通过学生自己实践理解水平线对话框的设为方法。
网页制作中的学用操作，应熟练掌握。
第三阶段：知识、情感拓展
教学环节
教师活动
学生活动
设计理念
知识与情感
师：请大家回想一下，你从小到现在，你的妈妈给你洗
了多少次脚？你为她洗过多少次呢？
师：如果还没有做，就从今天开始吧！
请同学们课下完成体验任务，根据自己的感受设计网页
Feeling1．htm。
生：记不清。
生：还没有。
放学后完成这一体验活动，并将感受以网页的形式表达
出来。
让学生通过这一活动体验感受父母对自己的爱。能够以
网页的形式表达自己的感受。

第四阶段：综合实践，巩固与提高，自由创作，迁移运
用
教学环节
教师活动
学生活动
设计理念
实践与创新
师：本节课的学习内容基本结束，但我们探索的路还有
很长，请大家完成二级网页Pare nts．htm的设计。
教师巡视学生制作的情况，并进行指导。
师：预览网页，调整浏览器窗口，你能发现网页的变化
吗？怎样才解决这个问题呢？
根据图1-1-6（b）设计网页。
操作并观察片面的变化。
在学习与探究基础上进行自主的网页创作。
设疑，为下一节课“网页中表格”作知识铺垫。
同时，制作的二级网页也是为第五课准备超链接的网页
素材。
第五阶段：教学总结，设疑激趣，为下一节课作好铺垫
教学环节
教师活动
学生活动

设计理念
课堂小结
课堂小结本节课的学习内容。
师：请同学们通过浏览器预览自己刚刚制作的网页，然
后任 意改变浏览器窗口的大小，看看网页中已经排好的版面
是不是发生了变化？有防止这种现象的发生的办法 吗？
预览网页，观察版面的变化，思考解决的方法。
承上启下，激发学生进一步学习网页制作的兴趣。
教学反思
本节课的知识点与之前 学过的word有很多相同或相似
之处，所以在教学过程中尽量把学习知识的过程交给学生，
由 他们通过自己的实验和比对，掌握相应知识的要点和操作
方法。并在本节课结束前设疑，为下一节课的学 习作好准备。
二、补充资料部分
．学件
名称
文件名
输入并编辑文字
文字．swf
插入图片
插入图片．swf
插入水平线

水平线．swf
网页的保存、预览和新建
网页操作．swf
2．资料库
网站首页设计的一些“特色”
通过考察对比，笔者发现了很多网站的首页有四大共同
点：“长，闪，挤，花”。
一、“ 长”。长页面的领军者应该是我们的大型门户网站。
现在能生存下来的大型门户各个实力不凡，又纷纷上 市，其
他网站能与他们页面相似应该也能说明实力相似，这几家大
型门户已经给用户形成了“长 则是好”的印象，于是众多网
站都纷纷“长”起来了。无论是综合性网站还是专业性网站，
只要 有内容，就能做多长就做多长，没有内容，抄袭别人内
容也要做长，以至于不少实力有限的网站只是首页 很长，到
了栏目页面（二级页面）就简陋的可怜了。
长的基础就是要内容要多，这些众多 的长网站在组织内
容的思路上基本是一致的，就是把二级页面的内容摘要的放
在首页上。首页分 成若干个相应的通栏的大块儿（这样可以
逐个部分的下载页面，易于显示），再在每两块之间加一条广告，最后再在页面的最上面加一个更综合的区域，所谓的
重中之重，这样以来页面想短都短不了。
按照jakobNielsen的说法：网站首页的长度不应该超

过4屏。 当然这个准则也未必就那么准确，但是至少应该承
认页面不是越长越好的。
二、“闪”。 就是网页上能动的东西──动画。主要是Gif
动画、Flash动画、脚本语言实现的图片交替效果， 还有就
是弹出窗口。动画对网页表现本应该是个很好的补充，但是
现在的实际效果是对网页的干 扰。
虽然弹出窗口里的内容不一定是动画，但的弹出效果绝
对是最具视觉冲击力。还好， 现在有越来越多的雷锋式的好
公司提供了能屏蔽弹出窗口的工具。
脚本语言实现的图片交 替效果目前主要是用在网站头
条的图片报道上，虽然是动，分散用户的注意力，好在这种
方式还 是为了给用户提供尽可能多的信息，应该值得肯定，
也应该是动画应用于网络的发展方向。
Gif动画是传统的动画形式，但在Flash动画面前，它
的生存空间越来越小。
Flash动画无疑是网页动画的主力，其文件小、效果好。
三、“挤”。我们的网站看上去满满当当的，比公共汽车
还挤。
与英文相比，中文本身就 显得比较复杂，对于有链接的
文字国内很多网站又往往更倾向于传统的随时保持下划线
的方式， 再加上小的几乎不存在的行间距，使得页面看上去
分外拥挤。

经常可以看 到某网站为了突出重点内容而使用14pt的
字号，然而却不加大该内容与其他内容的距离，这样只能使
页面看上去更拥挤。
第四是“花”，中很多网站的色彩之绚烂，几乎无以复
加。
在网站中，通常将各个栏目摘要排放在首页上，每一个
栏目会有一种主色调，这样一来，首 页上的色彩自然就很丰
富了。
当然，分栏目确定主色调的设计方式本身并没有错误，也不足以搞“花”页面。然而实际情况却更复杂。以文字为
例，未点击的链接文字有黑色和蓝色，重 点的文字会用红色，
点击后的文字链接是紫色，无链接且不重要的文字是灰色，
此外为了突出某 一个重点内容会添加一个醒目的背景色或
文字颜色。
网页设计师为了表明自己工作用心， 会给每一个子栏目
的标题部分设计一个很具有特色的背景，这些文字再与数不
胜数的图片、动画 交相辉映，使得用户可以在一个页面上将
电脑可以显示的全部色彩尽收眼底。
引用Don aldNorman在《emotionaldesign》一书中的理
论，设计可以分为三种层次：本 能水平的设计、行为水平的
设计、反思水平的设计。本能水平的设计是满足人类本能审
美需求的 设计，也就是漂亮、美观的设计；行为水平的设计

是注重效用的设计，注重功能、易用性 、可用性；反思水平
的设计注重信息、文化的作用，一件产品被设计的很独特、
出众、引人瞩目 ，用户会因为始终这个产品而产生乐趣，产
生满足感。
根据这个理论，中国网站的设计普 遍达没能实现本能水
平的设计，虽然网站的BoSS、设计师本人都希望把网站设计
的很漂亮， 吸引用户的眼球。行为水平的设计逐渐被重视了，
不过目前基本上还是停留在不高的水平上。上面说到的 国内
很多网站的种种问题实际上正式在反思水平上的设计，一种
变相的反思水平设计。
造成上述网站首页设计问题的罪魁并不是设计师没水
平或者用户没品味，而是产品不够，这 表面上的“多”其实
是由于“少”造成的。用户对网络内容的需求引导着网站的
设计，策划人员 有意无意地在迎合着这样的需求。

《设计网站首页》教案设计
本资料为woRD文档，请点击下载地址下载全文下载地址
一、教学设计部分
教学内容分析
R本课的主要内容与地位
本节课学习的内容是设计网站的首页。首页 如同一本书
的封面、一个戏曲人物的脸谱，应该能够反映出整个网站的
整体风格和特色，让访问 者通过网站首页就能对整个网站有
所了解。所以，网站首页的设计是整个网站设计的重点。
R本课与前后内容的关系
本课是在第一课的规划设计基础之上进行的学习活动。
首页的设 计一定要按照规划进行。本节中涉及的知识点（编
辑网页：文字输入和编辑、插入图片、插入水平线；保 存、
预览和新建网页）是网站制作过程中需要反复用到的，所以
学生应熟练掌握。
教学目标分析
R知识目标技能目标
·知识目标
⑴认识网页的工作原理；
⑵了解网页编辑的一般过程。
·技能目标
⑴熟练掌握在网页中输入文字、插入图片、插入水平线

的操作；
⑵掌握网页的新建、预览和保存。
R过程与方法目标
⑴对网页操作中基本概念（首页、网页、网页标题等）
有清晰的认识；
⑵在操作中体会网 页中图文混排遇到的困难，探索解决
之道，为下一节课──用表格布局网页的学习埋下伏笔。
R情感态度与价值观目标
感受身边版面设计的素材：广告、报刊、课本，学以致
用，将其用于网页设计中。
R本课的重难点
重点：插入图片和水平线。
难点：图片和水平线属性的设置、嵌入式文件的保存。
R本课的课时分配建议
1课时
教学策略设计建议
R教法建议
因FrontPage与学生 之前学习的word、Excel同属微软
的office家庭软件，在操作上有许多相同或相似之处， 所
以在教学过程中，教师应鼓励学生对照word中的操作完成
文字的输入与编辑、插入与编辑 图片等操作；采用分组设置、
对比效果的形式探究“水平线属性”对话框中各参数的含义，

从而加深学生对水平线的理解；在网页保存环节中，嵌入式
文件的保存是学生从来没有接触过 的知识点，教师应安排学
生将不同的网页素材保存在站点中的不同文件夹中，以此达
到强化的目 的；组织学生进行网页预览时，提醒学生注意站
点文件夹中文件的变化和HTmL窗口中代码的变化；讲 解新
建网页时，可以让学生尝试使用其它网页格式新建网页，拓
展学生网页设计的思路。
R学法建议
对照以前学过的word中的操作，总结FrontPage与其
在操作上的不同，大胆尝试以不同的方式和途径完成老师交
给的任务。
教学资源与环境建议
R本课教学资源索引
教师应为学生提供足够多的各种格式、各种大小的图片
素材。
R教学环境准备建议
教学评价建议
R自评、互评、师评要注意的问题
学生在设计网站首页时是否能对照word完成相似的操
作，是否能对新网页中的素材进行灵活的设置。
教学过程参考案例
第一阶段：导入新课，明确学习目标

教学环节
教师活动
学生活动
设计理念
导入新课
播放《说唱脸谱》音乐。
师：脸谱能准确反映出人物的性格，一个网站的“脸”
是什么？
师：我们如何给我们的网站设计脸谱呢？这就是本节课
我们要学习的内容──设计网站首页（出示）。
学生讨论答案──网站首页。
结合第一节课的规划，讨论如何设计首页。
通过脸谱联想到首页，激发学生学习网页设计的热情。
第二阶段：范例精讲，学生自主探究，完成范例
教学环节
教师活动
学生活动
设计理念
学习与探究
任务一：输入文字
出示网页输入文字后的效果。
任务二：插入图片

出示插入图片后的效果，并提示图片存放位置。
要求学生分别使用控制柄和设置图片属性的方法调整
图片大小。
任务三：插入水平线
根据教材提示，使用默认值插入水平线，然后分组修改
“水平线属性”对话框各参数。
将前面输入的“=”组成的线替换为水平线。
任务四：保存网页
出示任务，由学生探索嵌入式文件保存的技巧。
任务五：预览网页
分组尝试两种预览网页的方法，并作比较。
任务六：添加新网页
根据教材提示为网站添加新网页。
对比老师出示网页效果进行文字的输入和编辑，比较与
word中操作的异同。
根据样例插入相应图片。
尝试操作并比较说明二者的区别。
分组实验，填写表1-2-1。
操作并体验二者在表现效果上的差异。
预览网页。
完成操作，并探索新建网页的其它方法。比较它们的优
缺点。

前两个任务与word操作大同小异，让学生通过对比强
化记忆。

通过学生自己实践理解水平线对话框的设为方法。
网页制作中的学用操作，应熟练掌握。
第三阶段：知识、情感拓展
教学环节
教师活动
学生活动
设计理念
知识与情感
师：请大家回想一下，你从小到现在，你的妈妈给你洗
了多少次脚？你为她洗过多少次呢？
师：如果还没有做，就从今天开始吧！
请同学们课下完成体验任务，根据自己的感受设计网页
Feeling1．htm。
生：记不清。
生：还没有。
放学后完成这一体验活动，并将感受以网页的形式表达
出来。
让学生通过这一活动体验感受父母对自己的爱。能够以
网页的形式表达自己的感受。

第四阶段：综合实践，巩固与提高，自由创作，迁移运
用
教学环节
教师活动
学生活动
设计理念
实践与创新
师：本节课的学习内容基本结束，但我们探索的路还有
很长，请大家完成二级网页Pare nts．htm的设计。
教师巡视学生制作的情况，并进行指导。
师：预览网页，调整浏览器窗口，你能发现网页的变化
吗？怎样才解决这个问题呢？
根据图1-1-6（b）设计网页。
操作并观察片面的变化。
在学习与探究基础上进行自主的网页创作。
设疑，为下一节课“网页中表格”作知识铺垫。
同时，制作的二级网页也是为第五课准备超链接的网页
素材。
第五阶段：教学总结，设疑激趣，为下一节课作好铺垫
教学环节
教师活动
学生活动

设计理念
课堂小结
课堂小结本节课的学习内容。
师：请同学们通过浏览器预览自己刚刚制作的网页，然
后任 意改变浏览器窗口的大小，看看网页中已经排好的版面
是不是发生了变化？有防止这种现象的发生的办法 吗？
预览网页，观察版面的变化，思考解决的方法。
承上启下，激发学生进一步学习网页制作的兴趣。
教学反思
本节课的知识点与之前 学过的word有很多相同或相似
之处，所以在教学过程中尽量把学习知识的过程交给学生，
由 他们通过自己的实验和比对，掌握相应知识的要点和操作
方法。并在本节课结束前设疑，为下一节课的学 习作好准备。
二、补充资料部分
．学件
名称
文件名
输入并编辑文字
文字．swf
插入图片
插入图片．swf
插入水平线

水平线．swf
网页的保存、预览和新建
网页操作．swf
2．资料库
网站首页设计的一些“特色”
通过考察对比，笔者发现了很多网站的首页有四大共同
点：“长，闪，挤，花”。
一、“ 长”。长页面的领军者应该是我们的大型门户网站。
现在能生存下来的大型门户各个实力不凡，又纷纷上 市，其
他网站能与他们页面相似应该也能说明实力相似，这几家大
型门户已经给用户形成了“长 则是好”的印象，于是众多网
站都纷纷“长”起来了。无论是综合性网站还是专业性网站，
只要 有内容，就能做多长就做多长，没有内容，抄袭别人内
容也要做长，以至于不少实力有限的网站只是首页 很长，到
了栏目页面（二级页面）就简陋的可怜了。
长的基础就是要内容要多，这些众多 的长网站在组织内
容的思路上基本是一致的，就是把二级页面的内容摘要的放
在首页上。首页分 成若干个相应的通栏的大块儿（这样可以
逐个部分的下载页面，易于显示），再在每两块之间加一条广告，最后再在页面的最上面加一个更综合的区域，所谓的
重中之重，这样以来页面想短都短不了。
按照jakobNielsen的说法：网站首页的长度不应该超

过4屏。 当然这个准则也未必就那么准确，但是至少应该承
认页面不是越长越好的。
二、“闪”。 就是网页上能动的东西──动画。主要是Gif
动画、Flash动画、脚本语言实现的图片交替效果， 还有就
是弹出窗口。动画对网页表现本应该是个很好的补充，但是
现在的实际效果是对网页的干 扰。
虽然弹出窗口里的内容不一定是动画，但的弹出效果绝
对是最具视觉冲击力。还好， 现在有越来越多的雷锋式的好
公司提供了能屏蔽弹出窗口的工具。
脚本语言实现的图片交 替效果目前主要是用在网站头
条的图片报道上，虽然是动，分散用户的注意力，好在这种
方式还 是为了给用户提供尽可能多的信息，应该值得肯定，
也应该是动画应用于网络的发展方向。
Gif动画是传统的动画形式，但在Flash动画面前，它
的生存空间越来越小。
Flash动画无疑是网页动画的主力，其文件小、效果好。
三、“挤”。我们的网站看上去满满当当的，比公共汽车
还挤。
与英文相比，中文本身就 显得比较复杂，对于有链接的
文字国内很多网站又往往更倾向于传统的随时保持下划线
的方式， 再加上小的几乎不存在的行间距，使得页面看上去
分外拥挤。

经常可以看 到某网站为了突出重点内容而使用14pt的
字号，然而却不加大该内容与其他内容的距离，这样只能使
页面看上去更拥挤。
第四是“花”，中很多网站的色彩之绚烂，几乎无以复
加。
在网站中，通常将各个栏目摘要排放在首页上，每一个
栏目会有一种主色调，这样一来，首 页上的色彩自然就很丰
富了。
当然，分栏目确定主色调的设计方式本身并没有错误，也不足以搞“花”页面。然而实际情况却更复杂。以文字为
例，未点击的链接文字有黑色和蓝色，重 点的文字会用红色，
点击后的文字链接是紫色，无链接且不重要的文字是灰色，
此外为了突出某 一个重点内容会添加一个醒目的背景色或
文字颜色。
网页设计师为了表明自己工作用心， 会给每一个子栏目
的标题部分设计一个很具有特色的背景，这些文字再与数不
胜数的图片、动画 交相辉映，使得用户可以在一个页面上将
电脑可以显示的全部色彩尽收眼底。
引用Don aldNorman在《emotionaldesign》一书中的理
论，设计可以分为三种层次：本 能水平的设计、行为水平的
设计、反思水平的设计。本能水平的设计是满足人类本能审
美需求的 设计，也就是漂亮、美观的设计；行为水平的设计

是注重效用的设计，注重功能、易用性 、可用性；反思水平
的设计注重信息、文化的作用，一件产品被设计的很独特、
出众、引人瞩目 ，用户会因为始终这个产品而产生乐趣，产
生满足感。
根据这个理论，中国网站的设计普 遍达没能实现本能水
平的设计，虽然网站的BoSS、设计师本人都希望把网站设计
的很漂亮， 吸引用户的眼球。行为水平的设计逐渐被重视了，
不过目前基本上还是停留在不高的水平上。上面说到的 国内
很多网站的种种问题实际上正式在反思水平上的设计，一种
变相的反思水平设计。
造成上述网站首页设计问题的罪魁并不是设计师没水
平或者用户没品味，而是产品不够，这 表面上的“多”其实
是由于“少”造成的。用户对网络内容的需求引导着网站的
设计，策划人员 有意无意地在迎合着这样的需求。