网页设计基础

实验一网页设计基础（4课时）
实验目的：
了解网页中基本元素
了解网页设计常用工具
了解网页常见的布局类型
了解网页配色方案
了解网页图像和文字的设计原则
实验内容：
1、搜索下面一些关键词：网页元素、网页工具、网页布局、网页配色、网页（或网站）设计原则、网页（或网站）设计流程）、主页（或首页）设计，从搜索结果中学习掌握相关知识，并回答问题：
①网页由哪些基本元素构成？
网页元素包括，文字、图片、音频、动画、视频。

文字，符合排版要求。

图片、音频、动画、视频，符合网络传输及专题需要，需要精选。

②有哪些常见的网页布局类型？
网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型
①1、“国”字型：也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题
以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。

这种结构是我们在网上见到的差不多最多的一种结构类型。

②2、拐角型：这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，
接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。

在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。

③3、标题正文型：这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或
注册页面等就是这种类。

④4、左右框架型：这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有
一个小的标题或标致，右面是正文。

我们见到的大部分的大型论坛都是这种结构的，有一些门户网站也喜欢采用。

这种类型结构非常清晰，一目了然。

⑤5、上下框架型：与上面类似，区别仅仅在于是一种上下分为两页的框架。

⑥6、综合框架型：上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”
结构的，只是采用了框架结构。

⑦7、封面型：这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小
的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。

这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。

⑧8、Flash型：其实这与封面型结构是类似的，只是这种类型采用了目前非常游戏行的Flash，与
封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。

⑨9、变化型：即上面几种类型的结合与变化，比如本站在视觉上是很接近拐角型的，但所实现的
功能的实质是那种上、左、右结构的综合框架型。

③网页配色方案是怎样的？包括网页不同色彩代表什么含义？色彩搭配要注意哪些原则？
配色方案：单色(法)：它有一个单独的颜色打底，我们只需要调整其色度并着手设计即可。

单一色彩看起来典雅漂亮，且容易将纯色融合在内。

但是要通过单一色彩组合来创建吸引眼球的设计却不是一件容易事。

色彩补充法：一个冷色系和一暖色系的色彩相搭。

例如，你的标题是暗黑色的，但内容可以是白色的。

这也是网站设计使用最多的方法。

三色组合法：顾名思义，该方法使用色轮中等色度距离的三种色彩搭配。

四色组合法：与三色组合相同，四色组合法使用了四种色彩搭配。

模拟法：这种方法借用了色轮中的邻近的三个色彩，比如说，紫色、红色和橙色。

不同色彩含义：一、红色的色感温暖，性格刚烈而外向，是一种对人刺激性很强的色。

红色
容易引起人的注意，也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的色。

1、在红色中加入少量的黄，会使其热力强盛，趋于躁动、不安。

2、在红色中加入少量的蓝，会使其热性减弱，趋于文雅、柔和。

3、在红色中加入少量的黑，会使其性格变的沉稳，趋于厚重、朴实。

4、在红中加入少量的白，会使其性格变的温柔，趋于含蓄、羞涩、娇嫩。

二、黄色的性格冷漠、高傲、敏感、具有扩张和不安宁的视觉印象。

黄色是各种色彩中，
最为娇气的一种色。

只要在纯黄色中混入少量的其它色，其色相感和色性格均会发生较大程度
的变化。

1、在黄色中加入少量的蓝，会使其转化为一种鲜嫩的绿色。

其高傲的性格也随之消失，趋于
一种平和、潮润的感觉。

2、在黄色中加入少量的红，则具有明显的橙色感觉，其性格也会从冷漠、高傲转化为一种有
分寸感的热情、温暖。

3、在黄色中加入少量的黑，其色感和色性变化最大，成为一种具有明显橄榄绿的复色印象。

其色性也变的成熟、随和。

4、在黄色中加入少量的白，其色感变的柔和，其性格中的冷漠、高傲被淡化，趋于含蓄，易
于接近。

