PART1 概述篇
第1章 网页开发概述
网页简单来说就是使用浏览器访问某个网站时看到的页面，而网页的集合就是网站。其中，HTML是一种超文本链接语言，包括了网页构成的各种标签、主体内容等。CSS是网页样式表。将两者紧密相连，互相融合，可以使网页的内容丰富、外观生动。本章简单介绍了有关HTML和CSS的知识。
1.1 互联网
互联网由海量的各类计算机设备构成，如手机、笔记本电脑、台式机、服务器，这些设备通过各种网络媒介互相连接。人们通过互联网，可以进行网页浏览、音频/视频聊天、传送文件和发送邮件等一系列操作，其作用如图1.1所示。
图1.1 互联网的作用
1.2 网站
在互联网的诸多应用中，网站占有绝对重要的地位。通过网站平台，用户可以发布和获取各种信息。了解网站的构成，可以帮助读者更好地学习网页制作。下面将具体讲解网站的构成。
1.2.1 网站是如何工作的
在了解网站的构成之前，我们先了解一下网站是如何工作的。如图1.2所示演示了用户在访问网站的时候都发生了什么。
图1.2 网站工作过程
（1）在浏览器地址栏中输入网站的域名。
（2）浏览器根据用户输入的网址，找到存放该网站的网站空间。
（3）网站空间对网站文件和资料进行处理，然后将处理结果返回浏览器。
（4）浏览器接收内容，并以网页的方式显示，供用户浏览。
1.2.2 网站域名
域名（Domain Name）是网站的名字，具有唯一性，整个互联网中没有重复的域名。域名是互联网上某台计算机或某个计算机组的名称，由一串用点分隔的字母组成。
1.域名的构成
域名由域名主体、类别域名和行政区域名三部分构成，每个部分使用点号（.）分隔，如图1.3所示。
其中，类别域名表示网站所代表的行业。常用的类别域名如表1.1所示。
图1.3 域名构成
表1.1 常用类别域名标识
行政区域名表示网站所代表的国家和地区。常用的行政区域名如表1.2所示。
表1.2 常用行政区域名标识
以一个常见的域名“baidu.com”为例说明。该网址由两部分组成，如图1.4所示，“baidu”是这个域名的主体，“com”则是该域名的后缀，代表这是一个公司域名。
图1.4 百度网址
2.域名的分级
根据所属地域的不同，域名可分为不同级别，包括顶级域名和二级域名等。域名的各个级别由点号分开，如图1.5所示。
图1.5 域名的分级
● 顶级域名在开头有一个点，如“.XXX”。
● 一级域名就是在顶级域名的前面再加一级，如“XXX.XXX”。
● 二级域名就是在一级域名的前面再加一级，如“XXX.XXX.XXX”。
● 二级域名及其以上级别的域名，统称为子域名，不需要注册。
例如，在网址“baike.baidu.com”中，“.com”是顶级域名，“baidu”是一级域名，“baike”是子域名，如图1.6所示。
图1.6 baike.baidu.com域名分级
1.2.3 网站源程序
网站源程序，也就是我们说的源代码，是由编程人员编写的一系列可供计算机编译执行的计算机指令，通过浏览器翻译成我们所看到的网页，如图1.7所示。
图1.7 网站源程序
1.2.4 网站空间
网站空间（Webhost）是用来存放网站文件和资料的空间，包括文字、图片、数据库、网站的页面等内容，如图1.8所示。
图1.8 常见的网站空间内容
1.3 网页构成技术——HTML+CSS
网页整体上由页面内容、页面结构等部分构成。这些部分是由HTML代码编写的，而CSS则是对HTML的一种修饰。只有将两者相互结合，才能制作出完美的网页。本节就来介绍网页构成技术的相关知识。
1.3.1 什么是HTML+CSS
为了让大家更好地认识网页，这里给出一个使用Dreamweaver制作的一个简单网页。在IE浏览器中显示了“欢迎学习HTML+CSS”字样，右键单击网页空白处，在弹出的菜单中选择“查看源文件”命令，将弹出一个窗口，在该窗口中，我们可以看到一些代码，如图1.9所示。
图1.9 HTML+CSS网页
在图1.9 中，我们可以看到网页代码包括两部分，分别是HTML代码和CSS代码。在“<style type="text/css">”和“</style>”中是CSS代码，其他均为HTML代码。
1.HTML
HTML（Hyper Text Markup Language，超文本标记语言）属于程序语言的一种，用来告诉浏览器应该怎样显示网页内容。例如，在图1.9中，HTML代码“<div align="center">”告诉浏览器将“欢迎学习HTML+CSS！！”内容居中显示，如图1.10所示。
图1.10 HTML代码的作用
2.CSS
CSS（Cascading Style Sheet，层叠样式表）用来给网页添加样式，它告诉浏览器应该以怎样的格式来显示网页内容。例如，图1.9 中的CSS代码告诉浏览器将“欢迎学习HTML+CSS！！”内容以大小为24px和颜色为红色显示，效果如图1.11所示。
图1.11 CSS代码的作用
1.3.2 认识XHTML
在图1.9中，HTML源代码的前四行有两句代码，如图1.12所示。
图1.12 XHTML代码
这两句代码中都有“XHTML”字样，下面为大家讲解XHTML。
XHTML（eXtensible HyperText Markup Language，可扩展的超文本标记语言）是HTML的一个子集，表现方式与HTML类似，只是在语法上更加严格，是更纯净的HTML版本。但是，由于目前大家都遵循HTML的规范，所以本书的讲解以HTML为主。
1.3.3 JavaScript
我们平时在网上登录邮箱时，如果没有填写邮箱登录账号就单击“登录”按钮，通常会弹出一个对话框“请输入您的账号？”，如图1.13 所示，这就是JavaScript脚本语言的一个应用实例。JavaScript脚本用于在浏览器客户端进行交互，而不是将用户请求提交到服务器端再进行交互，缩短了响应时间。
图1.13 登录邮箱
1.4 网页开发工具——Dreamweaver
了解了网页的基本知识后，我们就可以开始学习制作网页了。“工欲善其事，必先利其器”，所以我们首先需要一款合适的网页开发工具。在众多开发工具中，最便于新手学习的是Dreamweaver CS6。下面将简单讲解该工具的使用方法。
1.4.1 Dreamweaver CS6的安装
Dreamweaver CS6是由Adobe公司开发的，经过不断地更新，它可以自动生成脚本代码，通过它提供的工具，不用动手编写代码便可实现多种效果。Dreamweaver CS6的安装过程，如图1.14至图1.16所示。
图1.14 Dreamweaver CS6安装过程（1）
图1.15 Dreamweaver CS6安装过程（2）
图1.16 Dreamweaver CS6安装过程（3）
1.4.2 认识Dreamweaver CS6
按照上面的步骤安装Dreamweaver CS6之后，启动Dreamweaver CS6软件，可以看到如图1.17所示的运行界面。
图1.17 Dreamweaver CS6运行界面
界面上方为Dreamweaver CS6的标题栏和菜单栏，右侧为CSS样式面板、规则面板、属性面板等，下方是属性面板。我们将在后续内容的讲解中，逐一介绍这些面板。
1.5 制作第一个网页
有了开发工具后，我们马上开始制作第一个网页，操作过程如下。
（1）在图1.17中，单击“HTML”选项，新建一个空白网页。
（2）在标签 <body> 和 </body> 之间输入“我的第一个网页”，如图1.18所示。
单击“代码”按钮时，Dreamweaver CS6只显示“代码视图”，我们可以在此编辑代码。单击“设计”按钮时，Dreamweaver CS6只显示“设计视图”，我们可以看到编辑代码的效果。而单击“拆分”按钮时，Dreamweaver CS6可以同时显示“代码视图”和“设计视图”，如图1.19所示。
图1.18 制作“我的第一个网页”
图1.19 Dreamweaver CS6操作界面
（3）选择“文件”→“保存”命令，在弹出的“保存”对话框中将网页命名为“.html”或“.htm”文件。
（4）右键单击保存的文件，在弹出的菜单中选择“打开方式”命令，在弹出的子菜单中选择用浏览器（如IE浏览器）打开该文件，将看到如图1.20所示的网页。
图1.20 “我的第一个网页”效果
说明：保存文件后，按【F12】键可以直接看到网页效果。
1.6 小结
在本章我们讲解了网站和网页的基础知识，内容包括互联网和网站的构成及作用、网页的构成技术和开发工具，最后还带领读者制作了一个简单的网页。其中，读者需要重点掌握网站的构成和网页的构成技术。第2章将讲解网页设计的必备知识。
1.7 习题
【习题1-1】在计算机上安装Dreamweaver CS6软件，安装后运行Dreamweaver CS6软件，出现如图1.17所示的运行界面。
【习题1-2】制作一个简单的网页，网页内容只包含一行文字：“这是一个基础网页。”效果如图1.21所示。
图1.21 网页效果
【分析】在Dreamweaver CS6的“拆分视图”中，编写一段简单的代码，其中网页内容只包含“这是一个基础网页。”经过保存预览，显示其效果。
【关键代码】
<body> 这是一个基础网页。 </body>