网页设计与制作基础知识

网页设计与网站建设

第1章 网页制作基础知识

本章内容

1.1 基本概念

☐ 计算机网络是Internet的基础，是多台计算机通过特定的连接方式构成的一个计算

机的集合体。

☐ 网络是现代社会传播信息的重要途径，而网页又是这一途径中最为重要的手段。可

以说，在上网冲浪已经成为一种时尚的今天，网页已经成为人们与外界沟通的重要桥梁。

1.1.1 什么是Internet

☐ Internet，即英特网的英文表示，是最著名的广域网。

☐ 全世界的计算机相互连接而形成一个整个地球规模的计算机网络，这个全地球规模

的计算机网络就是Internet。

☐ 在Internet中的任意一台计算机都可以从Internet上的其它计算机中来获得信息。 Internet的历史

它起源与1969年，是由美国国防部设立的名为APPANET的军用网络。

1982年，美军方从APPANET 撤出，主要用于学术机构的连接，科学家可以分享数据 今天Internet，以千万计的用户使用的全球性网络，没有人或机构拥有或全面控制。 Internet在我国的发展现状

从国内Internet的发展现状来看，1994年4月，中科院计算机网络信息中心正式接入Internet，从此，中国Internet发生了飞速的发展。

截至2009年底，我国网民人数达到了3.84亿，即每四人中就有一人是网民。另外网站数、IP地址等也迅速增长，分别达到251万和2.3亿 。从域名、网站数、IP地址等增长情况来看，我国互联网资源得到了全面提升。

Internet的接入方式

PSTN接入（电话拨号）

ISDN接入（综合业务数据网）

DDN专线接入（数字数据网）

DSL接入（宽带技术）分为对称的DSL和非对称的DSL

Internet基本服务功能

WWW服务

WWW（World Wide Web，可译为“万维网”），是一个基于超级文本的信息查询工具。WWW是在Internet的基础上，由各计算机节点上的WWW软件和超级文本格式的信息文件组成的。这些节点称为WWW服务器，简称Web服务器。海量的信息被存储于Web服务器上，用户使用WWW时只需提出查询要求，到何处查询及如何查询则由WWW自动完成。

又被称为万维网（World Wide Web）或简称3W，它是无数个网络站点和网页的集合，也是Internet提供的最主要的服务，它是由多媒体链接而形成的集合，通常上网看到的就是万维网的内容。

WWW服务由三部分组成，即：客户机、服务器和HTTP协议。

WWW服务 – 工作方式

客户机和服务器之间的传送协议：HTTP

工作过程：

1）客户机运行WWW程序，连接服务器，提出请求

2）服务器响应，发送超媒体文件

3）客户机收到信息，按文件格式显示信息

电子邮件(E-mail)服务

“电子邮件”专指在Internet中的电子邮件E-mail,就是Electronic Mail的英文缩写，是计算机用户交换信息的一种途径。邮件地址由用户名和主机名组成，中间由@连接，如[email protected]，bjlgo是用户名，163.net是主机名。

远程登录服务（Telnet）

远程登录就是用户通过计算机网络进入和使用远程的计算机系统。使用远程主机有两种情况：一种是要求用户有帐号才能进行登录的；另一种是开放的，用户无须拥有自己的帐号，即不用口令和用户名就能登录的。

文件传输服务(FTP File Transfer Protocol)

文件传输服务是Internet上使用非常广泛的一种通讯协议。 FTP是由支持Internet文件传输的各种规则所组成的集合，这些规则使Internet用户可以把文件从一个主机传送到另一个主机上。FTP通常也表示用户执行这个协议所使用的应用程序，如：CutFTP等。用户使用的方法很简单，启动FTP软件先与远程主机建立连接，然后向远程发出指令即可。 FTP

FTP（File Transfer Protocol）即文件传输协议，是一种快速、高效和可靠的信息传输方式，通过该协议可把文件从一个地方传输到另一个地方，从而真正地实现资源共享。制作好的网页要上传到服务器上，就要用到FTP。

