《主题网站设计》教学设计

《主题网站设计》教学设计
常州刘国钧高等职业技术学校（综合高中） 沈茹
教材分析
 本节内容是《网络技术应用》教材第四章“建立主题网站”第二节的教学内容，在前面已经规划好制作网站的需求分析、网站主题、网站名称以及制作工具的基础上，学习如何对主题网站进一步进行设计，是一项关于网站建设的关键步骤。通过这一小节，让学生领悟到详细规划网站将使今后的网站建设有“轨”可循，既提高了效率，节约了时间，又有利于规范网站的总体布局，统一网页的风格，为创建一个风格独特的个人网站打下基础。
教学目标
 知识目标：
（1）通过浏览网站，了解栏目的一般设置情况
（2）了解版面的一般结构，并能总结出版面设计常见的布局样式
（3）通过观摩和模仿，分析和总结出树立网站整体风格的几大要素
 技能目标：
（1）依据主题，能够设计网站的栏目和结构
（2）运用网络平台，搜集网站所需要的素材，并能够根据主题的实际需要，进行合理的修改
 情感目标
（1）通过小组为单位的学习讨论，培养学生小组合作意识
（2）在使用网络素材的过程中，引导和培养学生关注知识产权保护的意识
（3）能过本节内容的学习，让学生意识到网站建设过程中规划的重要性，节约时效，规范布局，为打造自己风格独特的网站亢实基础。
教学重点、难点
重点：明确网站设计的一般步骤（栏目设置——版面设计——树立网站整体风格——收集素材）
难点：理解网站设计的一般步骤并进行设计
教学准备
 选取一些有特色的网站，供学生浏览
 学生以小组为单位，确立自己小组网站的主题
 配置好网络教室
教学过程
教学环节 具体内容 师生活动
导入 教师任务：打开“麦当劳”的官方网站，让学生浏览并讨论网站的结构
提问：这个网站给你的印象怎么样？为什么？请你说说它的构成。
设计思路：学生应该比较感兴趣，毕竟麦当劳学生非常熟悉的品牌和食物。网站的布局也很有特点，色彩明快，吸引力强。网站的构成可以从颜色、导航栏的内容、网站的结构上来引导他们回答。 教师打开导入网站并提问，学生回答

教师总结学生的回答并引入今天主题
上课过程  栏目设置
 建设一个网站好比写一篇文章，首先要拟好提纲，这样文章才能主题明确、层次清晰。
教师任务1：打开一些学生比较熟悉的网站首页，给学生欣赏（例如：新浪、某企业的网站、QQ空间、学校的网站），分析一下从这些网站的导航栏中你能获取哪些信息？
提问1：分别讲讲以上浏览的这些网站的主题是什么？
提问2：哪个网站的内容最吸引你？为什么？
教师总结：一般网站栏目安排要注意以下几个方面
要紧扣主题，尽可能删除与主题无关的栏目。
尽可能将网站最有吸引力的内容列在栏目中。
尽可能方便访问者的浏览和查询。
设计思路：让学生浏览不同的网站，进行比较，通过提问引导学生关注网站的栏目设置。

教师任务2：请同学以小组为单位，将你们小组的主题网站所要表达的内容罗列出来，设计四到五个导航标题，填入学案表练习1中。
设计思路：培养学生小组协作能力，展开头脑风暴，为主题网站设置栏目。

教师任务3：通过随机抽取的方式，选择二个小组的作品展示一下，供其他小组讨论，并再次完善自己小组的作品。
设计思路：让学生互相学习，汲取其他小组的优点，完善自己的栏目。

 版面设计
 大家上网，会有大量的网页掠过我们的眼帘，但是能够吸引我们眼球的只有那些有特色的网页。究其原因，站点内容是否丰富是其中一个方面，而网页的版面设计是否精美也是重要的因素之一。
教师任务1：选取前面学生浏览的网站首页再次打开（例如：新浪、某企业的网站、QQ空间、学校的网站、“麦当劳”官网），请同学们参考课本P83表4-11分析一下这些网页的布局结构。（有“厂”字型、“口”字型、自由式）
设计思路：这一部分略讲，因为布局是书上直接给出的，任务是让学生结合课本上的知识自已分析出以上网站的布局，把书本上的内容转化为自己学到的知识。

教师任务2：常见的页面布局样式就是课本上总结的三种样式，我们来分析一下，这些布局样式比较适合哪些类型的网站？请同学们谈谈你的认识。
设计思路：进一步让学生分析不同的网页布局的特点，将知识点不断咀嚼，深入学生的心中。
教师总结：大家在进行版面设计的时候，要根据自己设计的主题来看，如果将来设计一个大型综合类的网站，信息量比较大的话，“厂”字型和“口”字型的结构非常实用，例如新浪、网易等大型综合性的网站。如果是比较私人的，内容比较时尚的主题，可以采用自由式。当然，如果为了吸引更多的用户来浏览你的网站，你可以先制作一个新颖独特的自由式页面来吸引用户点击进入，在接下来的页面中再进行“厂”、“口”字型的页面设计。

