1.1 网页设计与制作基础

网页制作是相关人员通过应用各种网络程序开发技术和网页设计技术，在全球互联网上建立站点、进行域名注册查询和主机托管服务的一系列制作服务的总称。而网页设计则是使用标记语言，通过一系列的设计、建模，以及执行的网页制作过程，将电子格式的信息通过物联网以图形的方式传输到用户界面中。

为了有条不紊地扎实学习网页设计和制作知识，还需要在了解网页设计与制作过程之前，先来了解一下网页和网站的基础知识和相关概念。

1.1.1 了解网页与网站

网页和网站是用户在互联网中所见识到的最多的元素和词汇之一，但对于其准确的概念和含义并不甚了解，下面将详细介绍网页和网站的基础概念。

1. 网页

网页是构成网站的基础元素，是超文本标记语言格式的一个文件，也是承载各种网站的应用平台。另外，网页是万维网中的一个页面，通常使用图像档来提供图画，用户需要通过网页浏览器来查看网页。

文字和图片是网页构成的最基本的元素，其中文字便是网页中的内容，而图片则是用来美化和充实网页的。除了文字和图片之外，网页中还包括动画、音乐、视频、表格等元素。网页的组成元素主要包括下列8种：

□文本　文本是网页中最重要的信息载体和交流工具，主要用于表现网页中的主要信息。

□图像　图像在网页中具有提供信息并展示直观形象的作用。其中，静态图像在页面中可能是光栅图形或矢量图形，光栅图形如GIF、JPEG或PNG，而矢量格式如SVG或Flash。动画图像通常包含有GIF和SVG。

□Flash动画　在网页中添加Flash动画不仅可以增加网页的绚丽性，而且还可以吸引访问者注意，从而增加浏览量。

□声音　声音也是网页的重要组成部分，它可以增加网页的浪漫性和音律性。

□视频　网页中的视频文件可以增加网页的动感性。

□表格　页面中的表格主要用来控制页面信息的布局，增加页面的整齐性。

□导航栏　导航栏在网页中是一组超链接，主要用于打开网页中的二级页面，它是链接目的端页面的一种重要表现形式。

□交互式表单　表单在网页中通常用来联系数据库并接收访问用户在浏览器端输入的数据。利用服务器的数据库为客户端与服务器端提供更多的互动。

用户可以在网页上右击鼠标，执行【查看源】命令，即可在弹出的记事本中查看网页的编码内容。

通过下图可以发现网页实际上只是一个纯文本文件，它通过各式各样的标记对页面上的文字、图片、表格、声音等元素进行描述（如字体、颜色、大小），而浏览器则对这些标记进行解释并生成页面，从而形成用户所看到的画面。

网页制作的主流代码最早是以表格来定位的，而现在则使用Div（区）+CSS（层叠样式）来实现。目前，网页主要分为静态网页和动态网页两种类型，其中静态网页的内容是预先确定并存储在Web服务器或本地计算机/服务器上的，具有制作速度快、成本低、服务器要求低等优点，但也具有模板更改费时费事、存储压力大等缺点。

而动态网页主要取决于用户所提供的参数，需要根据存储在数据库中的网站上的数据来创建页面。一般情况下，相对于静态页面的千篇一律来讲，动态页面会根据不同的参数来显示不同的页面内容。

2. 网站

网站是由网页集组成的，是一种沟通工具，主要用于展示特定内容。组成网站的多个网页，不是简单的罗列组合，而是通过超链接方式组成的既有鲜明风格又有完善内容的有机整体。

早期的网站是由域名、空间服务器和程序组成的。随着科技的进步，网站逐渐演变为由域名、空间服务器、DNS域名解析、网站程序、数据库等众多因素组成。

通常情况下，用户所说的Internet，就是由无数个网站组合而成的。根据不同的用户或领域，可以将Internet中的网站划分为如下5种类型：

□根据编程语言分类　根据网站所采用的编程语言可以分为ASP、PHP、JSP、ASP.NET等网站。

□根据用途分类　根据网站的用途，可以分为门户网站（综合网站）、行业网站、娱乐网站、教育网站、学习类网站等。

□根据功能分类　根据网站的功能，可以将网站划分为企业网站、商城网站、服务性网站、交易网站等。

□根据持有者分类　根据网站拥有者或者持有者来划分，可以分为个人网站、商业网站、政府网站、教育网站等。

□根据商业目的分类　在商业领域，有些网站主要是用于营利的，而有些网站是非营利以宣传为主的，所以可以分为营利型网站和非营利型网站。

1.1.2 网页制作工具

用户在制作网站时，需要使用专业的网页设计工具进行编制。当前市场中所流行的网页制作工具多不胜数，一般常用下列6种制作工具。

1. Photoshop图像处理软件

Adobe Photoshop，简称PS，是一个由Adobe Systems开发和发行的图像处理软件。Photoshop主要处理由像素所构成的数字图像。使用其众多的编修与绘图工具，可以更有效地进行图片编辑工作。

该软件在网页设计过程中必不可少，已经成为网页前端美化设计的必要工具之一。

2. Illustrator矢量图处理软件

Adobe Illustrator是一种应用于出版、多媒体和在线图像的工业标准矢量插画软件。作为一款非常好的图片处理工具，Adobe Illustrator广泛应用于印刷出版、专业插画、多媒体图像处理和互联网页面的制作等，也可以为线稿提供较高的精度和控制，适合任何小型设计到大型的复杂项目。