常用的工具有：CutFTP、FlashFTP 、LeapFTP等

Gopher服务

Gopher是一种基于菜单的信息检索工具，用户只要在成树形结构排列的多层菜单中逐级深入，就可以检索到所需要的信息，而不必考虑它们的存储方式和位置。

电子公告板服务

（Internet BBS电子公告扳（BBS）即公告板系统（Bullet in Board System）是一个信息和文件的陈列室，常常集中于一个特定主题，像发告示一样，将要公布的信息粘帖到公告栏上，其他人可以随时看到信息。

网络会议（Net Meeting）服务

Net Meeting 为用户通过Internet与其他人进行交谈，并举行各种实时通信会议提供了极大的方便。

游戏和聊天服务

1.1.2 什么是Intranet

☐ Intranet,中文也称企业内部因特网，是用于在公司或组织内处理信息的网络。是

Internet技术在企业内部或封闭的用户群内的应用，是一个公司或组织所特有的，不一定与Internet有物理上的连接关系的网络。它的用途包括提供诸如文档分发、软件发布、访问数据库和培训等服务。它的作用范围仅限定于公司或组织内部。

1.1.3 网络协议

☐ 网络协议是关于信息格式及信息交换规则的描述，或者说是网络中的设备相互“打

交道”时共同遵循的一套规则。

☐ http\stmp\pop3等

TCP/IP协议簇

☐ TCP/IP是Internet上通用的标准协议簇。TCP（Transmission Control Protocol）传输控

制协议，提供面向连接的服务IP（Internet Protocol）互联网协议，将数据从一个地址传送到另一个地址，也就是说IP的工作就是传送和接收数据包。

TCP/IP协议

☐ TCP协议是上百个各种功能协议的总称，称为TCP/IP协议族

☐ 保证数据完整传输的两个最基本、最重要的协议

☐ 采用通信方式: 分组交换方式

☐ 基本传输单位是数据包

TCP/IP协议传输过程

☐ 数据包分为若干数据包，编上序号，以便接收端把数据成原来的格式

☐ IP协议 数据包写上发送主机和接收主机的地址

☐ 数据包在网上传送

IP地址

☐ IP地址是一个32位的二进制数组成的号码，该号码分为四段，每段8位，每段取

值范围在0～255之间。IP地址是识别Internet网络中的主机及网络设备的唯一标识。 ☐ IP地址由32个二进制数组成，每8位一组，共4组，每组间用“.”隔开。

☐ 包括Net-ID和Host-ID两部分组成。其中，Net-ID表示一个网络，Host-ID表示网络

上的一个主机。

有两种表示方法，二进制和十进制。

例如，北京师范大学的IP地址:

二进制:11001010.01100110.01010000.00110110

十进制: 202.112.80.54

中北大学的IP地址：

十进制： 202.207.177.1

二进制： 11001010.11001111.10110001.1

IP地址分类

A类：

以0开头，第1个字节表示网络号，第2、3、4字节表示网络中的主机号。

它的网络数量少，可以表示126个网络号，每一网络中最多可以有16777214个主机号。 编址范围：1.0.0.1~126.255.255.254 美国

B类：

以10开头，第1，2字节表示网络号，第3，4字节表示网络中的主机号

最多可以表示16384个网络号，每一网络中最多可以有66354个主机号。

编址范围：128.0.0.1~191.255.255.254

C类：

以110开头，第1，2，3字节表示网络号，第4字节表示主机号

网络数量较多，可以有2097152个网络号，每一网络中最多可以有254个主机号。 编址范围:192.0.0.1~223.255.255.254

D类：

D类地址用于组播，前面4位1110引导，后面28位为组播地址ID。

1110xxxx.xxxxxxxx.xxxxxxxx.xxxxxxxx

编址范围：224.0.0.0-239.255.255.255

E类：

总是以11110五位引导

E类地址用于研究用

编址范围：240.0.0.0-254.255.255.255

