网站的设计ppt课件

1、一、复习一、复习网站开发的一般过程：1、基本概念2、网站的需求分析(目标、对象、投入等)3、确定网站的主题4、确定网站的名称5、选择网页制作工具新课引入 网站设计是将网站由蓝图变为现实的第一个步骤，是搭建网站整体结构的过程，它可以使接下来的工作更加有的放矢。 那我们到底如何来对网站进行设计呢？网站实例欣赏网站名称：网站名称：网站主题：网站主题：展示、推广中学生文学原创作品，提供华语文学爱好者交流的平台栏目设置栏目设置网站名称：网站名称：网站主题：网站主题：一个学生研究小组对泰山石刻历史和保护为课题主题研究成果展示。栏目设置栏目设置网站实例欣赏第一、栏目设置v 网站的制作就好比写一篇文章，首先要

2、拟好提纲，文章才能主题明确，层次清晰，所以，主题选好后，网站设计的第一步要设置栏目。v 下面以制作“机器人做学玩”网站为例。“机器人做学玩”网站的栏目设置栏目设置需注意：（1 1）要紧扣主题，尽可能删除与主题无关的栏目）要紧扣主题，尽可能删除与主题无关的栏目（2 2）尽可能将网站最有吸引力的内容列在栏目上）尽可能将网站最有吸引力的内容列在栏目上（3 3）尽可能方便访问者的浏览和查询。如：设置）尽可能方便访问者的浏览和查询。如：设置“本站指本站指南南”或或“网站地图网站地图”栏目可以帮助初访者快速找到他们想栏目可以帮助初访者快速找到他们想要的内容要的内容任务一：设置网站的栏目。要求：填写“任务文

3、档.doc”中的任务一中的表格。第二、版面设计v 网海茫茫，能够吸引我们眼球的只有那些有特色的网网海茫茫，能够吸引我们眼球的只有那些有特色的网页，大量的网页引不起网民的兴趣，究其原因，站点页，大量的网页引不起网民的兴趣，究其原因，站点内容是否丰富是其中一个方面，而网页的版面设计是内容是否丰富是其中一个方面，而网页的版面设计是否精美也是重要因素之一。否精美也是重要因素之一。v 版面结构是指将不同元素巧妙排列的方式，合理的版版面结构是指将不同元素巧妙排列的方式，合理的版面结构能够使浏览者清楚、容易地理解作品传达的信面结构能够使浏览者清楚、容易地理解作品传达的信息。息。v 布局就是以最适合浏览的方式

4、将图片和文字排放在页布局就是以最适合浏览的方式将图片和文字排放在页面的不同位置。网页要呈现的内容很多，如何合理地面的不同位置。网页要呈现的内容很多，如何合理地放置信息，使之井井有条、主次分明是版面布局需要放置信息，使之井井有条、主次分明是版面布局需要考虑的问题。考虑的问题。常见页面布局样式(第一种)参考示例参考示例主菜单以及横条网站标志主菜单以及横条网站标志+广告条广告条显显示示内内容容主主菜菜单单常见页面布局样式(第二种)主菜单广告条主要内容友情链接等参考示例参考示例常见页面布局样式(第三种)页面布局像一张宣传海报，以一张精美图片作为页面的设计中心，菜单栏目自由摆放。参考示例参考示例怎样设计

5、版面？ 一般来说，网页版面布局可按一般来说，网页版面布局可按创意草案、粗略布局、最后定案创意草案、粗略布局、最后定案三个步骤来进行。三个步骤来进行。 下面我们来看下面我们来看“机器人做学玩机器人做学玩”网站的版面布局图：网站的版面布局图：第三、树立网站整体风格网网站站风风格格粗犷豪放粗犷豪放清新秀丽清新秀丽温文尔雅温文尔雅执着热情执着热情第一步：设计、制作一个网站的标志（logo） 标志可以是中文、英文字母，可以是符号、图案，可以是动物或者人物等。标志的设计创意来自你网站的名称和内容。一般来说，设计标志有这样几种方法： （1 1）选择与网站主题有关的，并具有代表性的人或物，用它们为设）选择与网

6、站主题有关的，并具有代表性的人或物，用它们为设计蓝本，加以卡通化和艺术化。如搜狐网站的狐狸尾巴计蓝本，加以卡通化和艺术化。如搜狐网站的狐狸尾巴 （2 2）对于专业性的网站，可以是本专业有代表的物品作为标志，比）对于专业性的网站，可以是本专业有代表的物品作为标志，比如中国银行的铜板标志。如中国银行的铜板标志。（3 3）最常用和最简单的方式是用自己网站的中文或英文名称作标志。）最常用和最简单的方式是用自己网站的中文或英文名称作标志。采用不同的字体、字母的变形与组合，可以很容易制作出自己的标采用不同的字体、字母的变形与组合，可以很容易制作出自己的标志。如：志。如：“机器人做学玩机器人做学玩”网站标志

