第1章 初识网页设计与配色

1、为了能够使网页初学者对网页设计 有个总体的认识，在设计制作网页前，首先介 绍网页设计的基础知识。本章首先将介绍网页 的相关术语，接着介绍简单介绍网页设计常用 工具Dreamweaver、Flash和Photoshop，最后 介绍网页的布局与配送。通过本章的学习可以 为后面设计制作更复杂的网页打下良好的基础 。 网页设计的相关术语 网页美工常用工具 网页版面布局设计 常见的版面布局形式 文字与图像版式设计 网页配色安全 不同色彩的网页 网页配色技巧 1.11.1网页设计的相关术语网页设计的相关术语 在学习网页设计之前，先来了解一下网页 中静态网页和动态网页的基本概念。 1.1.1 1.1.1 什

2、么静态网页什么静态网页 静态网页是网站建设初期经常采用的一种 形式。网站建设者把内容设计成静态网页， 访问者只能被动地浏览网站建设者提供的 网页内容。 浏 览 器 HTTP 请求 HTTP 应答 服 务 器 .2什么动态网页什么动态网页 所谓动态网页是指网页文件里包含了程序代 码，通过后台数据库与Web服务器的信息交互，由后 台数据库提供实时数据更新和数据查询服务。这种 网页的后缀名称一般根据不同的程序设计语言而不 同，如常见的有.asp、.jsp、.php、.perl、.cgi等 形式。动态网页能够根据不同时间和不同访问者而 显示不同内容。如常见的BBS、留言板和购物系统通

3、常是用动态网页实现。 浏 览 器 HTTP 请求 HTTP 应答 数据库 程序 1.21.2网页美工常用工具网页美工常用工具 网页设计是一个感性思考与理性分析相 结合的复杂的过程，它的方向取决于设计 的任务，它的实现依赖于网页的制作。网 页设计中最重要的东西，并非在软件的应 用上，而是在对网页设计的理解以及设计 制作的水平上，在于自身的美感以及对页 面的把握上。 .1掌握网页编辑排版软件掌握网页编辑排版软件DreamweaverDreamweaver Dreamweaver是网页设计与制作领域中 用户最多、应用最广、功能最强的软件，随着 Dreamweaver CC的发布，更坚

4、定了 Dreamweaver在网页设计与制作领域中的地位。 .2掌握网页图像制作软件掌握网页图像制作软件PhotoshopPhotoshop Photoshop是Adobe公司推出的图像处 理软件，目前已被广泛应用于平面设计、网页 设计和照片处理等领域。随着计算机技术的发 展，Photoshop已历经数次版本更新。 .3掌握网页动画制作软件掌握网页动画制作软件FlashFlash Flash是一款功能非常强大的交互式 矢量多媒体网页制作工具，能够轻松输出各种 各样的动画网页。它不需要特别繁杂的操作， 也比Java小巧精悍，但它的动画效果、互动效 果、多媒体效果十

5、分出色。由于Flash编制的 网页文件比普通网页文件要小得多，所以大大 加快了浏览速度。 1.31.3网页版面布局设计网页版面布局设计 网页设计要讲究编排和布局，虽然网页设 计不同于平面设计，但它们有许多相近之处，应加 以利用和借鉴。为了达到最佳的视觉表现效果，应 讲究整体布局的合理性，使浏览者有一个流畅的视 觉体验。 .1网页版面布局原则网页版面布局原则 网页在设计上有许多共同之处，如报 纸等，也要遵循一些设计的基本原则。熟悉一 些设计原则，再对网页的特殊性做一些考虑， 便不难设计出美观大方的页面来。网页页面设 计有以下基本原则，熟悉这些原则将对页面的 设计有所帮助。 1.3

6、.21.3.2点、线、面的构成点、线、面的构成 在网页的视觉构成中，点、线、面既 是最基本的造型元素，又是最重要的表现手段。 在布局网页时，点、线、面是需要最先考虑的 因素。只有合理的安排好点、线、面的关系， 才能设计出具有最佳视觉效果的页面，充分地 表达出网页最终目的。网页设计实际上就是如 何处理好3者的关系，因为不管是任何视觉形 象或者版式构成，归结到底，都可以归纳为点、 线和面。 1.41.4常见的版面布局形式常见的版面布局形式 常见的网页布局形式大致有“国”字型、拐角 型、框架型、封面型和Flash型布局等。 1.51.5文字与图像版式设计文字与图像版式设计 文本是人类重要的信息载体和

7、交流工具， 网页中的信息也是以文本为主。虽然文字不如图像 直观形象，但是却能准确地表达信息的内容和含义。 在确定网页的版面布局后，还需要确定文本的样式， 如字体、字号和颜色等，还可以将文字图形化。 .1文字的字体、字号、行距文字的字体、字号、行距 网页中中文默认的标准字体是“宋体”， 英文是The New Roman。如果在网页中没有设 置任何字体，在浏览器中将以这两种字体显示。 .2文字的图形化文字的图形化 所谓文字的图形化，即把文字作为图 形元素来表现，同时又强化了原有的功能。作 为网页设计者，既可以按照常规的方式来设置 字体，也可以对字体进行艺术化的设计。

8、无论 怎样，一切都应该围绕如何更出色地实现自己 的设计目标。 1.61.6网页配色安全网页配色安全 有时虽然使用了合理且美观的网页配色方 案，即使是一样的颜色，也会由于浏览者电脑显示 设备、操作系统、显示卡以及浏览器的不同有不尽 相同的显示效果。为此，对于一个网页设计来说， 了解并且利用网页安全色可以拟定出更安全、更出 色的网页配色方案，通过使用216网页安全色彩进行 网页配色，不仅可以避免色彩失真，而且可以使配 色方案很好的为网站服务。 1.6.12161.6.1216网页安全色网页安全色 216网页安全色是指在不同硬件环境、 不同操作系统、不同浏览器中都能够正常显示 的颜色集合（调色板）。也就是说这些颜色在 任何终端浏览用户显示设备上的显示效果都是 相同的。所以使用216网页安全色进行网页配 色可以避免原有的颜色失真问题。 .2网页安全色配色辞典网页安全色配色辞典 216网页安全色对于一个网页设计师 来说是必备的常识，且利用它可以拟定出更安 全、更出色的网页配色方案