域名和域名系统

☐ IP地址由四个从0到255之间的数字组成，如202.116.0.54，但数字比较难记，新

方法来代替这种数字，即“域名”地址，域名由几个英文单词组成；

☐ Internet域名是Internet网络上一个服务器或一个网络系统的名字，在全世界没有重

复的域名。

域名

如www.nuc.edu.cn 具有一定的意义，其中cn代表中国（China），edu代表教育网（education），nuc代表中北大学，www代表全球网（或称万维网，World Wide Web），整个域名合起来就代表中国教育网上的中北大学站点。

域名类似于Internet上的门牌号，是用于识别和定位互联网上计算机的层次结构式字符标识，与该计算机的因特网协议（IP）地址相对应。

URL和域名是两个不同的概念，如http://www.sohu.com/是URL，而www.sohu.com是域名。

域名和域名系统

表示方法：计算机名 . 组织机构名 . 二级域名 . 顶级域名

a. 顶级域名，通用的标准代码，分组织机构和地理模式(cn中国,jp日本)

b. 二级域名，由该国自行确定，分类别域名和行政区域名(sx山西,sh上海)

c. 组织机构名，主机所属区域的单位，例如：域名: cernet.edu.cn，cernet表示中国教育科研网

最高层域名又称顶级域名。顶级域名代表建立网络的部门、机构或网络所隶属的国家和地区，大体可分为两类，一类是组织性顶级域名，由三个字母缩写代表机构，如 .com代表商业，.edu代表教育，.net代表网络等。另一类是地理性顶级域名，由两个字母缩写代表国家，如.CN代表中国，.JP代表日本等。

顶级域名

ac 科研机构

com 工,商,金融等企业

edu 教育机构

gov 政府部门

net 互联网络,接入网络的信息中心和运行中心

org 各社会团体及民间非盈利组织

Internet域名

域名与IP地址的关系

域名易于记忆

网络通信只能标识IP地址

解决办法

DNS 自动域名转换为对应的IP地址

DNS服务器

浏览器

浏览器是指将互联网上的文本文档（或其他类型的文件）翻译成网页，并让用户与这些文件交互的一种软件工具，主要用于查看网页的内容。浏览器有许多种，按其运行的平台分类，主要有基于UNIX系统、Microsoft Windows系统和Apple Macintosh系统3种类型，目前最常用的浏览器有：美国微软公司的Internet Explorer和Google公司的Chrome、Mozila提供的Firefox等，早期曾经很出名的美国网景公司的Netscape Navigator现在已经很少人用了。 Web服务器

☐ 与浏览器对应的是Web服务器，现在最普遍的Web服务器有Apache软件基金的

Apache HTTP服务器、Microsoft的Internet Information Server（IIS）和Zeus Technology

的Zeus Web Server。网站中的所有文件都是通过Web服务器来提供访问。Web服务器对数据进行加工、处理，然后将结果返回给浏览器，浏览者便看到了具体的网页。两者相辅相成、缺一不可。

URL

URL（Uniform Resource Locator）即统一资源定位器，也就是网络地址，是在Internet上用来描述信息资源，并将Internet提供的服务统一编址的系统。简单来说，通常在IE浏览器输入的网址就是URL的一种。

☐ URL主要用来指明通信协议和地址的方式，以取得网站提供的各种服务，格式：

信协议>: ////

☐ #锚点即：Protocol://host.domain/path/filename。

☐ 其中： 通信协议包括Http、Ftp等协议。

☐ 主机名指服务器在网络中的IP地址（如210.77.35.178）或域名（如）。

☐ 在路径中，主机名与路径文件名之间以“/”分隔。

超链接

☐ 超链接（Hyperlink）是从一个页面跳转到另一个页面的入囗，它可以看做是一种文

件的指针，它提供了相关联文件的路径，并且可以跳转执行相应的文件。

☐ 超链接技术是从一个网页指向另一个地址的链接，如指向另一网页或同一网页上的

