网页设计与制作（CS4中文版） 从新手到高手 - 网页设计基础 - 图文 

网页设计与制作（CS4中文版）从新手到高手 网页设计与制作（CS4中文版）从新手到高手

在设计网页的字体时，应先对网页进行分类 这些界面元素，使用Photoshop或Fireworks等图处理。

对于多数浏览器和操作系统而言，汉字是非常复杂的文字，多数中文字体都是无法在所有字号下正常清晰显示的。

以宋体字为例，10px以下的宋体通常会被显示为一个黑点（在手持设备上这点尤为突出）。而20px大小的宋体，则会出现明显的锯齿，笔画粗细不匀。

即使是微软设计的号称最清晰的中文字体微软雅黑，也无法在所有的分辨率及字号下清晰地 显示。

经过详细的测试，中文字体在12px、14px、16px（最多不超过18px）的字号下，显示得最为清晰美观。

因此，多数网站都应使用12px大小的字体作为标准字体，而将14px的字体作为标题字体。在设计网页时，尽量少用18px以上的字体（输出为图像的文本除外）。

在字体的选择上，网站的文本是给用户阅读

的。越是大量的文本，越不应该使用过于花巧的 字体。

如针对的用户主要以使用Windows XP系统和纯平显示器为主，则应使用宋体或新宋体等作为主要字体。如果用户是以使用Vista系统和液晶显示器为主，则应使用微软雅黑字体，以获得更佳的 体验。

注意 在 中文文本的设计中，应尽量避免使用斜体。虽然作为拉丁字母中常见的一种表现形式，斜体的使用频率非常高，但是在中文中，几乎所有中文字体都无法以斜体的方式正常显示。使用斜体的后果就是降低用户阅读的舒适性。

? 制作网页概念图

在设计完成网页的各种界面元素后，即可根据

16 像处理软件制作网页的概念图。

网页概念图的分辨率应照顾到用户的显示器分辨率。针对国内的用户的显示器设置，大多数用户使用的都是17英寸甚至更大的显示器，分辨率大多为1024×768以上。去除浏览器的垂直滚动条后，页面的宽度应为1003 px。高度则尽量不应超过屏幕高度的5倍到10倍（即620×5=3100 px到6200 px之间）。

提示 如 果有条件的话，还应该针对多种分辨率的人群（例如，宽屏显示器的1440×960、上网本的1280×720，老旧的台式机或笔记本的800×600，以及各种手持设备的720×480）设计多种概念图。针对各种用户群体进行界面设计。

概念图的作用主要包括两个方面。

一方面，设计者可以为用户或网站的投资者在网页制作之前先提供一份网页的预览，然后根据用户或投资者的意见，对网页的结构进行调整和

改良。 另一方面，设计者可以根据概念图制作切片网页，然后再根据切片快速为网站布局，提高网页制作的效率。

第1章 网页设计基础 01 提示 的访问速度。 ? 编写网页页面代码 在Photoshop或Fireworks中设计完成网页的概念图，并制作切片网页后，最终还是需要输出为XHTML+CSS的代码。 网页技术的发展，使网页的制作越来越像一个系统的软件工程。从基础的XHTML结构到CSS样式表的编写，再到JavaScript交互脚本的开发，是网页制作的收尾工程。 ? 优化页面 在设计完成网页后，还需要对网页进行优化，提高页面访问速度，以及页面的适应性。 设计者应按照Web标准编写各种网页的代码，并对代码进行规范化测试。通过W3C的官方网站验证代码的准确性。

同时，还应根据当前主流的各种浏览器（IE 6、IE 7、IE 8，以及Firefox、Safari、Opera、Chrome等）和各种分辨率的显示设备测试兼容性，编写CSS Hack和JavaScript检测脚本，以保证网页在各种浏览器中都可正常显示。

片是Photoshop和Fireworks共同拥有的一切种图像切割工具。其可以将Photoshop或Fireworks制作的各种图像根据用户绘制的切片线或参考线切割成小块，然后将这些小块以表格或div容器的方式输出为网页。 ? 切片的优化 切片的优化是十分必要的。优化后的切片，可以减小用户在访问网页时消耗的时间，同时提高网页制作时的效率。 对于早期以调制解调器用户为主的国内网络而言，需要尽量避免大面积的图像，防止这些图像在未下载完成时网页出现空白。通常的做法是通过切片工具将图像切为多块，实现分块下载。

