第十一课设计一个简单的网站教学设计

第十一课设计一个简单的网站教学设计
教材简析
本课是第三单元《网站建设》的第一课，重点介绍学习网站与网页、网站主题设计、结构设计、主页布局与色彩设计等基础知识，这些都是网站建设的基础知识。

从教材的结构和内容来看，通过前面、、网上冲浪的学习，学生完全具备对相应知识学习的接受能力和心理承受能力。

本课学习制作网页对培养信息表达的能力，加强学生的信息意识，提高信息处理的能力有着重要的作用；网页的设计也给学生提供了展示个性、自主创新的机会，促使他们主动地学、创造性地学；网页的页面布局及色彩搭配的风格等能力培养，可以提高他们的艺术修养和审美情趣。

教学目标
1．知识目标
了解如何明确网站主题；
了解如何组织网站的结构。

2．能力目标
让学生认识网站与网页、常见网页布局，并且通过设计一个简单的网站，让学生掌握如何确定网站的主题、设计网站的结构、设计主页的布局与色彩、绘制网页布局等，通过学生的操作和协作探讨，培养学生的自主学习、协作学习的能力；通过知识的再现培养学生的创新能力和创新意识。

3．情感目标
通过作品展示和评价，让学生体验成功的喜悦，激发学生的创造热情；通过小组的协作，培养学生的合作精神和集体主义精神。

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

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

学情分析
本课面向八年级学生，学生已经学习了、与上网浏览信息，对计算机的基本操作（中文档的编辑，网页的浏览等）比较熟练。

这使得学生主动探索、自主学习、在因特网上展示自我成为可能。

但本课主要的内容为基础知识，重在讲授，可操作性差，学生动手操作在一定程度上受到压抑，所以教师在讲授本课时，多引用内容丰富、形式新颖、符合八年级心理特征的网站进行讲解说明，激发学生学习兴趣。

培养学生获取信息、处理信息、整合信息的应用能力，培养学生的信息素养和独立分析问题、解决问题的能力，提高学生的创新能力、自学能力、理论联系实践能力，增强学生的独立意识，培养学生的团队协作精神。

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

所用课时
2课时。

教学环境
多媒体机房。

4人为一个小组，每个小组选出一名学生出任组长。

教师针对学生的能力水平进行适当调整，以达到各个小组的力量均衡。

本课教学应至少一人或两人一机，投影机一台或机房配备广播系统，整个机房以宽带的形式接入因特网，网速较快。

教学过程
一、创设教学情景，激发学生学习兴趣
师：同学们，因特网作为重要的信息发布与交流方式，在以惊人的速度发展。

也许就在你看完这段文字的几分钟时间里，全世界又诞生了几十个网站。

看着风格各异的网站，相信许多同学心里一定有一个愿望，让自己也在网上安个家——制作一个网站，在这个单元中，就让我们一起来实现这个愿望吧。

从本课开始，我们就一起来学习如何创建一个个人站点。

学完本单元的全部内容后，同学们就可以创建出有自己风格的个人站点，并且将它发布到因特网上去，与大家分享和交流了。

（板书：网站与网页）
二、讲授新课
（一）网站与网页
师：网页设计制作是基础，是建设网站的第一步。

但网站的设计要复杂得多。

据2006年5月发布的第五次中国互联网信息资源调查报告，全国网站数约为69.4万个，全国网页总数约24亿个，平均每个网站的网页数为3748个。

某些大型网站的网页数目更是以百万计。

将数量如此众多的网页有条理地组合在一起，形成一个网站，可不是一件容易的事。

因此，在制作网站要进行仔细的思考和规划。

网站建设的一般流程是：选定网站主题、规划结构、设计制作、测试修改、发布站点等。

投影广播网站建设的一般流程。

师：下面我们来看看如何设计一个简单网站。

（板书：设计一个简单网站）
（二）设计一个简单网站
1．确定网站的主题
师：主题的选择关键在于好的创意和特色，如何做到这一点呢？在选择时应注意以下几点：投影展示确定网站主题要点。

（1）主题定位要准，内容要精。

如果我们想制作一个包罗万象的站点，把所有认为精彩的东西都放在上面，那么往往会事与愿违，给人的感觉是没有主题，没有特色。

（2）题材最好是自己擅长或者喜爱的内容。

比如：擅长编程，就可以建立一个编程爱好者网站；对足球感兴趣，可以报道最新的战况，球星动态等。

这样在制作时，才不会觉得无聊或者力不从心。

兴趣是制作网站的动力，没有热情，很难设计制作出杰出的作品。