不同位置。链接地址通常是另一个网页，也可以是一幅图片、一个邮件地址等。 网站内部链接

☐ 网站内部链接是指本网站网页间的链接

☐ 内部链接一般用相对路径。相对是指按当前所编辑的网页所在目录位置来判断其他

文件所在的位置。必须在同一盘符内.

1.2 认识网页和网站

1.2.1 什么是网页

网页基本概念

是一种存储在Web服务器上，通过Web进行传输，并被浏览器所解析和显示的文档类型。网页Internet上的信息携带者，是Internet中最基本的信息单位，是把各种多媒体信息相互链接起来而构成的一种信息表达方式。

网页组成元素

网站标识Logo、网页导航菜单

网页的本质

浏览者是通过浏览器来访问Web服务器上的网页的。那么，网页的本质到底是什么呢？如果在浏览器窗口中任意打开一个网页，然后选择“查看”菜单中的“源文件”命令，则系统会启动“记事本”程序，其中包含一些文本信息，如图1-2所示，图1-2所示的为某网页的源代码。

Web页面

这些文本实际就是网页的本质——HTML源代码。由此可以看出，网页就是用HTML写成的文档，在Internet中可以通过浏览器程序进行浏览。

HTML（Hypertext Markup Language，超文本标记语言）是表示网页的一种规范，它通过标签（也叫做标记符）定义了网页内容的显示。它是在文本文件的基础上加上一系列标记，用以描述其颜色、字体、文字大小、格式，再加上声音、图像、动画甚至视频等形成精彩的页面。

超级文本（HyperText）与普通文本不同，它是一种使用户与计算机之间发生更加密切

交流的文本显示技术，它通过对相关词汇进行索引链接，可以使带链接的词汇或语句指向文本中的其他段落、注解或文本。

静态网页与动态网页

静态网页也称为普通网页，是相对动态网页而言的，静态并不是指网页中的元素都是静止不动的，而是指网页被浏览时，在Web服务器中不再发生动态改变（没有表单处理程序或者其他应用程序的执行），因此网页不是即时生成的。

动态网页示例

动态网页中除了普通网页中的元素外，还包括一些应用程序，这些应用程序使浏览器与Web服务器之间发生交互行为，而且应用程序的执行需要应用程序服务器才能够完成。

应用程序服务器读取网页上的代码，根据代码中的指令形成发给客户端的网页，然后将代码从网页上去掉，所得的结果将是一个静态网页。应用程序服务器将该网页传递回网页服务器，然后Web服务器将该网页传回给浏览器，当该网页到达客户端时，浏览器得到的全部内容是HTML格式。

1.2.2 什么是网站

通过超链接连接起来的一系列逻辑上可以视为一个整体的一些网页就叫做网站。或者说，网站就是一个链接的页面集合，通常为了完成某个特定目标。

网站

一个站点拥有大量的信息和数据，需要通过多个页面依照信息属性分类显示

网站与网页

网站首页

一般情况下，网站都有一个首页，或者说主页，作为网站的开始点。首页的作用一般像是一本书的目录，使访问者能够了解网站的内容。首页的名称一般是固定的，例如index.htm或default.htm等（具体名称由Web服务器确定）

网站分类

根据网站内容、定位不同，一般会区分为不同的类型：

门户网站

个人网站

专业网站

职能网站

门户网站

这类网站是一种综合性网站，涉及领域非常广泛，包含文学、音乐、影视、体育、新闻和娱乐等方方面面的内容，具有论坛、搜索和短信等功能。现在国内较著名的门户网站有搜狐（www.sohu.com）、网易（www.163.com）等。

个人网站

个人网站具有较强个性化，是以个人名义开发创建的网站，其内容、样式、风格等都是非常有个性的。

专业网站

这类网站具有很强的专业性，通常只涉及某一个领域，内容专业。如榕树下网站（www.rongshuxia.com）即是一个专业文学网站。

职能网站