三、蓝色的色感冷嘲热讽，性格朴实而内向，是一种有助于人头脑冷嘲热讽静的色。

蓝色
的朴实、内向性格，常为那些性格活跃、具有较强扩张力的色彩，提供一个深远、广埔、平静
的空间，成为衬托活跃色彩的友善而谦虚的朋友。

蓝色还是一种在淡化后仍然似能保持较强个
性的色。

如果在蓝色中分别加入少量的红、黄、黑、橙、白等色，均不会对蓝色的性格构成较
明显的影响力。

1、如果在橙色中黄的成份较多，其性格趋于甜美、亮丽、芳香。

2、在橙色中混入小量的白，可使橙色的知觉趋于焦躁、无力。

四、绿色是具有黄色和蓝色两种成份的色。

在绿色中，将黄色的扩张感和蓝色的收缩感相中庸，
将黄色的温暖感与蓝色的寒冷感相抵消。

这样使得绿色的性格最为平和、安稳。

是一种柔顺、
恬静、潢足、优美的色。

1、在绿色中黄的成份较多时，其性格就趋于活泼、友善，具有幼稚性。

2、在绿色中加入少量的黑，其性格就趋于庄重、老练、成熟。

3、在绿色中加入少量的白，其性格就趋于洁净、清爽、鲜嫩。

五、紫色的明度在有彩色的色料中是最低的。

紫色的低明度给人一种沉闷、神秘的感觉。

1、在紫色中红的成份较多时，其知觉具有压抑感、威胁感。

2、在紫色中加入少量的黑，其感觉就趋于沉闷、伤感、恐怖。

3、在紫色中加入白，可使紫色沉闷的性格消失，变得优雅、娇气，并充满女性的魅力。

六、白色的色感光明，性格朴实、纯洁、快乐。

白色具有圣洁的不容侵犯性。

如果在白色
中加入其它任何色，都会影响其纯洁性，使其性格变的含蓄。

1、在白色中混入少量的红，就成为淡淡的粉色，鲜嫩而充满诱惑。

2、在白色中混入少量的黄，则成为一种乳黄色，给人一种香腻的印象。

3、在白色中混入少量的蓝，给人感觉清冷、洁净。

4、在白色中混入少量的橙，有一种干燥的气氛。

5、在白色中混入少量的绿，给人一种稚嫩、柔和的感觉
6、在白色中混入少量的紫，可诱导人联想到淡淡的芳香
色彩搭配原则
在选择网页色彩时，除了考虑网站本身的特点外还要遵循一定的艺术规律，从而设计出精美的网页。

1.色彩的鲜明性：
如果一个网站的色彩鲜明，很容易引人注意，会给浏览者耳目一新的感觉。

2.色彩的独特性：
要有与众不同色彩，网页的用色必须要有自己独特的风格，这样才能给人浏览者留下深刻的印象。

3.色彩的艺术性：
网站设计是一种艺术活动，因此必须遵循艺术规律。

按照内容决定形式的原则，在考虑网站本身特点的同时，大胆进行艺术创新，设计出既符合网站要求，又具有一定艺术特色的网站。

4.色彩搭配的合理性：
色彩要根据主题来确定，不同的主题选用不同的色彩。

例如，用蓝色体现科技型网站的专业，用粉红色体现女性的柔情等。

④网页中图像的格式主要有哪几种？各有什么特点？各自用于什么情况？
BMP格式:Windows系统下的标准位图格式,未经过压缩，一般图像文件会比较大。

在很多软件中被广泛应用.
JPEG格式：也是应用最广泛的图片格式之一，它采用一种特殊的有损压缩算法，将不易被人眼察觉的图像颜色删除，从而达到较大的压缩比(可达到2:1甚至40:1)，因为JPEG格式的文件尺寸较小，下载速度快,所以是互联网上最广泛使用的格式!
GIF格式：最大的特点是不仅可以是一张静止的图片,也可以是动画，并且支持透明背景图像，适用于多种操作系统，“体型”很小，网上很多小动画都是GIF格式。

