第一章 网页制作的基础知识

1.1 认识网页 、网站

1.1.1网页网站和常用术语

1.网页

  网页是由HTML编写，但不是一种程序语言，而是一种描述文档结构的标记语言，是用户与电脑之间交流的一种技术，HTML编写的网页文件扩展名议案为 “*.htm” 或 “*.html”。

  通常网页中包含超级链接，网页也被称为超文本（Hypertext），传输超文本的协议被称为超文本传输协议。

2.网站

  Web站点被称为网站，WWW信息是由无数个Web站点组成的。网站是多个网页的集合，按照网站内容可以将网站分为5种类型：门户网站、企业网站、个人网站、专业网站、和职能网站。

  网站是有独立域名，独立存放空间的的内容集合，不一定要有很多网页，只要有独立域名和空间，哪怕就一个页面也能称为网站。

3.常用术语

常用术语有Internet、WWW、浏览器、URL、IP、域名、HTTP、FTP、站点、发布、超链接、导航条、客户机和服务器等。

1.1.2 静态网页和动态网页

  1.静态网页

    静态网页通常由纯粹的HTML/CSS语言编写，超文本文件一般直接下载打到客户端。

2.动态网页

  动态网页通常由JavaScript，ActiveX和Flash等编写，动态网页会根据客户的要求和选择而动态改变响应。一般可以由编写语言分辨静态网页和动态网页。

1.2 网页的基本构成元素

1.2.1文本

  文本具有体积小、网络传输速度快等特点，也是页面中最主要的载体。与图片相比虽然不能很快引起读者兴趣，但是能精准表达信息内容和含义。用户还可以用网页文本的属性如字体，颜色等快速了解重要内容。

1.2.2图片和动画      

  图片比文本更加生动和直观，可以传递一些文本不能表达的信息，具有强烈的视觉冲击力。网页中的网站标识、背景、链接等都可以是图片。用户在网页中使用的图片格式主要包括GIF、JPEG和PNG等，其中使用最广泛的是GIF和JPEG两种格式。在网页中，为了更有效地吸引浏览者的注意，许多网站的广告都做成了动画形式。
1.2.3.超链接
  超链接技术是WwW流行起来的最主要的原因。超链接是从一个网页指向另一个目的端的链接，指定从一个位置跳转到另一个位置，可以是文本链接、图像链接和锚链接等。链接可以在当前页面中进行跳转，也可以在页面外进行跳转。
1.2.4.音频和视频
  音频文件可使网页效果多样化，网页中常用的音频格式有mid和mp3。其中mp3为压缩文件，其压缩率非常高，音质也不错，是背景音乐的首选。
网页中的视频文件一般为v格式，它是一种基于FlashMX的视频流格式，具有文件小、加载速度快等特点，是网络视频格式的首选。
1.2.5.交互表单
  网页中的表单通常用来接收用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端。这个目标可以是文本文件、网页和电子邮件，也可以是服务器端的应用程序。表单一般用来收集联系信息，接收用户要求，获得反馈意见，让浏览者注册为会员并以会员的身份登录站点等。
1.2.6.其他常见元素
  网页中除了以上几种最基本的元素之外，还有一些其他的常用元素，包括悬停按钮JavaScript与ActveX等各种特效，它们不仅能点缀网页，使网页更活泼有趣、还在网上娱乐、电子商务等方面也有着不可忽视的作用。

1.3 页面布局结构

1.3.1 网页页面布局

   根据不同的网页制作风格，可以将网页分为个人网页和商业网页。商业网页内容丰富信息量大，一般都有统一的布局，个人网页风格比较多样、内容比较专一、形式比较灵活更容易创造出美感。确定好网页风格，要对网页的布局进行规划，也就是确定网页上网站标识、导航栏以及菜单元素等的位置。在网页设计中，结构布局是根据设计元素在网页中的位置分布进行分类的。

1.3.2.网页色彩搭配

