崩组词-杨健侯

第十一课 设计一个简单的网站 教学设计
教材简析
本课是第 三单元《网站建设》的第一课，重点介绍学习网站与网页、网站主题设计、结构
设计、主页布局与色彩设 计等基础知识，这些都是网站建设的基础知识。从教材的结构和
内容来看，通过前面Word、Powe rpoint、网上冲浪的学习，学生完全具备对相应知识学习
的接受能力和心理承受能力。本课学习制 作网页对培养信息表达的能力，加强学生的信息
意识，提高信息处理的能力有着重要的作用；网页的设计 也给学生提供了展示个性、自主
创新的机会，促使他们主动地学、创造性地学；网页的页面布局及色彩搭 配的风格等能力
培养，可以提高他们的艺术修养和审美情趣。

教学目标
1．知识目标
了解如何明确网站主题；
了解如何组织网站的结构。
2．能力目标
让学生认识网站与网页、常见网页布局，并且通过设计一个简单的网站，让学生 掌握如何
确定网站的主题、设计网站的结构、设计主页的布局与色彩、绘制网页布局等，通过学生
的操作和协作探讨，培养学生的自主学习、协作学习的能力；通过知识的再现培养学生的
创新能力和创 新意识。
3．情感目标
通过作品展示和评价，让学生体验成功的喜悦，激发学生的创造热情 ；通过小组的协作，
培养学生的合作精神和集体主义精神。

教学重点
了解如何明确网站主题；
了解如何组织网站的结构。

教学难点
了解如何明确网站主题；
了解如何组织网站的结构。

学情分析
本课面向八年级学生，学生已经学习了Word、Powerpoint与上网浏览信息，对计算机的基
本操作（Word中文档的编辑，网页的浏览等）比较熟练。这使得学生主动探索、自主学
习、在因特 网上展示自我成为可能。但本课主要的内容为基础知识，重在讲授，可操作性
差，学生动手操作在一定程 度上受到压抑，所以教师在讲授本课时，多引用内容丰富、形
式新颖、符合八年级心理特征的网站进行讲 解说明，激发学生学习兴趣。培养学生获取信
息、处理信息、整合信息的应用能力，培养学生的信息素养 和独立分析问题、解决问题的
能力，提高学生的创新能力、自学能力、理论联系实践能力，增强学生的独 立意识，培养
学生的团队协作精神。

教学方法
情景导入法、任务驱动法。
1 4

所用课时
2课时。

教学环境
多媒体机房。4人为一个小组，每个小组选出一名学 生出任组长。教师针对学生的能力水
平进行适当调整，以达到各个小组的力量均衡。本课教学应至少一人 或两人一机，投影机
一台或机房配备广播系统，整个机房以宽带的形式接入因特网，网速较快。

教学过程
一、创设教学情景，激发学生学习兴趣
师：同学们，因特网作 为重要的信息发布与交流方式，在以惊人的速度发展。也许就在你
看完这段文字的几分钟时间里，全世界 又诞生了几十个网站。看着风格各异的网站，相信
许多同学心里一定有一个愿望，让自己也在网上安个家 ——制作一个网站，在这个单元
中，就让我们一起来实现这个愿望吧。从本课开始，我们就一起来学习如 何创建一个个人
站点。学完本单元的全部内容后，同学们就可以创建出有自己风格的个人站点，并且将它
发布到因特网上去，与大家分享和交流了。（板书：网站与网页）

二、讲授新课
（一）网站与网页
师：网页设计制作是基础，是建设网站的第一步。但网站的设计要复杂得多 。据2006年5
月发布的第五次中国互联网信息资源调查报告，全国网站数约为69.4万个，全国网 页总数
约24亿个，平均每个网站的网页数为3748个。某些大型网站的网页数目更是以百万计。将数量如此众多的网页有条理地组合在一起，形成一个网站，可不是一件容易的事。因
此，在制作网 站要进行仔细的思考和规划。
网站建设的一般流程是：选定网站主题、规划结构、设计制作、测试修改、发布站点等。
投影广播网站建设的一般流程。
师：下面我们来看看如何设计一个简单网站。（板书：设计一个简单网站）

（二）设计一个简单网站
1．确定网站的主题
师：主题的选择关键在于好的创意和特色，如何做到这一点呢？在选择时应注意以下几
点：
投影展示确定网站主题要点。
（1）主题定位要准，内容要精。如果我们想制作一个包罗万象 的站点，把所有认为精彩的
东西都放在上面，那么往往会事与愿违，给人的感觉是没有主题，没有特色。
（2）题材最好是自己擅长或者喜爱的内容。比如：擅长编程，就可以建立一个编程爱好者
网站 ；对足球感兴趣，可以报道最新的战况，球星动态等。这样在制作时，才不会觉得无
聊或者力不从心。兴 趣是制作网站的动力，没有热情，很难设计制作出杰出的作品。
投影广播Google网站。
（3）网站名称也是网站设计的一部分。名称要易记、有特色。根据中文网站浏览者的特
点，除非特定 需要，网站名称最好用中文名称。Google是由英文单词“googol”变化而
来。“googo l”是美国数学家Edward Kasner的侄子Milton Sirotta创造的一个词，表示1后< br>边带有100个零的数字。Google使用这个词代表想征服网上无穷无尽资料的雄心。
2 4