Illustrator与Photoshop相比，在网页设计中应用较少，但对于美工而言该软件也是不可或缺的，因为在网页中一些Logo和标签图片等，都可以通过Illustrator来制作，并且效果比较好。

3. Fireworks网页作图软件

Adobe Fireworks是Adobe推出的一款网页作图软件，此软件可以加速Web设计与开发，是一款创建与优化Web图像和快速构建网站与Web界面原型的理想工具。

Fireworks不仅具备编辑矢量图形与位图图像的灵活性，还提供了一个预先构建资源的公用库，并可与Adobe Photoshop、Adobe Illustrator、Adobe Dreamweaver和Adobe Flash软件集成。

在Fireworks中将设计迅速转变为模型，或利用来自Illustrator、Photoshop和Flash的其他资源，然后直接置入Dreamweaver中轻松地进行开发与部署。

4. Flash动画制作软件

Flash是一种集动画创作与应用程序开发于一身的创作软件。Adobe Flash为创建数字动画、交互式Web站点、桌面应用程序以及手机应用程序开发提供了功能全面的创作和编辑环境。

通常，使用Flash可以在网页设计中通过添加图片、声音、视频和特殊效果，构建包含丰富媒体的网页元素。另外，用户还可以通过Flash软件，制作流媒体视频，在多媒体网页中也应用广泛。

5. Dreamweaver网页编辑软件

Dreamweaver可以用最快速的方式将Fireworks、FreeHand或Photoshop等档案移至网页上。使用【拾色吸管】工具选择屏幕上的颜色可设定最接近的网页安全色。它是用于编辑HTML、ASP、JSP、PHP、JavaScript时的辅助工具。

6. WebStorm前端开发软件

WebStorm是Jet Brains公司旗下的一款JavaScript开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“智能的JavaScript IDE”等。

WebStorm可编辑、调试HTML、CSS、JavaScript等代码，也可以作为可视化工具，监控网站系统的运行情况，受到网站开发工作者的青睐。

1.1.3 网站设计与制作流程

由于网站是由多个网页组成的集合体，其设计和制作过程相对于网页来讲比较复杂。用户首先需要根据网站的使用途径来定位它的层次，然后再根据具体内容来设计和制作具体网页。一般情况下，用户需要遵循下列流程来设计和制作网站。

1. 确定网站主题

网站的主题是一个网站的核心，创建网站前要先确定站点的主题，只有主题确定之后才会有目的地去寻找相关的资料，所以确定网站主题非常重要。

网站主题可以理解为该网站所需表现的主要信息。例如，一个面向商品销售的电子商务网站，其主题自然是所要销售的商品；如果该电子商务网站是面向交易的，则该网站的主题是所要进行商品交易的用户。

2. 搜集网站素材

搜集网站素材主要围绕网站主题进行搜集，主要是满足各页面信息的需求。网站素材是指从现实生活中搜索到的、未经加工提炼的用来建设网站的资料。

在搜集过程中，素材可以包括公司或者单位的形象标志、所经营业务的信息、产品信息、发展史信息等，多数以图像和文字内容为主。

3. 确定网站布局

网站布局与绘画非常相似，起始就像一张白纸，需要先勾勒出网站中各页面的轮廓。如网站的结构、栏目的设置、网站的风格、颜色的搭配、版面的布局、文字图片的运用等，只有在制作网页之前把这些方面都考虑到了，才能在制作时胸有成竹。例如，在下面的“软件下载网”页面中，网站的主题颜色为“橙色”，布局为上、中、下结构。

4. 制作网页

用户在开发网站时，其核心就是设计不同的网页。在设计网页时，需要使用一些专业的网页编辑工具，如Dreamweaver软件。除网页编辑工具之外，用户还需要使用其他一些设计网页的辅助工具，例如Photoshop、Flash等软件。

做好前期准备之后，用户便可以开始设计网页了。设计网页是一个复杂而细致的过程，需要按照先大后小、先简单后复杂的方式进行制作。先大后小是先确定网页的大的结构，并在该区域内再划分不同的区域进行设计；先简单后复杂是先设计出简单的内容，然后再设计复杂的内容。

5. 发布网站信息

网页制作完毕，最后要发布到Web服务器上，才能够让其他网络用户浏览。简单地说，是将本地网站中的文件放置到服务器指定的文件夹中。因此，如果服务器不是本地计算机，那么需要通过FTP（Fite Transfer Protocol，文件传输协议）将文件上传到远程服务器中。

网站上传以后，要在浏览器中打开自己的网站，逐页逐个链接进行测试，发现问题，及时修改，然后再上传测试。

6. 网站推广

网页做好之后，还要不断地进行宣传，这样才能让更多用户关注该网站，提高该网站的访问率和知名度。推广网站的方法有很多，如搜索引擎排名、网站之间交换链接、加入广告链等。

7. 后期更新与维护

网站是营销的一个重要手段，它是将企业或者单位推广出去的一种方法。尤其，商业化的网站，更需要经常性的更新。这样才能不断吸引浏览者再次光临，使潜在的消费者变成客户。如果网站一成不变，是无法获得更多的商业机会的。例如，一个新闻网站，如果网站中的新闻比较陈旧，那么就无法吸引浏览者。