但是其色域不太广,只支持256种颜色.
PSD格式：Photoshop的专用图像格式，可以保存图片的完整信息,土层,通道,文字都可以被保存,图像文件一般较大。

PNG格式：与JPG格式类似,网页中有很多图片都是这种格式，压缩比高于GIF，支持图像透明，可以利用Alpha通道调节图像的透明度,是网页三剑客之一Fireworks的源文件。

TIFF格式:它的特点是图像格式复杂、存贮信息多,在Mac中广泛使用的图像格式,正因为它存储的图像细微层次的信息非常多，图像的质量也得以提高，故而非常有利于原稿的复制。

很多地方将TIFF格式用于印刷.
TGA格式:TGA的结构比较简单，属于一种图形、图像数据的通用格式，在多媒体领域有着很大影响，在做影视编辑时经常使用,例如3DS MAX输出TGA图片序列导入到AE里面进行后期编辑。

EPS格式:苹果Mac机的用户则用得较多。

它是用PostScript语言描述的一种ASCII码文件格式，主要用于排版、打印等输出工作。

⑤网页文字设计的原则有哪些？
一、文字设计的原则
1．文字的可读性：
文字的主要功能是在视觉传达中向大众传达作者的意图和各种信息，要达到这一目的必须考虑文字的整体诉求效果，给人以清晰的视觉印象。

因此，设计中的文字应避免繁杂零乱，使人易认，易懂，切忌为了设计而设计，忘记了文字设计的根本目的是为了更好，更有效的传达作者的意图，表达设计的主题和构想意念。

2．赋予文字个性：
文字的设计要服从于作品的风格特征。

文字的设计不能和整个作品的风格特征相脱离，更不能相冲突，否则，就会破坏文字的诉求效果。

一般说来，文字的个性大约可以分为以下几种：（1）端庄秀丽：这一类字体优美清新，格调高雅，华丽高贵。

（2）坚固挺拔：字体造型富于力度，简洁爽朗，现代感强，有很强的视觉冲击力。

（3）深沉厚重：字体造型规整，具有重量感，庄严雄伟，不可动摇。

（4）欢快轻盈：字体生动活泼，跳跃明快，节奏感和韵律感都很强，给人一种生机盎然的感受。

5）苍劲古朴：这类字体朴素无华，饱含古韵，能给人一种对逝去时光的回味体验。

