第一章 网站开发基础知识、 网站运行环境配置及代码编辑工具介绍 - 网站运行环境配置

二、网站运行环境配置

（一）、电脑操作系统

    不要使用Windows XP操作系统来开发网站，否则在网站开发过程中会遇到很多不必要的麻烦和问题。可使用Windows Vista、Windows 7、Windows 8、Windows 10，建议使用Windows 7操作系统（32位或64位均可）。本教程使用的操作系统是：64位的Windows 7。

（二）、浏览器及前端代码调试工具

    浏览器是网上冲浪的重要入口，也是浏览网站的重要工具。除了Windows操作系统自带的IE浏览器（Internet Explorer），常见的浏览器还有：360浏览器、火狐（Firefox）、Google Chrome、Safari、搜狗、QQ浏览器、世界之窗、傲游、Opera等：

图1-4

    浏览器虽然有很多，但其内核却只有为数不多的几个：Trident（IE内核）、Gecko（火狐内核）、Webkit（Safari内核，Chrome内核原型，开源)和Blink（Chrome、Opera内核）等。浏览器内核也称为渲染引擎。Trident内核的常见浏览器有：IE系列浏览器（IE6、IE7、IE8、IE9、IE10），360浏览器，猎豹浏览器，傲游浏览器，世界之窗浏览器，腾讯TT，搜狗高速浏览器等等。其中最新版本的大部分浏览器都不只采用一种渲染引擎，而采用了Trident+ Webkit的双渲染引擎，使用Trident为内核时称为“兼容浏览模式”，使用其它内核时称为“高速浏览模式”，用户可以在浏览器中自行一键切换。
    火狐开发者版（Firefox Developer Edition）是火狐浏览器专为网站开发人员推出的一个版本。在火狐开发者版中能够极方便、全面的调试前端代码。本教程使用火狐开发者版调试网站前端代码。
火狐开发者版官方下载地址：https://www.mozilla.org/zh-CN/firefox/developer/
    在任意浏览器中打开下载页面，如果您的操作系统是64位的Win 7，点击页面上的“Windows 64-bit”按钮下载，如果操作系统是32位的Win7，点击页面上的“Windows”按钮下载。下载并安装后，可以看到火狐开发者版的图标呈深蓝色，与普通的火狐器桔黄色图标有颜色上的差别。在火狐开发者版中打开任意网站或页面，按键盘上的F12键即可调出功能强大的前端代码调试工具；也可以右击网页上任意想查看其详细信息的元素（如文字、图片、按钮等），选择“查看元素”。
    调试工具相关的调试功能大致为：
    ●查看器：查看和修改网页的前端代码，包括HTML、JavaScript、CSS；
    ●控制台：查看网页相关的错误信息和提示信息；
    ●调试器：JavaScript调试器，支持断点、单步调试；
    ●样式编辑器：可以对页面上的CSS样式进行查看及编辑，编辑的效果会即时呈现在浏览器上；
    ●网络：查看页面及页面所包含的各种相关文件（JavaScript文件、CSS文件、图片文件等）的文件大小、载入状态及载入时长等相关信息。
    ●响应式设计模式：响应式是指网站界面根据浏览器终端的不同，页呈现不同的排版布局以自动适应终端，但网页的数据内容相同。比如手机浏览器、平板浏览器、电脑浏览器，便是三种浏览器终端。该响应式设计模式能够方便的模拟各种浏览器终端环境以调试响应式网页代码。“响应式设计模式”的启用方式是，点击(图1-5)调试器右上角往左数第5个按钮（在齿轮图标的左侧）。

图1-5，调试工具面板

    补充知识点：开源（Open Source）指开放源码，将源码开放给公众使用。但开源有多种许可授权模式，也就是有不同的享用权利和需要承担的责任义务。常见的开源协议有：BSD开源协议（源码可以自由的使用和修改，也可以将修改后的代码作为开源或者专有软件再发布），Apache Licence 2.0（享有的权利与BSD开源协议相似，但需要担负的责任不同，比如要求必须附带上原来的开源协议），GPL（源码可以自由的使用和修改，但不允许进行闭源销售）。开源的软件或程序如果使用的人数多，通常会有很多技术强悍的人员进行长期维护和更新，其参与维护开发的人员可以是全球的任意技术人员，不限地区也不限人数，所以使用人数多的开源软件往往更新频率很快。开源程序与闭源程序相比有很多优势，一是将技术维护人员从隶属于某个公司提升到了全球，二是开源程序通常都免费，三是开源程序允许二次开发，能够为企业节省开发成本。举例几个较出名的开源程序：WordPress（博客内容管理系统）、MySQL（数据库）、Mozilla Firefox（火狐浏览器）、FileZilla（FTP软件）、jQuery（JavaScript框架）、OpenOffice（开源办公套件）、7-Zip（压缩和解压软件）、PHP（主要用于编写网站程序的脚本语言）。