职能网站具有专门的功能，如政府职能网站等。目前逐渐兴起的电子商务网站也属于这类网站，较有名的电子商务网站有京东商城（www.360buy.com）、卓越网（www.joyo.com）和当当网上书店（www.dangdang.com）等。

1.2.3 网站部署方式

Web空间

虚拟主机技术

主机托管技术

独立服务器技术

Internet的接入方式

Web空间

互联网上存放网站页面内容的计算机存储空间

获得存放空间的主要方法：

虚拟主机技术

主机托管技术

独立服务器技术

虚拟主机技术

相对与真实主机而言，采用特殊的软、硬件技术把一台完整的服务器主机分成若干个主机。 即把真实主机的硬盘分成若干份，租给不同的用户，但每一台都有独立的域名与IP地址，具有完整的互联网服务器功能，但共享真实主机的CPU、RAM、操作系统、应用软件等。 虚拟主机技术的优点

缓解互联网上IP及服务器等资源的不足。

节省投资，如：服务器、硬件设备等。

无需租用专线，迅速拥有自己的域名及专属网站

管理简易，ISP完成绝大多数管理工作。

只需对自己的信息进行远程维护，无需对硬件、操作系统及通信线路进行维护。 “投资小，建立速度快、安全可靠、无需软硬件配置、无需技术支持”

虚拟主机技术的缺点

资料保密性差

只能远程控制

容易过载，性能下降

虚拟主机提供的服务

存储空间

电子邮件

网页制作

IP地址

文件传输（FTP）

时间

速度

主机托管技术

指的是用户将自己的独立服务器寄放在互联网服务商的机房，日常系统维护由互联网服务商代理进行，可以节约大量的机房环境、设备维护等基金。

可靠性是最基本的因素

重视安全问题

随时升级

独立服务器技术

是指用户的服务器从Internet的接入到维护、管理完全由用户自己操作。

一般是通过租用专用线路不间断的连接Internet 。

考虑硬件设施、软件系统、接入方式、防火墙、技术人员配备等。

1.3 网页相关技术

1.3.1 HTML的基本语法结构

1.3.2 HTML常用标签

网页的本质——HTML

HTML（HyperText Markup Language，超文本标记语言）是表示网页的一种标准。通过在网页中添加标记符，可以告诉浏览器如何显示网页，即确定网页内容的格式。浏览器按顺序阅读网页文件（HTML 文件），然后根据内容周围的 HTML 标记符解释和显示各种内容。 网页的本质——HTML（续）

网页通过结合使用其他 Web 技术（如CSS 样式表、JavaScript 脚本程序等），就可以创建出功能更加强大的网页。如果需要了解 HTML 语言的详细信息，请参阅其他参考书或访问：http://www.w3.org。

说明：HTML的最新版本是HTML4.01，但目前应用更广泛的是XHTML1.0（eXtensible HyperText Markup Language，扩展超文本标记语言）。XHTML可以认为是规定更为严格的HTML，二者本质并无区别。

网页修饰技术——CSS

随着技术的进步，在网页制作过程中使用CSS技术已经成为基本要求。实际上，较新版本的Dreamweaver已经将CSS技术作为默认的网页修饰技术。

CSS（Cascading Style Sheet，层叠样式表）技术是一种格式化网页的标准方式，它扩展了 HTML 的功能，使网页设计者能够以更有效的方式设置网页格式。

其他网页技术

☐ 服务器技术，主要指有关Web服务器建构的基本技术，包括服务器策略与结构设计、

服务器软硬件的选择及其他有关服务器建构的问题。

☐ Java技术，利用Java可以创建小应用程序（applet），使之从服务器下载到浏览器，

并在客户端的机器上运行。

☐ JavaScript技术，JavaScript是由Netscape开发的一种解释语言，它可以直接插入到

HTML文档中。

☐ ActiveX技术和VBScript技术， ActiveX是Microsoft Internet战略的中心环节，它是

一种按微软组件对象模型COM机制编写的软件，它本质上是OLE技术在Web上的应用。

