课题：网页的设计网站的设计细规划一、 教材分析：本课是对浙江教育出版社的高一信息技术基础中第六章内容的拓展，是想让学生通过这课程的学习，进一步了解网站和网页的设计与制作整体风格和色彩搭配。为设计一个好的网站或网页打下坚实的基础，也对以后的学习做好了前提。而本节课主要内容是如何规划网站和网页，其遵循基本原则是什么，注意事项是什么。二、教育对象的分析：我校地处中小城市的城郊结合部，学生大都来至各县的农村，家庭并不富裕，很多学生家里没有电脑，对电脑的了解仅仅限于上网qq聊天、打游戏。有的甚至于连这些都不会，基础较差。根据实际情况，我尽量将功夫下到学生的实际操作上，让他们自己学习先暴露问题之后，方才对症下药，提高教学效率。虽然通过高一几个月的学习有所进步，学会了收发邮件，掌握了一些word、excel、photoshop等软件知识，但是对于学生的学习要求尽量低一点，慢慢来，一定会有出人意外的收获。二、 教学目标：（一）、学习目标:1、了解有关网页与网站的设计理念2、掌握网站设计基本原则3、懂得设计网站的意义（二）、过程与方法通过举例打比方（办黑板报）的方法，来使学生掌握有关网页与网站的设计理念，掌握网站设计基本原则，懂得设计网站的意义，以便下面的网页制作的学习。三、 教学重点、难点：掌握网站的设计理念，网站设计基本原则四、 教学课时：1课时。五、 教学过程：（一）、导入：如果这周轮到你们班办校黑板报后，你们将怎么办？学生1：上网查资料，参考其他班先确认黑板报的主题。学生2：根据主题，收集筛选资料。学生3：设计好板面。学生4：准备好后，让我们班写字好的同学、会画画的同学来完成。对，同学们回答的非常好。但是如果把它电子化设计成网页，怎样来完成呢。带着这个问题，我们一起来学习今天的内容。或许这节课的学习会给你一个很好的答案。（二）什么是好的网页设计（1）内容和功能决定表现形式和界面设计常常拿到的任务是一张小纸条，上面两句话，叫你去做一个网站设计。有的人看看纸条就去设计页面了凭，凭两句话，你就可以为他人做一个页面设计，那是不可能的。做网页设计，你需要了解他人的东西很多：1、建站目的2、栏目规划及每个栏目的表现形式及功能要求3、主色、客户性别喜好、联系方式、旧版网址、偏好网址4、根据行业和客户要求，那些要着重表现5、是否分期建设、考虑后期的兼容性6、客户是否有强烈的建站欲望7、你是否能在精神意识上控制住客户8、面对你未接触的技术知识，你有底吗？9. 网站类型等等.当你把这些内容都了解清除了时候，你的大脑中就已经给这个网站有个全面而形象的定位了，这时才是有的放矢去做界面设计的时候了。（2）界面弱化一个好的界面设计它的界面时弱化的，它突出的是功能，着重体现的是网站业提供给使用者是主要什么。这就涉及到浏览顺序、功能分区等等。要让访客在0.5内就能把握网站的行业性质，1秒内就知道该从哪个地方开始使用这个网站，能点一次的，绝不点第二次。当然上面说的是大多数功能性网站，对于宣战展示性网站，诸如加特效的或Flash网站，可能就不得不花哨一些，但不能太过分。网站不是动画片，在效率越来越高，社会心理越来越浮躁的中国，人们的耐心越来越小，心理承受能力越来越低。效果可以体现意境，点到为止。（3）模块化和可修改性强模块化不仅可以提高重用性，也能统一网站风格，还可以降低程序开发的强度。这里就设计一些尺寸、模数、宽容度、命名规范等等知识了，不再冗述。无论是架构还是模块或图片，都要考虑可修改性强。举个简单的例子，logo、按钮等，很多人喜欢制作图片，N个按钮就是N张图片。如果只做3-5类按钮的背景图片，然后用在网页代码里打上文字，那么修改起来就简单了，让程序员自己改字就可以了。然而网页显示的字体是带有锯齿的，一般即能清晰又保证美观的字体字号有几类：宋体 12px | 宋体 12px 粗体 | 宋体 14px | 宋体 14px 粗体 | 黑体 20px | verdana 9px | Arial Black 12px+ |（4）创意是可耻的，分析能力远比创意来的重要设计界动辄就大谈什么“创意”，我要说的是，还没有搞清目的意义内容，还没在技术制作上臻于完善的基础上班，用创艺和特效来迷惑客户和访客是可耻的。一个网也设计者的分析能力远比创艺来的重要。（三）、网页设计理念（1）内容决定形式先把内容充实上，再分区块，再定色调，再处理细节。（2）先整体，后局部，最后回归到整体。全局考虑，把能填上的都填上，占位置。然后定基调，分模块设计。最后调整不满意的几个局部细节。（3）功能决定设计方向看网站的用途，决定设计思路。商业性的就要突出赢利目的；政府型的就要突出形象和权威性的文章；教育性的，就要突出师资和课程。（四）网站和网页的设计原则网页设计表面上看，不过是关于网页版式编排的技巧与方法，而实际上，它不仅是一种技能，更是艺术与技术的高度统一。 网页设计应当以主题鲜明、形式与内容相统一、强调整体为设计原则。 网页设计同报刊杂志等平面媒体的版式设计有很多共同之处。但是，由于表现形式、运行方式和社会功能的不同，网页设计又有其自身的特殊规律。所谓网页设计，是在有限的屏幕空间上将各种网页元素，主要包括：文本、图像、表格、颜色、音乐、动态影像等进行有机的排列组合，将理性思维个性化的表现出来，是一种具有个人风格和艺术特色的视听传达方式。它在传达信息的同时，也产生感官上的美感和精神上的享受。它要求设计者必须掌握以下三个主要原则： 1.主题鲜明，富有特色 网页设计表达的是一定的意图和要求，有明确的主题。网页设计不但要单纯、简练、清晰和精确，而且应该通过对网页构成元素运用艺术的形式美法则进行条理性处理，更好地营造符合设计目的的视觉环境，突出主题，增强浏览者对网页的注意力，增进对网页内容的理解。 优秀的网页设计必然服务于网站的主题，就是说，什么样的网站，应该有什么样的设计。例如，设计类的个人站点与商业站点性质不同，目的也不同，所以评论的标准也不同。网页设计与网站主题的关系应该是这样：首先，设计是为主题服务的；其次，设计是艺术和技术结合的产物。 要使网页从形式上获得良好的诱导力，鲜明地突出诉求主题，具体可以通过对网页的空间层次、主从关系、视觉秩序及彼此间的逻辑性的把握运用来达到。2. 形式内容和谐统一 任何设计都有一定的内容和形式。内容是是设计存在的基础；形式是内容的外部表现方式。一方面，网页设计所追求的形式美，必须适合主题的需要。只讲花哨的表现形式以及过于强调“独特的设计风格”而脱离内容，或者只求内容而缺乏艺术的表现，网页设计都会变的空洞而无力。另一方面，要确保网页上的每一个元素都有存在的必要性，不要为了炫耀而使用冗余的技术。那样得到的效果可能会适得其反。3. 色彩和谐，重点突出，强调整体 网页设计时强调其整体性，可以使浏览者更快捷、更准确、更全面地认识它、掌握它，并给人一种内部有机联系、外部和谐完整的美感。整体性也是体现一个站点独特风格的重要手段之一。 （五）、注意事项网页配色基本概念（1）白纸黑字是永远的主题，谁都说不出不好来。（2）网页最常用流行色兰色蓝天白云，沉静整洁的颜色。绿色绿白相间，雅致而有生气。橙色活泼热烈，标准商业色调。暗红宁重、严肃、高贵，需要配黑和灰来压制刺激的红色，（3）颜色的忌讳忌脏背景与文字内容对比不强烈，灰暗的背景令人沮丧！忌纯艳丽的纯色对人的刺激太强烈抗议，缺乏内涵。忌跳再好看的颜色，也不能脱离整体。脱离群众是自取其辱！忌花要有一种主色贯穿其中，主色并不时面积最大的颜色，而是最重要，最能揭示和反映主题的颜色，就象领导者一样，虽然在人数上居少数，但起决定作用。忌粉颜色浅固然显的干净，但如果对比过弱，整得苍白无力了，就象病夫一样无可救药。蓝色忌纯，绿色忌黄，红色忌艳。（4）几种固定搭配蓝白橙蓝为主调。白底，蓝标题栏，橙色按钮或ICON做点缀。绿白兰绿为主调。白底，绿标题栏，兰色或橙色按钮或ICON做点缀。橙白红橙为主调。白底，橙标题栏，暗红或桔红色按钮或ICON做点缀。暗红黑暗红主调。黑或灰底，暗红标题栏，文字内容背景为浅灰色。制作网页前一定要把资料做相应的处理，比如，文字处理（word）、照片处理（photoshop）、视频处理（会声会影）。网页制作工具只是一个好像拼图一样的软件，功能有限需要这些辅助。（六）作业： 下课后，为设计一个有关“魅力长治”的网页，收集有关资料，并设计规划出自己风格，最好有创意的网站流程。（七）教学反思：1、内容有点太泛化，学生有些不知所措。2、学生底子薄，对有些专业术语不懂，需要认真并注视。3、学生的学习习惯不好，总是说一步才做一步，而且对于基础的字处理软件、图像处理软件、多媒体信息处理软件掌握程度也不同，需要教师注意进度的同时，还要不落下一名学生。4、通过这节课，学生基本上完成教学任务，为以后学习打下一定的基础。