1.1　网页制作基础知识

网络现已成为人们生活和工作中不可缺少的一部分，所以，网页制作也成为了备受大家关注的技术。在开始学习网页制作之前，先了解一下什么是网页，以及与网页相关的设计知识，是十分有必要的。

1.1.1　认识网页

网页是Internet中最基本的信息单位，其中包括各种各样的网页元素，网页可以把文字、图形、声音及动画等各种多媒体信息相互联系起来而构成一种信息表达出来。

网页又称为Web页，是通过浏览器来阅读网络信息的文件。浏览网页时，在浏览器中看到的一个个页面就是网页。如图1-1所示。

1.1.2　认识网站

网站就是Internet上通过超级链接的形式构成的相关网页的集合。网站由一个或多个网页组成，如新浪、优酷、京东等。浏览者可以通过网页浏览器来访问网站，以获取需要的资源或享受网络提供的服务。按网站内容的不同，可将网站分为门户网站、企业网站、个人网站等几种类型，其各自的特点如下。

1．门户类网站

所谓门户类网站，就是诸如新浪、雅虎、搜狐等网站（图1-2），能将各种数据资源和互联网资源集成为一个信息管理平台，并以统一的用户接口提供给用户及企业，在企业和企业、企业和客户及内部员工之间建立信息通道，且能够释放存储在企业内部和外部的各种信息的整合式站点。

门户网站又可分为包罗万象型和内容专一型。

（1）包罗万象型。以搜狐为例，通过首页中名目繁多的导航栏就可以发现，这是一个包罗万象的网站，如图1-3所示。在这里不仅可以看到政治、军事、财经类的时事新闻，同时还可以看到像彩铃、星座、动漫这样的生活休闲类内容。

这一类的门户网站给人的整体感觉通常是内容多、文字多，没有很多的空隙，所以它们多以白色（新浪、雅虎、搜狐）或较深的单色作为背景，这样不仅可以衬托出琳琅满目的内容，也可以使整个版面显得干净利落，不会让访问者感觉拥挤和眼晕。这一类网页通常使用三种颜色的文本，这样更易于体现出自己想推荐的内容。

（2）内容专一型。这一类门户网站分为很多类型，在设计的时候可以根据所要面对的用户群，进行“量体裁衣”式的设计，根据用户不同的要求制作出不同的门户网站，如图1-4所示。

例如，IT类专门网站是以IT行业及相关产品为主题的门户型网站。这类网站除了在网站中能够找到有关IT方面的内容外，还有的网站专门登载IT信息，这就是IT门户网。

2．企业类网站

所谓企业类网站不用进行过多的解释，谁都能举出一两个例子，例如：微软、联想、海尔等企业的网站（图1-5）。这一类的网站一般来说结构较为简单，因为内容有限，所以不需要繁琐的多层页面。网站要实现的功能也比较少，主要以共享企业信息、宣传企业形象为主。因此在设计时不仅可以采用庄重、严谨的风格，也可以像设计个人网站一样体现强烈的个性，制作起来也比较容易发挥出设计者的风格。

企业类网站又可分为电子商务型和宣传形象型

（1）电子商务型。在网络世界中，电子商务网站比比皆是，既有像百货商场那样经营各类商品的网站，也有专门经营服装服饰、农产品等的网站（图1-6）。它们与门户网站不同，不仅提供相应的搜索引擎，同时还可以在网上集体竞价、实时买卖。这一类网站在设计时要注意让访问者保持愉悦的心情，以及对新鲜事物的关注。清新亮丽的颜色和便于访问的页面布局，将会大大提高网页在用户心目中的价值。

　

图　1-6

（2）宣传形象型。这一类的企业网站，主要功能是充分宣传企业文化和企业形象（图1-7）。页面上除了突出的企业Logo和企业名称外，还会有相应的口号等与企业形象有关的构成要素。这类网站可以把页面的风格做得鲜明一些，但是要符合其行业特征。

3．个人网站

相信很多读者都希望拥有一个制作精良的个人网站，因为这是体现自己个性的一个不错的途径，如果有一个精彩的个人网站出现在互联网上，一定会很高兴。个人网站如图1-8所示。

个人网站中的“个人”不完全是指某个人，也可以是几个人组成的一个团体（工作室类网站）。取材通常来源于个人的爱好，因此涉及面非常广泛。现在有许多个人网站会提供blog（博客）的模板，又因为拥有属于自己的网站需要申请空间，因此越来越多的人选择了blog来体现自己的个性。

1.1.3　网页的类型

网页的类型有多种，可按其在网站中的位置进行分类，也可按表现形式进行分类，下面分别进行讲解。

1．按位置分类

网页按其在网站中的位置可分为主页和内页。主页一般指进入网站时看到的第一个页面，也称为首页，有时也称为形象页；内页是指与主页相链接的其他页面，也称为网站的内部页面。

2．按表现形式分类

按网页的表现形式分类，可将网页分为静态网页和动态网页两类。静态网页是指用HTML语言编写的网页，其制作方法简单易学，但缺乏灵活性；动态网页是指用ASP、PHP、JSP等语言编写的网页，该类网页先在Web服务器端执行，然后再将执行结果返回客户端并通过浏览器进行显示。动态网页最大的特点是可以动态生成网页内容，可根据客户端提交的不同信息而动态地生成不同的网页内容。

1.1.4　网页设计前的考虑

网页版式设计的优劣直接关系到网站的成功与否。在开始版式设计之前，首先要考虑整个网站成功的几个重点因素。