然而随着网络传输速度的发展，用户用于下载各种网页图像的时间已经大为缩短，请求下载图像的时间已超过了下载图像本身的时间。下载1张100KB的图像，消耗的时间要比下载10张10KB的图像更少。

因此，多数网站都开始着手将各种小图像合并为大图像，以减少用户请求下载的时间，提高网页

1.10

高手答疑 Q& A

问题1：什么是域名？为什么要使用域名？ 解答：要了解域名，首先应了解IP地址。IP 地址是一种在Internet上的给主机编址的方式，也称为网际协议地址。

在互联网中，每一台主机都会被分配一个独立且唯一的IP地址。在IPv4（当前最常用的IP地址编码规范）中，每个IP地址都是由32位2进制数字组成，例如，0111 1100 0001 0001 0001 1010 1111 0011就是一个IP地址。为了便于记忆，IP地址还允许写成由小数点分隔的4段10进制数字，例如，之前的二进制

IP地址可以写成124.17.26.243。

相比32位二进制地址而言，4段十进制数字确实便于记忆。然而，即便只使用4段十进制数字，访问互联网中的主机仍然是一项很困 难的工作，人们不得不记住大量的数字。

为了帮助人们更方便地访问互联网中的主机，1983年，保罗〃莫卡派乔斯（Paul Mockapetris）发明了DNS（Domain Name ，支持通过英文字母、System，域名解析系统）

数字与下划线的方式标识互联网中的主机。

全球有13台根DNS主机，可以接收用户

17 第1章 网页设计基础 01 对这些标识的解析请求，并将这些标识转换为IP地址。这种标识，就叫域名。域名的出现， Q&A 问题2：什么是URL? 解答：用户在访问某个计算机中的文件时，需要首先告诉计算机，这个文件所在的详细位置。然后，计算机才能根据这个位置读取文件，供用户使用。 URL（Uniform Resource Locator，统一资源定位符）是一种标准化的文件位置描述方式。通过URL，任意一台计算机都可获取确实存在于某台可连接计算机中的文件。 也可URL地址可以是本地计算机的磁盘，以是局域网上某台计算机，更多的则是互联网中的站点。简单地说，URL大致等同于网址。 URL是统一的，采用相同的语法，因此才可以被所有计算机识别。一个典型的URL地址包括7个部分。 protocol://hostname[:port][/path/][;parameters] [?query][#fragment] 其中，由中括号括住的为可选的参数。各参数的属性如下所示。 ? protocol URL的传输协议。不同类型的传输协议，通常应用于不同软件或范围。常用的传输协议如表所示。 协议名 file ftp http 用 途 本地磁盘的文件协议，可省略 文件传输协议，用于网络数据传输 超文本传输协议，访问大多数网页使用的协议 安全的超文本传输协议，是http的改进与发展。IE浏览器的安全设置，就需要使用格式 file:// ftp:// http:// 免去了记忆IP地址的麻烦，帮助人们更方便地访问互联网。这一协议 mailto 邮件地址协议，通过SMTP客户端发送电子邮件 微软的流媒体传输协议，可传输Windows Media Player可播放的各种流媒体 一种点对点的文件共享协ed2k 议，主要使用的软件是 ed2k:// 电驴 RealNetwork公司的流媒体传输协议，可传输各种Real格式的流媒体 rstp:// mailto: mms mms:// rstp ? hostname 主机名称，存放文件的主机域名或IP地址。有时还需要在主机名称前添加访问主机 所使用的用户名和密码。格式为username@ password。 ? port 主机的端口号。根据TCP/IP协议，每台计算机对外可以开放65536个端口，其端口号范围为0到65535。每个传输协议都有默认的端口号。例如，HTTP协议的默认端口号为80。如果服务器端的端口号为默认端口，则访问此服务器时可将端口号省略。 ? path 路径，由主机的目录及子目录组成。如访问主机中的默认文档（例如网站的index. ，则可省略。 html）? parameters 参数，用于指定特殊参数的可选项。例如，访问本地磁盘某个可执行程序，而该可执行程序允许添加win参数以实现窗口化，则可通过横线添加参数，如下所示。 file://d:\\app.exe -win https https://

17 网页设计与制作（CS4中文版）从新手到高手 网页设计与制作（CS4中文版）从新手到高手

