初中信息技术公开课教案《设计网站首页》教学设计优秀案例

网站工作室

《设计网站首页》教学设计
山东省临沂市罗庄区高都中学信息技术教研组　庞凤启
　　一、教学设计部分



?教学内容分析



　　R本课的主要内容与地位



　　本节课学习的内容是设计网站的首页。首页如同一本书的封面、一个戏曲人物的脸谱，应该能够反映出整个网站的整体风格和特色，让访问者通过网站首页就能对整个网站有所了解。所以，网站首页的设计是整个网站设计的重点。



　　R本课与前后内容的关系



　　本课是在第一课的规划设计基础之上进行的学习活动。首页的设计一定要按照规划进行。本节中涉及的知识点（编辑网页：文字输入和编辑、插入图片、插入水平线；保存、预览和新建网页）是网站制作过程中需要反复用到的，所以学生应熟练掌握。



?教学目标分析




　　R知识目标/技能目标



　　·知识目标



　　⑴认识网页的工作原理；



　　⑵了解网页编辑的一般过程。



　　·技能目标



　　⑴熟练掌握在网页中输入文字、插入图片、插入水平线的操作；



　　⑵掌握网页的新建、预览和保存。



　　R过程与方法目标



　　⑴对网页操作中基本概念（首页、网页、网页标题等）有清晰的认识；



　　⑵在操作中体会网页中图文混排遇到的困难，探索解决之道，为下一节课──用表格布局网页的学习埋下伏笔。



　　R情感态度与价值观目标



　　感受身边版面设计的素材：广告、报刊、课本，学以致用，将其用于网页设计中。



　　R本课的重难点



　　重点：插入图片和水平线。



　　难点：图片和水平线属性的设置、嵌入式文件的保存。



　　R本课的课时分配建议



　　1课时



?教学策略设计建议



　　R教法建议



　　因FrontPage与学生之前学习的Word、Excel同属微软的Office家庭软件，在操作上有许多相同或相似之处，所以在教学过程中，教师应鼓励学生对照Word中的操作完成文字的输入与编辑、插入与编辑图片等操作；采用分组设置、对比效果的形式探究“水平线属性”对话框中各参数的含义，从而加深学生对水平线的理解；在网页保存环节中，嵌入式文件的保存是学生从来没有接触过的知识点，教师应安排学生将不同的网页素材保存在站点中的不同文件夹中，以此达到强化的目的；组织学生进行网页预览时，提醒学生注意站点文件夹中文件的变化和HTML窗口中代码的变化；讲解新建网页时，可以让学生尝试使用其它网页格式新建网页，拓展学生网页设计的思路。



　　R学法建议



　　对照以前学过的Word中的操作，总结FrontPage与其在操作上的不同，大胆尝试以不同的方式和途径完成老师交给的任务。



?教学资源与环境建议



　　R本课教学资源索引



　　教师应为学生提供足够多的各种格式、各种大小的图片素材。



　　R教学环境准备建议



?教学评价建议




　　R自评、互评、师评要注意的问题



　　学生在设计网站首页时是否能对照Word完成相似的操作，是否能对新网页中的素材进行灵活的设置。

网站工作室

?教学过程参考案例

　　第一阶段：导入新课，明确学习目标

教学环节	教师活动	学生活动	设计理念
导入新课	播放《说唱脸谱》音乐。 师：脸谱能准确反映出人物的性格，一个网站的“脸”是什么？ 师：我们如何给我们的网站设计脸谱呢？这就是本节课我们要学习的内容──设计网站首页（出示课件）。	学生讨论答案──网站首页。 结合第一节课的规划，讨论如何设计首页。	通过脸谱联想到首页，激发学生学习网页设计的热情。

　　第二阶段：范例精讲，学生自主探究，完成范例