教师任务3：根据小组的主题网站的内容和栏目结构，每人制作一个版面布局图，再选出最佳方案。（完成练习2）
设计思路：每个同学都有自己的创意，所以这一部分让每一个人都动手创作，再结合小组的意见加以投票，选举出大家都满意的方案。这其中肯定会有不同意见，此时就培养同学们的小组意识，组长的协调能力。

 树立网站整体风格
 在浏览网站的时候，我们会发现较好的网站往往都有其独特的风格，有粗犷豪放的，有清新秀丽的，有温文尔雅的，还有执著热情的。那么这些风格有哪些来决定呢？
教师任务1：把上课导入时的“麦当劳”官网打开，再打开光盘中学生的作品（比较简单，主要是要形成对比），请同学们谈谈，哪个网站最吸引你？为什么？
设计思路：一个是大品牌“麦当劳”，一个同学自己做的比较简单的网页，形成强烈的对比，让学生意识到网站风格的重要性。

教师任务2：给同学做一个关于色彩的心理测试。（红色代表热情、黄色代表青春和活力、蓝色代表沉稳、紫色代表神秘、灰色代表忧郁）。
教师总结：这个网站的背景色是红色，给人以热情的感觉，首先人看到之后，心理上就觉得非常喜欢；再者，页面上有大家非常熟悉的“M”的符号，给人以亲切；另外，黄色的导航栏文字图标也非常精致，大家也非常喜欢。我们把这三个要素总结出来：
网站标志——“M”符号
标志可以是中文、英文字母，可以是符号、图案，可以是动物或人物等。一般我们选择与网站主题相关的，有代表性的人、物或图标。
标准色彩——红色+黄色
网站的标志、标题、主菜单和主色块文字的链接色彩尽量使用标准色彩；图片的主色彩、背景色、边框等尽量使用标准色彩同色系的色彩，这样给人以整体统一的感觉。一般来说，一个网站的标准色彩不超过3种。
标准字体——字体可爱
与标准色彩一样，标准字体是指用于标志、标题、主菜单的特有字体，一般网页默认的字体是宋体，当然为了体现站点的“与众不同”和特有风格，我们可以根据需要选择一些特别的字体。
设计思路：通过心理测验，激发学生的兴趣，并通过相对权威的总结让学生意识到色彩等相关内容在网站风格建立过程中的重大意义。

教师任务3：对光盘中一些学生网站作品，请按照标志、色彩和字体这三部分的设计评价指标，对这些网站的整体风格进行评价。
设计思路：让学生参与到网站风格建立的过程中来，先从评价他人网站开始，在评价的过程中吸取经验，为自己创作奠定基础。

教学任务4：以小组为单位，对小组的主题网站标志、主要色彩、字体进行讨论，完成学案练习3。
设计思路：让学生自己树立主题网站的风格，有一定的思路，为后面的实践创作做好准备。

 收集素材
选定了主题和栏目，接下来就该准备网页素材了。建设一个主题网站，需要我们广泛地收集素材。
教师任务1：以小组为单位，对主题网站的素材收集进行分工，完成学案练习4。具体的收集工作，作为家庭作业回家完成。
设计思路：收集素材是一个大工程，让小组成员分工合作一是为了分担大家的工作压力，二是培养小组成员的协作意识，希望大家以小组为单位，把主题网站看成大家的任务，减少并消除自我意识。 本论文由论文格式网整理,转载请注明来源www.lwgsw.com,更多论文,请点论文格式范文查看

教师打开网站，供学生欣赏并提出相关问题，引导学生思考

学生回答
教师总结栏目设置的注意点

教师布置实践任务，并选取展示

学生小组实践

教师要求学生根据课本的提示，分析所给网站的结构和试用情况

学生回答

教师总结布置实践任务
学生小组实践

教师打开两个网站，让学生进行对比

教师通过一个心理测试，总结树立网站整体形象的三大要素

学生小组分工
作业 收集网站素材 布置作业
教学反思
 本节课主要采用多媒体网络的教学方式，一开始从学生非常熟悉和感兴趣的“麦当劳”的网站引入，让学生通过分析切入今天的课堂主题，再依次从网站设计的四个步骤：栏目设置、版面设计、树立网站整体风格、收集素材一步步地分析和实践，让学生在浏览、学习、讨论、实践中收获。教师不断以提问的方式来引导学生思考，充分调动学生的积极性和主动性。

附：
《主题网站设计》学案
一．根据小组的网站主题和内容，对网站的栏目进行设计，并简单描述每个栏目的主要内容，填入下表本小组的栏目划分情况
栏目名称 子栏目名称 内容描述
  
二．根据小组主题网站的内容和栏目结构，每人绘制一个版面布局图，经过小组讨论，选出最佳方案

三．以小组为单位，对小组的主题网站标志、主要色彩、字体进行讨论，设计。
网站标志 文字类 / 字母类 / 图标类
主要色彩 填写颜色
标准字体 字体设置
四．以小组为单位，对主题网站的素材收集进行分工
文字类 学生姓名
图片类 学生姓名
多媒体动画类 学生姓名
其它 学生姓名