《网站设计与建设》电子教案-雷学生 第5章

《《网站设计与建设》电子教案-雷学生 第5章》由会员分享，可在线阅读，更多相关《《网站设计与建设》电子教案-雷学生 第5章（170页珍藏版）》请在金锄头文库上搜索。

1、第 章 网站页面设计,5,5.1 网页的风格设计,网页的风格设计是指用户对网站整体形象的一种感觉。如果 说硬件是网站的生存环境，结构是网站的骨骼，内容是网站 的血肉，那么界面就是网站的外表。 相对于网站的其它设计，网站的风格设计是最抽象、也是最 头疼的一个问题。许多网站的建设者作为专业做作业人员， 缺少开发独特风格的主页的能力。而专业的美工师通常从事 的都是传统的美工技术，对网页操作技术和因特网知之甚 少，难设计出最适合网络传输的图片。所以网站的页面设计 并不简单，它是一项综合技术。,5.1 网页的风格设计,5.1.1 确定网站的主题风格 整个网站的主题风格是在图形界面设计之前必须要解决的重

2、要问题，是图形界面设计的出发点。 1主题风格概述 风格是一个抽象的概念，是指站点整体形象给用户的综合感 受，这个整体形象包括网站的CI（标志、色彩、字体、标语 等）、版面布局、浏览方式、交互性、文字、语气、内容价 值、存在意义、站点荣誉等等诸多因素。它往往无法用一个 具体的物体来描述，没有一个固定的程式可以参照和模仿。 有风格的网站与普通网站的区别在于：普通网站你看到的只 是堆砌在一起的信息，你只能用理性的感受来描述。但浏览 过有风格的网站后你能有更深一层的感性认识，比如站点的 品位，和蔼可亲的个性等。 所以风格就是一句话：与众不同，有个性。,5.1 网页的风格设计,2如何建立网站的主题风格

3、（1）要肯定风格是建立在有价值内容之上的。一个网站有风格而没有内容，就像绣花枕头草包一个，无论你的站点采用何种形式、什么样的外观、提供什么内容，都要以站点的最终内容、目的作为出发点来考虑。 （2）要彻底搞清楚自己希望站点给人的印象是什么。在此反复强调给人以深刻印象，因为这点很重要，浏览者通常会重返他印象最深刻的网站。可以从这几个问题来理清思路。如果只用一名话来描述你的站点，应该是什么呢？如果网站是一个人，他拥有的个性是什么呢？作为站长，你希望给人的印象是什么呢？用一种动物来比喻，你的网站最象什么？浏览者觉得你和其他网站的不同是什么呢？浏览者跟你交流合作的感受又是什么呢？你可以自己先填写一份答案

4、，然后让其他的网友填写，比较的结果会告诉你的网站现在的差距、弱点及需要改进的地方。,5.1 网页的风格设计,（3）在明确自己的网站印象后，开始努力建立和加强这种印象。经过第二步印象的“量化”后。你需要进一步找出其中最有特色特点的东西，就是最能体现网站风格的东西。并以它作为网站的特色加以重点强化，宣传。例如：再次审查网站的名称、域名、栏目名称是否符合这种个性、是否容易记忆等等。 （4）确定了风格后，要坚持所有网页风格的一致性。特别是色彩斑斓的站点,尤其要注意风格的统一。其实,风格一致性的原则和传统的印刷出版物没什么区别。网页上所有的图像、文字,包括像背景颜色、区分线、字体、标题、注脚等,都要统一

5、风格,贯穿全站。这样读者看起来舒服、顺畅,会对网站留下一个“很专业”的印象。在方法上可统一使用CSS样式技术，对整个站点内的页面风格进行统一控制。,5.1 网页的风格设计,从美工设计角度来看,网站的风格是指通过一定的颜色及图案 组合,布局安排等设计来体现网站经营者的思想和倾向。具体 制作时有三个方面的工作要做: 第一步:设置背景颜色或图案 第二步:设置文本的颜色 第三步:设置链接点的颜色,5.1 网页的风格设计,3网页主题风格的创意设计 你的网站要有独特并能给人深刻印象的风格，创意是很重要 的。创意是网站生存的关键。 创意到底是什么？如何产生创意呢？ 创意是传达信息的一种特别方式。创意就是灵感

