项目1项目1〓概貌体验项目： 初识网站知识目标： 
 认识网站的概念、组成、分类及网站建设的基本步骤。
 认识网页及其中的各种基本元素。
 了解设计网页的常用工具。
能力目标： 
 能安装并使用至少一种网页编辑软件。
 能安装并使用至少一种浏览器。
11项 目 介 绍
本项目是发布并测试一个现有的网站（该网站为本书的项目2——个人主页的最终网站）。本项目又分为4个工作任务来实现： 任务1是开发环境搭建，主要是安装和启动Visual Studio Code；任务2是通过浏览器查看网页及网页的源码，从而认识网页的本质及网页的组成元素；任务3是对网页做一些简单的修改和调试，体验网页编辑和调试软件的应用；任务4是把本机作为Web服务器，发布网站，并用本机和远程计算机两种方式访问该网站。
12任务1开发环境搭建1.2.1工作任务 在Windows环境中安装Visual Studio Code。
 在Visual Studio Code中安装简体中文语言包。
 认识并准备网页设计软件、网页调试软件。
1.2.2技术理论
网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网站就是由网页组成的。网页实际是一个文本文件，用Windows自带的记事本工具便可打开和编辑。它一般存放在网络上的某台服务器（Server）中。当我们在浏览器（Brower）中输入网址（URL）后，服务器会响应这个请求，同时将网页文件准备好，并通过网络送到访问者的计算机。浏览器接收到网页后，解析网页的内容并显示，如图11所示。
图11网页请求示意图
访问网页的过程可以归纳为浏览器发出请求，服务器响应并将网页发送给浏览器，这种模式被称为B/S模式。本书使用Visual Studio Code中的Live Server插件作为服务器端软件。
1.2.3任务实施1. 在Windows环境中安装Visual Studio Code（1） 访问https://code.visualstudio.com/，如图12所示，找到下载链接并下载Visual Studio Code。
图12下载Visual Studio Code
（2） 安装Visual Studio Code，如图13所示。
图13安装Visual Studio Code
2. 在Visual Studio Code中安装简体中文语言包扩展
（1） 启动Visual Studio Code。
（2） 单击左侧的Extensions图标，或按下Ctrl+Shift+X组合键，显示Extensions（扩展）侧边栏。
（3） 搜索Chinese关键字，找到Chinese （Simplified） Language Pack for Visual Studio Code，也就是“适用于 VS Code 的中文（简体）语言包”，并在右侧找到Install按钮，单击进行安装，如图14所示。
图14在Visual Studio Code中安装简体中文语言包
（4） 安装结束后，按照提示重启Visual Studio Code。重启后，即可看到简体中文界面。
3. 在Visual Studio Code中安装Live Server扩展
（1） 启动Visual Studio Code。
（2） 单击左侧的Extensions图标，或按下Ctrl+Shift+X组合键，显示Extensions（扩展）侧边栏。
（3） 搜索Live Server关键字，找到Live Server扩展，并在右侧找到Install按钮，单击进行安装，如图15所示。
图15在Visual Studio Code中安装Live Server扩展
1.2.4知识拓展
浏览器及其引擎网页浏览器引擎俗称浏览器内核，又叫排版引擎（layout engine）或者渲染引擎（rendering engine），它负责取得网页的内容（HTML、XML、图像）、整理信息（CSS），以及计算网页的显示方式后输出。
浏览器种类如果按品牌商区分，有上千种。一般浏览器的分类都是根据核心区分的，下面介绍几个主流的浏览器的内核信息，如表11所示。表11浏览器的内核信息
浏览器名称所 属 公 司内 核 信 息ChromeGoogleBlinkInternet ExplorerMicrosoft、SpyglassTridentMozilla FirefoxMozilla基金会Gecko续表
浏览器名称所 属 公 司内 核 信 息OperaOpera SoftwareWebkitSafari苹果公司WebkitMaxthon傲游天下科技有限公司WebKit Trident腾讯TT浏览器腾讯控股有限公司Trident搜狗高速浏览器搜狗Trident WebKit360安全浏览器奇虎360Trident Blink360极速浏览器奇虎360Trident Blink猎豹安全浏览器金山网络科技有限公司Trident Blink可以看出，目前主流的浏览器主要以Trident、Blink、WebKit 3种内核为主，其典型代表分别为IE、Chrome、Safari。当然，随着微软公司最新的Windows 10操作系统的发布，一个名为Edge的新浏览器内核也随之发布，并代替IE作为默认浏览器，相信在不久的将来，会逐步取代IE的地位。
13任务2认识网站与网页1.3.1工作任务 认识网页中的各种基本元素。
 查看网页源代码，理解网页的本质。
