1.3 网页技术

在大型网站制作过程中，一般有专门的网站前端设计师通过网页技术进行网站设计，展示丰富多彩的内容，实现各类操作功能。

1.3.1 网页构成

网页是构成网站的基本单元，若干网页集成在一起就形成了一个网站，网站部署于服务器之上，通过浏览器以网页形式展示给访问者。

网页的内容包括文字、图片、动画、音乐、地图、链接等，同时辅助以不同的颜色、字体、字号、间距、位置定位（居中、靠左、靠右）等。

● 文字：要想显示文字，如新闻稿，需要在后端提供集中输入、编辑功能，然后通过后端提交，在网页的栏目中显示出来。

● 图片：图片要么嵌入文字，作为新闻图片等出现，要么以背景图片的形式体现在网页上。

● 动画：常见的动画包拪GIF动画、Flash动画。GIF动画是一种带压缩格式的由多幅图像构成的简单动画，可以用Photoshop、Honeycam、Ulead GIF Animator等工具制作。Flash动画是一种交互式动画，它可以将音乐、声效、动画及富有新意的界面融合在一起，呈现出高品质的网页动态效果，首选的制作工具为美国Macromedia公司发布的Flash软件。

● 音乐：主要是挃网页的背景音乐，其文件格式可以是mid、wav等。

● 地图：类似百度地图的效果，嵌入网页栏目之中。

● 链接：网页内提供的可以跳转到其他网页的超链接。

要想使网页提供的内容整齐、美观，客户端功能灵活，需要对其外观格式进行统一处理，这就涉及第2章的HTML、CSS、JavaScript等网页开发技术了。

1.3.2 网页分类

根据使用技术的不同和数据交互与否，网页可以分为静态网页和动态网页，下面我们分别介绍。

1.静态网页

静态网页（Static Web Page）主要是指采用纯HTML格式制作的网页，每个静态网页将生成一个静态扩展名为.htm或.html的代码文件。该网页中可以包含文字、图片、音乐、动画等。我们先动手制作一个静态网页，感受一下它的特点。

【案例1.1】 动手制作一个静态网页（1_1StaticWP.html）

编写如下代码，制作一个静态网页。

将上述代码输入到记事本里，保存为first.html文件。然后，在目录里通过鼠标左键双击该文件，启动浏览器，显示结果如图1.6所示。

注意

【案例1.1】中有两点注意事项。

● 用记事本保存代码时，一定要手动输入扩展名.html。

● 暂时无须知道某一行代码是做什么的，我们将在2.1节详细介绍。

静态网页具有一定的特点，其优点如下。

● 内容固定，不用与数据库交互，安全性高。

● 对运行环境要求低，不需要Web服务器软件等支撑环境就可以被浏览器直接访问。

● 不需要编译，访问响应速度快。

● 网址格式友好，搜索引擎容易识别。

静态网页的缺点如下。

● 由于内容固定，改变内容要重新修改静态网页本身，难度变大。

● 当静态网页数量变多时，网站可维护性将变得非常差。

● 无法更好地适应浏览器的额外要求，如网页响应功能与服务器端的互动操作。

2.动态网页

动态网页（Active Web Page）指内容随着时间、终端使用环境或数据库数据读取的改变而发生改变的网页。准确来说，凡是通过将HTML以外的高级程序设计语言和数据库技术结合在一起形成的网页编程技术生成的网页都是动态网页。这些高级语言可以是Python、Java、PHP、VC、ASP等。【案例1.2】展示了一个动态网页的实现代码。

注意

这里的“动态”，是指显示在同一网页上的内容、网页大小自适应发生变化，而非动画、广告条等具有动起来的效果。

【案例1.2】 动态网页实现（1_2Active Page.py）

编写如下代码，制作一个动态网页。

用3.1节将介绍的Python IDLE工具或3.2节将介绍的PyCharm工具保存上述代码并执行，结果如下。

从上述代码中可以发现，HTML代码里混杂着Python代码，也从本地sqlite3数据库里读取数据并嵌入了HTML网页。从执行结果的★处可以发现，HTML网页从数据库里读取的数值是10，若从数据库读取不同的数值，则会在网页上显示不同的内容。这就是经典的动态网页效果。

但是上述代码体现的是几十年前最陈旧的动态网页技术，数据库调用代码直接嵌入HTML代码存在安全隐患，若要修改数据库代码，则需要重新编辑该代码文件，在网站网页数量变得庞大时，这是无法容忍的。我们希望网页展示代码和数据库操作代码能被合理分开，分别存放到不同的代码文件中，合理调配，不同部分的代码甚至可以被其他网页重复调用。于是，Web技术框架被引入设计过程。Python技术体系下的Web框架有很多，如Flask、Tornado、Django等。本书重点介绍Django技术框架，它是Python技术体系下的重量级框架，也是最优秀的框架。