图3－1－2 Google标识

师：了解了网站建设的要点后，我们来欣赏一下这些网站。
投影广播一些优秀网站的截图。

2．设计网站基本结构
师：网站的主题确定后，下一步的任务就是根据主题，将所 要表达的信息进行划分，确定
网站的基本结构，最终完成网站的栏目设计。建立一个网站好比写一篇文章 ，首先要拟好
提纲，文章才能主题明确，层次清晰；也好比造一座高楼，首先要设计好框架图纸，才能< br>使楼房结构合理。

3．设计主页的布局与色彩
师：了解了网站的基本结构 ，我们再来看看网站的主页。主页是进入网站时，我们打开的
第一个网页。因此，主页的设计十分重要。 主页的布局应根据网站的类型而设计，不同的
网站有不同的风格，但应具备标题、网站标识（logo） 、导航、网页内容等基本布局元
素。
投影展示迪斯尼网站的主页，教师逐一讲解标题、网站标识、导航条等。
标题是网页用来标识网页性质和内容的，标题将显示在浏览器的标题栏里。
网站标识（log o）一般放在网页中最显眼的位置，目的是加深浏览者对网站的印象，同时
标识又代表网站的形象，所以 标识都是通过精心设计的。
导航提供网站栏目的索引，通过导航可以方便的浏览到网站的每一个栏目。 一个合理的导
航设计将使网站变得简单易用。
（1）常见的网页布局
师：虽然网站 形形色色，但如果把整个首页面当成一个整体去观察，它们的布局主要有以
下几种：“同”字形网页结构 、“匡”字形网页结构、“回”字形网页结构、“川”字形
网页结构
投影展示以上几种类型网站。
师：除以上几种外，还有自由格式网页结构布局，它的风格较为 随意，完成后的页面就像
一张精美的图片或极具创意的广告。同学们在上网的过程中看到结构新颖的网页 可以将他
们保存起来，也许能为今后的创作提供灵感。
（2）色彩搭配
师：了解网 站的布局后，下面我们再来看看网站的色彩搭配，设计网站如同人的衣着打扮
一样，也需要恰如其分的包 装和表达。不同的颜色会给浏览者不同的心理感受，产生不同
的联想，选择色彩要和网页的内涵相关联。 网页色彩搭配时，网页的色彩要容易引人注
目，色彩和表达的内容气氛相适合。
投影展示《中学生校园生活》网站：
如：“中学生校园生活”网站主要采用了浅黄绿色，体现 了中学生青春、清新、自然的视
觉意境。清新自然、温馨淡雅的设计，让人感觉到校园青春的气息扑面而 来，是一个比较
好的设计。
师：在这里，老师给同学们介绍几种常用的配色方案：
暖色调。即红色、橙色、黄色、赭色等色彩的搭配。这种色调的运用，可使主页呈现温
3 4

馨、和煦、热情的氛围。
冷色调。即青色、绿色、紫色等色彩的搭配。这种色 调的运用，可使主页呈现宁静、清
凉、高雅的氛围。
对比色调。总体的色调应该是统一和谐的，局部的地方可以有一些小的强烈对比。
除了颜色搭 配外，还要考虑主页底色（背景色）的深、浅。有些主页，底色是黑的，但文
字也选用了较深的色彩，由 于色彩的明度比较接近，读者在阅览时，眼睛就会感觉很吃
力，影响了阅读效果。当然，色彩的明度也不 能变化太大，否则屏幕上的亮度反差太强，
同样也会使浏览者的眼睛感到不舒服。

三、授课完毕，课程总结
本节课主要讲了以下几个知识点：
1.了解如何明确网站主题；
2.了解如何组织网站的结构。


四、课堂作业
分组设计制作不同主题(如班级主题、家乡的旅游资源、保护环境、历史人物等主题)网
站。


五、教学反思
网站的建设在中学信息技术课中也是学生比较喜 欢的内容。本节课主要是让学生对网站
有个整体的认识，比如网站的主题、网站的基本结构、主页的布局 与色彩。由于是对网站
的认识，所以我采用了案例分析的方法，选择一些有代表性的网站与学生一起分析 这个网
站的主题、结构、布局与色彩，让他们也来当一回小小评论员，同时培养他们分析、审美
和表到的能力。对别人做的网站进行评论之后，我又将学生分成小组，让每个小组设计他
们自己的网站， 并在课余时间收集好必要的资料。学生做好这些准备，为后续的教学无疑
是带来了很多便利，这也把主动 权交给了学生，充分地体现了学生的主题地位。

4 4