☐ HTML/DHTML技术， HTML是Hypertext Markup Language（超文本标记语言）的缩

写，它是构成Web页面（Page）的主要工具。

☐ VRML技术，Web已经由静态步入动态，并正在逐渐由二维走向三维，VRML是目前

创建三维对象最重要的工具。 VRML不仅支持数据和过程的三维表示，而且能提供带有音响效果的结点，用户使用虚拟对象表达自己的观点，能与虚拟对象交互，为用户对具体对象的细节，整体结构和相互关系的描述带来了新的感受。

☐ XML技术，XML（Extensible Markup Lanuage）是一种可扩展的源标记语言，专门为

Web环境而设计的。

☐ CGI，通用网关接口（CGI）是一个用于定义Web服务器与外部程序之间通信方式的

标准，使得外部程序能生成HTML、图象或者其它内容，CGI程序不仅能生成静态内容，而且能生成动态内容。

☐ 服务器API技术，服务器API以动态链接库（DLL）方式提供，作用和工作原理类似

于CGI，可实现CGI程序提供的全部功能。

☐ ASP技术， ASP是开放式服务器应用程序开发技术，是一种技术框架，是一种服务

器端脚本运行的环境。

☐ ASP.NET ， ASP.NET是面向下一代企业级的网络计算Web平台，是对传统ASP技术

的大升级和更新。

HTML的基本语法结构

HTML元素（Element）构成了HTML文件，HTML文件是一种包含了很多标签（tags）的纯文本文件。

使用Windows系统的“记事本”或者其他的文本编辑器就可以编辑它们，HTML文件以.html或.htm为扩展名才会被浏览器“认识”并“解读”出来。

Html示例

HTML文件的基本特征如下。

标签由引文尖括号“”框起来，如“”就是一个标签。

你好!

哈哈，我的第一个页面!

HTML常用标签

在制作一般的页面的过程中，经常使用的标签有以下几种。

1.4 网页制作和编程工具

☐ FrontPage

☐ Dreamweaver

☐ Fireworks

☐ Photoshop

☐ Flash

常用工具

FrontPage 2000/2003

FrontPage 2000是Microsoft Office 2000家族中的一员，FrontPage 2000的界面，功能与Word 2000 都非常相似。

Dreamweaver MX

Dreamweaver MX和Fireworks MX、Flash MX一起，被人们喻为“网页制作三剑客”。 Dreamweaver

常用工具

☐ Fireworks MX

Firework MX是Macromedia公司的产品，是目前最流行的网页图像制作软件。Fireworks还可以安装使用所有的Photoshop滤镜，并且可以直接导入PSD格式图像。更方便的是它不仅结合了Photoshop位图功能以及CorelDRAW矢量图的功能，而且提供了大量的网页图像

模板供用户使用。

☐ Flash MX

Flash MX也是Macromedia公司的产品，是目前最流行的矢量动画制作软件。Flash MX只有用少量矢量数据就可以描述一个复杂的对象，而占有的存储空间只是位图的几千分之一，非常适合在网络上使用。

☐ zend studio

用于开发php的集成环境

☐ Eclipse

开源开发环境，可用于开发jsp等

1.5 网站建设流程

1.5.1 网站规划

☐ 规划站点就是对站点中所使用的素材和资料，以及网站中栏目的设置、颜色的搭配、

版面的设计、文字图片的运用等进行规划。在网站建设开始时对站点进行详细规划和组织会大大方便以后的工作。网站规划通常包括以下内容：

⏹ 确定目标

⏹ 用户分析与需求分析

⏹ 确定网站风格

⏹ 考虑技术因素（包括网页下载速度、浏览器、分辨率等）

确定网站主题和名称

☐ 主题

⏹ 主题要小而精

⏹ 题材最好是擅长或者喜爱的内容

⏹ 题材不要太滥或者目标太高

☐ 名称

⏹ 正、易记、具有特色。

确定网站栏目和版块

☐ 栏目和版块

⏹ 一定要紧扣主题

