网站的设计(北碚区).docVIP

《网站的设计》教学设计 ? 　　本节课讲授广东教育出版社信息技术选修3《网络技术应用》第四章第二节“网站的设计”，主要介绍对一个网站的整体规划和设计，包括栏目设计，版面布局等。并介绍使用网页制作工具FrontPage实际动手制作自己的网站，将规划设计的蓝图通过同学们自己的努力成为现实。 　　二、学情分析 ? 　　学生已经会收集和整理素材，对网站的策划与构思有了一定的了解，但网站创建的知识以及网站策划构思的实践比较欠缺，另外学生现有知识水平存在一定差异。 ? 　　三、教学目标 ? 　　知识与技能：理解网页的基本构成，学会网页栏目的设计；知道创建网站的一般过程，了解一些主页设计的知识；初步掌握网站的策划与构思。 ? 　　过程与方法：通过自主探究和小组合作完成学习任务，掌握一些探究学习的方法，培养与他人协作、交流的意识和能力。 ? 　　情感、态度与价值观：通过网站主页设计，激发学生的创作欲望，提高学习信息技术的兴趣和愿望。 ? 　　四、教学重难点 ? 　　重点：学会网页栏目的设计以及网页布局，初步掌握网站的策划与构思。 ? 　　难点：如何在主页制作中实现自己的网站设计构思。 ? 五、教学过程 一、引入：欣赏网页 在今天这个时代人们几乎天天都在上网，每次上网都会接触各种各样的网站，你会发现有的网站第一次浏览就不禁被其吸引，让你愿意流连在其中。比如这几个网站的页面：我们先来欣赏一下四个网页，同学们观察它们在结构、内容等案例分析：虎门销烟启思录小明要做一个有关虎门销烟的主题网站，名字叫“虎门销烟启思录”， 请同学们帮他想一想这样一个网站应该包括哪些版块？哪些内容？ 标志可以是中文、英文字母，可以是符号、图案，可以是动物或者人物等。 标志的设计创意来自你网站的名称和内容。 设计标志有以下几种方法： 1、选择与网站主题有关的，并具有代表性的人或者物，用它们作为设计的蓝本，加以卡通化和艺术化。 2、对于专业性的网站，可以以本专业有代表的物品作为标志。 3、最常用和最简单的方式是用自己网站的中文或者英文名称作为标志。采用不同的字体、字母的变形与组合，可以很容易制作出自己的标志。 第二步：设计网站的标准颜色 网站的标志、标题、主菜单和主色块文字的链接色彩尽量使用标准色彩； 图片的主色彩、背景色、边框等尽量使用标准色彩同色系的色彩。 一个网站的标准色彩不超过3种。 色彩总的应用原则应该是“总体协调，局部对比”。 第三步：设计网站的标准字体。 标准字体是指用于标志、标题、主菜单的特有字体。 一般网页默认的字体是宋体。 使用一些比较特别的字体时，最好使用图片的形式。 五、动动手，试一试 到这里，我们已经对网站设计的基本流程有了一定的了解,接下来我们就来试一试，自己动手设计一个网站的页面。 动手设计出“虎门销烟启思录”的首页： 制作网页的工具有很多，这里我们选择microsoft frontpage2003进行网页的布局和制作，在版面布局的时候，我们通常会选择利用表格进行布局设计，下面老师就带着同学们一起利用表格来对“虎门销烟启思录”网站的首页进行版面布局设计。 1、教师演示利用网页制作工具“frontpage”制作“虎门销烟启思录”网站首页的一部分内容。 2，学生完成剩下的网页设计内容。 六、课外拓展 课外拓展１ ：网页色彩的选择　　　 红色：是一种激奋的色彩，能够使人产生喜庆、激情、活力的感觉 绿色：介于冷暖两种色彩的中间，显得和睦、宁静、健康、安全、它和金黄、淡白搭配，可以营造优雅、舒适的气氛。 橙色：也是一种激奋的色彩，显得轻快、欢欣、热烈、温馨、时尚的效果 蓝色：是最具凉爽、清新、专业的色彩，它和白色混合，能体现柔顺、淡雅、浪漫的气氛。 白色：让人产生洁白、明快、纯真、清洁的感觉 黑色：使人产生深沉、神秘、寂静、悲哀、压抑的感觉 灰色：让人联想到中庸、平凡、温和、谦让、中立和高雅的感觉 每种色彩在饱和度、透明度上的略微变化就会产生不同的感觉。以绿色为例，黄绿色有青春、旺盛的视觉意境，而蓝绿色则显得幽静、阴深。在网页配色中，不要将所有的颜色都用到，尽量控制在三种颜色以内，背景色和前文字的对比尽量要大，以便让文字看起来更清晰。 课外拓展２：造型及其代表意义 页面布局的造型与主题的表达有着密切的联系，不同的形状所代表的意义是不同的。比如矩形代表正义、规则。很多政府网页都是以矩形为整体造型；圆形代表柔和、团结、温暖、安全等，许多时尚站点喜欢以圆形为页面的整体造型；三角形代表着力量、权威、牢固、进攻性等，许多大型的商业站点为显示它的权威性常以三角形为页面的整体造型；菱形代表着平衡、协调、公平，一些交友的站点常运用菱形作为页面的整体造型。虽然不同的形状代表着不同的意义，但目前的制作多数是结合多个同行来设计的，其中某种图形的比例可能占得多一