网页设计与制作（CS4中文版）从新手到高手 网页设计与制作（CS4中文版）从新手到高手
1.4 网页色彩基础 在Photoshop等图像处理软件中，通常用一种渐变色条来表示色彩的色相。
设计类似，对色彩都有较大的依赖性。色彩可以决定网站的整体风格，也可以决定网站所表现的情绪。
网页设计是平面设计的一个分支，和其他平面
1．三原色的概念
人类的眼睛是根据所看见的光的波长来识别颜色的。肉眼可识别的白色太阳光事实上是由多种波长的光复合而成的全色光。
根据全色光各复合部分的波长（长波、中波和短波），可以将全色光解析为3种基本颜色，即红（Red）、绿（Green）和蓝（Blue）三原色光。
可见光中，绝大多数的颜色可以由三原色光按不同的比例混合而成。例如，当3种颜色以相同的比例混合，则形成白色；而当3种颜色强度均为0时，则形成黑色。
2．色彩的属性
任何一种色彩都会具备色相、饱和度和明度3种基本属性。这3种基本属性又被称为色彩的3要素。修改这3种属性中任意一种，都会影响原色彩其他要素的变化。
? 色相
色相是由色彩的波长产生的属性，根据波长的长短，可以将可见光划分为6种基本色相，即红、橙、黄、绿、蓝和紫。根据这6种色相可以绘制一个色相环，表示6种颜色的变化规律。
6
? 饱和度
饱和度是指色彩的鲜艳程度，又称彩度、纯度。色彩的饱和度越高，则色相越明确，反之则越弱。饱和度取决于可见光波长的单纯程度。
在色彩中，六色色相环中的6种基础色饱和度最高，黑、白、灰没有饱和度。
? 明度
明度是指色彩的明暗程度，也称光度、深浅度。色彩的明度来自于光波中振幅的大小。色彩的明度越高，则颜色越明亮，反之则越阴暗。
在无彩色系中，明度最高的是白色，而最低的是黑色。在有彩色系中，明度最高的是黄色，最低的是紫色。
3．色彩模式
自然界中的颜色种类繁多，单纯以颜色的名称来表示颜色是无法适应平面设计及工业生产需要的。因此，人们引入了色彩模式的概念。
色彩模式是表示色彩的方法。在不同的应用领域里，表示色彩的方式也有很大区别。在平面设计领域，常用的色彩模式主要分为两种，即RGB色
彩模式和CMYK色彩模式。
网页设计与制作（CS4中文版）从新手到高手 网页设计与制作（CS4中文版）从新手到高手
? RGB色彩模式
RGB色彩模式主要是应用于输出CRT显示器的一种色彩模式，其采用加法混色法，以描述各种可见光在颜色中占据的比例来分析色彩。RGB色彩的基准是光学三原色（红、绿和蓝）。
提示 、洋红 墨4种颜色分别为青色（Cyan）油
色（Magenta，又称品红色）、黄色（Yellow）、黑色（Black，为与RGB的蓝色区分而使用最后一个字母K）。CMYK常用每种颜色深度的百分比来表示。 提示 有网页设计领域中的色彩，都是以RGB所色彩模式表现的。例如，常见的#RRGGBB以及数字表示法，都是根据RGB三原色的强度实现的。
4．Web 216安全色
在早期各种浏览器中，图像的颜色显示方式并不统一，同样一种颜色在不同的网页浏览器中可能会显示不同的颜色。
为了保证网页基本的色彩显示，人们规定了216种颜色的显示方法，这216种颜色以同样的效果在任意的浏览器中不会造成色彩的错乱，被称为“安全的”颜色，即Web 216安全色。
? CMYK色彩模式
CMYK色彩模式是主要应用于印刷品的一种色彩模式。其原理是根据印刷时使用的四色油墨混合的比例实现各种色彩，因此属于减法混色法。
1.5 网页设计与开发技术 语言发展起来的一种标记语言。
在W3C的网页标准化体系中，XHTML属于? CSS技术
CSS（Cascading Style Sheets，层叠样式表）是一种数据表文件，在该类数据表中，存储了网页结构语言的各种样式，以及显示方式等内容，并通过表的ID、标签以及类等选择器供XHTML调用。
在W3C的网页标准化体系中，CSS属于网页的表现技术。
与开发的过程中可使用多种技术。总体而言，网页
的设计与开发可分为前台技术和后台技术两大类。 网页的结构技术。
1．前台技术
前台技术是指在整个网站体系中，用于实现显示层的技术，或者面向网站用户的技术。目前应用于前台的技术包括如下几种。
? XHTML技术
XHTML（eXtensible Hyper Text Markup Language，可扩展的超文本标记语言）是由HTML
6 网页的设计与开发是一项复杂的工程，在设计
网页设计与制作（CS4中文版）从新手到高手 网页设计与制作（CS4中文版）从新手到高手
? ECMAScript技术
ECMAScript技术是由ECMA国际（European Computer Manufacturers Association International，欧洲计算机制造商协会，一个由各厂商组成的国际商业化标准组织）制定的标准化脚本语言，其前身为JavaScript脚本语言。
ECMAScript脚本语言包含多种子集，例如，微软的JScript和JScript.Net、Adobe的ActionScript以及Digital Mars的DMDScript等。
在W3C的网页标准化体系中，ECMAScript属于网页的行为技术。
? Ajax技术
Ajax（Asynchronous JavaScript and XML，异步JavaScript与XML）是一种由JavaScript脚本语言扩展而来的网页前台开发技术。
Ajax允许客户端进行简单的数据处理，并与服务器端进行异步通信，因此可以在不刷新页面的情况下维护数据，减小了服务器程序的负担，并提高了页面的执行效率，降低了网络带宽的占用。
? E4X技术
E4X（ECMAScript for XML，ECMAScript对XML的扩展）是一种ECMAScript的扩展技术。其提供了一种更直观、语法更简洁的DOM接口，帮助ECMAScript代码访问XML数据，实现更快的访问速度及更好的支持。
? 切片技术 切片技术是应用于网页图形处理的一种技术，
其最早出现于Adobe公司的ImageReady软件中，
可将整张图片切割为几张图片，并输出一个网页，将图片作为网页表格或层中的内容。
切片技术的出现，提高了平面设计转换为网页设计的效率。目前，可以使用切片技术的图像处理软件包括Photoshop（ImageReady目前已被整合到Photoshop中）、Fireworks、Illustrator以及CorelDRAW（CorelDRAW中称为裁切工具）。
2．后台技术
后台技术是指在整个网站体系中，用于实现控
8 制层或模型层的技术，或者面向网站数据管理的技术。目前应用于后台的技术包括如下几种。
? ASP技术
ASP（Active Server Pages，动态服务网页）是微软公司开发的一种由VBScript脚本语言或JavaScript脚本语言调用FSO（File System Object，文件系统对象）组件实现的动态网页技术。
ASP技术必须通过Windows的ODBC与后台数据库通信，因此只能应用于Windows服务器中。ASP技术的解释器包括两种，即Windows 9X系统的PWS和Windows NT系统的IIS。
? ASP.NET技术
ASP.NET是由微软公司开发的ASP后续技术，其可由C#、VB.NET、Perl及Python等编程语言编写，通过调用System.Web命名空间实现各种网页信息处理工作。
ASP.NET技术主要应用于Windows NT系统
中，需要IIS及.NET Framework的支持。通过Mono平台，ASP.NET也可以运行于其他非Windows系
统中。
第1章 网页设计基础 01 提示 然ASP.NET程序可以由多种语言开发，虽但是最适合编写ASP.NET程序的语言仍然是C#语言。
? JSP技术
JSP（JavaServer Pages，Java服务网页）是由太阳计算机系统公司开发的，以Java编写、动态生成HTML、XML或其他格式文档的技术。
JSP技术可应用于多种平台，包括Windows、Linux、UNIX及Solaris。
JSP技术的特点在于，如果客户端第一次访问JSP页面，服务器将现解释源程序的Java代码，然后执行页面的内容。因此速度较慢。
而如果客户端是第二次访问，则服务器将直接较快。
? PHP技术
PHP（Personal Home Page，个人主页）也是一种跨平台的网页后台技术。其最早由丹麦人Rasmus Lerdorf开发，并由PHP Group和开放源代码社群维护，是一种免费的网页脚本语言。
PHP是一种应用广泛的语言，其多在服务器的读取。
调用Servlet，无需再对代码进行解析，因此速度 端执行，通过 PHP代码产生网页并提供对数据库
1.6 Photoshop CS4简介 Photoshop除了导入和处理位图外，还能导入由CorelDraw或Illustrator创建的各种矢量图，并对矢量图进行处理。
在网页设计领域中，Photoshop主要被用来进行网页制作前期的工作，包括处理网页所使用的各种图像、绘制各种按钮、图标以及制作网页模板，并通过切片工具将设计好的网页模板切割成网页。
图像处理软件。
1．Photoshop概述
在图像处理领域中，Photoshop是目前最流行的图像处理工具，其主要处理由像素（Pixels）构成的数字图像，利用其编辑与绘图工具进行图片编辑工作。
Photoshop是Adobe公司开发的一款专业图形
2．Photoshop新增功能
Photoshop最新的版本为CS4（11.0，于2008年9月发布），新增了调整和蒙版面板，用于创建
和编辑非破损蒙版的所有工具，快速调整特定的图像区域。
除此之外，Photoshop CS4还新增了3D绘图与合成工具，允许用户直接在3D模型上绘制图形，并将渐变图像转换为3D图像。
9 网页设计与制作（CS4中文版）从新手到高手 网页设计与制作（CS4中文版）从新手到高手
标题栏与 菜单栏 属 性 名 作 用
用户可在这里设置创建图像的宽度，同时选择不同的单位，例如像素、英寸、厘米、毫米、点、派卡及列等
用户可在这里设置创建图像的高度，同时选择不同的单位 用户可在这里设置创建图像的分辨率，单位可以为像素/英寸或像素/厘米
用户可在这里设置创建图像的颜色模式，包括位图（黑白双色）、灰度（自8位到32位）、RGB颜色（自8
宽度
插入面板 面板组 工作区 高度
分辨率 3．创建图像
与Dreamweaver不同，Photoshop CS4没有欢迎屏幕。因此，使用Photoshop创建图像，只能通过执行【文件】|【新建】命令或按Ctrl+N组合键，打开【新建】对话框，通过该对话框来实现。
颜色模式
位到32位，主要用于屏幕显示）、CMYK颜色（8位和16位，主要用于印刷）以及色彩最丰富的Lab颜色（8位和16位，主要用于数码摄影与相片处理）等
续表
属 性 名 背景内容
作 用
用户可在这里设置创建的图像背景颜色，可选择白色、背景色及透明等3种
用户可在这里设置Photoshop管理颜色的规则，不同的颜色模式需要使用不同的颜色配置文件。例如，RGB颜色可使用Adobe RGB或sRGB IEC61966—2.1等
用户可在这里设置每个像素点的具体形状，包括普通正方形及各种长宽比的矩形（主要用于输出宽频显示器等）
单击这个按钮，用户可将目前设置的属性存储起来，并设置一个名称。在下次创建图像时通过【预设】属性调用
单击这个按钮，可删除【预设】属性中选择的属性
颜色配置 文件
在【新建】对话框中，用户可设置图像的各种基本属性，如表所示。
属 性 名 名称 预设 大小 作 用 创建图像文档的预设名称 图像的属性方案，包括官方设置的9种及用户自定义的图像属性方案 如选择的预设方案是官方的方案，则这里会显示图像的像素大小 续表
删除预设 存储预设 像素长宽比
1.7 Dreamweaver CS4简介 司收购）开发的一款强大的所见即所得网页设计与
10 Dreamweaver是Macromedia（现被Adobe公
网页设计与制作（CS4中文版） 从新手到高手 - 网页设计基础 - 图文
