1.1 网站开发概述

网站是按照一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。而网页是指在浏览器上登录一个网站后，看到的浏览器上的页面。网页是由文字、图片、声音等多媒体通过超链接的方式有机地组合起来的。因此，学习网站开发的基础就是学习网页制作。

1.1.1 网页概述

网页是用HTML编写的一种文件，将这种文件放在Web服务器上可以让在互联网上的其他用户浏览。比如访问百度网站，看到的就是百度网站的网页。网页也是通过HTTP来传递给浏览者的。网站是网页的集合，多个网页可以共同组成一个网站。网站显示的第一个网页称为首页。

1.1.2 网页构成元素

网页的构成元素很丰富，可以是文字，也可以是图片，甚至可以将一些多媒体文件（如音频、视频等）插入网页里。网页构成元素如下。

1. 文本

网页信息主要以文本为主，这里指的文本是文本字，而非图片中的文字。在网页中可以通过字体、大小、颜色、底纹、边框等选项来设置文本的属性。中文文字常用宋体、9磅或12像素大小、黑色即可，颜色不要太杂乱。大段文本文字的排列，建议参考一些优秀杂志或报纸的样式。

2. 图像

图像可以使网页丰富多彩。网页支持的图像格式包括JPG、GIF和PNG等。常用图形如下。

• Logo标志，是代表网站形象或栏目内容的标志性图片，一般在网页左上角。

• Banner广告，用于宣传站内某个栏目或者活动的广告，一般以GIF动画形式为主。

• 图标，主要用于导航，在网页中具有重要的作用，相当于路标。

• 背景图，用来装饰和美化网页。

3. 超链接

超链接是网站的“灵魂”，它是从一个网页指向另一个目的端的链接，如指向另一个网页或者相同网页上的不同位置。超链接可以指向一幅图片、一个电子邮件地址、一个文件、一个程序或者本页中的其他位置。超链接的载体可以是文本、图片或者Flash动画等。超链接广泛存在于网页的图片和文字中，提供与图片和文字相关内容的链接，在超链接上单击，即可链接到相应地址（URL）的网页。鼠标指针指向有链接的地方，默认会变成小手形状。可以说，超链接是网页的最大特色。

4. 表格

表格在网页中的作用非常大，它可以用来布局网页，设计各种精美的网页效果，也可以用来组织和显示数据。

5. 表单

表单主要用来收集用户信息，实现浏览者与服务器之间的信息交互。

6. 导航条

导航条是一组超链接，方便用户访问网站内部各个栏目。导航条可以是文字，也可以是图片，还可以使用Flash来制作。导航条可以显示多级菜单和下拉菜单效果。

7. 其他元素

除了上面几种网页基本元素外，在页面中可能还包括GIF动画、Flash动画、音频、视频、框架等。

1.1.3 网站建设流程

在创建网站之前首先要了解网站建设的基本流程，这样可以明确网站的目标和方向，从而提高效率。

1. 网站需求分析

在建立网站时，首先要考虑客户的各种需求，并以此为基础建设网站项目。网站的需求分析一般包括以下几点。

• 了解相关行业的市场情况，如在网上了解公司开展业务的市场情况。

• 了解主要竞争对手的情况。

• 了解网站建设的目的，是宣传商品、进行电子商务，还是建立一个行业性网站。

• 了解用户的实际情况，明确用户需求。

• 进行市场调研，分析同类网站的优劣，并在此基础上形成自己网站的大体架构。

2. 网站整体规划

良好的规划是创建成功网站的开始。在制作网页前，要规划好整个站点的风格、布局、服务对象等，并选择适合的服务器、语言脚本和数据库平台。

• 规划站点结构时，一般用文件夹保存文档。要明确站点的每个文件、文件夹及其存在的逻辑关系。

• 文件夹命名要合理，要做到“见其名知其意”。

• 如果是多人合作开发，还要规划好各自的内容，并注意统一风格，协调代码。

3. 收集资料与素材

网站整体规划好后，就要根据规划的情况收集网页制作中可能用到的资料和素材，通常包括文字资料、图片素材、动画素材、视频素材等，并要将其分类保存。在收集资料时，要根据用户的需求搜集建站的资料。整理好资料后，要根据这些资料搜集必要的设计素材。

4. 制作网页

一个网站往往包含很多网页，具体制作过程如下。

• 创建网页框架：在整体上布局页面，根据导航栏、主题按钮等将页面划分为几个区域。

• 制作导航栏：借助导航栏可以更加方便地浏览网站。

• 添加页面对象：分别编辑各个页面，将页面对象添加到网页的各个区域，并设置好格式。

• 设置链接：为页面的相应部分设置链接，这样，整个页面就整合起来了。

5. 域名和服务器空间的申请

网站制作完成后，首先要注册一个属于自己的域名。有了域名之后，在世界的任何地方只要在浏览器上输入地址，就能看到网站上的内容。一个好的域名拥有巨大的商业价值。

有了域名之后，还要有空间来存放网站的内容，因此，还要租用服务器空间。

6. 测试与发布网站

网站发布前要进行细致周密的测试，以保证正常浏览和使用。主要测试内容如下。

• 服务器的稳定性、安全性。

• 程序及数据库测试、网页兼容性测试，如浏览器、显示器。

• 检查文字、图片、链接是否有错误。

7. 后期维护与网站推广

上传站点后，要定期对站点的内容进行更新与维护，更新与维护的内容如下。

• 服务器及相关软硬件的维护，评估可能出现的问题，制订响应时间。

• 数据库维护，有效利用数据是网站维护的重要内容，因此要重视数据库的维护。

• 内容的更新、调整等。

• 制订网站维护的相关规定，将网站维护制度化、规范化。

1.1.4 网站开发软件

用于网页设计的工具软件很多，本书将以Adobe公司的Dreamweaver CS6为开发工具进行讲解，它也是最便于新手学习的软件之一。下面讲述Dreamweaver的使用方法。

打开Dreamweaver软件，会出现一个程序启动界面，如图1.1所示。页面分为3栏，第一栏为“打开最近的项目”，这里将呈现出之前打开过的历史页面。最下面的“打开…”用于打开文件夹，选择要打开的页面。第二栏为创建新项目，用于选择新建页面的语言环境。因为本书讲述的是HTML方面的内容，所以应该选择第一个HTML。第三栏为“主要功能”，用于介绍Dreamweaver软件自带的功能。

在“新建”选项栏中选择HTML并单击打开，进入程序工作页面，如图1.2所示。在这个页面中可以采用4种视图方式：代码视图、拆分视图、设计视图、实时视图。设计师通常会选择代码视图来编写代码，然后用设计视图来查看代码效果，而不是直接选择设计视图，用自带的插件来完成页面的制作。因为使用设计视图设计的页面，往往会产生很多的废代码和不符合Web标准的代码。

打开程序工作页面后，就可以在页面中编写HTML代码了。