(1)网页安全色。网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合。在使用网页安全色进行配色后，这些颜色在任何终端用户的显示设备上都将显示为相同的效果。
网页安全色是红色、绿色和蓝色。当颜色数字信号值为0、51，102、153，204和255时，构成的颜色组合一共有 216 种颜色。
(2)网页中色彩的表达。在网页设计中，颜色值最常见的表达方式是十六进制。十六进制是计算机中数据的一种表示方法，由数字0~9和字母A~F组成，字母不区分大小写。颜色值可以采用6位的十六进制来进行表示，并且需要在前面加上特殊符号“#”，如#0E533D。还可通过RCB，HSB，Lab和CMYK来进行表示;RGB色彩模式是通过对红(R)、绿(G)、蓝(B)3个颜色通道的变化以及相互之间的叠加来得到各种颜色，是目前运用最广的颜色系统之一。
(3)常见的色彩搭配:
采用相近色配色:相近色是指相同色系的颜色，使用相近色进行网页色彩的搭配，可以
使网页的效果更加统一和谐，如暖色调和冷色调就是相近色的两种运用。采用近似色配色;在色相环中每一个颜色对面的颜色，称为互补色，也是对比最强的色组。也可以指两种明显区分的色彩，包括色相对比、明度对比、饱和度对比、冷暖对比等如黄和蓝，紫和绿，红和青。任何色彩和黑、白、灰，深色和浅色，冷色和暖色，亮色和暗色都是对比色关系。

1.4 Web 前端技术简介

1.4.1 初识 Web 前端

web前端即指平常上网浏览的网页，如上网浏览新闻、查询快递信息、淘宝购物等是在浏览网页。但网页制作还需要了解与网页相关的基本概念，下面对 Web 前端的相关念进行详细讲解。
1991年8月6日，来自欧洲核子研究中心的科学家 Tim Bemmers-lee，启动了世界上一个可以正式访问的网站(hup://ino.cemm.ch)，标志着万维网时代的到来。随着互联的飞速发展，网站开发人员也变得炙手可热。
Web前端开发是从网页演变而来的，名称上有明显的时代特征。随着用户体验要求来越高，前端开发的技术难度越来越大，Web前端开发这个职业也从设计和制作不分的面中独立出来。
早期的前端其实就是 Tabel布局，后来发展到 Div+CSS 网站重构，再到 Javascipv系成为Web前端开发的语言以及Web2.0的出现，每个阶段都涌现出相应的产品,如S博客、微博等。随着人们对网页需求的不断增大，Web前端技术也正加速地发展

1.4.2 Web 前端开发的三大核心技术

1.HTML是制作网页的标准语言。“超文本”就是指页面内可以包含图片、超链接、音程序等非文字元素。超文本标记语言的结构包括“头部”(Head)和“主体”(Body)分，其中“头部”提供关于网页的信息,“主体”提供网页的具体内容。
2. CSS 语言
CSS是一种用来表现HTML或XML等文件样式的计算机语言。CSS 不仅可以静态饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

3. JavaScript 语言
JavaScript是一种属于网络的脚本语言，已经被广泛地用于 Web 应用开发,常朋来页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。它的解释器被称为jmwasenpt引擎，属于浏览器的一部分，因此 JavaSeript 代码由浏览器边解释边执行。通常JavaSeript脚本通过嵌入在HTML中的方式来实现自身的功能。

1.4.3 Web 前端开发工具

“工欲善其事，必先利其器。”在HTML+CSS开发过程中，需要先来选择适合的相关开发工具。HTML+CSS开发过程中主要涉及三大类工具:浏览器、网页编辑器和切图软件。

1.4.3.1.浏览器

浏览器浏览器是网页的运行平台，是可以把HTML文件展示在其中，供用户进行浏览的一种软件。目前主流的浏览器有正浏览器、Chrome浏览器、Firefox浏览器、Safari 浏览器和 Opera浏览器等，由于某些因素，这些浏览器没有完全采用统一的Web标准，或者说不同的浏览器对同一个CSS样式有不同的解析，这就导致了同样的页面在不同的浏览器下显示效果可能不同。用户使用的浏览器可能不同，因此制作网页时，需要保证该网页可以兼容所有的主流浏览器。
正浏览器 Chrome浏览器 Firefox浏览器 Safan 浏览器 Opera 浏览器

(1)IE浏览器。正是 Intermet Explorer 的简称，是由微软公司推出的一款网页浏览器,采用 Tident 内核实现,有6,0,7.0,8.0,9.0,10.0和11.0等版本。在正7.0以前，中文直译为“网络探路者”，但在正 70以后官方便直接称为“正 浏览器”。一些用户仍然在使用低版本的浏览器，因此在制作网页时，一般也需要兼容低版本的浏览器。一些其他的浏览器也是基于 正 内核的，如360 安全浏览器和搜狗浏览器等，只要兼容 正 浏览器，这些基于正内核的浏览器也都兼容。

2)Chrme 浏览器。Chrome 浏览器一般指 Google Chrome。 Google Chrome 是由G公司开发的一款设计简单、高效的Web浏览器，采用Javascrpt引擎，可快速运行复杂的型网站，从而降低浏览者访问的等待时长。该浏览器基于其他开源软件撰写，采用和Bimk内核实现，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者面。本书运行环境采用 Chrome浏览器，版本
(3)Firefox浏览器。Firefox浏览器一般指Mozillafrefox，中文俗称“火狐”，是由Mozilla 公司出品的一款自由的及开放源代码的Web浏览器，采用Cecko内核实现，支持多种操作系统，如Windows和Mac0SX及GNU/Linux等。
(4)Safari 浏览器。Safari 浏览器是由苹果公司出品的用于苹果计算机操作系统 Mac 0sX中的浏览器，采用Webkit内核实现，使用了KDE的KHTML作为浏览器的运算核心。无论是在Mac还是在PC上运行时，Safari都可提供极致愉悦的网络体验方式。
(5)0pera 浏览器。0pera 浏览器是由挪威 0pera Sofware ASA 公司制作的一款支持多更面标签式浏览的浏览器，采用Preso内核实现。它是跨平台浏览器、可以在Wimndows，Ma和 Iinux3个操作系统平台上运行。

