1.1 网页设计基础
在网络中，几乎所有的网络活动都与网页有关，要想学习网页制作，就需要先了解一些网页的基本知识，如网站与网页的关系、网站的类型、网站的结构、网页的基本构成要素和网页编辑语言等，本节将详细讲解这些知识。
1.1.1 网站与网页的关系
互联网是由成千上万个网站组成的，而每个网站又由诸多网页构成，因此可以说网站是由网页组成的一个整体。下面分别对网站和网页进行介绍。
●网站：网站是指在互联网上根据一定的规则，使用HTML（标准通用标记语言）工具制作的用于展示特定内容的一组相关网页的集合。通常情况下，网站只有一个主页，主页中会包含该网站的标志和指向其他页面的链接。用户可以通过网站来发布想要公开的资讯，或者利用网站来提供相关的网络服务；也可以通过网页浏览器来访问网站，获取自己需要的资讯或者享受网络服务。
●网页：网页是组成网站的基本单元，用户上网浏览的一个个页面就是网页。网页又称为Web页，一个网页通常就是一个单独的HTML文档，其中包含文字、图像、声音和超链接等元素。
1.1.2 常见的网站类型
网站是多个网页的集合，按网站内容可将网站分为5种类型：门户网站、企业网站、个人网站、专业网站和职能网站，下面将分别对这几种类型的网站进行讲解。
●门户网站：门户网站是一种综合性网站，涉及领域非常广泛，包含文学、音乐、影视、体育、新闻、娱乐等方面的内容，还具有论坛、搜索和短信等功能。国内较著名的门户网站有新浪网、搜狐网、网易网等，如图1-1所示。
●企业网站：企业网站是为了在互联网上展示企业形象和品牌产品，以对企业进行宣传而建设的网站。企业网站一般以企业的名义开发创建，其内容、样式、风格等都是为了展示自身的企业形象，如图1-2所示。
图1-1 门户网站
图1-2 企业网站
●个人网站：个人网站是指个人或团体因某种兴趣、拥有某种专业技术、提供某种服务或为了展示、销售自己的作品、商品而制作的具有独立空间域名的网站，它具有较强的个性。图1-3所示为个人平面作品展示网站。
●专业网站：这类网站具有很强的专业性，通常只涉及某一个领域，如太平洋电脑网是一个电子产品专业网站平台，如图1-4所示。
图1-3 个人网站
图1-4 专业网站
●职能网站：职能网站具有特定的功能，如政府职能网站等。目前流行的电子商务网站也属于这类网站，较有名的电子商务网站有淘宝网、卓越网、当当网等，如图1-5所示。
图1-5 职能网站
1.1.3 页的分类
根据不同的分类方式，可以将网页分为不同的类型，下面分别进行介绍。
1.按位置分类
按网页在网站中的位置可将网页分为主页和内页。主页是指网站的主要导航页面，一般是进入网站时打开的第一个页面，也称为首页；内页是指与主页相链接的页面，也就是网站的内部页面。
2.按表现形式分类
按网页的表现形式可将网页分为静态网页和动态网页，并且静态网页与动态网页也是相对的，即静态网页的URL后缀是htm、html、shtml、xml等；而动态网页的URL后缀是asp、jsp、php、perl、cgi等。下面分别介绍静态网页和动态网页的特点。
●静态网页：静态网页的执行过程是浏览器向网络中的服务器发出请求，指向某个静态网页，服务器接收到请求后，将其传输给浏览器（传送的是一个文本文件），浏览器接收到服务器传来的文件后，解析HTML标记，再显示结果。
●动态网页：动态网页以数据库技术为基础，可以大大降低网站的维护量。动态网页可以实现注册、在线调查、用户登录及在线购物等功能，它并不是一个独立存在于服务器上的网页文件，而是当用户请求时，才从服务器中返回一个完整的网页。在浏览动态网页时，浏览器的地址栏中会有一个“？”符号。
虽然静态网页与动态网页都可以使用文字和图片展示网页信息，但是从网站的开发、管理和维护的角度来看，它们有很大的差别。
1.1.4 网站的基本结构
网站结构的设计与规划对整个网站的最终呈现效果起着至关重要的作用，它不但直接关系到页面结构的合理性，而且还在一定程度上映射出该网站的类型定位。下面对常见网站的结构进行介绍。
●国字型：国字型是最常见的一种布局方式，其上方为网站标题和广告条，中间为正文，左右分列两栏，用于放置导航和工具栏等，下方为站点信息。
●拐角型：拐角型与国字型相似，上方为标题和广告条，中间左侧较窄的一栏放超链接一类的功能，右侧为正文，下方为站点信息。
●标题正文式：这种结构的布局方式比较简单，主要用于突出需要表达的重点，通常最上方为通栏的标题和导航条，下方为正文部分。
●封面式：封面式常用于显示宣传网站首页，一般以精美大幅图像为主题，设计方式多为Flash动画，还有许多网站采用HTML5来制作封面。
1.1.5 网页的构成要素
在网页中，文字和图像是构成网页最基本的两个元素。除此之外，构成网页的元素还包括动画、音频、视频和表单元素等，如图1-6所示。下面分别介绍网页各构成要素的作用。
知识链接
网页常用术语
●文字：文字是网页中最基本的组成元素之一，是网页主要的信息载体，通过它可以非常详细地将要传达的信息传送给用户。文字在网络上传输速度较快，用户可方便地浏览和下载文字信息。
●图像：图像也是网页中不可或缺的元素，它有着比文字更直观和生动的表现形式，并且可以传递一些文字不能传递的信息。
图1-6 网页的元素
●LOGO：在网页设计中，LOGO起着相当重要的作用。一个好的LOGO不仅可以为企业或网站树立好的形象，还可以传达丰富的行业信息。
●表单元素：表单是功能型网站的一种元素，它用于收集用户信息、帮助用户进行功能性控制。表单的交互设计与视觉设计是网站设计中相当重要的环节，在网页中小到搜索框、大到注册表都需要使用它。
●导航：导航是网站设计中必不可少的基础元素之一，它是网站结构的分类，用户可以通过导航识别网站的内容及信息。
●动画：网页中常用的动画格式主要有两种：一种是GIF动画；另一种是SWF动画。GIF动画是逐帧动画，相对比较简单；SWF动画则更富表现力和视觉冲击力，还可结合声音和互动功能，给用户带来强烈的视听感受。
●超链接：用于指定从一个位置跳转到另一个位置的超链接，可以是文本链接、图像链接、锚链接等。可以在当前页面中进行跳转，也可以在页面外进行跳转。
●音频：音频文件可以使网页效果更加多样化，网页中常用的音乐格式有mid、mp3等。mid是通过计算机软、硬件合成的音乐，不能被录制；mp3为压缩文件，其压缩率非常高，音质也不错，是背景音乐的首选。
●视频：网页中的视频文件一般为flv格式。它是一种基于Flash MX的视频流格式，具有文件小、加载速度快等特点，是网络视频格式的首选。
1.1.6 网页制作的核心语言
在网页制作方面，一些新技术、新应用层出不穷，但不管怎样变化，在制作网页时也要掌握最基础、最重要的网页核心语言，如HTML语言、CSS语言（将在第7章进行介绍）和JaveScript脚本语言等，下面分别对这些语言的内容进行简单介绍。
1.HTML标记语言
HTML是标准通用标记语言下的一个应用，也是一种规范、一种标准，它通过标记符来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容，如文字如何处理、画面如何安排、图片如何显示等。
（1）HTML语言的特点
HTML语言不复杂，但功能很强大，可支持不同数据格式的文件嵌入，如图像、声音、视频、动画、表单和超链接等，这也是它在互联网中盛行的原因之一，其主要特点如下。
●简易性：HTML语言版本升级采用超集方式，从而更加灵活方便。
●可扩展性：HTML语言的广泛应用带来了加强功能、增加标记符等要求，它采取子类元素的方式，为系统扩展带来了保证。
●平台无关性：HTML语言是一种标准，使用同一标准的浏览器在查看一份HTML文档时的显示是一样的。但是网页浏览器的种类众多，为了让不同标准的浏览器用户查看同样显示效果的HTML文档，HTML语言使用了统一的标准，从而使其能显示于各个浏览器平台。
（2）HTML语言的基本语法
HTML语言是一套指令，通过指令让浏览器识别页面类别，而浏览器识别页面类别也是通过页面的起始标记<html>和结束标记</html>来实现的。由此可见，在网页中，大多数标记都是成对出现的，而每个标记的结束标记都是以右斜杠加关键字来表示的。另外，HTML页面主要有头部和主体两个部分，下面分别对其进行介绍。
●头部：所有关于整个文档的信息都包含在头部中，即<head></head>标记之间，如网页标题、描述及关键字等。
●主体：可以调用的任何语言的子程序都包含在主体中，网页中的所有标记内容都放在主体中，如文字、图像、嵌入的动画、Java小程序和其他页面元素等，即<body></body>标记之间。
提示
在头部的<head></head>标记之间还包括<title></title>标记，主要用于设置页面标题，但此标题并不会出现在浏览器窗口中，而是显示在浏览器的标题栏中。
（3）HTML语言的常用标记
在HTML语言中，各标记之间不区分大小写，不管是用大写字母、小写字母，还是大、小写字母混合使用，其作用都是相同的，但为了编码的美观，建议统一使用小写字母。下面介绍一些HTML语言中常用的标记符号。
●格式标记：在HTML语言中用于设置格式的标记主要有<p></p>分段标记，<br>换行标记，<blockquote></blockquote>两边缩进标记，<dl></dl>、<dt></dt>和<dd></dd>级别标记，<ol></ol>、<ul></ul>和<li></li>列表标记，<div></div>层标记等。
●文字标记：文字标记主要用于设置文字格式，如<pre></pre>预处理标记、<h1></h1>……<h6></h6>标题格式标记、<tt></tt>默认字体格式标记、<cite></cite>斜体标记、<em></em>斜体并黑体标记、<strong></strong>加粗并黑体标记等。
●图像标记：用于添加图像的标记，即<img></img>。
●表格标记：主要用于添加表格，即<table></table>。但可通过表格属性标记设置其表格格式。
●链接标记：在网页文档中添加各种链接，即<a href=""></a>。
●表单及表单元素标记：主要用于添加表单及在表单中添加表单元素，如<form></form>表单标记、<input type="">输入区标记、<select></select>下拉列表框标记、<option></option>列表框标记、<textarea></textarea>多行文本框区域标记。需注意的是，表单元素标记都必须放在表单标记中。
提示
<input type="">标记中共提供了8种类型的输入区域，具体由type属性来决定，如<input type="text">表示文本框，<input type="button">表示按钮类型。
2.HTML5语言的基本介绍
HTML5草案的前身名为Web Applications 1.0，2004年由WHATWG提出，于2007年被万维网联盟（World Wide Web Consortium，W3C）接纳，并成立了新的HTML工作团队，第一份正式草案于2008年1月22日公布。2012年12月17日，万维网联盟宣布HTML5规范正式定稿，并称“HTML5是开放的Web网络平台的奠基石”。下面将分别介绍HTML5中的新标记及HTML5语言的新特点。
（1）HTML5中的新标记
在HTML5中提供了一些新的元素和属性，下面将分别介绍在HTML5语言中添加的常用标记。
●搜索引擎标记：主要是有助于索引整理，同时更好地帮助小屏幕装置和视障人士使用，即<nav></nav>导航块标记和<footer></footer>标记。
●视频和音频标记：主要用于添加视频和音频文件，如<video controls></video>和<audiocontrols></audio>。
●文档结构标记：主要用于在网页文档中进行布局分块，整个布局框架都使用<div>标记进行制作，如<header><footer><dialog><aside>和<fugure>。
●文字和格式标记：HTML5语言中的文字和格式标记与HTML语言中的基本相同，但是去掉了<u><font><center>和<strike>标记。
●表单元素标记：HTML5与HTML相比，在表单元素标记中，添加了更多的输入对象，即在<input type="">中添加了电子邮件、日期、URL和颜色等输入对象。
（2）HTML5语言的新特点
与之前的HTML语言相比，HTML5语言有两大特点：一方面，它强化了Web网页的表现性能；另一方面，它除了可描绘二维图形外，还添加了播放视频和音频的标签，追加了本地数据等Web的应用功能。其新特点具体介绍如下。
●全新且合理的标记：该特点主要体现于多媒体对象的绑定情况。以前的多媒体对象都绑定在<object>和<embed>标记中，在HTML5中，则有单独的视频和音频的标记，分别为<videocontrols></video>和<audio controls></audio>标记。
●Canvas对象：主要是给浏览器带来了直接绘制矢量图的功能，可摆脱Flash和Silverlight，直接在浏览器中显示图形或动画。
●本地数据库：主要是通过内嵌一个本地的SQL数据库，增加交互式搜索、缓存和索引功能。
●浏览器中的真正程序：在浏览器中提供API，可实现浏览器内的编辑、拖放和各种图形用户界面的功能。
3.JavaScript脚本语言
JavaScript是一种脚本编程语言，支持网页应用程序的客户机和服务器的开发。在客户机中，它可用于编写网页浏览器在网页页面中执行的程序；在服务器中，它可用于编写服务器程序，网页服务器程序用于处理浏览器页面提交的各种信息并相应地更新浏览器的显示。因此，JavaScript语言是一种基于对象和事件驱动且具有安全性能的脚本语言。下面简单介绍JavaScript脚本语言。
（1）JavaScript脚本语言的特点
在网页中使用JavaScript脚本语言，可以与HTML语言一起实现在一个网页页面中与网页客户机交互的作用，并且它是通过嵌入或调入标准的HTML语言来实现的，弥补了HTML语言的缺陷。
JavaScript是一种比较简单的编程语言，在使用时直接在HTML页面中添加脚本，无需单独编译解释，在预览时直接读取脚本执行其指令。因此，JavaScript脚本语言使用起来简单方便、运行快，适用于简单应用。在Dreamweaver中的各种行为效果就是使用JavaScript脚本语言实现的。
（2）JavaScript脚本语言的引用及位置
在Dreamweaver CC中，JavaScript脚本语言是引用在<script></script>标记之间的，如图1-7所示。如果需要重复使用某个JavaScript程序，则可将这些代码作为一个单独的文件进行存放，其扩展名为js。在引用时，使用src属性，如图1-8所示。
图1-7 脚本语言的引用
图1-8 引用脚本文件
1.1.7 屏幕分辨率和网页编辑器
通过前面的知识可了解网页是一个HTML格式的文件，并通过UTL来识别与存取，再通过浏览器显示结果。此外，屏幕分辨率决定着网页制作的尺寸，而网页编辑器则是实现网站制作的一个利器。下面将对屏幕分辨率和网页编辑器进行介绍。
1.屏幕分辨率
屏幕分辨率是指分辨图像的清晰度，它也是由一个个像素点组成的，且分辨率越高，像素点越多，显示的图像就越清晰。
在网页设计中，屏幕分辨率直接影响着网页的尺寸。因为在网页布局时，由于用户操作环境的不同，其网页设计的尺寸也有所区别。就目前而言，1920像素×1080像素和1280像素×1024像素的屏幕分辨率是最常用的，设计的网页看起来也较为美观。图1-9所示为1920像素×1080像素下的网页，图1-10所示则为1280像素×1024像素下的网页。
图1-9 1920像素×1080像素下的网页
图1-10 1280像素×1024像素下的网页
2.网页编辑器
网页编辑器是指设计网页并输入内容的相关操作工具，根据输入的方法可以分为HTML代码编辑器和可视化编辑器。HTML代码编辑器可直接在编辑器中输入HTML代码，如记事本。而可视化编辑器则可根据操作查看效果，如常用的Dreamweaver CC。下面分别对这两种编辑器进行介绍。
●HTML代码编辑器：记事本是最典型的HTML代码编辑器，熟悉HTML标记的用户可直接在记事本中输入HTML标记制作网页，但输入的HTML标记不能有半点差错，否则将导致网页错误。
●可视化编辑器：Dreamweaver CC是最常用的可视化编辑器之一。在该编辑器中，即使不熟悉HTML标记也可以制作出网页，只需在网页中输入相应的内容，就会自动生成相应的HTML标记，但有可能生成一些不必要的标记，从而使文件变大。
1.1.8 网页色彩搭配
色彩是光刺激眼睛再传到大脑的视觉中枢而产生的一种感觉。良好的色彩搭配能够给网页浏览者带来很强的视觉冲击力，加深浏览者对网页的印象，是制作优秀网页的前提。下面介绍一些常用的网页色彩搭配方法。
1.网页安全色
即使设计了漂亮的配色方案，但由于浏览器、分辨率、计算机等配置不同，网页呈现在浏览者眼前的效果也不相同。为了避免这种情况发生，就需要使用网页安全色进行网页配色。
网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合（调色板或者色谱）。当使用网页安全色进行配色后，这些颜色在任何终端用户的显示设备上都将显示为相同的效果。
网页安全色是当红色（Red）、绿色（Green）、蓝色（Blue）的颜色数字信号值（DAC Count）为0、51、102、153、204、255时构成的颜色组合，一共有216种颜色（其中彩色有210种，非彩色有6种）。Dreamweaver CC中直接提供了这些颜色，可以在颜色板中单击
按钮展开色板，然后选择需要的颜色，如图1-11所示。
图1-11 Dreamweaver安全色
知识链接
网站设计色彩联想
网页安全色在需要实现高精度的渐变效果、显示真彩图像或照片时有一定的欠缺，设计时并不需要刻意局限使用这216种安全色，而是应该更好地搭配安全色和非安全色，以制作出具有个性和创意的网页。
2.色彩表达方式
在Dreamweaver中，颜色值最常见的表达方式是十六进制。十六进制是计算机中数据的一种表示方法，由数字0~9、字母A~F组成，字母不区分大小写。颜色值可以采用6位的十六进制代码来表示，并且需要在前面加上特殊符号“#”，如#0E533D。
除此之外，还可通过RGB、HSB、Lab、CMYK来表示。RGB色彩模式是通过对红（R）、绿（G）、蓝（B）3个颜色通道的变化及它们相互之间的叠加来得到各式各样的颜色，是目前运用最广的颜色系统之一。HSB色彩模式是普及型设计软件中常见的色彩模式，其中H代表色相；S代表饱和度；B代表亮度。Lab色彩模式由亮度（L）、a和b两个颜色通道组成。a包括的颜色是从深绿色（低亮度值）到灰色（中亮度值）再到亮粉红色（高亮度值）；b包括的颜色是从亮蓝色（低亮度值）到灰色（中亮度值）再到黄色（高亮度值）。因此，这种颜色混合后将产生具有明亮效果的色彩。CMYK也称为印刷色彩模式，由青、洋红（品红）、黄、黑4种色彩组合成各种颜色。
3.相近色的应用
相近色是指相同色系的颜色。使用相近色进行网页色彩的搭配，可以使网页的效果更加统一、和谐，如暖色调和冷色调就是相近色的两种运用。
●暖色调：暖色主要包括红色、橙色、黄色等色彩，能给人温暖、舒适、有活力的感觉，可以突出网页的视觉效果。在网页中应用相近色时，要注意色块的大小和位置。不同的亮度会对人们的视觉产生不同的影响，如果将同样面积和形状的几种颜色摆放在画面中，画面会显得单调、乏味，所以应该确定颜色最重的一种颜色为主要色，其面积最大，中间色稍小，浅色面积最小，以使画面效果显得丰富，如图1-12所示。
●冷色调：冷色主要包括青、蓝、紫等色彩，可以给人明快、硬朗的感觉。冷色调颜色的亮度越高，其特效越明显，其中蓝色是最为常用的一种冷色调颜色，如图1-13所示。
技巧
除了暖色调和冷色调外，与黑、白、灰3种中性色组合，能够带给人轻松、沉稳、大方的感觉。中性色主要用于调和色彩搭配，突出其他颜色。
图1-12 暖色调
图1-13 冷色调
4.对比色的应用
在色相环中每一个颜色对面（180°）的颜色，称为互补色，也是对比最强的色组。对比色也可以指两种可以明显区分的色彩，包括色相对比、明度对比、饱和度对比、冷暖对比等，如黄和蓝、紫和绿、红和青。任何色彩和黑、白、灰，深色和浅色，冷色和暖色，亮色和暗色都是对比色关系。图1-14所示为对比色的网页效果。
图1-14 对比色
1.1.9 网页制作遵循的原则
网页设计与其他设计相似，需要内容与形式统一。除此之外，还要遵循风格定位、CIS的使用等原则。
●统一内容与形式：好的信息内容应当具有编辑的合理性与形式的统一性，形式是为内容服务的，而内容需要利用美观的形式才能吸引浏览者的关注。就如同产品与包装的关系，包装对产品销售有着重大的作用。网站类型不同，其表现风格也不同，通常表现在色彩、构图和版式等方面。例如，新闻网站多采用简洁的色彩和大篇幅的构图，娱乐网站多采用丰富的色彩和个性化的排版等。总之，设计时一定要遵循美观、科学的色彩搭配和构图原则。
●风格定位：确定网站的风格对网页设计具有决定性的作用，网站风格包括内容风格和设计风格。内容风格主要体现在文字的展现方法和表达方法上，设计风格则体现在构图和排版上。如主页风格，通常主页依赖于版式设计、页面色调处理、图文并茂等。这需要设计者具有一定的美术资质和修养。
●CIS的使用：CIS（Corporate Identity System，企业识别系统）设计是企业、公司、团体在形象上的整体设计，包括企业理念识别（Mind Identity，MI）、企业行为识别（Behavior Identity，BI）、企业视觉识别（Visual Identity，VI）3部分。VI是CIS中的视觉传达系统，对企业形象在各种环境下的应用进行了合理的规定。在网站中，标志、色彩、风格、理念的统一延续性是VI应用的重点。将VI设计应用于网页设计中，是VI设计的延伸，即网站页面的构成元素以VI为核心，并加以延伸和拓展。随着网络的发展，网站成为企业、集团宣传自身形象和传递企业信息的一个重要窗口，因此，VI系统在提高网站质量、树立专业形象等方面起着举足轻重的作用。
疑难解答|如何保持网页设计风格的统一？
一个简单的保持网站内部设计风格统一的方法是：保持网页某部分固定不变，如LOGO、徽标、商标或导航栏等，或者设计相同风格的图表或图片。通常，上下结构的网站保持导航栏和顶部的LOGO等内容固定不变。需要注意的是，不能陷入一个固定不变的模式，要在统一的前提下寻找变化，寻找设计风格的衔接和设计元素的多元化。