6、。很多时 候，成功的网站就是设计者的一点灵感创造出来的。 （1）网页创意设计的意义、功能和目的 网页创意设计是否成功，除了其内容因素外，首先要看其在 视觉上能否引人注目。 网页的创意设计包括文字排列方向、字群聚散组合，字体大小风格的选择，图片的分布及色彩与空白的经营。不仅追求网页形式的变化，更重视各视觉元素的不同形式和构成能给人在感情上造成不同的心理感受，并体现不同的主题。,5.1 网页的风格设计,（2）网页创意设计的构成要素及其作用 标题。标题是表达信息主题的短句，标题有主标题与子标题之分。 标语。标语是具有韵味的意义完整的句子。 正文。 网页名称。 标志。 插图。将所传达的信息内容赋以视觉

7、化的造型称为插图。 图标。 背景。 动画。动画不仅能增添网页的视觉趣味效果，同时，也可以用来进一步突出网页和信息内容的主题和风格。,5.1 网页的风格设计,（3）网页创意设计的原理和准则 进行网页的创意设计时，应遵循以下几条构成原则： 内容与形式表现必须统一和有序，形式表现必须服从内容要求，在造型上各构成要素规格化的设计样式要统一。要依据信息内容的意义和结构进行情节化、理性化的统调布局和必要的图像符号化处理。 必须考虑网页上各构成要素之间的视觉流程，能自然而有序地达到信息诉求重点的位置，突出主题。注意提高网页信息内容的视读性，在视觉上着力强调网页的诉求重点。 注意保护网页在视觉上的相对均衡感，

8、不论是正常的均衡或是异常的均衡，均应有相应的均衡和律动感，使其在网页上得到正确的配置，否则会失去必要的安定感。,5.1 网页的风格设计,（3）网页创意设计的原理和准则 进行网页的创意设计时，应遵循以下几条构成原则： 突出主题要素。注意网页设计中的空白处理。注重整体的对比因素。 创造一定的韵律感。它反映在网页设计中利用有力的线条、形体及色彩形成一种有节奏性的律动感，能引导人的视觉以一种流畅而有停顿的方式运动。既有视觉的连续性又有间歇性，使人能够抑扬起落地浏览整个网页，阅读时感到轻松而又富于韵味。 网页的创意设计还必须重视“形象思维”的情感象征意义的传达，以有别于知识性思考形式审美结构的营造。,5

9、.1 网页的风格设计,（4）网页创意设计的形式和表现手法 点、线、面 形状间的组合和构成关系 形状与空间关系 构架与空间 节奏与韵律 对比，调和与统一 装饰与趣味 特异,5.1 网页的风格设计,4网站名称的设计 网站的名称，也称为网站的标题。网站的名称应是它主题的一部分，也应是网站设计的一部分，一个好的主题应该包括给网站起一个好的名字，如图5-1所示。如果网站题材和主题已经确定，就要围绕题材和主题给网站起一个名字。和现实生活中的商标一样，网站名称是否正气、响亮、易记，这对网站的形象和宣传推广有很大影响，对网站主题的表现也有很大的影响。 但是，也有些网站名称平平，而内容却十分突出。这些网站的特点

10、是开始的时候访问量不太大，但一段时间之后访问量却与日俱增。这种情况也是很常见的，不过网站的发展就走了不少的弯路，如果一开始就使用一个人人记得住的名字，这样再加上内容与众不同，一定会成为一个成功的网站的。,5.1 网页的风格设计,网站名称设计的一般规则： （1）名称要正，要符合人类社会公认的文明标准和规范。要合法、合情、合理，不能用带有反动的、色情的、迷信的、危害社会安全的名词语句。 （2）名称要易记。根据中文网站浏览者的特点，除非特别的需要，网站的名字最好用中文名称，不要使用英文或者中英文混合型名称，因为中文名字更亲切更好记。另外，网站名称的字数应该控制在六个字（最好四个字）以内，比如“阿里巴

11、巴”、“网易”等。 （3）名称要有特色。名称如果能体现一定的文化内涵，给浏览者更多的视觉冲击和空间想象力，则为上品。例如：音乐前卫，网页陶吧，e书时空等网站的名字就很有特色。在体现出网站主题的同时，又能点出特色之处。 总之,主题和名称的确立是设计网站的第一步,如能设计出一个既有特色又令人满意的名称,花费再多的时间和精力都是值得的。,5.1 网页的风格设计,5网站的标志（logo）和网页的图标设计 网站的标志就如同商标一样，是网站特色的集中体现。它对外宣传网站的形象，对内反映网站的内涵。 一个好的网站标志通常既要具有琅琅上口的名字，又要具有令人印象深刻的图片造型，让人看见logo就能联想起你的站

