设计一个简单的网站教学设计

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

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

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

4、个小组选出一名学生出任组长。教师针对学生的能力水平进行适当调整，以达到各个小组的力量均衡。本课教学应至少一人或两人一机，投影机一台或机房配备广播系统，整个机房以宽带的形式接入因特网，网速较快。教学过程一、创设教学情景，激发学生学习兴趣师：同学们，因特网作为重要的信息发布与交流方式，在以惊人的速度发展。也许就在你看完这段文字的几分钟时间里，全世界又诞生了几十个网站。看着风格各异的网站，相信许多同学心里一定有一个愿望，让自己也在网上安个家制作一个网站，在这个单元中，就让我们一起来实现这个愿望吧。从本课开始，我们就一起来学习如何创建一个个人站点。学完本单元的全部内容后，同学们就可以创建出有自己风格的

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

6、简单网站。（板书：设计一个简单网站）（二）设计一个简单网站1确定网站的主题师：主题的选择关键在于好的创意和特色，如何做到这一点呢？在选择时应注意以下几点：投影展示确定网站主题要点。（1）主题定位要准，内容要精。如果我们想制作一个包罗万象的站点，把所有认为精彩的东西都放在上面，那么往往会事与愿违，给人的感觉是没有主题，没有特色。（2）题材最好是自己擅长或者喜爱的内容。比如：擅长编程，就可以建立一个编程爱好者网站；对足球感兴趣，可以报道最新的战况，球星动态等。这样在制作时，才不会觉得无聊或者力不从心。兴趣是制作网站的动力，没有热情，很难设计制作出杰出的作品。投影广播Google网站。（3）网站名称

7、也是网站设计的一部分。名称要易记、有特色。根据中文网站浏览者的特点，除非特定需要，网站名称最好用中文名称。Google是由英文单词“googol”变化而来。“googol”是美国数学家Edward Kasner的侄子Milton Sirotta创造的一个词，表示1后边带有100个零的数字。Google使用这个词代表想征服网上无穷无尽资料的雄心。 图312 Google标识师：了解了网站建设的要点后，我们来欣赏一下这些网站。投影广播一些优秀网站的截图。2设计网站基本结构师：网站的主题确定后，下一步的任务就是根据主题，将所要表达的信息进行划分，确定网站的基本结构，最终完成网站的栏目设计。建立一个网

8、站好比写一篇文章，首先要拟好提纲，文章才能主题明确，层次清晰；也好比造一座高楼，首先要设计好框架图纸，才能使楼房结构合理。3设计主页的布局与色彩师：了解了网站的基本结构，我们再来看看网站的主页。主页是进入网站时，我们打开的第一个网页。因此，主页的设计十分重要。主页的布局应根据网站的类型而设计，不同的网站有不同的风格，但应具备标题、网站标识（logo）、导航、网页内容等基本布局元素。投影展示迪斯尼网站的主页，教师逐一讲解标题、网站标识、导航条等。标题是网页用来标识网页性质和内容的，标题将显示在浏览器的标题栏里。网站标识（logo）一般放在网页中最显眼的位置，目的是加深浏览者对网站的印象，同时标识

9、又代表网站的形象，所以标识都是通过精心设计的。导航提供网站栏目的索引，通过导航可以方便的浏览到网站的每一个栏目。一个合理的导航设计将使网站变得简单易用。（1）常见的网页布局师：虽然网站形形色色，但如果把整个首页面当成一个整体去观察，它们的布局主要有以下几种：“同”字形网页结构、“匡”字形网页结构、“回”字形网页结构、“川”字形网页结构投影展示以上几种类型网站。师：除以上几种外，还有自由格式网页结构布局，它的风格较为随意，完成后的页面就像一张精美的图片或极具创意的广告。同学们在上网的过程中看到结构新颖的网页可以将他们保存起来，也许能为今后的创作提供灵感。（2）色彩搭配师：了解网站的布局后，下面我

10、们再来看看网站的色彩搭配，设计网站如同人的衣着打扮一样，也需要恰如其分的包装和表达。不同的颜色会给浏览者不同的心理感受，产生不同的联想，选择色彩要和网页的内涵相关联。网页色彩搭配时，网页的色彩要容易引人注目，色彩和表达的内容气氛相适合。投影展示中学生校园生活网站：如：“中学生校园生活”网站主要采用了浅黄绿色，体现了中学生青春、清新、自然的视觉意境。清新自然、温馨淡雅的设计，让人感觉到校园青春的气息扑面而来，是一个比较好的设计。师：在这里，老师给同学们介绍几种常用的配色方案：暖色调。即红色、橙色、黄色、赭色等色彩的搭配。这种色调的运用，可使主页呈现温馨、和煦、热情的氛围。冷色调。即青色、绿色、紫

11、色等色彩的搭配。这种色调的运用，可使主页呈现宁静、清凉、高雅的氛围。对比色调。总体的色调应该是统一和谐的，局部的地方可以有一些小的强烈对比。除了颜色搭配外，还要考虑主页底色（背景色）的深、浅。有些主页，底色是黑的，但文字也选用了较深的色彩，由于色彩的明度比较接近，读者在阅览时，眼睛就会感觉很吃力，影响了阅读效果。当然，色彩的明度也不能变化太大，否则屏幕上的亮度反差太强，同样也会使浏览者的眼睛感到不舒服。三、授课完毕，课程总结本节课主要讲了以下几个知识点：1.了解如何明确网站主题；2.了解如何组织网站的结构。四、课堂作业分组设计制作不同主题(如班级主题、家乡的旅游资源、保护环境、历史人物等主题)网站。五、教学反思 网站的建设在中学信息技术课中也是学生比较喜欢的内容。本节课主要是让学生对网站有个整体的认识，比如网站的主题、网站的基本结构、主页的布局与色彩。由于是对网站的认识，所以我采用了案例分