(6）新颖独特：字体的造型奇妙，不同一般，个性非常突出，给人的印象独特而新颖。

3.在视觉上应给人以美感：
在视觉传达的过程中，文字作为画面的形象要素之一，具有传达感情的功能，因而它必须具有视觉上的美感，能够给人以美的感受。

字型设计良好，组合巧妙的文字能使人感到愉快，留下美好的印象，从而获得良好的心理反应。

反之，则使人看后心里不愉快，视觉上难以产生美感，甚至会让观众拒而不看，这样势必难以传达出作者想表现出的意图和构想。

4.在设计上要富于创造性：
根据作品主题的要求，突出文字设计的个性色彩，创造与众不同的独具特色的字体，给人以别开生面的视觉感受，有利于作者设计意图的表现。

设计时，应从字的形态特征与组合上进行探求，不断修改，反复琢磨，这样才能创造出富有个性的文字，使其外部形态和设计格调都能唤起人们的审美愉悦感受。

二、文字的组合
文字设计的成功与否，不仅在于字体自身的书写，同时也在于其运用的排列组合是否得当。

如果一件作品中的文字排列不当，拥挤杂乱，缺乏视线流动的顺序，不仅会影响字体本身的美感，也不利于观众进行有效的阅读，则难以产生良好的视觉传达效果。

要取得良好的排列效果，关键在于找出不同字体之间的内在联系，对其不同的对立因素予以和谐的组合，在保持其各自的个性特征的同时，又取得整体的协调感。

为了造成生动对比的视觉效果，可以从风格、大小、方向、明暗度等方面选择对比的因素。

但为了达到整体上组合的统一，又需要从风格、大小、方向、明暗度等方面选择协调相同的因素。

将对比与协调的因素在服从于表达主题的需要下有分寸的运用，能造成既对比又协调的，具有视觉审美价值的文字组合效果。

文字的组合中，要注意以下几个方面:
1．人们的阅读习惯
文字组合的目的，是为了增强其视觉传达功能，赋予审美情感，诱导人们有兴趣的进行阅读。

因此在组合方式上就需要顺应人们心理感受的顺序。

水平方向上，人们的视线一般是从左向右流动；垂直方向时，视线一般是从上向下流动；大于45度斜度时，视线是从上而下的；小于45度时，视线是从下向上流动的。

2．字体的外形特征
不同的字体具有不同的视觉动向，例如：扁体字有左右流动的动感，长体字有上下流动的感觉，斜
字有向前或向斜流动的动感。

因此在组合时，要充分考虑不同的字体视觉动向上的差异，而进行不同的组合处理。

比如：扁体字适合横向编排组合，长体字适合作竖向的组合，斜体字适合作横向或倾向的排列。

合理运用文字的视觉动向，有利于突出设计的主题，引导观众的视线按主次轻重流动。

3．要有一个设计基调
对作品而言，每一件作品都有其特有的风格。

在这个前提下，一个作品版面上的各种不同字体的组合，一定要具有一种符合整个作品风格的风格倾向，形成总体的情调和感情倾向，不能各种文字自成一种风格，各行其是。

总的基调应该是整体上的协调和局部的对比，于统一之中又具有灵动的变化，从而具有对比和谐的效果。

这样，整个作品才会产生视觉上的美感，符合人们的欣赏心理。

除了以统一文字个性的方法来达到设计的基调外，也可以从方向性上来形成文字统一的基调，以及色彩方面的心理感觉来达到统一基调的效果等等。

4．注意负空间的运用:
在文字组合上，负空间是指除字体本身所占用的画面空间之外的空白，即字间距及其周围空白区域。

文字组合的好坏，很大程度上取决于负空间的运用是否得当。

字的行距应大于字距，否则观众的视线难以按一定的方向和顺序进行阅读。

不同类别文字的空间要作适当的集中，并利用空白加以区分。

为了突出不同部分字体的形态特征，应留适当的空白，分类集中。

在有图片的版面中，文字的组合应相对较为集中。

如果是以图片为主要的诉求要素，则文字应该紧
凑地排列在适当的位置上，不可过分变化分散，以免因主题不明而造成视线流动的混乱.
⑥网页设计有哪些原则？
⑦网页设计的步骤是怎样的？
⑧主页的概念是什么？主页设计有哪些原则？
参考：
网页设计的艺术处理原则：/article/2005/0712/A20050712433733.shtml 网页制作中对版面设计的见解：
/Design/Pages/030410L952010.html
网页版面设计欣赏：/read.php?tid-27138.html
网页设计中色彩搭配：/article/2005/0217/A20050217390943.shtml
网页布局设计：/article/2004/1129/A20041129366915_2.shtml
如何进行网页布局设计：/s/blog_6027fd880100d9un.html
2、在步骤1的基础上，在网上找到5个有特色的酷站（常见网站例如百度、新浪等不算），
①写出网站名、网站地址
②给出网站主页（首页）图，可用qq软件进行截图。

③对每个网站主页（首页）的版面设计、色彩搭配、导航和链接设计进行评价和分析。

要求给出自己的观点，越详细越好。

参考：
/
/
3、总结：关于网页设计的思考
如果要你来设计网站和网页，你的思路如何？越详细越好。

本实验作业，在第3次课前提交答案word文档。

文件命名：学号姓名作业1.doc。