《网页设计与制作(第二版)》第2章网页设计基础

第2章 网页设计基础
图2-1 T型布局
2020/7/9
《网页设计与制作（第二版）》
4
图2-2 “口”型布局
2020/7/9
《网页设计与制作（第二版）》
5
图2-3 “田”型布局
2020/7/9
《网页设计与制作（第二版）》
6
图2-4 “三”型布局
2020/7/9
《网页设计与制作（第二版）》
7
❖ 计算机屏幕是由电子枪投射到屏幕来产生色光。 电子枪射到屏幕可以产生3种颜色：红、绿、蓝。 我们把这3种色称为原色，常称为三原色。由这3 种色光，计算机屏幕可制作出完整的光谱。这也 就是RGB色系。
2020/7/9
《网页设计与制作（第二版）》
27
❖ 以上颜色可总结为如下色调。
（1）暖色调：即红色、橙色、黄色、褐色等色彩的搭配。 这种色调的运用，可使主页呈现温馨、和煦、热情的 氛围。
易读：是指网页让人看起来不费力，视觉效果好，符 合大众的阅读习惯。
易找：是指网页的宣传和推广，如索引擎、目录指南、 导航站点、交换链接等。
2020/7/9
《网页设计与制作（第二版）》
24
图2-wenku.baidu.com0 线、面的示例
2020/7/9
《网页设计与制作（第二版）》
25
2020/7/9
图2-21 点、线、面的结合示例
《网页设计与制作（第二版）》
26
2.1.4 网页色彩
❖ 色彩是人的视觉最敏感的东西，它是美丽而丰富 的，能唤起人类的心灵感知。网页的色彩处理得 好，可以锦上添花，达到事半功倍的效果。为了 把握好色彩的应用，我们应首先了解一下色彩的 一些基本概念。
图2-5 POP布局
2020/7/9
《网页设计与制作（第二版）》
8
❖ 网页作为一种版面，既有文字，又有图片。文字 有大小区别，文档有标题和正文之分，图片也有 大小和横竖之别。网页版面应该具有如下特点。
（1）主次分明，中心突出。 （2）大小搭配，相互呼应。 （3）图文并茂，相得益彰。 （4）动静有度，平衡对称。
2020/7/9
《网页设计与制作（第二版）》
28
2.1.5 网页配色技巧
❖ 根据网站所要传达的为信息和品牌选择颜色。 ❖ 要根据访问对象选择颜色。 ❖ 不要使用过多的颜色。 ❖ 在阅读的部分使用对比色。 ❖ 用灰阶来测试对比。 ❖ 选择颜色要注意时效性。 ❖ 选择色盘时应考虑功能性的颜色。 ❖ 注意网站色差问题。
（1）点的应用。 （2）直线的应用。 （3）曲线的应用。 （4）曲线、直线的综合应用。 （5）面的应用。
2020/7/9
《网页设计与制作（第二版）》
17
图2-13 点的应用
2020/7/9
《网页设计与制作（第二版）》
18
图2-14 线的应用
2020/7/9
《网页设计与制作（第二版）》
19
图2-15 曲线的应用
统一：是指设计的整体性、一致性。 连贯：是指要注意页面的相互关系。 分割：是指将页面分成若干小块，小块之间有视觉上
的不同，这样可以使观者一目了然。分割是对网页的 页面内容分类归档。
2020/7/9
《网页设计与制作（第二版）》
35
图2-25 统一的示例
2020/7/9
《网页设计与制作（第二版）》
2020/7/9
《网页设计与制作（第二版）》
29
图2-22 圣诞节网站
2020/7/9
《网页设计与制作（第二版）》
30
图2-23 色彩实例
2020/7/9
《网页设计与制作（第二版）》
31
❖ 在网页的色彩应用中应注意如下问题。
（1）运用相同色系色彩。 （2）运用对比色或互补色。 （3）使用过渡色。
2020/7/9
《网页设计与制作（第二版）》
32
图2-24 黑白对比
2020/7/9
《网页设计与制作（第二版）》
33
2.1.6 网页图像
2020/7/9
《网页设计与制作（第二版）》
34
2.2 网页设计原则
2.2.1 网页设计的基本原则 网页设计是有原则的，无论用什么样的方法，都要
遵循一些基本原则，这些基本原则是：统一、连 贯、分割、对比、和谐、易读、易找、清晰、精 选。
36
图2-26 连贯的示例
2020/7/9
《网页设计与制作（第二版）》
37
图2-27 分割
2020/7/9
《网页设计与制作（第二版）》
38
对比：是指通过矛盾和冲突，使设计更加富有生气。 其常用的方法有：多与少、长与短、粗与细、主与次、 美与丑等。
和谐：是指整个页面符合美的法则，浑然一体。网页 的和谐不仅要看其结构形式，而且要看其所形成的视 觉效果能否与人的视觉感受相沟通，产生共鸣。
2020/7/9
《网页设计与制作（第二版）》
20
2020/7/9
图2-16 曲线、直线的综合应用
《网页设计与制作（第二版）》
21
图2-17 点、线的综合应用
2020/7/9
《网页设计与制作（第二版）》
22
图2-18 IBM网站
2020/7/9
《网页设计与制作（第二版）》
23
图2-19 面的示例
2020/7/9
《网页设计与制作（第二版）》
9
2020/7/9
图2-6 整体风格简洁实用，中心突出
《网页设计与制作（第二版）》
10
图2-7 大图小图相互呼应
2020/7/9
《网页设计与制作（第二版）》
11
图2-8 图文并茂
2020/7/9
《网页设计与制作（第二版）》
12
图2-9 动静结合
2020/7/9
（2）冷色调：即青色、绿色、紫色等色彩的搭配。这种 色调的运用，可使主页呈现宁静、清凉、高雅的氛围。
（3）对比色调：即把色调完全相反的色彩搭配在同一个 空间里。例如：红与绿、黄与紫、橙与蓝等。这种色 调的搭配，可以产生强烈的视觉效果，给人亮丽、鲜 艳、喜庆的感觉。最后，还要考虑页面的底色（背景 色）的深、浅，这里借用摄影中的一个术语，就是 “高调”和“低调”，底色浅的称为低调。
《网页设计与制作（第二版）》
13
图2-10 对称的示例
2020/7/9
《网页设计与制作（第二版）》
14
图2-11 布局对称
2020/7/9
《网页设计与制作（第二版）》
15
图2-12 典型辐射平衡
2020/7/9
《网页设计与制作（第二版）》
16
2.1.3 网页构图
网页设计要有内容、形式、功能以及目标。点、线、 面是视觉语言中的基本元素，进行网页设计时应 使用点、线、面的互相穿插，互相衬托构成最佳 的页面效果，组合成各种各样的视觉形象，千变 万化的视觉空间，表达完美的设计意境。