1.4.3.2.网页编辑器

(1)Adobe Dreamweaver。Adobe Dreamweaver是一款所见即所得的网页编辑器，中文名称为“梦想编织者”或“织梦”。该软件最初的1.0版是1997年由美国 Macomedia 公司发布的，该公司于 2005年被 Adobe 公司收购。Dreamweaver 也是当时第一套针对专业 web前端工程师所设计的可视化网页开发工具，整合了网页开发与网站管理的功能。

(2)Subime Text。Sublime Text的界面布局非常有特色，它支持文件夹导航图和代码缩助参考。略图效果。该软件支持多种编程语言的语法高亮显示，也具有代码自动完成提示功能。该软件还具有自动恢复功能，如果在编程过程中意外退出，在下次启动该软件时文件会自动恢复
(3)NotePad++。NotePad++的名称来源于Windows 系列操作系统自带的记事本为关闭之前的编辑状态。NotePad，在此基础上多了两个加号，立刻带来了质的飞跃。这是一款免费开源的纯文本编辑器，具有完整中文化接口并支持UTF-8技术，如图1-S所示。它具有语法高亮显示、代码折叠等功能，因此也非常适合作为计算机程序的编辑器。

(4)EditPlus。EditPlus 是由韩国 Sangil Kim(ES-Computing)公司发布的一款文字编辑器，支持HTML，CSS，JavaScript，PHP和Java等多种计算机程序的语法高亮显示与代码折叠功能。其中最具特色的是EditPlus具有自动完成功能。例如，在CSS源文件中输人字母b，加上空格，就会自动生成“border:1pxsolid red”语句，开发者可以自行编辑快捷键所代表的代码块，然后在开发过程中使用快捷方式让EditPlus自动完成指定的代码内容。
(5)HBuilder。HBuilder是由 DCloud(数字天堂)推出的一款支持 HTML5 的 Web 开发IDE。HBuilder 主要用于开发HTML,JS(JavaScript)和CSS，同时配合 HTML 的后端脚本语言如 PHP 和 JSP也可以适用，还有前端的预编译语言如less 以及人们钟爱的 markdown都可以良好地进行编辑。

1.4.3.3 切图软件

  切图软件是对UI设计师设计出的效果图进行切图操作，也可以对网页中的图片进行修改等处理。常用的切图软件有Photoshop和Fireworks 两种

1.5 HTML语法基础

1.5.1 HTML 概述

HTML是 Hyper Text Markup Language 的缩写，即超文本标记语言，是一种用来制作超文本文档的简单标记语言。

1.5.1.1. 语言

HTML作为一种超文本标记语言，有指定的语法规则，超文本传输协议规定了浏览器在运行 HTML文档时所遵循的规则和进行的操作。协议的制定使浏览器在运行超文本时有了统一的规则和标准。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台。自1990年以来HTML就一直被用作WWW的信息表示语言，使用HTML描述的文件需要通过 Web 浏览器 HTTP 显示出效果，

