网站设计教案.doc

《网站设计教案.doc》由会员分享，可在线阅读，更多相关《网站设计教案.doc（4页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、 网站设计教 材：教科版信息技术基础选修教学内容：第四章第二节网站设计学 生：高二课 时：1课时一、教材分析：网站设计是在确定网站主题后，由蓝图变为现实的第一个步骤，是搭建网站整体结构的过程，使网站建设的后续工作更加有的放矢。因此，本节内容起到了承上启下的作用。本节内容主要包括两个部分：栏目设置和版面设计。通过这两个部分的学习，使学生明确网站设计的基本流程，为后续的网站设计打下良好的基础。二、学生分析：高二学生对网络有很大的兴趣，他们对一些问题喜欢更进一步的研究，喜欢自已动手解决。当学生看到一些好的网页时，他们就会问：老师，这些东西是从哪里来的呀？怎样发布到Internet上的呀？那些动画是怎

2、么做的呀？等等。可见他们有极大的兴趣，但对网站设计缺乏统一的认识，缺乏对整个工作流程的认识，通过学习本节内容，就是让学生对网站设计有一个初步的认识，从而更加理性地去设计网站。三、教学目标： 1、知识与技能目标：（1）要求学生了解网站设计的基本内容。（2）依据网站主题，能够选择合理的方案设计网站的栏目和版面。2、过程与方法目标：（1）通过设计自己的主题网站，体验设计在建站中的重要性。 （2）依据网站主题，能够评价其设计的合理性。3、情感与价值目标：（1）通过网站设计，提升学生的审美能力。（2）培养学生相互协作能力，提高学生分析问题、处理问题的能力。四、教学重点：1、栏目设置2、版面设计五、教学难

3、点：如何合理的设计网站栏目和版面结构。六、教学方法：本节课主要以“任务驱动”的教学模式为主线，将本节内容分为两个大的环节来完成：栏目设置和版面设计。在栏目设置这一环节中，以分析浙江大学附属中学网站栏目内容为例，让学生对栏目设置有一个理性的认识，明确栏目设置的必要性。在版面设计这一环节中，以课本为基础，并辅以相应练习，了解常用的页面布局样式，并积极引导学生设计有创意的版面结构。在整个教学过程中，采用小组相互协作、交流探讨、展开互评的活动方式让学生完成任务，取长补短，拓展思维。教师注重积极引导学生，组织学生自主学习，合作学习，调动学生的积极性，让学生由被动学习转变为主动学习。七、教学环境：多媒体网

4、络教室八、教学过程：（一）新课导入在上节课结束给学生留下了一道思考题：自已动手为本校建立的校园网？根据上节课中所留的问题引入本课内容。然后让学生浏览以上网站：浙江大学附属中学网站：苏州高新区通安中学网站：广州市同和中学：泗水实验中学校园网：进而提出：如果让你去动手建立校园网，如何去设计？设计理念通过浏览以上例举的几个比较好的校园网，使学生初步了解校园网建设的设计思想、总体结构及页面表达形式，进而对自已动手设计校园网有一个初步设想，同进激发学生的学习兴趣。（二）新课讲授：1栏目设置：【课堂任务一】以浙江大学附属中学网站为例，分析此校园网中的栏目设置：1、 本校园设置了哪些栏目，并完成表1。2、

5、在这些栏目设置中，你认为存在哪些问题？3、 对于存在的问题，你认为如何改动？4、 有哪些优点，缺点？5、 通过对栏目内容的分析，你认为栏目设置需要注意哪些问题？6、 栏目设置的必要性。表1栏目名称子栏目名称附属首页学校概况附中简介 现任领导 组织机构 校长寄语校园频道校园动态 活动掠影 每周安排 每周寄语学生活动学生分组探讨，交流，完成问题教师活动对学生活动巡视并指导，并及时解决学生活动中存在的问题。教师利用课件共同总结校园网中的所设置的栏目，通过提问，讲授完成问题，并在此过程中1、引导学生注意在栏目设计时需要注意的问题：紧扣主题 栏目设置中显示有吸引力的内容 方便浏览和查询2、栏目设置的必要

6、性：明确显示主题使网站结构层次清晰【课堂任务二】通过以上对栏目设置的学习，以小组为单位，为你想象中的校园网设置所需栏目，并以表1的形式填写出来，然后各小组进行互评。评价表1：评价项目优秀良好一般得分紧扣主题1086突出重点1086信息查找迅速864设计具有创意201612设计理念通过浏览浙江大学附属中学网站，以表格的形式让学生列出网站中所设栏目，并对其进行分析，使学生明确栏目设置在网站设计中的重要性及栏目设置所要注意的问题。让学生以小组为单位，通过为校园网设置所需栏目，体验设置栏目的重要性和方法。并通过互评，使大家互相学习，共同进步。2版面设计：对于我们所要设计的网站，已经确立了主要栏目，接下

7、来就是要把我们的网站内容展现出来，那么我们要选择哪种页面表达形式才能更合理、更恰当的放置我们的信息？这就是我们网站设计的下一步：版面设计。首先，让学生了解常见的页面布局样式，阅读课本P83页，表411，并了解其优缺点。【课堂任务三】阅读课本，回答以下问题：1、“厂”字型页面顶部放置 和 ，左下方放置 ，右下方显示内容的布局。2、“口”字型页面一般上下各有一个广告条，左面是 ，右面放置 等，中间是 。3、“自由式”又称 ，菜单栏目 。4、以上三种布局样式的优缺点？探讨：如何合理地设计版面，在设计版面时，我们需要考虑哪些因素？【课堂任务四】以小组为单位，根据你们所设计的主题网站的内容和栏目结构，模

8、仿课本P84页图4-5，绘制一个具有创意的版面布局图。学生活动各小组相互交流，探讨。教师活动对学生活动进行指导，发现问题并及时解决。将每组设计情况展示给大家看，各小组之间展开互评。教师对学生创作情况进行评价，并利用课件总结版面设计的主要方法和主要步骤。评价表2：项目优秀良好一般得分主菜单位置合理性1086排版布局合理性1086布局有创意1086步骤合理性864版面布局步骤：画创意草案、粗略布局、最后构思设计理念通过学生自己动手绘制版面布局图，让学生充分发挥自己的想像力，体验版面设计的整个创作过程，并通过互评，使学生认识到自己的不足，取长补短，在以后的创作过程中注意改进，达到共同提高的目的。（三

9、）1、小结：本节主要学习了栏目设置和版面设计两大内容。通过本节的学习，要明确栏目设置、版面设计的重要性，依据网站主题，能够合理地去设计。现在你对网站设计一定有自已的打算和想法了吧！我相信每个人都有自已的特色，只要坚持努力，不断完善与创新，每个人都能实现自己的网站梦想。2、作业：上网查寻还有哪些网面布局类型？上网浏览三个网站，画出3个不一样的版面布局图。九、教学反思：本节课将课本内容分为两个大的主要环节。由于本节内容理论性较强，内容相对较枯燥，因此我采用了“任务驱动法”“小组协作”“相互互评”等教学模式。依据课本中的知识点，分别设置不同的任务，通过相互协作，交流探讨，然后展开互评，提高学生的学习兴趣，让学生积极主动地完成任务。也充分体现了学生的主体性。在整个教学过程中，教师积极引导学生，充分调动学生的积极性，并利用课件辅助教学，理清学生思路，掌握重点，把握难点。我认为，本课收到了预期的效果。但本人的教学经验不足，还存在一此问题，有待进一步完善，提高。4