教学环节	教师活动	学生活动	设计理念
学习与探究	任务一：输入文字 出示网页输入文字后的效果。 任务二：插入图片 出示插入图片后的效果，并提示图片存放位置。 要求学生分别使用控制柄和设置图片属性的方法调整图片大小。 任务三：插入水平线 根据教材提示，使用默认值插入水平线，然后分组修改“水平线属性”对话框各参数。 将前面输入的“=”组成的线替换为水平线。 任务四：保存网页 出示任务，由学生探索嵌入式文件保存的技巧。 任务五：预览网页 分组尝试两种预览网页的方法，并作比较。 任务六：添加新网页 根据教材提示为网站添加新网页。	对比老师出示网页效果进行文字的输入和编辑，比较与Word中操作的异同。 　　 根据样例插入相应图片。 　　 尝试操作并比较说明二者的区别。 分组实验，填写表1-2-1。 　　 操作并体验二者在表现效果上的差异。 　　 预览网页。 　　 　　 完成操作，并探索新建网页的其它方法。比较它们的优缺点。	前两个任务与Word操作大同小异，让学生通过对比强化记忆。 　　 　　 　　 　　 通过学生自己实践理解水平线对话框的设为方法。 　　 　　 网页制作中的学用操作，应熟练掌握。

　　第三阶段：知识、情感拓展

教学 环节	教师活动	学生活动	设计理念
知识与情感	师：请大家回想一下，你从小到现在，你的妈妈给你洗了多少次脚？你为她洗过多少次呢？ 师：如果还没有做，就从今天开始吧！ 请同学们课下完成体验任务，根据自己的感受设计网页Feeling1．htm。	生：记不清。 生：还没有。 放学后完成这一体验活动，并将感受以网页的形式表达出来。	让学生通过这一活动体验感受父母对自己的爱。能够以网页的形式表达自己的感受。

　　第四阶段：综合实践，巩固与提高，自由创作，迁移运用

教学环节	教师活动	学生活动	设计理念
实践与创新	师：本节课的学习内容基本结束，但我们探索的路还有很长，请大家完成二级网页Parents．htm的设计。 教师巡视学生制作的情况，并进行指导。 师：预览网页，调整浏览器窗口，你能发现网页的变化吗？怎样才解决这个问题呢？	根据图1-1-6（b）设计网页。 操作并观察片面的变化。	在学习与探究基础上进行自主的网页创作。 设疑，为下一节课“网页中表格”作知识铺垫。 同时，制作的二级网页也是为第五课准备超链接的网页素材。

　　第五阶段：教学总结，设疑激趣，为下一节课作好铺垫

教学 环节	教师活动	学生活动	设计理念
课堂小结	课堂小结本节课的学习内容。 师：请同学们通过浏览器预览自己刚刚制作的网页，然后任意改变浏览器窗口的大小，看看网页中已经排好的版面是不是发生了变化？有防止这种现象的发生的办法吗？	预览网页，观察版面的变化，思考解决的方法。	承上启下，激发学生进一步学习网页制作的兴趣。

?教学反思

　　本节课的知识点与之前学过的Word有很多相同或相似之处，所以在教学过程中尽量把学习知识的过程交给学生，由他们通过自己的实验和比对，掌握相应知识的要点和操作方法。并在本节课结束前设疑，为下一节课的学习作好准备。


　　二、补充资料部分

?1．学件

名称	文件名
输入并编辑文字	文字．swf
插入图片	插入图片．swf
插入水平线	水平线．swf
网页的保存、预览和新建	网页操作．swf

?2．资料库

网站首页设计的一些“特色”

　　通过考察对比，笔者发现了很多网站的首页有四大共同点：“长，闪，挤，花”。


　　一、“长”。长页面的领军者应该是我们的大型门户网站。现在能生存下来的大型门户各个实力不凡，又纷纷上市，其他网站能与他们页面相似应该也能说明实力相似，这几家大型门户已经给用户形成了“长则是好”的印象，于是众多网站都纷纷“长”起来了。无论是综合性网站还是专业性网站，只要有内容，就能做多长就做多长，没有内容，抄袭别人内容也要做长，以至于不少实力有限的网站只是首页很长，到了栏目页面（二级页面）就简陋的可怜了。


