第一章，Web前端设计基础

1.1 Web系统体系结构

了解结构是我们学习很多课程非常重要的方法。

Web应用项目本身是一种软件系统，它也是具有自身结构的，即系统体系结构。有一门课程《软件体系结构》会专门研究这个问题。

系统体系结构是一个综合各种观点的模型，用来完整描述整个系统，通过系统体系结构就能够了解一个软件系统的基本架构。常见的系统体系结构有C/S结构和B/S结构。

1、C/S（即Client/Server）结构

首先，了解一下C/S的工作流程，Server端存储了各种资源，我们在Client端通过网络发送资源请求，接收并显示Server端响应的内容。如下图所示：

浏览Web内容是Internet提供的主要服务，它以HTTP协议(HyperText Transfer Protocol)在网上传送以HTML(Hyper Text Markup Language)语言编写的网页内容，从而进行信息交流。

它的具体工作步骤如下：

☆ 通过客户端浏览器输入URL向WEB服务器发出服务请求；

☆ 服务器解析浏览器请求的URL，找到相应的网页文件；

☆ 网页中包含JavaScript等脚本，它将随HTML文档一起下载到客户端；若网页中嵌套有ASP等程序，服务器将执行这些程序并将运行结果以HTML标记形式发送给客户端；

☆ 浏览器解释HTML文档，并显示结果。

超文本传输协议(HTTP)是WEB浏览器与WEB服务器应用层之间的通信协议。HTTP会话过程包括4个步骤：

☆建立链接(connection)；

☆发送请求(request)；

☆响应请求(response)；

☆关闭链接(close)。

在C/S结构下，不同的服务需要安装不同的客户端软件，进而占用非常多的系统资源。除此之外它还有其它一些弊端，比如A需要在B电脑上处理文件，但B电脑并未安装类似的软件，这样得先去下载，非常不方便，并且软件升级后也需要重新下载。因此，需要有新的方法来解决该问题，于是就有了新的B/S结构。

2、B/S（即Broswer/Server）结构

B/S结构就是浏览器/服务器结构，它解决了C/S结构所带来的不便，能够将所有的服务（如QQ、邮件等）都通过浏览器来完成。由于操作系统通常都安装了某款浏览器，这样可以更多的节省系统资源。同时，各种服务软件功能的升级也无需重新下载，只要刷新网页即可。但B/S也存在一些不足，比如操作的稳定性、流畅度等方面相对较弱，并严重依赖网络的状况。

在讲解了C/S架构和B/S架构之后，为了让大家更加清楚它们各自的特点，下面对它们做对比说明，如表所示。

1.2 浏览器

大家都有这样的体会：平时上网时，都是通过浏览器发送请求信息，如URL网址、关键词等，同时也是通过浏览器来查看互联网的响应信息。可见，浏览器是Web前端的重要工具。

首先必须明确，Web前端开发是建立在B/S结构基础之上，以浏览器为核心。由不同软件厂商提供的现有浏览器种类众多，且各有特点和优势。而比较常用的浏览器有IE、Firefox、Chrome、Opera等。那么，浏览器的结构又是怎样的呢？

浏览器通常是由排版引擎和Javascript引擎构成。

1、排版引擎（Rendering Engine）

排版引擎也称作内核，是用来渲染网页内容的，将网页的代码转换为最终能看得见的页面。而不同浏览器的内核是不尽相同的。

1）Trident内核就是大名鼎鼎的IE浏览器所使用的内核，也是很多浏览器所使用的内核，常被称为IE内核。

2）Gecko内核是一款开源的浏览器内核，目前使用最主流的Gecko内核的浏览器是Mozilla Firefox，所以也常常称之为火狐内核。

3）WebKit内核是最有潜力的新兴内核，性能非常好，而且对W3C标准的支持很完善，谷歌的Chrome就采用Webkit内核。

4）Opera浏览器采用Presto内核，该内核对W3C标准的支持也很良好。

2、Javascript引擎

JavaScript引擎简称JS引擎，该引擎就是用来解析执行JS程序的，其性能对整个网页的加载速度有着很大的影响。

1）Chakra（查克拉）引擎是IE9启用的新的JavaScript引擎。

2）SpiderMonkey引擎应用在Firefox浏览器中。

3）V8引擎应用于Chrome浏览器。