? query 查询的值，用于给一些动态网页传递参数。一个URL地址可包含多个参数，但需要以逻辑与符号“&”连接。 ? fragment 锚记符号，用于文件页面内的超链接跳转。使用该符号，可以直接跳转到某个文件的某一部分中，常用于网页。Q& A 问题3：什么是绝对路径？什么是相对路径？ 解答：在使用网页浏览器或系统浏览器访问各种文件时，需要输入文件的路径。而根据路径的内容，可以将其划分为绝对路径和相对路径等两种。 绝对路径是文件在本地操作系统或互联网中唯一的路径，必须由协议+主机名+路径+文件名组成。除非文件被移动，否则其绝对路径不会发生变化。 与文件做参照物的路径或文件不同，文件的相对路径也会不断地变化。例如，在本地的两个文件，绝对路径分别为“F:\\xnml\\site\\01\\ ，index.html”和“F:\\xnml\\site\\01\\images\\bg.jpg”如果以“index.html”文件作为参照物，则“bg.jpg”文件的相对路径应为“images/bg.jpg”。

由于绝对路径会根据文件的位置发生改变，因此，在制作网页时，使用相对路径有诸多的优点。 例如，存放于本地的某个网页文件，其 例如，在本地设计一个网站时，站点中的本地绝对路径可以为“F:\\xnml\\site\\01\\index. 超链接全部使用绝对路径，则将网站上传到服，而其在互联网中的路径可以为“http:// html”务器之后，可能发生所有超链接失效的问题。 。 www.mysite.com/index.html”相对路径表示文件与某个目录或某个文件之间的路径关系，属于不完整的路径。在使用相对路径时，可酌情省略路径中的主机名称、详细的路径等。 而相对路径由于仅表示文件之间的关系。因此，如果在同一目录下的网页使用以该目录为参照物的相对路径，则无论如何移动该目录，目录中文档的超链接都不会失效。Q& A 问题4：什么是像素？什么是分辨率？ 解答：像素又称图元或画素，是英文Pixel的中文翻译。在计算机显示器中，显示和处理图 形图像经常需要确定一个基本的图像采样单位。将大量的图像采样拼合起来，就可以构成图像。 这样的图像采样就被称为像素。通常1个像素就是一个微小的点或方块，每个像素都有独立的颜色值。计算机显示器上面的图像都是由大量像素构成的。

分辨率是测量显示系统对细节分辨能力的比率，包括图像分辨率、光学分辨率、显示分

18 辨率等3类。在计算机显示领域，分辨率特指显示分辨率，即单位面积中包含的像素数量。 显示分辨率的单位有两种，即像素/英寸和像素/厘米。其中，常用的分辨率单位为像素/英寸，代表在显示器中，每平方英寸的面积内 包含的像素数量。 在形容计算机的图像时，分辨率越大，则图像越清晰，但占用的磁盘空间也就越大。反之，分辨率越小，则图像越粗糙，占用的磁盘空间也就越小。

在网页设计领域，由于多数浏览器支持的分辨率仅为72像素/英寸，因此，设计网页图

第1章 网页设计基础 01 像时，使用72像素/英寸的分辨率就已足够。如果设计用于印刷，则需要设置分辨率为300

像素/英寸。

Q& A

问题5：什么是位图？什么是矢量图？ 解答：位图是由像素阵列组成的计算机图像，每个像素的色彩信息由红色、绿色、蓝色组成

的各种图像也基本都属于位图。

矢量图也是一种计算机图像。其与位图有着本质的不同，矢量图并非由像素点阵构成，

的RGB颜色或灰度值、（透明度）而是由点、直线、多边形等基于数学方程的几Alpha通道值

何图形表示的图像。 标识。

由于矢量图是纯粹由数学方程构成的图形，因此，将矢量图放大或缩小任意倍数，均根据颜色信息所需的数据位数，位图可以分为1、4、8、16、24及32位等级别。其中，不会发生图像失真的情况。 矢量图并非由像素构成，因此没有分辨率1位的位图只包含黑色和白色两种颜色，4位的位图则可以包含2的4次方种颜色，以此 的概念。在多数情况下，保存矢量图需要较少 类推。 位数越高，则代表图像的色彩越丰富。相应地，图像所占用的磁盘空间也就越大。通常称24位色的位图为真彩色位图。在网页中使用的多数图像都属于位图。而Photoshop处理 的空间。 常见的矢量图形编辑软件包括Adobe公司的Illustrator和Corel公司的CorelDRAW等。在网页中，Flash动画也是基于矢量图形的。

19