　　长的基础就是要内容要多，这些众多的长网站在组织内容的思路上基本是一致的，就是把二级页面的内容摘要的放在首页上。首页分成若干个相应的通栏的大块儿（这样可以逐个部分的下载页面，易于显示），再在每两块之间加一条广告，最后再在页面的最上面加一个更综合的区域，所谓的重中之重，这样以来页面想短都短不了。


　　按照JakobNielsen的说法：网站首页的长度不应该超过4屏。当然这个准则也未必就那么准确，但是至少应该承认页面不是越长越好的。


　　二、“闪”。就是网页上能动的东西──动画。主要是Gif动画、Flash动画、脚本语言实现的图片交替效果，还有就是弹出窗口。动画对网页表现本应该是个很好的补充，但是现在的实际效果是对网页的干扰。


　　虽然弹出窗口里的内容不一定是动画，但的弹出效果绝对是最具视觉冲击力。还好，现在有越来越多的雷锋式的好公司提供了能屏蔽弹出窗口的工具。


　　脚本语言实现的图片交替效果目前主要是用在网站头条的图片报道上，虽然是动，分散用户的注意力，好在这种方式还是为了给用户提供尽可能多的信息，应该值得肯定，也应该是动画应用于网络的发展方向。


　　Gif动画是传统的动画形式，但在Flash动画面前，它的生存空间越来越小。


　　Flash动画无疑是网页动画的主力，其文件小、效果好。


　　三、“挤”。我们的网站看上去满满当当的，比公共汽车还挤。


　　与英文相比，中文本身就显得比较复杂，对于有链接的文字国内很多网站又往往更倾向于传统的随时保持下划线的方式，再加上小的几乎不存在的行间距，使得页面看上去分外拥挤。


　　经常可以看到某网站为了突出重点内容而使用14pt的字号，然而却不加大该内容与其他内容的距离，这样只能使页面看上去更拥挤。


　　第四是“花”，中很多网站的色彩之绚烂，几乎无以复加。


　　在网站中，通常将各个栏目摘要排放在首页上，每一个栏目会有一种主色调，这样一来，首页上的色彩自然就很丰富了。


　　当然，分栏目确定主色调的设计方式本身并没有错误，也不足以搞“花”页面。然而实际情况却更复杂。以文字为例，未点击的链接文字有黑色和蓝色，重点的文字会用红色，点击后的文字链接是紫色，无链接且不重要的文字是灰色，此外为了突出某一个重点内容会添加一个醒目的背景色或文字颜色。


　　网页设计师为了表明自己工作用心，会给每一个子栏目的标题部分设计一个很具有特色的背景，这些文字再与数不胜数的图片、动画交相辉映，使得用户可以在一个页面上将电脑可以显示的全部色彩尽收眼底。


　　引用DonaldNorman在《emotionaldesign》一书中的理论，设计可以分为三种层次：本能水平的设计、行为水平的设计、反思水平的设计。本能水平的设计是满足人类本能审美需求的设计，也就是漂亮、美观的设计；行为水平的设计是注重效用的设计，注重功能、易用性、可用性；反思水平的设计注重信息、文化的作用，一件产品被设计的很独特、出众、引人瞩目，用户会因为始终这个产品而产生乐趣，产生满足感。


　　根据这个理论，中国网站的设计普遍达没能实现本能水平的设计，虽然网站的BOSS、设计师本人都希望把网站设计的很漂亮，吸引用户的眼球。行为水平的设计逐渐被重视了，不过目前基本上还是停留在不高的水平上。上面说到的国内很多网站的种种问题实际上正式在反思水平上的设计，一种变相的反思水平设计。


　　造成上述网站首页设计问题的罪魁并不是设计师没水平或者用户没品味，而是产品不够，这表面上的“多”其实是由于“少”造成的。用户对网络内容的需求引导着网站的设计，策划人员有意无意地在迎合着这样的需求。