作者：张建淳
出版社：河北美术出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
网页设计试读：
前言
自20世纪90年代初在互联网上出现了第一个网站后，设计师们就尝试着使用各种方法使网页看上去更美。但是早期的网页由于带宽的限制，绝大部分的页面是由文本构成的，仅仅配以一些小图片作为装饰，页面呆板，毫无生气。随着互联网的飞速发展，短短的十几年间网页由简单的文字页面神奇般地变换成图文并茂、动画及多媒体共同呈现的繁荣景象，各类网站如雨后春笋般展现在我们面前，从而为设计师们创造了一个展示自我的广阔舞台。
网页设计这个行业并非一开始就有，随着网站建设的需求越来越多样化，同时也越来越专业，就新生了这样一个行业。虽然在前几年网页设计还被认为是平面设计的附属品，不过目前网页设计已经被公认为是个新生行业，因此社会对网页设计师的需求也处在井喷阶段，众多高校已经把网页设计作为一门核心课程纳入教学体系当中。本书是为高校艺术设计和计算机专业编写的一本教材，深入浅出地讲述了网页设计与制作的基础知识、Web与Internet、网页的文字、图片、配色、网页布局、网站推广等，还提供了一个较为完整的设计人员手册。
网页设计涉及的专业比较多，顶端的页面属于平面设计范畴，它囊括了色彩搭配、版式设计、文字设计、图片处理、Flash动画制作、多媒体制作等，在本书里都有详细的讲解，并且每个章节都配有问题拓展与思考，对于初学者来说，经过本书的学习可以轻松了解网页设计的基础知识。中端的HTML超文本标记语言是构建页面的内核，它是由上千行的标记语言组成的，经过本书对HTML超文本标记语言的讲解，可以让初学者顺利掌握HTML超文本标记语言，并走进网页设计更高层面的世界。后端的网站开发，包括交互元素的设计、网站的推广技术，更是网页设计的灵魂，网站设计得再漂亮，没有推广，没有交互元素，这样的设计只能是孤芳自赏。本书详细介绍了搜索引擎以及搜索引擎工作的方法，通过学习，我们可以了解到网站是如何被用户找到，如何编写HTML的头文件才能轻易地让搜索引擎找到自己的网站，从而做到推广和宣传自己。
本书适合作为计算机、电子商务、多媒体等专业的教材，也可作为信息技术培训机构的培训用书，还可作为网页设计与制作人员、网站建设与开发人员、多媒体设计与开发人员的参考书。本书突出网页设计的基础性、实用性，对艺术设计专业的学习有一定的指导性，具有通俗易懂、循序渐进、延伸拓展的特点。本书编写的宗旨是，拓宽视野，与时俱进，力求用简单的前沿理念构建网页设计的全流程，用翔实生动的语言构建常识性的知识体系，以图文并茂的形式拆解理论，希望同学们经过本书的学习后，能够为将来成为一名优秀的网页设计师打下良好的基础。
由于编写时间仓促，书中还有很多不足之处，希望读者朋友们多提宝贵意见。编者2016年10月项目一初识Web和Internet任务一什么是Web？Web（互联网总称），web的本意是蜘蛛网和网的意思，在网页设计中我们称为网页，现广泛译作网络、互联网。一、Web表现形式
Web的表现形式大致分为超文本（Hypertext）、超媒体（Hypermedia）、超文本传输协议（HTTP）三种。1．超文本
超文本是一种用户接口方式，用以显示文本及与文本相关的内容。现时超文本普遍以电子文档的方式存在，其中的文字包含有可以链接到其他字段或者文档的超文本链接，允许从当前阅读位置直接切换到超文本链接所指向的文字。
超文本的格式有很多种，最常使用的是超文本标记语言（标准通用标记语言下的一个应用）及富文本格式（RTF）。我们日常浏览的网页都属于超文本。
超文本链接是一种全局性的信息结构，它将文档中的不同部分通过关键字建立链接，使信息得以用交互方式搜索。2．超媒体
超媒体是超文本和多媒体在信息浏览环境下的结合，是超级媒体的简称。用户不仅能从一个文本跳到另一个文本，而且可以激活一段声音，显示一个图形，甚至可以播放一段动画。
Internet采用超文本和超媒体的信息组织方式，将信息的链接扩展到整个Internet。Web就是一种超文本信息系统，Web的一个主要的概念就是超文本链接。它使得文本不再像一本书一样是固定的线性的，而是可以从一个位置跳到另外的位置并从中获取更多的信息，还可以转到别的主题上。想要了解某一个主题的内容只要在这个主题上点击一下，就可以跳转到包含这一主题的文档上。3．超文本传输协议（HyperText Transfer Protocol，HTTP）
超文本传输协议是互联网上应用最为广泛的一种网络协议，是用于WWW服务器传输超文本到本地浏览器的传输协议。二、Web的工作原理
当你想进入万维网打开一个网页时，首先你要在浏览器的地址栏里输入你想要访问网页的统一资源定位符（Uniform Resource Locator（，也就是我们常说的网址，然后按Enter键确认。接下来之前输入的网址在URL服务器进行解析，URL服务器分布于全球各地，根据解析结果决定进入哪一个IP（网络协议）地址。最后是向解析后的IP地址所在的服务器发送一个HTTP请求，随后HTML文本、图片和构成该网页的一切其他文件很快会被逐一请求并发送回用户端，用户就会在IE浏览器里看到网页的具体内容。
大多数的网页自身包含超链接指向其他相关网页，可能还有下载、源文献、定义和其他网络资源。像这样通过超链接把有用的相关资源组织在一起的集合，就形成了一个所谓的信息的“网”。这个网在互联网上被广泛使用，就构成了最早在20世纪90年代初蒂姆•伯纳斯•李所说的万维网。三、Web的协议1．Internet协议
协议（protocol）是描述客户端和服务器之间如何在网络上进行通信的规则。Internet和Web并不是基于单一协议工作的。相反，它们要依赖于大量不同作用的协议。2．FTP
文件传输协议（File Transfer Protocol，FTP）是一组允许文件在不同的Internet计算机之间进行交换的规则。HTTP供Web浏览器请求网页及其相关文件以显示某一网页。相反，FTP只用于将文件从一台计算机传送到另一台计算机。Web开发人员经常使用FTP将网页从他们自己的计算机传送到Web服务器。FTP也经常用于将程序和文件从服务器下载到自己的计算机。3．电子邮件协议
大多数人对电子邮件已习以为常，但许多人不知道的是，它的顺利运行牵涉到两个服务器：一个入站邮件服务器和一个出站邮件服务器。发送邮件时，使用的是简单邮件传输协议（SMTP）。接收邮件时，使用的是邮局协议（POP，现在是POP3）和Internet邮件存取协议（IMAP）。4．HTTP
超文本传输协议（HTTP）是一组在Web上交换文件的规则，Web浏览器和Web服务器通常使用这一协议。当Web浏览器用户以输入网址或点击超级链接的方式请求一个文件的时候，浏览器便构造一个HTTP请求并把它发送到服务器。目标机器上的Web服务器收到请求后进行必要的处理，再将被请求的文件和相关的媒体文件发送出去，进行应答。5．TCP/IP
传输控制协议／Internet协议（TCP/IP）被采纳为Internet官方通信协议。TCP和IP有不同的功能，它们协同工作以保证Internet通信的可靠性。
TCP的目的是保证网络通信的完整性，TCP首先将文件和信息分解成一些独立的单元，称为数据包。这些数据包包含许多信息，如目标地址、来源地址、序号和用以验证数据完整性的校验和。
TCP与IP同时工作，实现文件在Internet上的高效传输。TCP创建好数据包之后，由IP进行下一步工作，它使用IP寻址（addressing）在Internet上使用特定时刻的最佳路径发送每个数据包。数据到达目的地址后，TCP使用校验和来验证每个数据包的完整性，如果某个数据包损坏就请求重发，然后将这些数据包重组成文件或消息。
IP与TCP共同工作，它是一组控制数据如何在Internet计算机之间进行传输的规则。IP将数据包路由到目的地址，一旦发送成功，数据包便转发到下一个最近的路由器（用于控制网络传输的硬件设备），直至它到达最后的目的地址。
每一台连接到Internet的设备都有唯一的数字IP地址，这些地址由4组数字组成，每组8位（bit），称为一个octet（八位元），现行的IP版本IPv4使用的是32位（bit）地址，用十进制数字表示就是xxx．xxx．xxx．xxx，其中xxx是一个0～255的十进制数值。IP地址可以和域名相对应，在Web浏览器的地址栏中输入URL或域名后，域名系统（Domain Name System，DNS）服务器会查找与之对应的IP地址。例如，baidu.com的IP是119.75.217.109。可以在Web浏览器的地址栏中输入这串数字，按Enter键，百度的主页就会显示了。当然，直接输入“baidu.com”会更容易，由于一长串数字记忆起来比较困难，所以人们引进了域名系统，作为一种将文本名称和数字IP地址联系起来的办法，这也正是人们为什么要创建域名（如baidu.com）的原因。6．URL
统一资源定位符（Uniform Resource Locator，URL）是由协议、域名和文件在服务器上的层级位置构成。例如，http://www.dongbeimanhua.com，这个URL表示要使用HTTP协议和域名dongbeimanhua.com上的名为www的Web服务器。在这个例子中，根文件（通常是index.html或index.htm）将会显示。
如果URL以http://www.dongbeimanhua．com/mhzx/2015/1015/1449.html的形式出现（如图1-1所示），它表示要使用HTTP协议和域名www.dongbeimanhua.com上名为www的Web服务器，要显示的资源是在/mhzx/2015/1015/目录中名为1449．html的网页。
图1-2描述了一个以ftp：ftp.microsoft.com格式呈现的提供FTP文件下载的URL，它表示要使用的是FTP协议，服务器名为ftp，域名为microsoft.com。图1-1图1-27．域名
域名（domain name（用于在Internet上定位某个组织或团体。域名系统（DNS）的作用是将Internet划分成众多逻辑性的组别，并通过标识确切的地址和组织类型来理解名称。DNS将基于文本的域名和分配给设备的唯一IP地址联系起来。
以www.hljart.com这个域名为例：.com是顶级域名，hljart.com是黑龙江美术网注册的域名，被看成是.com下面的二级域名。www是在hljart.com这个域中运作的Web服务器的名称（有时称为Web主机）。从整体上看，www.hljart.com称为一个完全限定域名（Fully-Qualifed Domain Name，FQDN）。任务二什么是Internet？一、Internet的演变
Internet一词是指由计算机网络连接而成的网络，即互联网。它今天似乎已经随处可见，已成为我们生活的一部分。
Internet起源于一个连接科研机构和大学中的计算机的网络。在这个网络中，信息能通过多条路线传输到目的地，这就使得网络在部分中断或损毁的情况下也能照常工作。信息会被重新路由到正常工作的那部分网络从而送达目的地。这个网络由美国高级研究计划局（Advanced Research Projects Agency，ARPA）提出，阿帕网（ARPANet）因此应运而生。到1969年年底，有4台计算机（分别位于加州大学洛杉矶分校、斯坦福研究所、加州大学圣芭芭拉分校和犹他大学）被连接在一起。
随着时间推移，其他网络，如美国国家科学基金会的NSFNet相继建立并连接到阿帕网。Internet起初仅限于政府、科研和教育领域使用。即便如此，到1989年年底也已经有超过10万台主机连接到Internet。限制商业应用的规定在1991年被取消，到1992年年底就已经有超过100万台主机连接到这个网络。“霍布斯Internet大事记”称，截至2006年，Internet上的计算机已超过4.39亿台。Internet的规模还在不断扩大，Internet World Stats称，截至2009年年初，Internet用户的数量已经超过15亿。
国际电信联盟（以下简称“ITU”（发布《2014年信息与通信技术》报告称，到2016年年底,全球互联网用户数量将达到约30亿，其中2/3来自发展中国家。二、Internet、内部网和外部网
Internet由许多相互连接的计算机网络构成，这些网络可供全球访问。当我们既需要Internet的通信能力，又不希望人人都可以访问它的信息时，就会选择内部网或外部网。1．内部网
内部网（Intranet）是一种被限制在公司或组织内部使用的专用网络，它的目的是在同事之间共享该组织的信息和资源。如果内部网连接到Internet，通常会有网关或防火墙防止未经授权的访问。2．外部网
外部网（Extranet）是一种可安全地与外部合作伙伴（如供应商、销售商和客户）共享组织内部的一部分信息或业务的专用网络。外部网可用来与专门的商业合作伙伴交换数据和共享信息，同时与其他组织进行协作，隐私和安全性对于外部网来说是非常重要的，数字证书、消息加密和虚拟专用网络（Virtual Private Network，VPN）是用来为外部网提供隐私保护和安全性的一些技术手段。3．万维网的演变
最原始的Internet仅由4台主机构成。现在，每年连接上Internet上的计算机数量都在增加，但是，它们之间的通信都是基于文本格式的，获取Internet上的计算机存储的信息并不容易。最初Internet的使用仅限于专家、学者、研究人员、学生和政府的工作人员，即便如此，到1990年的时候，主机数目也超过30万台。
为什么Internet主机在短短的十几年时间里会从1990年的30万台猛增到1.09亿台呢？20世纪90年代初，三大事件的同时发生造就了Internet的爆炸性增长。
1991年，美国国家科学基金会网NSFNet取消了对Internet的禁锢，Internet开始拥抱商业。然而，虽然Internet不再禁止商业应用，但它仍是基于文本的，而且使用不变。下一步的发展解决了这一难题。
Tim Berners-Lee在瑞士的一所研究机构——欧洲粒子物理研究所（CERN）——工作期间构想了一种通信方式，使得科学家之间可以轻易“超链接”到其他研究论文或文章并立刻查看其内容。于是他建立了万维网（World Wide Web）来满足这种需求，1991年，Berners-Lee在一个新闻组上发布了这些代码。在这个版本的万维网中，客户端和服务器之间的通信使用的是超文本传输协议；对文档进行格式定义使用的是仍然基于文本的超文本标记语言（Hypertext Markup Language，HTML）。
1993年，第一款土星网页预览器Mosaic问世，它由Marc Andreessen和一群正在美国国家超级计算中心（NCSA）工作的研究生一起开发，该中心位于伊利诺伊大学香槟分校。他们中的一些人后来开发了另一款著名的网页浏览器——Netscape Navigator。
商业应用、HTTP和图形浏览器的组合使得访问Internet上的信息变得更加容易。万维网——存储在所有与Internet连接的计算机上的信息的图形用户界面——诞生了！4．标准和万维网联盟（W3C）
与Internet一样，万维网也不是由单一的个人或团体运作的。然而，万维网联盟（W3C，http://www.w3.org）在提供与网络相关的建议和建立技术模型上扮演着重要的角色。W3C主要解决以下4个领域的问题：Web架构、用户界面、技术和社会以及无障碍网络倡议（Web Accessibility Initiative，WAI）。W3C提出的规范（称为建议，即recommendations）促进了Web技术的标准化。
W3C的建议是由下属的工作组提出的，而它们的原始建议又来源于参与Web技术开发工作的主流公司。这些建议不是规定而是指导方针，许多开发网页浏览器的大软件公司，如微软（Microsoft）和网景（Netscape）公司并不总是遵从W3C的建议。这给Web开发人员造成了不少麻烦，因为他们编写的网页在不同的浏览器中显示的效果不完全相同。5．无障碍和Web
无障碍网络倡议是W3C的一个主要工作领域。因为Web已经成为日常生活不可分割的一部分，所以有必要确保每一个人都能使用它，Tim Berners-Lee说过：“Web的力量在于它的广泛性，它的一个基本特征是人人都能享用，不管是否身患残疾。”
Web可能对视觉、听觉、身体和神经系统残疾的人造成障碍，WAI为Web内容开发人员、Web创作工具的开发者、Web浏览器开发者和其他用户代理的开发人员提出了意见，使得有特殊需要的人也能够更便捷地使用网络。要想查看这些建议的一个列表，请访问WAI的“Web内容无障碍指导原则”。
1990年颁布的《美国残疾人保障法》（ADA）是一部禁止歧视残疾人的联邦公民权利法，ADA要求商业、联邦和各州均要对残疾人实行无障碍服务，1996年美国司法部的一项规定指出，ADA无障碍要求适用于Internet资源。
1998年对《联邦康复法案》进行增补的Section508条款规定，所有由联邦政府发展、取得、维持或使用的电子和信息技术都必须提供无障碍访问。美国联邦信息技术无障碍推动组为信息技术开发人员提供了无障碍设计要求的资源。近年来，美国各州政府也开始鼓励和推广网络无障碍访问，伊利诺伊州网络无障碍法案是这种发展趋势的一个例证。
有远见的开发人员在网页的设计过程中会谨记无障碍要求。为有视觉、听觉和其他缺陷的访问者提供访问途径应该是网页设计的一个组成部分，而不是网页设计完成后才考虑的事情。
有视觉障碍的人也许无法使用图形导航按钮，而是使用屏幕阅读器来提供页面的声音描述。只要做一点点简单的改变，比如，为图片添加描述文本或在网页底部提供文本导航区，网页开发人员就可以把自己的网页变成无障碍网页。通常情况下，提供无障碍访问途径对于所有的访问者来说都有好处，因为它提高了网页的可用性。例如，文字颜色与背景对比鲜明无论是对有视觉障碍的人，还是对其他人来说都能增加可读性。在本书介绍网页开发与设计技术过程中，会讨论相应的无障碍和易用性设计方法。6．网络描述
网络（network）由两台或多台相互连接的计算机构成，它们以通信和共享资源为目的。图1-3展示了网络常见的组成部分。图1-3
客户端（client）是个人使用的计算机，如桌面PC机。服务器用于接收客户端计算机的资源请求，如文件请求。用作服务器的计算机通常安放在受保护的安全区域，只有网络管理员才能访问它。集线器（hub）和交换机（switch）等网络设备用于为计算机提供网络连接，路由器（router）将信息从一个网络传至另一个网络。用于连接客户端、服务器、外设和网络设备的媒介（media）包括电缆、光纤和无线技术等。
网络有大小之分，局域网（Local Area Network，LAN）通常被局限在一幢或几幢相连的建筑物内，学校计算机实验室使用的就可能是局域网，以便在多台计算机之间共享资源。城域网（Metropolitan AreaNetwork，MAN）通过计算机把一定地理区域内的用户连接起来，同时也能用来连接两个或多个局域网。广域网（Wide Area Network，WAN）则用于连接地理上相距遥远的网络，而且一般要使用某种形式的公共或商业通信网络。例如，某个企业在美国东西两岸均设有分支机构，他们就可以使用广域网连接各个分支机构的局域网。这种连接方式的模型如图1-4所示。
主干网（backbone）是一种大容量的通信链路，用于传输来自与它互连的、较小的通信链路上的数据。在Internet上，主干网是用于连接局域网以实现远距离互连的一系列通信链路。图1-47．客户端／服务器模型
客户端／服务器（client／server）这一术语可追溯到20世纪80年代，表示通过网络连接起来的个人计算机。客户端／服务器也可用于描述两个计算机程序间的关系——客户程序和服务器程序。客户向服务器请求某种服务（比如，请求一个人或数据库访问），服务器满足请求并通过网络将结果传送给客户端。虽然客户端和服务器程序可存在于同一台计算机中，但它们通常都运行在不同的计算机上。一台服务器处理多个客户端请求也是很常见的。
Internet是客户端／服务器架构的一个典型例子。想象以下场景：某人在计算机上用Web浏览器客户端访问Internet。他用浏览器访问一个网站，如http://www.yahoo.com，服务器就是在与域名yahoo.com对应的IP地址处运行一个Web服务器程序。它收到连接请求后，会定位和查找所请求的网页和相关资源，并将它们发送给客户端。任务三标记语言
标记语言由规定浏览器软件（和其他用户代理，如移动电话）如何显示和管理一个Web文档的指令集组成。这些指令通常被标记（tag），它们执行诸如显示照片、格式化文本和引用超链接的功能。1．标准通用标记语言（SGML）
标准通用标记语言（Standard Generalized Markup Language，SGML）是一种用于指令标记语言或标记集的标记语言。SGML本身不是一种网页语言，而是一种如何规定和创建文档类型定义（DTD）的描述。Tim Berners-Lee创建HTML时，就是使用SGML来创建规范的。2．超文本标记语言（HTML）
HTML规定了一组特殊的标记符号或代码，它们要插入由Web浏览器显示的文件中，浏览器渲染HTML文件中的代码，并在浏览器中呈现网页文档和相关文件。W3C订立了HTML标准，虽然最新版本的HTML为XHTML1.1，但是本书仍然使用XHTML1.0，因为它没有那么严格并且受到主流浏览器的充分支持。3．可扩展标记语言（XML）
XML是W3C开发的用于在互联网上创建和共享标准信息格式和信息内容的一种灵活语言。它的语法是基于文本的，用以描述、传送和交换信息。XML并非用来代替HTML，而是通过将数据与表分离，从而扩展HTML的能力。使用XML，开发人员可创建描述信息所需要的任何标记。4．可拓展超文本标记语言（XHTML）
XHTML是W3C开发的，它将HTML4.01重新定义为XML的一种应用，它结合了HTML4.01格式化文本方面的优势和XML在数据结构与可拓展性方面的优势。5．HTML5-（X）HTML的下一个版本
万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。任务四Internet和Web的发展
电子商务是指通过Internet进行商品交易，它已成为网络的重要组成部分。参与电子商务的人数会持续增长。eMarketer预计2019年全球网络零售额达3.5万亿美元，农村市场是爆发点。网上零售总额交易达到1830亿美元，想想看会有多少人在网上购物吧！
无线上网也变得越来越普遍，电子商务和Internet访问不再是固定计算机的专利。相反，越来越多的人会用移动上网，包括IPod、IPad、PSP、Palm、Pilots、笔记本、智能手机，等等。
那么，如何管理所有连接到Internet上的设备（不管无线还是有线）呢？前面说过，Internet上的每一个设备都有唯一的IP地址。目前，我们使用的是IPv4，理论上它允许有最多40亿个IP地址（但有许多被保留另专门用途）。随着移动设备的增多，会需要更多的地址，IP第6版（IPv6）将增加大量的可用地址和提供许多新技术。
第二代互联网（Internet2）是另一个值得注意的技术趋势。第二代互联网协会由100多所美国大学与产业界和政府合作组成，他们的任务是开发和部署先进的网络技术和应用，重点是与学习和科研相关的应用，如远程医疗、数字图书馆和虚拟实验室。
另一个值得注意的技术是Web服务。Web服务是一种自描述、自包容的应用程序，能通过Internet连接提供某种商业功能。例如，某个组织可以建立一个Web服务来简化与合作伙伴或销售商的信息交换。
大公司推动了Web服务的发展，而Web日志（博客）却是由个人推动的，人们把它当作继个人网站之后一种新的自我表达的形式。博客（blog）是网上的个人日记——它以时间顺序发表看法或链接，并经常进行更新。博客讨论的话题从政治、经济到技术，再到个人日记，它可以集中讨论一个主题，也可以有多样化的话题——这由创建和维护该博客的那个人——博主（blogger）——决定。勤快的博主每天都要更新微博内容。许多人使用的都是简单的、专为只有一点点或完全没有技术背景的人设计的软件。
维客（Wiki）是由访问者使用简单的网页表单实时更新的网站。有的维客是为一小部分人服务的，如某个组织的成员。目前最显著的维客是维基百科（Wikipedia），网站是http://Wikipedia.org，它是一个网上的百科全书，可由任何人在任何时候更新。这是社交软件的一个应用实例——访问者共享他们的知识以创建所有人免费使用的资源。虽然维基百科的一些条目纯属娱乐，偶尔还有不正确的信息，但在需要探索一个主题的时候，维基百科上的信息和资源链接是一个很好的起点。
博客和维客为网站访问者提供了使用网站，是与网站以及其他人进行交互的一种新方式——称为社交计算或社交网络。目前，参加社交网络上的活动已成为一个潮流，这些网站包括Facebook、MySpace等。2016年4月，Facebook迎来了它的第2亿活动用户！大量商家更喜欢在Facebook和MySpace创建自己的账号，推广自己的产品和服务。
Twitter是一个著名的微博社交网站，用户使用称为推讯（tweet）的短消息进行通信，一条推讯不能超过140个字符。Twitter用户通过发送推讯来更新好友网络，每个用户的跟随者（follower）每天都能知道该用户的活动和思维火花。然而，Twitter不限于个人使用。商业界发现了Twitter在市场营销上的价值。《商业周刊》的一份报告称，戴尔（Dell）公司在12个月的时间里，利用Twitter实现了50多万美元的新订单。
RSS用于创建来自博客文章或其他网站的新闻“源”（feed）。在RSS源中，包含网站上发布的新闻摘要，指向RSS源的URL通常用橙底白字的RSS或“XML”字样进行标记。要访问这些需要使用新闻阅读器，有些浏览器，如Firefox、Safari和Internet Explorer 7（或更高版本）可以显示RSS源，另外，还可以使用一些商业化的和免费的新闻阅读器软件。新闻阅读器会定时检查RSS源，并显示新闻标题。RSS为网站开发人员提供了一种向感兴趣的人“推送”新内容的方法，从而（希望能）产生网站回访。
播客（podcast）是Internet上的音频文件——它们可以音频播送、电台节目或采访的形式出现。播客通常以RSS源的方式发送，但也可通过录制MP3文件并提供网页链接的方式传播。这些文件可存储到计算机或MP3文件并提供网页链接的方式传播。这些文件可储存到计算机或MP3播放器（如iPod）上，供以后收听。
Flickr和del.icio.us是两个社交软件网站，它们提供了信息共享的机会。Flickr是照片共享网站，自称是“最好的照片储存、搜索、分类和共享方式”。del.icio.us已被Yahoo！收购（现在称为Delicious.com），主要提供网络书签（收藏）服务——允许注册用户发布书签列表，与他人分享他们最喜爱的网站和查找新网站。
Wikipedia、Flickr、Twitter、Facebook和Delicious是Web 2.0的应用实例。虽然关于Web 2.0还没有统一的定义，但它仍然被认为是Web的下一个发展方向，是从孤立的静态网站转向提供丰富界面和社交网络机会的平台。技术并非一成不变，以后还会发生变化，Internet和Web相关技术始终在发展和改进。问题拓展与思考思考Web和Internet的区别。项目二Web文字任务一字体文字无疑是网站上最重要的元素，分散在网站的各个角落。本任务主要讲述文字的编排与设计，包括字体的选配、文字的颜色、字号的大小、字间距等。合适的字体不但能使用户快速浏览内容，而且还会减少视觉疲劳。一、字体类型
不同的字体会呈现出不同的视觉效果和网站个性，不同的网站定位和内容性质也需要选配不同字体。我们先来看一下常用的一些字体类型。1．手写字体和艺术字体
手写字体：包括那些看起来类似钢笔或毛笔、铅笔等手写而成的字体。（图2-1、图2-2（
艺术字体：很容易识别，能表达不同的情绪和内涵，但不能通篇使用。
这两种字体多变、有趣、亲切、个性化，适用于Logo和Banner区的文字，能够突显网站个性，使浏览者印象深刻，如迪士尼（Disney）的Logo选择比较卡通、独特的艺术字体，也成为它的品牌形象。（图2-3、图2-4）图2-1图2-2图2-3图2-4
某些手写字体或者艺术字体也适用于网站的导航部分，尤其是播客或者Web 2.0网站等较为个性化的网站，能够突出个性，富有生趣。（图2-5、图2-6）
需要注意的是，个性化的字体需要考虑兼容的问题，很多字体在不同的操作系统中不能兼容。当然也可以做成图片的形式，但是如果导航中使用图片会明显影响SEO。图2-5图2-62．衬线体
维基百科对于衬线体（Serif）的解释是：有衬线的字体，基本上横细竖粗。衬线指的是字形笔画末端的装饰细节部分，它的作用是强化笔画的特征，从而使得阅读和识别更为容易。
中文中常见的衬线体为宋体，英文中常用的是Times new Roman，也有些使用Georgia字体的。（图2-7、图2-8）3．无衬线体
无衬线体（Sans-serif）指的是那些笔画末端没有衬线的字体，它几乎保持均匀的粗细，英文中常用的包括Arial、Helvetica、Tahoma、Verdana、Courier字体等；中文中通常称为黑体，这类字体笔画粗细基本一致，没有衬线装饰，较为醒目。
在传统印刷中，衬线字体用于正文印刷，因为它被认为比无衬线体更易于阅读，是比较正统的。相对的，无衬线体用于短篇文字和标题等，能够引起读者注意，或者提供一种轻松的气氛。这也是传统印刷中经常使用宋体作为正文，将黑体作为标题的原因之一，但是由于显示器上显示像素和锯齿的限制，衬线字体的可识别度大大降低，换句话说，无衬线字体更适合在电脑显示器上显示，因此Windows Vista中的中文预设字体已经从原来的衬线字体（宋体或细明体）改变成了无衬线字体。（图2-9、图2-10）图2-7图2-8图2-9图2-104．线字体（微软雅黑或微软正黑体）
这两类字体较为正统，适用面广，常用于门户或者企业网站。在选择无衬线字体时，还必须考虑字体在不同操作系统和浏览器中的兼容性，以保证字体能够在所有情况下正常显示，如Arial能在任何操作系统和浏览器中显示。但有些Windows only的字体，在Mac OS等操作系统中就不能兼容，导致页面不能达到预期的效果。同时结合网站自身特点，选择具体的字体类型，使用户尽量专注在内容本身，提高网站内容的辨识度和可读性。
知名网站如Apple将“Lucida Grande”（无衬线体）作为网站内容的首选；国内几家门户网站中文均采用宋体（衬线体）作为默认字体，英文字体如淘宝用Tahoma、网易采用Arial、腾讯采用Verdana等无衬线体作为默认字体。（图2-11、图2-12）图2-11图2-12二、文字标题
对于内容型网站，文字标题的作用不可忽视。
首先，标题应该具有吸引力。标题的一个重要作用在于促使浏览者点击它并进入内容页，所以具有吸引力是一个好标题的要素。目前网站编辑常对标题内容进行总结，或者适当加入吸引人的元素，如标题“XXX——每个人都应该知道的方法”“XXX的十要素”“XXX不为人知的秘密”“XXX的捷径”等都是具有强烈吸引力的标题。如果标题不具有吸引力，即使内容再精彩，也很容易会石沉大海。
标题应该尽量简洁不啰唆。标题其实是内容的浓缩，在有限的页面空间中展示给用户更多的信息量，让用户快速浏览和筛选，并且对于感兴趣的内容可以点击查看更加详细的信息。不然，过长的标题不仅会让页面显得零乱，减少展现的内容量，同时也会让用户抓不到重点。
有吸引力的标题不仅能够吸引用户点击，还会影响到搜索引擎优化。对于搜索引擎“蜘蛛机器人”（加注解）来讲，标题的优先级高于内容正文，因此在标题中使用更多的关键字，可以提高内容在搜索引擎中的排名，增加被用户搜索到的概率。
影响网站用户体验的元素远不只上面提到的这些，还包括网站的信息架构、内容和视觉设计这些最为核心最为复杂的部分。除此之外，还有网站品牌营销、网站速度、稳定性、兼容性、宽窄屏的设计、搜索引擎优化等也都是非常重要的因素，在设计开发网站时都需要注意。（图2-13、图2-14）图2-13图2-14
其中，兼容性指的是网站应该能够在不同浏览器中正常阅读和操作。目前不同浏览器都有一定比例的用户使用，因此应该照顾到所有用户的需求。
宽窄屏的设计指的是随着硬件设备的更新换代，用户使用屏幕分辨率开始出现两极化，设计师在设计网站的过程中也需要考虑到这些因素，满足使用多种不同屏幕分辨率的用户的需求，给用户带来最佳的阅读体验，使网站的设计更加人性化。三、字体的样式
常见的字体样式（style）有4种：正常体（Regular）、斜体（Italic）、粗体（Bold）、粗斜体（Bold Italic）。相信熟悉Office软件的用户应该对此非常了解了。
这几种字体样式的属性通常适用于以下几种情况：
正常体：绝大部分的文字应该采用正常体，避免样式对于用户正常阅读的干扰。（图2-15、图2-16）
粗体：粗体能够让文字从大部分正常体文字中脱颖而出，使内容的重点信息得以突出，从而增加内容的可阅读性。适当地使用粗体可以将用户的注意力吸引到那些重要的文字上，但过多使用会削弱其影响。（图2-17、图2-18）
斜体：常见于注解、英文书名或者被引用的内容，能够体现出这些内容的特定属性。有时，文本框中的提示信息也使用斜体。
粗斜体：较少使用。（图2-19、图2-20）图2-15图2-16图2-17图2-18图2-19图2-20四、设计要点
总的来说，对于同一类型的文字，最好使用相同的字体和字号、样式等，保持统一性。例如，所有英文书名都使用斜体，所有副标题字体都设置为粗体、四号字。
如果需要对比，突出重点内容，那么可以利用文字的字体、字号、字体颜色以及文字样式等元素，可以只使用其中一个元素，也可以组合使用，以体现出差异性。但需要注意的是，使用对比效果时应该避免差异过于细微，因为这样完全起不到对比的效果，却会让用户迷惑到底是网站设计不够专业而存在的差错，还是故意设计出的有差异的效果。
除了前面在字体、字号、字体颜色、文字样式中已经提过的设计要点之外，还需要规避一些常见的误区：（1）使用超过3种以上的字体。不同的字体往往代表着不同类型、不同层级的内容，字体太多会使页面内容显得混乱，不够专业。（2）不要使用不停闪烁的文字。闪烁的文字的确可以吸引用户的注意力，但较长时间的闪烁却会给用户带来视觉疲劳。如果内容需要用户较长时间浏览的话，就尽量不要使用闪烁的文字。任务二字号除了字体类型之外，字号的选择也会大大影响文字的可阅读性。一、字号单位
首先，我们来看一下字号的单位。传统印刷体常使用pt等作为单位，是物理上的绝对长度。但PC上是以像素（px）为单位显示的，和印刷体有所不同，因此字号常采用相对长度单位（见表2-1）。
顾名思义，相对长度单位表明了其长度单位会随着它的参考价值的变化而变化，不是固定的，而绝对长度单位是一个固定值。表2-1 常见的几种相对长度单位和绝对长度单位
印刷体中的pt是绝对长度单位，在计算机上并不适用。因为计算机上是以像素为单位显示的，不同的分辨率、不同的显示器尺寸乃至不同的浏览器设置等都可能影响到字体的物理大小，使用绝对长度可能会导致无法准确地体现出预期的效果。
相对长度单位中，很多设计师都习惯采用px作为文字大小的单位，优点在于使用这个度量单位会很容易在不同的浏览器和平台下获得一致展示，但缺点是其无法支持文字缩放的功能。如新浪、搜狐、网易、Yahoo！中国等门户网站都使用了px作为文字大小的单位，在IE中显示效果较好。如果在其他浏览器中使用文字缩放时，就可能会导致文字的错乱。
国外网站较多采用em作为字体大小单位，在默认字号中，em相当于字母M的高度。使用em的优点在于可以支持字体的缩放，对弱势群体更为友好，但是它可能会随元素的不同而变化，很难保证在不同浏览器下效果的统一性。Yahoo！、MSN、Microsoft等国际网站都使用em。
其他常用的还包括百分比，这和em类似，也是以某文本字号为基础，通过调整百分比调节文字大小。二、字号大小
虽然很多浏览器都支持字体缩放，但根据用户的浏览习惯，大部分仍然不会使用这个功能，而且每次浏览都需要调整字号也会给用户带来不便，因此选择合适的默认字号大小，对于内容的可读性至关重要。
国外已有英文阅读相关的研究表明，字体过小或过大都会使阅读速度下降，国内也有研究证实中文在50cm的阅读距离、19英寸LG液晶显示器（分辨率1280×1024）、背景色对比为100％时，笔画少、中、多3种中文字体的临界大小分别为（8.43±0.25）pt，（10.89±2.75）pt。低于临界字体大小的阅读速度随着字体增大呈明显上升趋势，不同字体大小组间的阅读速度差异有显著性（P＜0.01）。如果拿笔画居中的文字来讲，为了取得较快的阅读速度，应该选择9pt左右的字号，约为12px。对于笔画多的文字，应该选择14px左右的字号。
当然随着屏幕分辨率的变化，也应该选择不同的字号大小。从字体的美观度来讲，目前中文网站常采用的宋体，再配合合适行距的情况下，12px、14px最为美观舒适。（图2-21、图2-22）图2-21图2-22
结合阅读速度和字体美观性两大因素，现在网络上最流行的中文字体大小为9pt，约为12px。我们来看一下目前知名网站使用的字号大小。
网易：页面基本都采用12px。
腾讯：左边2栏内容采用14px，右边栏内容重要性较低的采用12px；导航条一级分类采用13px，soso和导航条二级分类采用12px。
新浪：除各板块标题使用14px外，所有文字内容和导航条一级分类均采用12px。
而一些国外网络公司一般用的是13px的字号。在中文网页中，13px字号在不同的浏览器显示上会有微小的差异，12px、14px字号则不会出现这种状况。最常采用的行距为150％，最多不要超多180％。苹果公司Apple等网站采用150％行距。
目前很多设计师使用px作为字号的单位，但为了保证各浏览器下文字均可缩放，字号单位使用em会更有优势，一般来说，浏览器默认1em＝16px，因此12px、14px可以设置为0.75em和0.875em。
百度中文：网页用的是12px、14px的字号。任务三颜色一、字体颜色
网站字体的颜色设定和网页本身的背景颜色息息相关，研究人员发现，良好的目标颜色和背景颜色的合理使用，能够显著提高操作效率。原则上，字体的设计首先要增加文字的可辨识度和可阅读性，提高阅读速度，其次需要适应长时间的操作，提高眼睛的舒适度，降低视觉负担，所以颜色搭配不宜太过突兀。二、增加对比度
为了增加文字的可辨识度和可读性，首先字体颜色与背景色需要有一定的对比度，使字体从背景中跳出来。研究人员表明，文字颜色和背景色如果有较高的对比度，用户的操作效率就较好。
目前已经有很多研究对不同的颜色组合进行测试，如果光从可辨识度来讲，网页上较适合使用的对比色包括白色配黑色、白色配蓝色、黄色配黑色、紫色配白色、黑色配淡紫色等对比较大的组合。
当目标和背景颜色组合为白色配黑色、黄色配黑色、浅紫色配黑色等对比较大的组合时，效果较佳，其中绿色配黑色效果较差。
参见《目标——背景色的配合对彩色CRT显示工效的影响》（朱祖祥、曹立人，《心理学报》1994年第26卷第2期，128-135）了解相关知识。（图2-23、图2-24）图2-23图2-24
研究人员参照目前网站上常用的字体和背景色组合进行了分析，主要包括白底黑字、白底蓝字、白底紫色字体、淡紫背景黑文字、黄背景黑文字5种，其中搜索正确率从高到低依次是，黄背景黑文字、白底黑字、白底紫色字体、淡紫背景黑文字、白底蓝字。
另一项研究对黑底白字、蓝底白字、蓝底绿字、黑底橘色字、黑底金黄色字等5种组合进行了研究，结果表明：黑底白字最优，其次为蓝底白字。
研究发现以下5种组合方式对比度都较高，文字的可识别度也较高，但是也有优劣之分，顺序依次为：蓝底白字、黑底琥珀色字、黑底白字、黄底白字、白底黑字。（图2-25、图2-26）
试读结束[说明：试读内容隐藏了图片]