篇一：主题网站教学设计
第三高级中学 程巧兰【教材分析】
网站设计是《网站技术应用》第四章“建立主题网站”第二节的内容，第一节网站规划根据需求分析，确定做一个什么样的网站；第二节网站设计，解决如何去表达网站的主题，如何把内容成功组织和呈现。如果说规划使“做什么”的问题得到解决，那么设计则是决定“如何做”的问题，是把一个网站由蓝图变为现实的第一个步骤，是搭建网站整体结构的过程，它能使接下来的工作更加有的放矢。
【对象分析】
本案例的对象是高一年级的学生，通过必选教材的学习，学生具有一定的信息技术基础及网络知识，学生上网兴趣极高，被丰富多彩的网页所吸引，很想动手制作自己的网站。第一节学习后，学生就急于动手制作网站，忽视网站的设计。本节理论性较强，教师通过实践活动引导学生从感性认识上升到理性认识，逐步体会到想要制作出高质量的网站，不但要学习和掌握网页的制作技术，更重要的是学习如何对网站进行整体规划和设计。为创建一个风格独特的个人网站打下基础。
【教学思路】
新课程倡导学生“自主、探究、合作”的学习方式，引导学生主动参与、勤于动手，培养学生分析问题、解决问题的能力。本节课，教师以网页制作专题学习网站为教学平台，采用任务驱动法、情境法、实践法进行教学，注重引导学生在网络学习环境中交流、评价，体验生生、师生互动给学习带来的帮助和乐趣，通过欣赏优秀网站的设计、小组合作讨论达成本节课教学目标。
【教学目标】
知识与技能：
（1）了解网站设计的基本内容；
（2）通过设计自己的主题网站，体验设计在建站中的重要性；
（3）依据主题设计网站的栏目和结构，树立网站的整体风格； 过程与方法：
（1）运用Frontpage2000设计网站的栏目，学会绘制网站的结构图，表达自己对网站架构的理解；
（2）学习优秀网站设计，进一步提高学生的审美能力；
情感、态度与价值观：
（1）培养学生的合作学习能力、探究问题的兴趣与能力；
（2）培养学生的鉴赏能力；
重点：了解网站设计在建站中的重要性
难点：能够根据自己的需求设计网站的栏目、首页布局和风格
教学环境：多媒体网络教室网页制作专题学习网站平台
【课时】：1课时
【教学过程】
一、情境导入
随着因特网的高速发展，网站如雨后春笋般发展起来，有的网站日访问量高达几十万、几百万、几千万人次，而有的网站访问量寥寥无几。同学们想一想究其原因是什么呢？
呢？做网页？
学生访问：https://dmtzp.pyedu.cn(全国中小学电脑制作优秀作品集锦) 思考：选择与小组主题相近的优秀作品欣赏，作品中最吸引你的是什么？作品对你有哪些启发？
讨论：选择一个网站，从栏目、布局、LOGO、色彩、内容进行小组讨论。
合理的规划为建立主题网站提供了一个总体框架，精美设计是吸引访问者的一个重要因素，想要制作出高质量的网站，不但要学习和掌握网页的制作技术，更重要的是依据主题，设计网站的栏目、结构和风格。
二、新知探究
? 栏目设置
学生访问：网页制作专题学习网站/作品锦集/专题“逍遥游天下”网站 思考：浏览三个不同的网站首页，思考网站用几个栏目来展示主题？
师生交流：建设一个网站好比写一篇文章，首先要拟好提纲，这样文章才能主题明确，层次清晰。栏目实质上是一个网站的大纲索引，将网站主题明确显示出来。
例如：蔡卿的“逍遥游天下”栏目设置
的栏目各有千秋，栏目划分的依据是什么，各有哪些优点和不足。
实践：根据小组的网站主题和内容，对网站的栏目进行设计，并简单描述每个栏的主要内容，填写表4-2并进行自评。
是否重点突出和是否方便浏览三方面，进行小组评价、教师评价选出栏目设计的最佳小组。
? 版面布局
教师引导：浏览“逍遥游天下”网站首页，你喜欢哪一个首页的版面设计？为什么？
师生交流：版面布局是指将不同元素以最适合浏览的方式排放在页面的不同位置，合理的版面布局能够让浏览者清楚、容易地理解作品传达的信息。网页呈现的内容很多，如何合理地放置信息，使之看起井井有条、主次分明是版面布局需要考虑的问题。
常见的页面布局样式
布局类型，除了表中提到的几种布局，还有其他的布局类型吗？
讨论：讨论“Welcome to 花蝶谷、虫语花香”这两个网站首页的布局； 教师引导：网页制作专题学习网站的栏目布局
实践：根据小组主题网站的内容和栏目结构，每人绘制一个版面布局图，经过讨论，选出最佳方案，并将作品上传。（参考“网页制作专题学习网站/网站设计/版面设计）
? 树立整体风格
教师引导：在浏览网站的时候，我们会发现好的网站往往具有独特的风格，如：粗犷豪放的、清新秀丽的、温文尔雅的，还有执著热情的，即使只看到其中的一页，也可以分辨出是哪一种类型网站。这是因为同一个网站的网页往往都有统一的外观设计。这种统一的外观设计就是网站的整体风格。 如何树立整体风格？
自主学习：网页制作专题学习网站/网站设计/网站整体风格
师生交流：
1、设计一个独特魅力的网站LOGO，并将它放在页面最突出的位置。
2、网站的标题、主菜单和主色块文字采用相似和谐融洽色彩。
3、标题、主菜单选择一些特别的字体。
教师引导：树立网站整体风格分三步
第一步---网站标志
学生访问：“网页制作专题学习网站/网站设计/网站图标”
思考：图标的设计方式与特点是什么？
师生交流：标志可以是中文、英文字母，可以是符号、图案，可以是动物或者人物等
讨论：图标与网站名称和内容有什么关系？表达怎样的含义？
（参考“网页制作专题学习网站/知识拓展/谷歌创意LOGO欣赏”）
师生交流：
1、选择与主题有关的，并具有代表性的人或者物，用它们作为设计的蓝本，加以卡通化和艺术化，例如搜狐网站的卡通狐狸。
2、用自己网站的中文或者英文名称作标志，或者用其中的字母和符号合成。
3、对于专业性的网站，可以以本专业有代表的物品作为标志。
实践：小组讨论，尝试设计小组的主题网站标志。
第二步---网站色彩
教师引导：网站给人的第一印象来自于视觉的冲击，确定网站的色彩至关重要。色彩能够体现网站形象、延伸网站内涵，甚至可以影响访问者的情绪。标准色彩的设置能够反映网站的水平。
学生访问： www.pqshow.com/index/wangye1.htm 优秀网站，
思考：网站标准色彩是什么？使你产生了什么样的感觉？
师生交流：标准色彩指应用于网站标志、标题、主菜单、主色块文字的色彩。图片的主色、背景色、边框也应尽量使用标准色彩。
讨论：每种色彩都有自己的语言，代表一定的含义，你希望你的主题网站能够给人什么样的感觉，小组讨论之后确定主题网站使用哪一种标准色彩。
第三步---标准字体
教师引导：标准字体指用于标志、标题、主菜单的特有字体，一般网页默认的字体是“宋体”，为了体现站点的“与众不同”和特有风格，可以根据需要选择一些特别的字体。但要注意的是，使用一些比较特别的字体时，最好采用图片的格式，因为浏览者的浏览器可能没有安装包含你的特别字体的字体库，导致特别的字体显示不出来。
实践：
1、因特网上搜索下载艺术字体，
中的优点和不足的地方，并给出一些建议，为下节课的网站制作打下良好的基础。
三、课堂小结及自我评价
1、师生共同回忆本课所学新知；
2、小组成员浏览及完善作品；
3、访问“网页制作专题学习网站/自我评价/”，分析网站设计的成功之处和存在的疑惑。
四、课后任务
选定了主题和栏目，接下来就是该准备网页素材了。网站设计成功的最大秘诀在于浏览者感到网站对他们非常有帮助，“内容为王”仍是网站设计的关键。
1、根据主题和栏目广泛地收集素材；
2、对收集的素材进行分类管理。
3、注意保护知识产权，避免侵犯别人的版权。
【教学评价】
1.结果表格化，通过对表格文件的评价能够判断学生是否从给出的例子当中得到一些帮助和启发，同时也便于量化；
2.网站栏目设计是否符合主题，是否具有自己的特色；
3.网站的版面样式设计是否突出主题，是否合理；
4.网站的交互设计是否具有良好的人机交互性，是否人性化。
主要从上面的四个方面进行评价，同时要结合各组的实际情况如成员基础、主题等。
过程评价：主要是教师在辅导和巡视的过程中注意各组的进度，成员之间的合作情况以及学生的参与度。
篇二：网站赏析教案
/p>篇三：制作网站首页教案设计
">广东省云浮市郁南县平台镇初级中学黄伟兴教学课题：制作网站首页
教学背景：
网站首页是网站的“脸面”，学生通过学习设计网站首页，一方面培养他们为提高作品吸引力、展现自我而积极思考、探究、尝试的意识和态度，另一方面通过学习各种基本网页设计技术，亲历网页制作的一般过程，更好地为接下去几节课的学习和活动参与打下基本功。
教学目标：
1、知识与技能：
（1）了解网页一般由哪些元素组成。
（2）学会运用表格进行版面布局。
（3）能够在网页中添加网页元素。
（4）能在网页中设置超链接。
2、过程与方法：
（1）通过制作网站首页，掌握版面布局、添加网页元素和设置超链接的基本技术方法，达到举一反三的功效。
（2）通过学生动手设计网页的实践活动，使学生掌握对象属性的设置方法，为学生今后学习其他软件奠定基础。
3、情感态度与价值观：
（1）提高视觉素养，能根据网页主题确定恰当的网页风格并具有初步的创意。
（2）通过运用表格布局网页对象活动，进一步掌握各种不同对象属性的设置方法和规律，提高学生学习信息技术的信心。
（3）在合作实践过程中，培养学生的审美能力和创造能力，在小组协作学习中，培养学生合作帮助、团结协作的良好品质。
（4）培养学生大胆构思、自我创新的精神，培养学生的美感及创作后的成就感。
（5）善于和老师、同伴一起分析讨论，在分析、探讨中学会欣赏，学会评价。
4、学情分析：
学生已经具备了计算机软件使用的基础，但学生在学习过程中往往会把注意力停留在技术实现的层面上，让学生认识和掌握制作网站首页的方法，故操作性强。在前面几节课学生初步确定了网站的主题，收集了部分资料。学生已经在word文档的学习中掌握在文档中插入图片、艺术字等素材方法，为制作网页中的添加素材这一环节打下基础，同时表格教学比较枯燥，表格嵌套、根据图片特点裁剪图片、设计制作表格等知识点更加枯燥乏味。图片处理操作水平的差异和教学内容的枯燥，可能会造成很多学生不愿动手、不会动手。在实际教学时，教师应该时刻给予学生恰当的引导，在调动学生学习兴趣方面下足功夫。
5、素质目标：
制作网页要应用到多方面的知识，培养学生的知识迁移能力，同时给学生提供了自由发挥的空间，学生可以充分发挥自身的创造力与想象力，培养学生综合运用知识的能力。
教学重点难点：
1、教学重点：
（1）能用表格规划版面布局的方法与技巧。
（2）恰当选取网页元素与设置。
2、教学难点：
（1）掌握超链接技术设置网站导航功能的方法。
（2）掌握设置网页属性的一般方法。
教材分析：
1、本节的作用和地位：
本节课侧重培养信息表达的能力，对于加强学生的信息意识，提高信息处理的能力有着重要的作用；网页的设计也给学生提供了展示个性、自主创新的机会，促使他们主动地学、创造性地学；网页的评价则能使学生了解内容编排的原则，页面布局的种类，色彩搭配的风格等，提高他们的艺术修养和审美情趣。
2、本节主要内容
课改后信息技术课已不再是单纯的计算机技能课，它强调以培养信息素养为目标，以任务驱动为模式，以应用软件为载体。只有在实际教学中突破以往的教学模式，才能培养出适应信息社会发展的有用人才。这节课的主要任务是使学生掌握在FrontPage用表格规划网页及在网页中插入图片、声音、水平线等相关知识与操作，并能合理、灵活地应用到网页制作中，美化自己的网页。
教学方法：
1、先学后教，“兵”教“兵”
先学，就是让学生自学，尝试独立操作；后教，是根据学生自学效果，教师进行精讲、点评，并尽量让学生去“教”；“兵”教“兵”，就是让学生充当小教师的角色，自学得较好的学生操作给其他学生看，通过示范，在学生间起到相互
促进，相互影响的作用，达到共同进步。
2、任务驱动，小组竞赛法
根据学生不同的学习能力、知识储备、兴趣爱好，依据自愿组成原则，将全班分成若干个小组。通过网页教学课件的辅助，在教师的引导下，各小组按照自己规划出的网页设计方案，以任务驱动和分工合作形式制作网页。并通过自我评价、小组评价、师生互评相结合的评价方式使学生自主完成作业，由学生自己担任评委，评选出优秀网页，通过展示学生的优秀作品来激发学生对网页制作的兴趣。
由操作能力强的学生充当组长，带动其他成员完成网页制作，一来培养他们合作互助的关系，二来培养学生之间、师生之间的感情。
整节课教师只扮演一个组织者和提示者的角色，一步步引导学生完成本课的目标，让学生充分发挥自主性、协助性，培养他们合作、创新的能力。
3、提问引导法
根据学生已有的知识结构体系，采用提问的方式引出每个教学目标，中间穿插观察、自主探究、合作交流的方式加深学生的印象，培养学生的观察能力，动手能力和团结合作精神。让学生自觉主动地去分析问题、解决问题，学生在操作过程中不断发现问题、解决问题，使学生由学会知识变为会学知识。
教学评价：
在教学过程中一方面要考查学生能否顺利掌握制作网页的基本技术方法，根据设计需求完成网站首页的制作，另一方面又要考查学生在作品中是否做了科学的布局规划、是否合理地运用了各种网页元素，作品是否具备表现力和较强的可读性。
教学过程：
一、创设情景、引入课题、明确任务
师：上节课我们已经规划了自己的网站，今天老师给大家带来了一个礼物，它是一个漂亮的网站，它就是“老师个人学校网站”，里面有许多关于同学们的内容，如：你们漂亮的生活相等，请同学们欣赏。
生：学生认真观看，自主互相讨论，畅谈想法及发表意见。
师：继网站筹划之后我们就要着手来进行网页的设计了，第一个要进行的当然是首页的制作。首页是网站的“脸面”，能不能吸引访问者的注意，它显得尤为重要，所以在设计制作首页时需要特别花心思。怎样设计一个好看的网页让网站第一时间抢占浏览者的眼球呢？再度打开网站的首页。
生：仔细观察该首页的特点。并互相讨论，各抒已见。
师：上节课已经搜集了素材，这节课咱们来动手制作网站的首页。指导学生使用FrontPage打开范例“班级网站”的首页，让学生进行小组交流，回答以下几个问题：
1、你知道有哪些软件可以用来制作网页吗？
2、该网页包含了很多元素，它们是如何整齐有序地分布在网页中的？用什么可以分割网页的版面布局呢？
3、该首页包含了哪些元素？是否能很好地表达主题思想？结合小组收集到的素材，你认为在自己的网站首页中可以添加哪些网页元素？
4、导航栏是网站的“地图”，没有它，浏览者就会“迷路”。选定范例网站首页导航栏中的栏目文字，单击常用工具栏上的超链接按钮，看看会出现什么？ 生：观察思考、探究、小组合作交流，回答教师提出的几个问题，并确立自己将要开展的工作。