1.5.5.2.超文本

超文本是可以加入图片、声音、动画、影视等内容的文本。事实上每一个 HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言，简单且易学易懂。

1.5.5.3. 标记

HTML5 实际上不算是一种编程语言，而是一种标记语言。HTML5 文件是由一系列成对出现的元素标签嵌套组合而成的。这些标签用“<”和“>”括起来。它们被称为标记，也称标签，是用来划分网页的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。标签通过指定某块信息为段落或标题等来标识文档的某个部分。在HTML中每个用作标签的符号都是一条命令，它会告诉浏览器如何显示文本。这些标签均由“<”和“>”符号以及一个字符串组成。如<head>，<body>等。而浏览器的功能是对这些标记进行解释，显示出文字、图片、动画和播放声音。这些标签符号用“<标签名字属性>”来表示。标签分为单标签和双标签两大类:
单标签指的是只存在一个标签的写法，如<meta><input>等。
双标签指的是存在一对标签的写法，如<head></head>，<body></body>等。
注意，在双标签中第一个标签称为起始标签，第二个标签称为结束标签，结東标签需要
在左尖括号后添加一个关闭符“/”。HTML只是一个纯文本文件。创建一个 HTML 文档，需要 HTML, 编辑器和 web 浏览器两个工具。HTML编辑器是用于生成和保存HTML文档的应用程序。web浏览器用来打开Web 网页文件，提供查看Web资源的客户端程序。

1.5.2 HTML 基本结构

1.5.2.1.HTML 文档标签<html>…</html>

HTML文档标签的格式为
<html>HTML文档的内容</html>。<html>处于文档的最前面，表示 HTM文档的开始，即浏览器从<html>开始解释，直到遇到</html>

1.5.2.2.HTML 文档头标签<head>…</head>

HTML文档包括头部(head)和主体(body)。HTML文档头标签的格式为<head>头部的内容</head>
文档头部内容在开始标签<html>和结束标签</hml>之间定义，其内容可以是标题名或者文本文件地址、创作信息等网页信息说明。

1.5.2.3.文档编码

文档编码格式如下:
<meta charset = " uf-8” />
为了被测览器正确解释和通过W3C代码标准，所有的HTML文档都必须声明它们所候用的编码语言。文档声明的编的应设车安文)编码一致，否则会成乱码。对于中文网面的部者来说，用户一般使用GB2313(简体中文)。

1.5.2.4.HTML 文档主体标签<body>…</body>

HTML文档主体标签的格式为
<body>网页的内容</body>
主体位于头部以后，以<body>为开始标签，<bdy>为结束标签。它定义网页上星示的主要内容与显示格式，是整个网页的核心，网页中要真正显示的内容都包含在主体中。

1.6创建HTML文档

  一个网页可以简单得只有文字，也可以复杂得既有图片、文字，又有超链接和视频、音
频等。下面使用 HBuilder 快速编辑一个 HTML 文件，通过它来学习网页的编辑、保存过程。

(1)使用 HBuilder 新建项目。依次点击选择“文件”→“ 新建”→“web项目”

(2)创建项目名称，设置项目所在的位置确定即可，完成之后会在左边的项目栏营理器中出现，如图1-8所示。在本示例中，项目名称为“课堂练习”。

(3)打开项目“课堂练习”的文件夹，会看到里面有首页index.html，如图1-9 所示,有js文件夹，有css文件夹，还有图片的文件夹，基本齐全。

(4)到了这一步之后，便可以编写网页代码了,可以直接在index.him! 中编写代码。也可以单击鼠标右键，新建一个 HTML 文件。

(5)在“创建文件向导”对话框中，选择好文件所在目录，并为文件命名、模板为html5。

(6)本实例将文件命名为“示例程序1.2.htm!”,开始编写网页代码。

(7)网页完成后，可以执行菜单“运行”一“浏览器运行”，选择电脑中已有的浏览器进行预览。

1.7网页头部标签

1.7.1 <title>标签

<tide>标签是页面标题标签。它将HTML文件的标题显示在浏览器的标题栏中，用以谈明文件的用途。这个标签只能应用于<head>与</head>之间。<tide>标签是对文件内容的括。一个好的标题能使读者从中判断出该文件的大概内容。
网页的标题不会显示在文本窗口中，而以窗口的名称显示出来，每个文档只允许有一个标题。网页的标题能给浏览者带来方便，如果浏览者喜欢该网页，将它加人书签中或保存乳磁盘上，标题就作为该页面的标志或文件名。另外，使用搜索引擎时显示的结果也是页面的标题。

