下载掌阅APP，畅读海量书库
立即打开
本节介绍网页制作涉及的基本知识，学习这些知识是制作出规范、美观的网页的前提。
上网时浏览的页面就是网页，网页又称为网页页面，其中的图像、文字、超链接等是构成网页的基本元素。图1-1所示为淘宝网首页。
图1-1 淘宝网首页
网页可按其在网站中的位置进行分类，也可按其表现形式进行分类。
按在网站中的位置的不同，网页可分为主页和内页。主页是指网站的主要导航页面，一般是进入网站时打开的第一个页面（首页）；内页是指与主页相链接的页面，也就是网站的内部页面。
一些网站的首页并非主页，其作用只是欢迎浏览者或者引导浏览者进入主页。
按表现形式的不同，网页可分为静态网页和动态网页，具体含义如下。
（1）静态网页
静态网页是指用HTML编写的网页，一般以.htm、.html、.shtml、.xml等为扩展名。在静态网页中，可以出现各种动态效果，如GIF格式的动画、Flash动画、滚动字母等。
静态网页有如下特点。
● 每个静态网页都有一个固定的URL，网页URL以.htm、.html、.shtml等为扩展名。
● 网页内容一旦发布到网站服务器上，每个网页就是一个独立的文件。
● 静态网页的内容相对稳定，容易被搜索引擎检索到。
● 静态网页没有数据库的支持，因此在网站维护和网页制作方面工作量都比较大。当网站信息量很大时，完全用静态网页来建立网站是比较困难的。
● 静态网页的交互性较差，在实时性方面也存在限制。
（2）动态网页
动态网页是使用ASP、PHP、JSP和CGI等程序生成的网页，一般以.aspx、.asp、.jsp、.php、.perl、.cgi等为扩展名，其制作方法比静态网页复杂。在动态网页中可以只有文字内容，也可以包含各种动画内容，这些只是网页具体内容的表现形式。无论网页是否具有动态效果，采用动态网页技术制作的网页都称为动态网页。
动态网页有如下特点。
● 动态网页一般以数据库技术为基础，这大大降低了维护网站的工作量。
● 动态网页可以实现更多的功能，如在线调查、互动交流等。
● 动态网页是不独立存在于服务器上的网页，只有在用户请求服务器时才会返回一个完整的网页。
● 包含动态网页的网站只有做一定的技术处理，才能满足搜索引擎的要求。
静态网页和动态网页不是以网页中是否包含动态元素来区分的，而是根据客户端与服务器端是否发生交互行为来区分的。不发生交互行为的是静态网页，发生交互行为的是动态网页。
在网页制作过程中常常会遇到一些专业名词，如站点、发布、浏览器、导航条、超链接、表单、URL、IP地址及域名，掌握这些专业名词的具体含义才能轻松地制作网页。下面分别讲解这些专业名词。
● 站点。站点是一个管理网页文档的场所。简单地讲，一个个网页文档链接起来就构成了站点。站点可以小到一个网页，也可大到一个网站。
● 发布。发布就是把制作好的网页上传到网络中的过程。
● 浏览器。浏览器是一种把互联网上的文本文档和其他类型的文件翻译成网页的软件。通过浏览器，用户可以快捷地连接到互联网。目前使用人数最多的浏览器是微软公司的IE浏览器，图1-2所示为用IE浏览器打开的网易网首页。另外，还有其他浏览器可供用户安装使用，如QQ浏览器、FireFox浏览器、360安全浏览器及搜狗浏览器等。
● 导航条。导航条就如同一个网站的路标，有了它用户就不会在浏览网站时“迷路”。导航条链接着各个页面，只要单击导航条中的超链接就能进入相应的页面。
● 超链接。超链接在网页中具有重要的作用，主要用于将不同页面链接起来，链接的可以是同一站点内的页面，也可以是其他网站的页面。超链接主要有文字链接和图像链接等。通常，将鼠标指针移动到网页对象上，如果鼠标指针会变为手形
，说明该对象是一个超链接，然后单击该对象就能打开其链接的目标网页。
● 表单。表单是具有交互性的动态网页，常用于在网站注册会员和申请邮箱时提交用户信息，图1-3所示为登录新浪邮箱的表单。
图1-2 网易网首页
图1-3 登录新浪邮箱的表单
● URL。URL（uniform resource locator，统一资源定位符）主要用于指明通信协议和地址。“http://”形式的URL用于表示网站的地址，而“ftp://”形式的URL则是用于表示文件传输。
● IP地址。IP地址就是为连接互联网的每一个主机分配的一个32位地址，互联网中的每台主机的IP地址都是唯一的。IP地址分为A、B、C、D、E 5类，常用的是B和C两类，如192.168.1.1为C类IP地址。
● 域名。域名就如同网站的地址，互联网中任何网站的域名都是全世界唯一的。域名由固定的网络域名管理组织在全球进行统一管理，用户需到各地的网络管理机构进行申请，申请成功后才能获得域名。将域名与网站服务器的IP地址绑定，浏览者通过域名就可以访问服务器网站中的网页。
网页是由多种元素组成的。文本和图像是网页中最基本的元素，是网页信息的主要载体，它们在网页中起着非常重要的作用。其他的很多元素（如超链接等）都是基于这两种基本元素创建的。
从严格意义上讲，网页也是一种“软件”，其界面也是软件界面的一种。然而，相比于各种系统软件和应用软件的界面，网页的界面又有一些不同的地方。以内容来划分，一般网页的界面由网站Logo、Banner、导航栏、内容栏、文本、图像、按钮、Flash动画和版尾等部分组成。
Logo，中文意思为标识、标志等，是整个网站对外的标识，其制作要点如下。
● Logo通常位于网页的左上角，也可根据需要将其置于其他任何位置。一般需保证Logo醒目，让浏览者能很快看到。
● Logo的内容通常包括特定的图形和文本，其具体内容应与开发该网站的企业的文化紧密结合，以体现网站的特色，图1-4所示为腾讯网的Logo。
Banner，中文意思为旗帜或网幅，是一种由文本、图像和动画结合而成的网页栏目。Banner的主要作用是显示网站的各种广告，包括网站自身产品的广告和与其他企业合作放置的广告。其标准尺寸有468像素×60像素、392像素×60像素、234像素×60像素、125像素×125像素、120像素×90像素、120像素×60像素、88像素×31像素，及120像素×240像素等。其中，468像素×60像素和88像素×31像素的Banner使用最多，468像素×60像素的Banner文件大小在15kB左右，而88像素×31像素的Banner文件大小在5kB左右。除此之外，在一些特殊场合也可使用一些非标准尺寸的Banner，图1-5所示为当当网的Banner。
图1-4 腾讯网的Logo
图1-5 当当网的Banner
导航栏是网页设计的重要内容，网页中的导航栏用于帮助用户快速访问所需内容。根据网页的大小及内容多少，一个网页可以设置多个导航栏，还可以设置多级的导航栏以显示更多的导航内容。设计导航栏时，还可以采用由Flash或脚本等方式实现的动态元素来吸引用户访问，图1-6所示为当当网首页的导航栏。
图1-6 当当网首页的导航栏
导航栏包含的项目是实现网站功能的按钮或超链接，其数量不宜过多。一般情况下，同级别项目的数量以3～7个为宜。设计合理的导航栏可以有效地提高用户访问网站的效率。
导航栏按照放置位置的不同可分为横排导航栏和竖排导航栏，按照表现形式的不同可分为图像导航、文本导航和框架导航等。
导航栏的制作需注意以下几点。
● 一般不使用图像导航，如必须使用，则应控制图像大小。
● 内容丰富的网站可以使用框架导航，这样用户可以快速地在网站内的各导航项目之间跳转，且只需下载一次导航页面。
● 如果导航栏项目不多，通常排成一排，如一般的个人网站或企业网站等；如果导航栏项目较多，可分两排或多排进行排列。
内容栏是网页的主体，通常由一个或多个子栏组成，包含网页提供的绝大部分信息和服务项目。
● 内容栏的内容既可以是图像，也可以是文本，还可以是图像和文本结合的各种内容。
● 在设计内容栏时，网页设计人员可以先设计多个独立的子栏，然后再将这些子栏拼接在一起，形成一个整体。同时，还可以对子栏进行优化排列，以提高用户体验。
● 若网页的内容较少，则可以使用单独的内容栏，添加适量的图像可以使网页更加美观。
文本容量小，传输速度快，用户可以快速地浏览和下载，是网页主要的信息载体。网页中文本的样式多变，风格不一，能吸引用户的网页通常都具有美观的文本样式。文本的样式可通过对网页文本的属性进行设置来调整，在后面的章节中将详细讲解这方面的知识。
编辑文本时需注意以下几点。
● 文本的颜色需要明显地与背景的颜色区别开来，让用户能清楚地看到文本。
● 每行文字的数量最好为20～30个，并注意段落的区分和缩进，以便阅读。
● 同版面文本的样式不宜过多，最好在3种以内。
图像比文本更具生动性和直观性，它可以传递一些文本不能传递的信息，Logo、背景等一般都是图像。
图像是网页中不可或缺的元素。使用图像时，除了要考虑美观性，还应考虑它对网页下载速度的影响。在选择图像时应注意以下几点。
● 图像应采用淡色系列的背景，能与主题分离的可用深色背景。
● 图像要清晰可见，所表达的含义要简单明了。
● 图像中的文字要求清晰可辨，不可出现模糊、难辨识的情况。
按钮的大小没有具体的规定，需注意的是，按钮要和网页的整体效果保持协调。按钮一般采用背景较淡、文字颜色较深的形式，也可采用对比度较强的颜色。
Flash动画越来越多地在网页设计中应用，适合自身风格的动画元素可以展现网站形象或者展示信息。网络广告的形式不断翻新，越来越多的动画技术被应用在网络广告领域。互动类纯Flash网站风靡网络，已成为影响设计师设计风格的一个重要因素。正因如此，基于Flash动画的互动式网站也成了创意思潮的展现平台。从静止到运动，从粗糙的动画到对设计师创意的诠释，从只展示动画到动画与功能完美的结合，从枯燥的展示到和用户互动体验理念的融入，从单一的软件运用到软件和技术与Flash的配合，从平面的动态效果到三维动画，Flash动画在网页设计中发挥着越来越重要的作用。
版尾是整个网页的收尾部分。在这部分内容中，可以声明网页的版权、法律依据，以及为用户提供各种提示信息等。除此之外，版尾部分还可以提供独立的导航条，为将页面滑到底部的用户提供导航，图1-7所示为当当网首页的版尾。
图1-7 当当网首页的版尾
HTML代码可以使用Windows操作系统自带的“记事本”（Notepad）进行编写。使用时只需选择“开始”→“程序”→“附件”命令即可找到“记事本”程序，如图1-8所示。
图1-8 “开始”菜单中的“记事本”程序
不仅可以在“记事本”程序中编写HTML代码，在任何文本编辑器中都可以编写HTML代码，如写字板、Word等，但保存的时候文件的扩展名必须为.htm或.html。
一些专业的文本编辑器提供了快捷的网页代码录入功能，如自动添加标记、显示一些关键字、同时编辑多文件、全屏浏览等功能。EditPlus就是这样一款非常好用的HTML编辑器，除了支持颜色标记、HTML标记，同时还支持C语言、C++、Java等编程语言。另外，它还有完整的CSS指令功能，编写网页代码可达到事半功倍的效果，图1-9所示为EditPlus编辑器。
图1-9 EditPlus编辑器
对于初学网页设计的人来说，一开始就使用HTML代码制作网页会觉得比较困难，尤其是没有写过程序的初学者。现在有很多可视化的网页开发工具，强调的是“所见即所得（What You See is What You Get）”，即使不懂HTML语法也可以用这些工具设计出很复杂的网页，这些网页开发工具有微软公司推出的FrontPage、Macromedia公司（后被Adobe公司收购）推出的Dreamweaver等。本书的网页制作主要采用Dreamweaver CS6软件，本章的1.2节将专门介绍Dreamweaver CS6。
在网页中加上图像的点缀，可以使网页更丰富多彩。图像处理软件有很多，在制作网页时常用的图像处理软件是Photoshop和Fireworks。
Flash动画是网页中普遍使用的一种动画，它需要使用Flash软件进行制作。GIF动画也常常应用在网页中，可以使用Fireworks或Adobe ImageReady进行制作。
网页色彩的把握是网页制作中的一个重点和难点，使用一些专门的网页配色软件可以方便地创建网页色彩方案，如玩转颜色和网页本色等。另外，某些网站也提供网页配色的设计，如蓝色理想等。
网页制作分为前台制作和后台制作，前台制作主要是生成静态网页，而后台制作则需要编写程序以实现网页与数据库的交互。
进行前台制作主要应掌握图像的制作、处理及使用Dreamweaver进行静态网页制作的技能。在此基础上，进一步掌握制作Flash动画的技能，并了解一些HTML、JavaScript及CSS的知识。
进行后台制作需要掌握HTML、JavaScript、CSS、ASP、PHP、JSP、数据库及Web服务器的配置等知识。
学习网页制作是一个循序渐进的过程，除了需要勤学多练，还需要在美学方面有一定的积累。以下是一些学习网页制作的方法。
● 在学习网页制作时，应先从最简单的网页入手，由易到难。学习过程中应注重理论联系实际，这样可增强学习兴趣。
● 网页制作不能闭门造车，需对优秀的网页进行分析和借鉴，同时也要不断创新，大胆尝试各种制作方法。
● 在学习网页制作的初期阶段不必太关注网页设计语言，在有一定网页设计基础后，再学习一些语言（如HTML、JavaScript和CSS等）。