12、点。 图标的代表了网页上一个部分的内容，也能对栏目内容进行装饰。下面分别介绍网站的标志设计和网页的图标设计。,5.1 网页的风格设计,（1）网站标志的类型 为你的网站设计一个好的logo，对提高你网站的形象有很大的帮助，一般来说，网站的logo可以分为主图标和副图标两种类型。 有时你进入一个网站时，看到的并不是网站的首页，而是一幅图画，你要点击图形或者首页上的其他链接才能进入首页，这幅图画就是网站的主图标。在进入了首页之后，一般在网页的右上角有一个很小的logo，这就是网站的副图标。设置主图标的作用，就是让人们进入你的网站之前，先给人一个总体的印象。网站的副图标就是放在首页或者所有页面中的代表

13、了网站形象的一帼小图片。当没有主图标而只有一个副图标时，我们就没有主副之分而称这个副图标为网站的logo图标）。如无特别说明，下面所说的logo都是指网站的副图标。,5.1 网页的风格设计,下面就详细介绍两个重要的logo类型。 纯文字型的logo。 这类logo一般是由网站的名称、网址，或者一两个能概括角色内容的词构成。当然，字体要跟文章中的字体有很大的分别，字的颜色可以鲜艳一些，引人注目一点。要注意的是，选择合适的文字作为logo和文字之间的相互搭配是很重要的。,5.1 网页的风格设计,图形加文字的logo。 这类logo一般由一个或几个小图案再配合文字组成。图案必须能反映出网站的特色，而

14、已必须要精巧，做到小巧玲就最合适了。而文字的内容也可以与纯文字型logo的内容一样。由于文字与图案的配合更能体现网站的风格，这类logo在网上更加常用。,5.1 网页的风格设计,（2）网站标志的设计 网站标志的设计并不是漂亮就行，它需综合考虑网站的性质、网站的特色、网站所在地的历史文化等诸多方面的因素。 比如门户网站在设计时就必须考虑门户站点的性质。新浪网（）在设计其网站标志时就非常成功，它那只大眼睛无时不向人门传送“新浪就是你的眼睛，能帮助你快速地找到你想要的东西”这一信息。,5.1 网页的风格设计,又比如政府网站不仅需要考虑严肃认真的政府形象，还需要考虑政府所在地的历史文化。,5.1 网页

15、的风格设计,总之，网站标志的设计既要有特色，醒目，又要符合网站的内涵。设计Logo也有较大程度取决于创意。 标志的设计创意来自你网站的名称和内容，可以用有代表性的人物、动物和花草；也可以用中文、英文字母，或者各种符号、图案等等。还可通过卡通化和艺术化的手段或者用英文字母通过不同字体组合，以及颜色的变化来表现他们的效果。 另外，借鉴其他网站的LOGO制作是自己制作LOGO的很好的手段。例如 webdesigner（网页设计师），我们将其中E字母大写一下，wEbdEsigEr，感觉怎么样,这其实就是一种创意。如果你能够在你的网页上也加上那么几下神来之笔，你创造出来的Logo也许会深深印在人们心中。

16、,5.1 网页的风格设计,（3）网站标志设计的注意事项： 要体现形象。利用有代表性的人物、动物和花草，作为设计的蓝本，加以卡通化和艺术化。例如迪斯尼的米老鼠，搜狐的卡通狐狸，鲨威体坛的篮球鲨鱼。 要体现专业。可以以本专业有代表的物品作为标志。比如中国银行的铜板标志，奔驰汽车的方向盘标志。 要体现特色。最常用和最简单的方式是用自己网站的英文名称作标志。采用不同的字体，字母的变形，字母的组合可以很容易制作好自己的标志。比如：soim是用soim的英文作为标志，新浪用字母sina+眼睛作为标志。,5.1 网页的风格设计,图标设计的技巧通常有以下几种。 （1）栏目标题前加上一个小目标 细看网易网站的首页，你会发现在有些标题栏目之前，都有一个趣的符号标志，而且这些标志大多数反映了栏目的内容。例如在“通信”一栏，就用了一个代表信封的图标，在“娱乐”一栏，放置了一个游戏手柄的小图标等。,5.1 网页的风格设计,（2）广告图标的安排 一个成功的商业网站，除了正上方的广告横幅（banner）以外，往往还有不止一个作为广告宣传功能的图标。 为了向浏览者提供更多广告