1.3  Web相关概念

1、URL(Uniform Resource Locator )

URL即统一资源定位器，也就是各个网页在Internet上的地址。通俗地讲，URL就是网址，指定Internet资源的位置。

URL的结构由三部分组成：http://网站地址/目录路径/文件名称。

其中，“http://”为网络访问的协议部分；“网站地址”就是网络服务器的地址，可以是域名或者IP地址；“/目录路径/文件名称”表示资源存放在服务器上的实际位置。

例子：http://www.cqvip.com/qk/83461A/200901/index.shtml

访问怀化学院学报网站的qk/83461A/200901目录路径中的index.shtml。

2、超链接

超链接是实现超文本的主要技术。它指向WWW的资源，如不同站点的网页、同一站点的其它网页、网页的其它段落。

超链接的作用就是，在浏览网页时，如果用鼠标单击超链接，就会跳转到超链接所指向的资源，可以从WEB上下载信息。

超链接的判断方法很简单，当用鼠标把光标箭头移动到超链接上时，光标会改变成手的形状。

3、网站

网站是一个存放在网络服务器上的完整信息的集合体。

网站内通常包含一个或多个网页，这些网页以一定的形式链接在一起，成为一个整体。

4、网页

网页是网站的重要组成部分，它是一张页面，可以看成是一个单一体，是网站的一个元素。网页里可以有文本、图片、声音、视频、动画等元素。

其中，文本是构成网页的主体。对文本元素的设计包括字体、字型、颜色、段落设置以及定位等。而图片是实现网页图文并茂的主要手段。常用的图形文件格式有GIF、JPEG、PNG、矢量格式。在使用图片时，应掌握的基本原则是，图形文件小、数量少，图像质量高，合理使用动画。

5、主页

主页也称之为首页。它是一个殊性的网页，是整个网站的起始点和汇总点。

主页也是浏览者浏览一个网站的入口。

6、静态网页

静态网页是指这个网页不论在何时从何地浏览，都将显示相同的画面和内容，且用户仅能浏览，无法提供信息给网站，让网站作出响应。

静态网页的编程语言有HTML、CSS等。 HTML(超文本标记语言)是网页设计的基础，也是表示网页的一种规范，通过标记符（或标签）来定义网页内容的显示格式；CSS(层叠样式表)技术是HTML功能的扩展，使用它能设计出更具表现力的网页。

注意：在网页中添加相关的动画，并不代表它不是静态网页。

7、动态网页

动态网页是指网页能够按照用户的需求做出动态响应。常见的动态网页有留言板、论坛等。

常用的网页动态/特效脚本语言有JavaScript和VBScript。其中，JavaScript是一种基于对象的、动态的、跨平台的、具有简单性与安全性的脚本语言。JavaScript简单而功能强大，主要表现在：

(1)制作网页特效；

(2)实现表单数据的客户端校验；

(3)实现窗口动态操作。

8、网页设计原则

网页设计应掌握以下原则：

(1)页面力求精简：页面简洁醒目，颜色不宜过深，图片不宜过大过多；

(2)巧妙安排图形图像：利用图片的视觉效果使页面生动，吸引浏览者；

(3)善于借鉴信息：参考、应用Internet上现成的信息，可使网页制作收到事半功倍的效果。

(4)内容通俗易懂：内容丰富，容易查找，易读易懂。

(5)页面以小为好，恰到好处：满足信息量和速度的需求。

9、网页设计技术

从静态网页与动态网页的概念部分的学习，我们知道，网页都具有自己的结构、样式和行为。其中，网页结构由HTML语言来编写，网页样式由CSS定义和设计，网页的行为由JavaScript来编写。因此，网页设计的3大技术分别是HTML、CSS和JavaScript，在后面章节会对它们进行详细介绍。

1.4  开发环境

Web前端设计必须借助相应的开发环境与工具。而Web前端开发对环境要求相对较低，只需要“编辑器 + 浏览器”即可。

常用的编辑器有Editplus、Notepad++、Sublime_text、WebStrom等。

我们推荐使用sublime_text，因为其体积小，有灵活的插件机制，安装配置都很简单。有些绿色版的开发工具包只需要直接解压即可。

有了这些了解，大家是不是有想去开发Web应用的冲动了呢？