投影广播网站。

（3）网站名称也是网站设计的一部分。

名称要易记、有特色。

根据中文网站浏览者的特点，除非特定需要，网站名称最好用中文名称。

是由英文单词“”变化而来。

“”是美国数学家的侄子创造的一个词，表示1后边带有100个零的数字。

使用这个词代表想征服网上无穷无尽资料的雄心。

图3－1－2 标识
师：了解了网站建设的要点后，我们来欣赏一下这些网站。

投影广播一些优秀网站的截图。

2．设计网站基本结构
师：网站的主题确定后，下一步的任务就是根据主题，将所要表达的信息进行划分，确定网站的基本结构，最终完成网站的栏目设计。

建立一个网站好比写一篇文章，首先要拟好提纲，文章才能主题明确，层次清晰；也好比造一座高楼，首先要设计好框架图纸，才能使楼房结构合理。

3．设计主页的布局与色彩
师：了解了网站的基本结构，我们再来看看网站的主页。

主页是进入网站时，我们打开的第一个网页。

因此，主页的设计十分重要。

主页的布局应根据网站的类型而设计，不同的网站有不同的风格，但应具备标题、网站标识（）、导航、网页内容等基本布局元素。

投影展示迪斯尼网站的主页，教师逐一讲解标题、网站标识、导航条等。

标题是网页用来标识网页性质和内容的，标题将显示在浏览器的标题栏里。

网站标识（）一般放在网页中最显眼的位置，目的是加深浏览者对网站的印象，同时标识又代表网站的形象，所以标识都是通过精心设计的。

导航提供网站栏目的索引，通过导航可以方便的浏览到网站的每一个栏目。

一个合理的导航设计将使网站变得简单易用。

（1）常见的网页布局
师：虽然网站形形色色，但如果把整个首页面当成一个整体去观察，它们的布局主要有以下几种：“同”字形网页结构、“匡”字形网页结构、“回”字形网页结构、“川”字形网页结构投影展示以上几种类型网站。

师：除以上几种外，还有自由格式网页结构布局，它的风格较为随意，完成后的页面就像一张精美的图片或极具创意的广告。

同学们在上网的过程中看到结构新颖的网页可以将他们保存起来，也许能为今后的创作提供灵感。

（2）色彩搭配
师：了解网站的布局后，下面我们再来看看网站的色彩搭配，设计网站如同人的衣着打扮一样，也需要恰如其分的包装和表达。

不同的颜色会给浏览者不同的心理感受，产生不同的联想，选择色彩要和网页的内涵相关联。

网页色彩搭配时，网页的色彩要容易引人注目，色彩和表达的内容气氛相适合。

投影展示《中学生校园生活》网站：
如：“中学生校园生活”网站主要采用了浅黄绿色，体现了中学生青春、清新、自然的视觉意境。

清新自然、温馨淡雅的设计，让人感觉到校园青春的气息扑面而来，是一个比较好的设计。

师：在这里，老师给同学们介绍几种常用的配色方案：
暖色调。

即红色、橙色、黄色、赭色等色彩的搭配。

这种色调的运用，可使主页呈现温馨、和煦、热情的氛围。

冷色调。

即青色、绿色、紫色等色彩的搭配。

这种色调的运用，可使主页呈现宁静、清凉、高雅的氛围。

对比色调。

总体的色调应该是统一和谐的，局部的地方可以有一些小的强烈对比。

除了颜色搭配外，还要考虑主页底色（背景色）的深、浅。

有些主页，底色是黑的，但文字也选用了较深的色彩，由于色彩的明度比较接近，读者在阅览时，眼睛就会感觉很吃力，影响了阅读效果。

当然，色彩的明度也不能变化太大，否则屏幕上的亮度反差太强，同样也会使浏览者的眼睛感到不舒服。

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

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

五、教学反思
网站的建设在中学信息技术课中也是学生比较喜欢的内容。

本节课主要是让学生对网站有个整体的认识，比如网站的主题、网站的基本结构、主页的布局与色彩。

由于是对网站的认识，所以我采用了案例分析的方法，选择一些有代表性的网站与学生一起分析这个网站的主题、结构、布局与色彩，让他们也来当一回小小评论员，同时培养他们分析、审美和表到的能力。

对别人做的网站进行评论之后，我又将学生分成小组，让每个小组设计他们自己的网站，并在课余时间收集好必要的资料。

学生做好这些准备，为后续的教学无疑是带来了很多便利，这也把主动权交给了学生，充分地体现了学生的主题地位。