⏹ 设定一个最近更新或网站指南栏目

⏹ 设定一个可以双向交流的栏目

⏹ 设定一个FAQ（常见问题解答）栏目

确定网页文件命名规则

☐ Window NT 格式：扩展名应为3个字符（htm）；

☐ UNIX格式：扩展名为4个字符（html）；

☐ 不要用特殊字符命名：斜线（/）、减号（-）、反斜线（\）、加号（+）、冒号（：），英

文句号；

☐ 不要用数字开头；

☐ 不要用中文命名；

☐ 英文名称要用小写，不要大写或大小写混合；

☐ 站点首页名称一般情况下要用index。

确定网站建设尺寸规划

☐ 当表格用于网页排版时，表格的宽度一般设为100%、780px、1004px。

☐ 无论表格用于排版或是显示表格式数据，建议其边框粗细均设为0px;其单元格边距

及间距均为0px。

☐ 页面长度原则上不超过３屏，宽度不超过１屏。每个标准页面为A4幅面大小，即

8.5*11英寸。

☐ 全尺寸banner为468*60px,半尺寸为234*60px,logo为88*31px。另外120*90,120*60

也是小图标的标准尺寸。每个非首页静态页面含图片字节不超过60KB,全尺寸banner不超过14KB.

资料搜集、整理素材

确定网站主题，包括基本风格后，就要开始搜集素材。常言道：“巧妇难为无米之炊”，要让自己的网站有声有色、能吸引人，就需要尽量搜集素材，包括文字、图片、音频、动画及视频等。

1.5.2 网站设计

网站规划好之后，就进入了设计阶段。利用规划阶段搜集的信息，在设计阶段需要对内容、导航系统等进行具体的设计。

设计网站的内容结构

设计页面的布局

设计首页

设计导航系统

网页中的颜色

文字、图像、动画以及多媒体的使用

设计网站的内容结构

网站的内容结构是指通过什么样的逻辑方式将网站中的内容组织起来。实际上，由于网站主题的千差万别，内容组织的形式也有很多种类，关键的原则就是要符合普通人的思维习惯。 较好的做法是在 Internet 上查看与自己网站类似的网站，看其他人是如何对内容进行分类的，然后选择并设计一种适当的方式。

设计页面的布局

☐ 在对网页插入各种对象、修饰效果前，要先确定网站的总体风格和布局。网页版面

布局可按创意草案、粗略布局、最后定案 三个步骤来进行。

常见网站布局

常见的网页布局有“同”字型、“厂”字型、标题正文型、分栏型、封面型和Flash型等。 厂字形网页

“厂”字型页面顶部为主菜单以及横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局

优点：页面结构清晰，主次分明；

缺点：呆板，如果细节色彩上不注意，容易“看之无味”

封面型网页

封面型布局页面布局像一张宣传海报，以一张精美图片作为页面的设计中心，菜单栏目自由摆放

优点：漂亮、吸引人，适宜于艺术类网站

缺点：显示速度慢，文字信息量少

网页布局构图

牢记用户优先的观念

根据所反映的主体内容确定网页布局

首页 清楚的类别选项、 干净清爽的原则

“稳” 即：注意疏密和虚实间的对比关系

“新”即：构图要新颖，要有创意

设计首页

首页是网站的门户，是网站的脸面，是网站中的最重要的一个页面。设计首页时需要遵循网站规划制定的基本原则。在设计首页时需要注意，首页上往往包括以下部分：网站徽标、网站的层次结构（即导航系统）、搜索功能、吸引注意力的东西（例如主题图片）、实时内容（例如“新闻”、“最近更新”等）、商业信息（例如广告）、快捷方式（提供访问某些页面或功能的快速链接）、注册登录功能等。

设计导航系统

导航设计的最基本原则就是：使用户每次的点击都是合情合理的。也就是说，要按照人之常情设计符合逻辑的导航系统。

在设计网站的导航系统时，要注意保持风格的一致。