1.3.2技术理论1. 什么是网站（1） 网站的概念。网站（website）是指在因特网上根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。简单地说，网站是一种通信工具，就像布告栏认识网站和网页一样，人们可以通过网站发布自己想要公开的资讯，或者利用网站提供相关的网络服务。人们可以通过网页浏览器访问网站，获取自己需要的资讯或者享受网络服务。
许多公司都拥有自己的网站，它们利用网站进行宣传、发布产品资讯、招聘员工等。随着网页制作技术的流行，很多人也开始制作个人主页，这些通常是制作者用于自我介绍、展现个性的地方。也有以提供网络资讯为盈利手段的网络公司，通常这些公司的网站上会提供如时事新闻、旅游、娱乐、经济等各类资讯。
在因特网的早期，网站只能保存单纯的文本。经过几年的发展，在万维网出现之后，图像、声音、动画、视频，甚至3D技术开始在因特网上流行起来，网站也慢慢地发展成我们现在看到的图文并茂的样子。通过动态网页技术，用户也可以与其他用户或者网站管理者进行交流。此外，也有一些网站提供电子邮件服务。
（2） 网站的组成结构。在早期，域名、空间服务器与程序是网站的基本组成部分。随着科技的不断进步，网站的组成也日趋复杂，多数网站由域名、空间服务器、DNS域名解析、网站程序、数据库等组成。
① 域名（domain name）是由一串用点分隔的字母组成的Internet上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置），域名已经成为互联网的品牌、网上商标保护必备的产品之一。
DNS规定，域名中的标号都由英文字母和数字组成；每一个标号不超过63个字符，也不区分大小写字母；标号中除连字符（）外不能使用其他的标点符号；级别最低的域名写在最左边，而级别最高的域名写在最右边。
② 常见的网站空间有虚拟主机、虚拟空间、独立服务器、云主机、VPS。
虚拟主机是在网络服务器上划分出一定的磁盘空间供用户放置站点、应用组件等，提供必要的站点功能、数据存放和传输功能。虚拟主机也叫“网站空间”，就是把一台运行在互联网上的服务器划分成多个虚拟的服务器。每一个虚拟主机都具有独立的域名和完整的Internet服务器（支持WWW、FTP、Email等）功能。虚拟主机是网络发展的福音，极大地促进了网络技术的应用和普及，同时虚拟主机的租用服务也成了网络时代新的经济形式。虚拟主机的租用类似于房屋租用。
③ 程序即建设与修改网站所使用的编程语言（常见的有Java、PHP、ASP.NET），通过这些语言，可以响应网站浏览者的请求和操作，并将结果生成HTML传输到浏览者的浏览器中。
2. 建立一个网站的基本步骤
（1） 购买域名与空间（万网、新网都可以购买）。
（2） 空间与域名做备案（如不明白具体操作，可以拨打空间服务商的售后电话）。
（3） 制作网站，并上传到空间（网站上传可以使用FTP工具）。
（4） 等备案完成后，解析、绑定域名到空间（登录购买域名和空间的服务商网站进行操作）。
（5） 网站可以正常访问。
3. 网页及其基本元素
前文已经介绍了网页其实就是一个文本文件。与普通的文本相比，网页不但可以显示基本的文字，还可以显示图片、视频等多媒体信息，如图16所示。通常情况下，网页会包含以下基本元素。
图16网页中的基本元素
（1） 文字。网页内容的基本表示。
（2） 图片。常用于网页上的图片格式有jpg、gif、png。
（3） 动画。常见的格式有gif动画、Flash动画、HTML5动画。
（4） 声音。网页上的所有音频格式基本上都是mp3。
（5） 视频。常见的格式有flv、mp4。
（6） 超链接。由一个网页跳转到另一个目的（网页、图片、文件等）的链接。
（7） 表格。文本的一种组织形式，也可用于网页元素的布局。
（8） 表单。用于采集用户输入的数据、接受用户请求。
4. 网页设计软件
（1） 文本编辑器。从理论上讲，只要是能够编辑文本文件的软件，就可以设计网页。这类软件比较小巧，能够很方便地设计或修改网页，适用于临时修改网页的场合。
常见的软件如下。
① Notepad。Notepad是Windows自带的记事本程序，只具备最基本的编辑功能，所以体积小巧、启动快、占用内存低、容易使用。
② Notepad++。Notepad++的功能比Notepad强大，除了可以用于制作一般的纯文字文件外，也十分适合当作编写计算机程序的编辑器。Notepad++不仅有语法高亮度显示，也有语法折叠功能，并且支持宏及扩充基本功能的外挂模组。Notepad++软件界面如图17所示。
图17Notepad++软件界面③ UltraEdit。UltraEdit是功能强大的文本编辑器，可以编辑文本、十六进制、ASCII 码，完全可以取代记事本，内建英文单词检查、语法高亮度显示，可同时编辑多个文件，而且即使开启很大的文件，其速度也不会慢。UltraEdit软件界面如图18所示。
图18UltraEdit软件界面
④ EditPlus。EditPlus的功能强大，是可取代记事本的文字编辑器，拥有无限制的撤销与重做、英文拼字检查、自动换行、列数标记、搜寻取代、同时编辑多文件、全屏幕浏览功能。另外，它也是一个非常好用的HTML编辑器，除了支持颜色标记、HTML标记外，还可支持C、C++、Perl、Java。另外，它还内建完整的HTML & CSS 指令功能。EditPlus软件界面如图19所示。
图19EditPlus软件界面
⑤ Sublime Text。Sublime Text是一个代码编辑器（Sublime Text 2是收费软件，但可以无限期试用）。Sublime Text具有漂亮的用户界面和强大的功能，如代码缩略图、Python的插件、代码段等，还可自定义键绑定菜单和工具栏。Sublime Text 的主要功能包括拼写检查、书签、完整的 Python API、Goto功能、即时项目切换、多选择、多窗口等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。Sublime Text软件界面如图110所示。
图110Sublime Text软件界面
（2） 集成开发环境（integrated development environment，IDE）。集成开发环境是用于提供程序开发环境的应用程序，一般包括代码编辑器、编译器、调试器和图形用户界面工具。IDE集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务套。常见的网页设计IDE如下。
① HBuilderX。HBuilderX是中国DCloud（数字天堂）推出的Web开发IDE。该软件由C++开发，性能强大，轻量，能够秒开文件，工具内置浏览器，代码提示很完整，文档结构清晰，大幅度提升开发效率。其压缩包大小仅十几兆字节，通过自定义插件的安装适应自己开发的需要。HBuilderX软件界面如图111所示。
图111HBuilderX软件界面
② Microsoft Visual Studio Code。Microsoft Visual Studio Code简称VS Code或Code，是美国微软公司的开发工具。VS Code是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义快捷键、括号匹配和颜色区分。Visual Studio Code软件界面如图112所示。
图112Visual Studio Code软件界面