1.7.2 <meta>标签

<meta>标签是元信息标签，在HTML中是一个单标签。该标签可重复出现在头部标签中，用来指明本页的作者、制作工具、所包含的关键字，以及其他一些描述网页的信息。<meta>标签分两大属性:HTTP标题属性(htp-equiv)和页面描述属性(name)。不的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。本节主要讲解的name 属性，用于设置搜索关键字和描述。<meta>标签的name 属性的语法:
<meta name="参数"content="参数值">
name属性主要用于描述网页摘要信息，与之对应的属性值为content。content中的内容主要是便于搜索引擎查找信息和分类信息用。name 属性主要有以下两个参数:keywords(关键字)和 description(网站内容描述)

1.7.2.1. keywords

keywords用来告诉搜索引擎网页使用的关键字。例如，著名的京东商城网，其主页的关键字设置如下:

fmmnmms="keywondts” comnieu=”网上购物,同上商城,家电,手机,电脑,服装,居家,母要,美妆,个护食品,生鲜,京东”/>

1.7.2.2. description

deseipion用来告诉搜索引擎网站主要的内容。

1.7.3 <link>标签

<in*>标签用于连接外部资源和当前 HTML文档，它只在首部标签<head>和<head>中,通常用于连接外部样式表。<hnk>标签并不将其他文档实际链接到当前文档中，只是提供接该文档的一个路径，Iimk标签最常用的是用来链接CSs样式文件，格式如下:<link rel=" stylesheet" hre="外部样式表文件名,css "ype="texV/css”/>如果需要同时引用多个外部样式表文件，则需要为每一个CSs 样式文件单独使用一<link>标签。

1.7.4 <script>标签

<script>标签是脚本标签，用于为HTML文档定义客户端脚本信息。此标签可以在文楼中包含一段客户端脚本程序，可以位于文档中任何位置，但常位于<head>标签内，以便于维护。格式如下:
<scripitype="text/css"src="脚本文件名n.js"></script>

1.8 HTML5 文档注释和特殊符号

1.8.1 注释

为增加 HTMI5 文档的可读性，可为其添加注释部分。注释是文档中的说明文字，不会被浏览器执行。HTMIL5使用<!--…-->标签为文档进行注释，注释标签以“<!--”开头，以“-->”结束，中间的“…”替换为注释文字内容即可。<!--…-->标签支持单行和多行注释。

1.8.2 特殊符号

由于大于号“>”和小于号“<”等已作为 HTML的语法符号，所以，如果要在页面中显示这些特殊符号，就必须使用相应的HTML代码表示。这些特殊符号对应的HTML代码被称为字符实体。
常用的特殊符号及对应的字符实体见表1-1。这些字符实体都以“&”开头，以“:
结束。

1.9综合案例--临江仙·送钱穆父

以一首宋词为例子，参照给定的 HTML代码和图片资源，利用 HBuilder 设计w在编写时要遵守 HTML代码的编写规范，并养成良好的编码习惯。以下为完整代码，以供参考。
 

<!--综合案例-->
<!DOCTYPE html>
<html>
	<head>
		<meta name="keywords" content="宋词，苏轼"charset="utf-8"/>
		<meta name="description" content="本网站收录精选宋词"/>
		<title>宋词精选</title>
		<style type= "text/css">
			p{
	text-align:center;
	font-size:larger;
	}
	</style>
</head>
<body bgcolor="antiquewhite" text="#333333" >
	<h2 align="center">临江仙•送钱穆父</h2>
	<P>宋 苏轼 </P>
	<!-- 使用<b/>的效果 -->
	<P>一别都门三改火，天涯路尽红尘。<br/>
	依然一笑作春温。<br/>
	无波真古井，有节是秋筠。<br/>
	烟帐孤帆连夜发，送行淡月微云。<br/>
	尊前不用翠眉颦。<br/>
	<font color="brown" face="微软雅黑">人生如逆旅，我亦是行人。</font><p>
	<img src="img/l.1.jpg"/>
	<!-- 水平线 -->
	<hr size="2" color="black" width="100%" />
	<p align="2">网页制作教程 Copyright&copy;不徐耍赖</p>
	</body>
</html>

效果如下图