网页中的导航栏中可以提供返回首页的链接、搜索功能、次要栏目链接、本地导航、页脚式导航或“脚注” 等。

网页设计色彩基础

色彩在网页设计中占有极其重要的地位。不同的颜色对人产生不同的心理影响。设计时需要注意：设计主体与所搭配的色彩具有的特性是否相吻合。

在网页制作过程中，通常可以使用 6 位数字的十六进制数值来构造出颜色值。最好使用标准网络安全色。 在网页中使用颜色的一般要点：

保持一致性；

注意可读性；

网站文字、图像及多媒体的运用

☐ 中文网页最好使用用户通用的基本字体。例如“宋体”、“黑体”等。另外，可以使

用CSS 样式表确保整个网站字体风格的一致性。

☐ 网页中的图像、图形以及其他多媒体对象的数量和质量是限制页面快速下载的主要

因素。不过合理地使用它们也是网页制作的一种趋势，只要找到一个平衡点，使大多数目标用户能够接受即可。因为要制作出一个让所有人都满意的网页几乎是不可能的。

网页设计的特点

交互性（interaction）， 网络媒体与传统媒体的最大不同就在于它的即时交互性。在网络环境下，人们不再是一个传统媒体方式的被动接受者，而是以一个主动参与者的身份加入到信息的加工处理和发布之中。

多维性（multi-dimension）， 多维性源于超级链接，它主要体现在网页导航的设计。超级链接的出现使网页的组织结构更加丰富，浏览者可以在各种信息与主题之间自由跳转，从而打破了人们接受信息所固有的线性方式。

网页设计的特点

多种媒体的综合性 （integration of multi-media）, 网页设计是一种综合了文字、图像、声音、视频、动画、富媒体等多种视听元素的综合艺术。

版式的不可控性 （uncontrollability of layout ）, 网络浏览者使用的显示器分辩率大小会影响版式的呈现效果，造成不同浏览者的显示误差，这一点在设计当中需要考虑到。

艺术与技术结合的紧密性 （combination of art and technology）, 设计是主观和客观共同作用的结果，是在自由和不自由之间进行 的，设计者不能超越自身已有经验和所处环境提供的客观条件来进行设计。

网页设计遵循的一般原则

为用户考虑的原则

具备使用者优先的观念

考虑大多数人的连线状态

考虑用户使用的浏览器

主题鲜明的原则

形式与内容统一的原则

强调整体的原则

即时更新和维护的原则

网页设计要求

☐ 统一，是指设计作品的整体性，一致性。

☐ 连贯，是指要注意页面的相互关系。

☐ 分割，是指将页面分成若干小块，小块之间有视觉上的不同。

☐ 对比，通过矛盾和冲突，使设计更加富有生气。

☐ 和谐，指整个页面符合美的法则，浑然一体。

网页设计中的创意与创新

创新的动力在于思想的活力，不过源头还在于对技术的深刻理解，只有理解并掌握了基础，才可能将好的创意转化为现实。 总之，网页设计师是规范化+创意化的一项工作，眼界决定自己未来的世界。

1.5.3 网页制作

设计阶段完成后，进入网页制作阶段。

首先根据设计结果制作出若干示范网页。

然后通过 Dreamweaver 等软件制作具体页面，在网页中添加实际内容，包括：文本、图像、声音、Flash 电影以及其他多媒体信息等。

1.5.4 网站发布

网页制作完毕，应该利用上传工具将其发布到Internet上供大家浏览、观赏、使用。利用上传工具，可以很方便地把网站发布到所申请的网页服务器上。

1.5.5 网站维护

对网站要注意经常维护和更新内容，网站维护包括网页内容的更新，通过软件进行网页内容的上传，目录的管理，计数器文件的管理及网站的定期推广服务等。

1.5.6 网站推广

网页制作好之后，还要进行网站推广以提高网站的访问率和知名度。网站推广是企业网站获得有效访问的重要步骤，合理而科学的推广计划能令企业网站收到接近期望值的效果。