7、。网站标志。R是机器人“robot”第一个字母，R分割成两部分，上面是“做”的英文单词do的首字母D，下部分可看成“人”字，蕴涵制作机器人的意思LOGO欣赏任务二： 完成任务文档中的任务二和任务三。第二步：设计网站的标准色彩 网站的标志、标题、主菜单和主色块文字的链接色彩尽量使用标准网站的标志、标题、主菜单和主色块文字的链接色彩尽量使用标准色彩；图片的主色彩、背景色、边框等尽量使用标准色彩同色系的色彩，色彩；图片的主色彩、背景色、边框等尽量使用标准色彩同色系的色彩，这样给人以这样给人以整体统一整体统一的感觉。的感觉。 我们来浏览一些网站是如何运用色彩树立风格的：蓝色调为主，加上白色和蓝色调为主

8、，加上白色和红色，强调权威与真实红色，强调权威与真实橙色为主，白色为辅，具有橙色为主，白色为辅，具有轻快、时尚的效果轻快、时尚的效果第二步：设计网站的标准色彩红色为主，产生热情、活力的红色为主，产生热情、活力的感觉、充满欢乐气氛感觉、充满欢乐气氛绿色为主，白色为辅，产生舒适绿色为主，白色为辅，产生舒适、优雅、适于阅读的气氛、优雅、适于阅读的气氛 网站的标志、标题、主菜单和主色块文字的链接色彩尽量使用网站的标志、标题、主菜单和主色块文字的链接色彩尽量使用标准色彩；图片的主色彩、背景色、边框等尽量使用标准色彩同色系标准色彩；图片的主色彩、背景色、边框等尽量使用标准色彩同色系的色彩，这样给人以的色彩

9、，这样给人以整体统一整体统一的感觉。的感觉。第二步：设计网站的标准色彩 网站色彩设计的总体原则网站色彩设计的总体原则“总体协调，局部对比总体协调，局部对比”。一个。一个网站的标准色彩网站的标准色彩不超过不超过3 3种种，太多则使人眼花缭乱。至于其它色彩，也，太多则使人眼花缭乱。至于其它色彩，也可以作为可以作为点缀和衬托点缀和衬托，决不能喧宾夺主。，决不能喧宾夺主。色彩太多、跟主色调不协调黄颜色，眼睛容易疲劳、不在同一色系第三步：设计网站的标准字体 设计网站的标准字体设计网站的标准字体，指在关键的标题、主菜单、图片里，指在关键的标题、主菜单、图片里使用使用统一统一的标准字体。的标准字体。 一般网

10、页默认的字体是宋体。各种字体大都具有各自不同一般网页默认的字体是宋体。各种字体大都具有各自不同的性格，如的性格，如黑体字凝重、宋体字端庄、隶书飘逸、楷体淡雅黑体字凝重、宋体字端庄、隶书飘逸、楷体淡雅等等等。体现专业可以用粗仿宋体，体现设计精美可以用广告体，等。体现专业可以用粗仿宋体，体现设计精美可以用广告体，体现亲切随意可以用手写体等。体现亲切随意可以用手写体等。p以上三个方面，标志、色彩和字体，是一个网站树立整体形象的关键，设计并完成这几步，相信你的网站整体形象已经有了一个很大的提高。简洁大方简洁大方风格风格独特独特，构图巧妙构图巧妙生动活泼生动活泼色彩色彩丰富丰富浓郁的文化气息浓郁的文化气息任务三：完成任务文档中的任务四。第四、收集素材v “内容为王内容为王”依然是网站成功的关键，没有丰富的内容就不可依然是网站成功的关键，没有丰富的内容就不可能让浏览者觉得对自己有用，如果内容空洞，无论页面制作得能让浏览者觉得对自己有用，如果内容空洞，无论页面制作得如何精美，仍然不会有多少浏览者。如何精美，仍然不会有多少浏览者。v 在收集素材的过程中要注意以下三个方面：在收集素材的过程中要注意以下三个方面：1 1、要注意对收集来的素材分类。、要注意对收集来的素材分类。2 2、文件名要易懂易记；、文件名要易懂易记；3 3、要注意