1．用户因素

无论是着手设计之前，还是正在设计之中，或是设计完毕之后，都有一个最高行动准则，一定要牢记在心，那就是用户优先。因为如果没有用户去光顾，任何自认为设计得再好的网页都是没有意义的。因此，就要求网页设计者不仅要站在经营者的角度，同时也要站在访问者的角度开展设计工作，将最有用、最实际的内容放在网页的首要位置，并尽可能迎合多数用户的浏览习惯，因为网页是服务于大众的。

2．内容因素

“内容是第一位的”，这句话不仅适合书籍，同样适合网页。在制作网页之前，要先想好页面中要放置的内容，也就是网站所有者要告诉访问者， 且访问者最想知道的信息。网站的内容可以包括文字、图片、影像、声音等，但一定要与这个网站将要提供给访问者的信息有关系。

3．浏览器因素

在设计网页时，必须考虑网站访问者使用的浏览器。如果想让所有的访问者都可以毫无障碍地浏览页面，那么最好使用所有浏览器都可以阅读的格式或程序技巧。在页面中设置几种不同的观赏模式选项（例如纯文字模式、框架模式、Flash模式等），供访问者自行选择，就可以避免许多潜在的用户流失。另外，现在的显示器分辨率一般为1366×768像素，但是仍有一部分用户在使用1280×768像素的分辨率，因此在制作网页时，还要考虑网站浏览的兼容性。因为不同的显示器分辨率不同，所以，同一个页面的大小可能出现1280×768像素、1024×768像素等不同尺寸。由于现在显示器的分辨率一般都在1024×768像素以上，所以想要达到浏览网页的最佳效果，可以设置宽为1000像素，网页的高度可不做限制。

1.1.5　基本版式设计风格

对于一个网站来说，除了网页内容外，还要对网站进行整体规划设计。要设计出一个精美的网站，前期规划的确是必不可少的。页面布局按照基本版式可分为两种基本形式，上下分割型和左右分割型，但也有一些富有个性的版式设计类型，如半包围型和全包围型。一般情况下，页面布局皆以导航栏为界。

1．上下分割型

上下分割型是最为常见的一种网页结构，通常上方为导航栏，或者是企业动态形象（Flash），下方是内容，如图1-9所示。

部分网站只将这种形式用于网站的首页，而二级页面会更换为其他的结构（图1-10）。

2．左右分割型

在左右分割型页面中，左侧通常是导航栏，右侧则是正文。这种结构非常清晰，一目了然。如图1-11所示。大部分的大型论坛都采用这种结构，一些企业网站和个人网站也喜欢采用这种结构（图1-12）。

3．半包围型

该类页面的布局在页面顶部放置主导航栏(主菜单），在页面的左右两侧分别列出二级栏目栏或综合性热点区（如广告条、搜索引擎、友情链接、登录面板、注册按钮等），如图1-13和图1-14所示。这种是互联网中常见的布局，其优点是直观、条理清晰、均衡，缺陷是版式呆板、僵化。在采用这种布局时要注意色彩的和谐搭配，通过巧妙的用色，能够调节页面的整体韵律。

4．全包围型

全包围型页面以半包围型布局为基础，在页面的底部增加了一条横向的菜单（广告条，或者本站另一大板块的超级链接区），如图1-15和图1-16所示。这样做的目的是为了充分利用有限的页面空间，增大主页面的信息量，缩短正文链接的路径，使访问者比较便捷、直观地浏览所需要的信息，少走弯路。其缺点是页面拥挤、四面封闭，不够灵活。

1.1.6　网页页面的基本组成元素

网页是由多种元素组成的，文本和图像是网页中最基本的元素，它们在网页中起着非常重要的作用，是网页主要的信息载体。除文本和图像外，网页中还经常包含动画、音乐等多媒体元素。

1．文字

文字是网站最基本的内容，是网页主要的信息载体，因此文字素材是制作网站之前必须要准备好的。就企业网站而言，关于公司概况、公司新闻、公司宗旨以及口号这一类的文字，企业都会提供，有时也会提供平面的宣传材料。

2．图像（图片）

图像也是网页不可或缺的元素，它具有比文本更直观和生动的表现形式，并且可以传递一些文本不能传递的信息。网页中支持的图像格式主要包括JPEG、GIF和PNG三种，其中，JPEG格式用于照片图像时使用，GIF格式支持动画和背景透明，PNG格式也支持背景透明，但一般不太常用。

几乎所有素材图片在应用到网页中之前，都要经过图形图像软件的辅助处理。无论是图片的颜色、大小还是形状等，都需要使用软件进行调节。通常情况下Photoshop是最为常用的图片处理软件之一，当然还有Fireworks等其他辅助工具。

3．多媒体

音乐、动画等多媒体元素是丰富网页效果和内容的常用元素，在网页中运用非常广泛。多媒体元素的加入，可以使平静的网页变得生机勃勃。

网页中常用的音乐格式有MID和MP3，MID为通过软件合成的音乐，不能被录制；MP3为压缩文件，其压缩率非常高，且音质也不错，是背景音乐的首选。不一定所有的网页都有背景音乐，要视网站类型而定。

网页中常用的动画格式主要有两种：一种是GIF动画；另一种是SWF动画。GIF动画是逐帧动画，相对比较简单，而SWF动画则更富表现力和视学冲击力，还可以结合声音和互动功能，给浏览者强烈的视听感受。