（三）、网站程序调试环境安装

    本教程使用PHP作为网页程序语言，运行环境为：Apache+PHP+MySQL（实际是MariaDB，MySQL与MariaDB的差别在后面的MySql章节中介绍）。Apache是网站服务器的一种，用于接收用户发起的的网页请求，并做出相应的回应；PHP用于解析和运行PHP脚本代码；MySQL是数据库管理系统。
    Apache+PHP+MySql是网站运行环境较为理想的组合方式，处理速度快、性能高，并且这三款软件都可以免费使用。另有其它的组合方式：Nginx+PHP+MySQL和IIS+PHP+MySQL。它们的比较如下：

Web服务器（搭配PHP+MySql）	速度效率	稳定性	细项配置
Apache	中	高	复杂
Nginx	高	中	较容易
IIS	低	低	很简单

 

    网站的访问过程大致如下：

图1-6，简要图示

 

图1-7，详细图示

    在操作系统里安装Apache+PHP+MySQL，需要分别下载这三款软件并分别安装和设置，其过程漫长而繁琐。网络上有很多第三方打包提供的网页运行环境一键包，下载后可一次性快速的完成这三款软件的安装。常见的网页运行环境一键包有：APMServ、lanmp、phpStudy、xampp、upupw等。本教程使用upupw作为网页运行环境。
    upupw根据PHP版本的不同而分为很多个版本，我们使用较新的5.6版本。
    下载地址是：http://www.upupw.net（若该网址失效，请百度搜索“upupw Apache PHP5.6”，找到相应的软件包并下载安装）。其安装方法如下：
    1.将下载的软件包“UPUPW_AP5.6-1510.7z”解压到任意硬盘分区的根目录，比如解压到E盘的根目录。解压后软件包的目录为“E:\UPUPW_AP5.6\”；
    2.进入“E:\UPUPW_AP5.6\”找到“upupw.exe”软件程序，双击打开它，会看到一个DOS形式的控制面板；输入“s1”然后按回车，等待提示成功，便完成了Apache+PHP+MySQL的安装和启动。
    3.打开火狐浏览器，在地址栏中输入并打开“http://localhost”或“http://127.0.0.1”，这便是我们刚刚搭建成功的测试网站。它所对应的硬盘目录为“E:\UPUPW_AP5.6\htdocs\”；
    4.我们制作的网页文件直接保存放在“E:\UPUPW_AP5.6\htdocs\”目录中，这样就可以通过“http://localhost”或“http://127.0.0.1”并配合相应的文件名或路径进行访问到网页。
    补充知识点1：“localhost”是一个保留域名，指计算机本身（自己当前所使用的电脑）。由于我们需要测试网站，将网站运行环境（Apache+PHP+MySQL）配置在了自己的电脑上，所以我们的电脑不单单是客户端（浏览器），还是服务端（网站的运行环境，本机电脑成了服务器）。我们通过浏览器访问“http://localhost”，实际是访问自己电脑里网站运行环境下的网站。而“http://127.0.0.1”由操作系统默认设置等价于“http://localhost”。
    补充知识点2：PHP测试网站对应的目录为“E:\UPUPW_AP5.6\htdocs\”，它是通过Apache的配置文件“E:\UPUPW_AP5.6\Apache2\conf\httpd-vhosts.conf”进行设置的。设置后“http://127.0.0.1”所对应的网站目录“E:\UPUPW_AP5.6\htdocs\”称为网站硬盘根目录，简称根目录；在该目录中如果存在一个网页文件“test.html”，那么便可以通过“http://127.0.0.1/test.html”来访问。类似的，如果在根目录下建立一个文件夹叫“images”并在里面存放一张图片“test123.jpg”，那么便可以通过“http://127.0.0.1/images/test123.jpg”来访问。
    补充知识点3：我们通过域名打开一个网站的时候，并不需要输入首页的网页文件名，默认在打开域名的时候便是打开网站的首页文件，比如打开“http://www.baidu.com”其实是打开百度网站的首页。这个首页的文件名是通过Apache的配置文件“E:\UPUPW_AP5.6\Apache2\conf\httpd-vhosts.conf”进行设置的。通常情况下，首页的文件名是“index”或“default”，并且配置文件都支持同时多个首页文件的设置，比如“index.html index.htm index.php default.php”，意思是域名被打开并且没有指定打开的文件名时，Apache检查网站根目录下是否存在“index.html”文件，如果存在则该文件是首页，读取并将它返回给浏览器，如果不存在则检查是否存在“index.htm”，类推的，直到“default.php”；如果配置文件里所设置的的所有首页文件名都没有找到，那么将提示没有找到首页文件之类的相关信息。通常，我们会根据通用的首页文件名规则来命名网页的首页文件名，以使网站开发完成后，放在网络上的任意空间或服务器里都能被默认规则所支持，而不需要去修改首页文件名的配置。如果在子目录里比如“admin”目录中存放了首页文件，那么对应的在网址中打开该目录时不需要指定首页文件名即可自动打开该目录里的首页文件，即“http://127.0.0.1/admin/”等价于“http://127.0.0.1/admin/index.html”。通过本知识点您可以尝试在浏览器中打开网页“http://www.baidu.com/index.html”，它的效果等价于“http://www.baidu.com”；还有“http://www.taobao.com/index.php”等价于“http://www.taobao.com”，“http://www.qq.com/map/index.shtml”等价于“http://www.qq.com/map/”。