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

第1章 网页基础知识

1.1 认识网页和网站

网页和网站的区别：

常用术语：网页设计有其专业的常用术语，如Internet、WWW、浏览器、URL、IP、域名、HTTP TP、站点、发布、超链接、导航条、客户机和服务器等。

Internet：由各种不同类型的计算机网络连接起来的全球性网络。

WWW：其功能是让Web客户端（常用浏览器）访问Web服务器中的网页。

浏览器：将 Intermet 中的文本文档和其他文件翻译成网页的软件，通过浏览器可以快捷地获取 Internet 中的内容。常用的浏览器有Internet Explorer（IE）浏览器，Firefox浏览器和Chrome浏览器等。

URL：统一资源定位符，指定通信协议和地址，如“http://www.baidu.com”是一个URL,“http：//”表示通信协议为超文本传输协议，“www.baidu.com”表示网站名称。IP：网际协议。Internet 中的每台计算机都有唯一的IP地址，表示该计算机在Intemet中的位置。IP通常分为A、B和C三类。
域名：指网站名称，在全世界是唯一的。通常把域名看成网站的网址。域名由固定的网络域名管理组织进行全球统一管理。域名需向各地的网络管理机构进行申请才能获取。域名的书写格式：机构名.主机名.类别名.地区名。

HTTP：超文本传输协议，是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准。

FTP：文件传输协议，通过该协议，可把文件从一个地方传到另外一个地方，从而真正地实现资源共享。

发布：指将制作好的网页传到网络上的过程，也称为上传网站。

站点：一个站点就是一个网站所有内容所存放的文件夹。Dreamweaver的使用是以站点为基础的，必须为每一个要处理的网站建立一个本地站点。站点可分父子站点。站点管理是对一个Internet的站点进行组织、维护和管理的功能集合。
1.1.1 网页、网站及常用术语

1.1.2 静态网页和动态网页

静态网页：

静态网页是指客户端的浏览器发送URL请求给WWW服务器，服务器查找需要的超文本文件并不加处理地直接下载到客户端，运行在客户端的页面是已经事先做好并存放在服务器中的网页。静态网页通常由纯粹的HTML/CSS语言编写。

动态网页:

动态网页能够根据不同浏览者的请求来显示不同的内容，无论网页本身是否具有视觉意义上的动态效果，只要采用动态网站技术生成的网页都称为动态网页，其本质主要体现在交互性方面。根据程序运行区域的不同，动态网页可分为客户端动态网页与服务端动态网页。客户端动态网页不需要与服务器进行交互，实现动态功能的代码往往采用脚本语言形式直接嵌入网页中，常见的客户端动态网页技术包括JavaScript，ActiveX和Flash等。
服务端动态网页则需要与客户端共同参与，客户端通过浏览器发出页面请求后，服务端根据URL携带的参数运行服务端程序，产生的结果页面再返回客户端。动态网页比较注重交互性，即网页会根据客户端的要求和选择而动态改变和响应。一般涉及数据库操作的网页（如注册、登录和查询等）都需要服务端动态网页程序。

1.2 网页的基本构成元素

网页元素：导航栏，广告动画，图片，交互表单，文本和超链接等

1.2.1.文本 

文本具有体积小、网络传输速度快等特点，可使用户更方便地浏览和下载文本信息，是网页最主要的基本元素，也是页面中最主要的信息载体。与图片相比，文本虽然不如图片那样能够很快引起浏览者的注意，但却能准确地表达信息的内容和含义。为了克服文本固有的缺点，人们赋予了网页中文本更多的属性，如字体、字号、颜色、底纹和边框等，通过不同格式的区别，突出显示重要的内容。此外，用户还可以在网页中设计各种各样的文字列表，清晰地表达一系列项目。
 

1.2.2.图片和动画

图片比文本更加生动和直观，可以传递一些文本不能表达的信息，具有强烈的视觉冲击力。网页中的网站标识、背景、链接等都可以是图片。用户在网页中使用的图片格式主要包括GIF、JPEG和PNG等，其中使用最广泛的是GIF 和JPEG两种格式。在网页中，为了更有效地吸引浏览者的注意，许多网站的广告都做成了动画形式。

1.2.3.超链接  

超链接技术是WWW流行起来的最主要的原因。超链接是从一个网页指向另一个目的端的链接，指定从一个位置跳转到另一个位置，可以是文本链接、图像链接和锚链接等。超链接可以在当前页面中进行跳转，也可以在页面外进行跳转。

1.2.4.音频视频

音频文件可使网页效果多样化，网页中常用的音频格式有mid 和mp3。其中mp3 为照维
文件，其压缩率非常高，音质也不错，是背景音乐的首选。
网页中的视频文件一般为flv格式，它是一种基于Flash MX的视频流格式，具有文件
小、加载速度快等特点，是网络视频格式的首选。

1.2.5.交互表单

网页中的表单通常用来接收用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端。这个目标可以是文本文件、网页和电子邮件，也可以是服务器端的应用程序。表单一般用来收集联系信息，接收用户要求，获得反馈意见，让浏览者注册为会员并以会员的身份登录站点等。

1.2.6.其他常见元素 

网页中除了以上几种最基本的元素之外，还有一些其他的常用元素，包括悬停按钮、JavaScript 与 ActiveX等各种特效，它们不仅能点缀网页，使网页更活泼有趣，还在网上娱乐、电子商务等方面也有着不可忽视的作用。

1.3 页面布局结构

对一个网站来说，除了内容之外，还要对网站进行整体规划设计。格局凌乱的网站内容再精彩，也不是一个好网站。在网页插入各种对象和装饰效果前，要先确定网页的总体风格和布局。

1.3.1 网页页面布局

根据不同的网页制作风格，可以将网页分为个人网页和商业网页。商业网页内容丰富、信息量大，一般都有统一的布局；个人网页风格比较多样、内容比较专一、形式比较灵活,更容易创造出美感。

确定好网页风格，要对网页的布局进行规划，也就是确定网页上网站标识、导航栏以及菜单元素等的位置。在网页设计中，结构布局是根据设计元素在网页中的位置分布进行分类的。常见的结构布局包括“国”字型、“厂”字型、海报型和Flash 型等，如下图所示。

1.3.2 网页色彩搭配

网页安全色：网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合。在使用网页安全色进行配色后，这些颜色在任何终端用户的显示设备上都将显示为相同的效果。
网页安全色是红色、绿色和蓝色。当颜色数字信号值为0,51，102，153，204和255
时，构成的颜色组合一共有216种颜色。

网页中色彩的表达：在网页设计中，颜色值最常见的表达方式是十六进制。十六进制是计算机中数据的一种表示方法，由数字0~9和字母A~F组成，字母不区分大小写。颜色值可以采用6位的十六进制来进行表示，并且需要在前面加上特殊符号“#”，如#0E533D。还可通过 RGB，HSB，Lab和CMYK来进行表示；RGB色彩模式是通过对红(R)、绿（G）、蓝（B）3个颜色通道的变化以及相互之间的叠加来得到各种颜色，是目前运用最广的颜色系统之一。HSB色彩模式是普及型设计软件中常见的色彩模式。lab颜色模型由亮度（L）和a、b两个颜色通道组成，这种颜色混合后将产生具有明亮效果的色彩。CMYK 也称作印刷色彩模式，由青、洋红（品红）、黄和黑4种色彩组合成各种颜色。

常见的色彩搭配：
酒些采用相近色配色：相近色是指相同色系的颜色，使用相近色进行网页色彩的搭配，可以
使网页的效果更加统一和谐，如暖色调和冷色调就是相近色的两种运用。
采用近似色配色：在色相环中每一个颜色对面的颜色，称为互补色，也是对比最强的色组。也可以指两种明显区分的色彩，包括色相对比、明度对比、饱和度对比、冷暖对比等，如黄和蓝，紫和绿，红和青。任何色彩和黑、白、灰，深色和浅色，冷色和暖色，亮色和暗色都是对比色关系。

1.4    Web前端技术简介

1.4.1 初识WEB前端

Web 前端即指平常上网浏览的网页，如上网浏览新闻、查询快递信息、淘宝购物等都是在浏览网页。

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

HTML 

CSS 语言

JavaScript语言

1.4.3 前端开发工具

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

1.4.3.1 浏览器

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

1.4.3.2 网页编辑器

HTML,CSS 和JavaScript 源代码文件均为纯文本内容，用计算机操作系统中自带的写字板或记事本工具就可以打开和编辑源代码内容。因此本书不对开发工具作特定要求，使用任意一款纯文本编辑器均可以进行网贝内容的编写。这里介绍几款常用的网页开发工具软件：Adobe Dreamweaver,Sublime Text,NotePad++，EditPlus和HBuilder。

1.4.3.3 切图软件

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

1.5 HTML语法基础

HTML是制作网页的基础语言，是初学者必学的内容。虽然现在有许多所见即所得的网页制作工具，但是这些工具生成的代码仍然是以HTML为基础的，因此学习HTML代码端设计网页非常重要。

1.5.1 HTML概述

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

1.5.1.1 语言

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

1.5.1.2 超文本

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

1.5.1.3 标记

HTML5实际上不算是一种编程语言，而是一种标记语言。HTML5文件是由一系列成对出现的元素标签嵌套组合而成的。这些标签用“<”和“>”括起来。它们被称为标记，也称标签，是用来划分网页的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。标签通过指定某块信息为段落或标题等来标识文档的某个部分。在HTML中每个用作标签的符号都是一条命令，它会告诉浏览器如何显示文本。这些标签均由“<”和“>”符号以及一个字符串组成。如<head>，<body>等。而浏览器的功能是对这些标记进行解释，显示出文守、图片、动画和播放声音。这些标签符号用“<标签名字属性>”来表示。标签分位单标签和双标签两大类。

1.5.2 HTML基本结构

HTML文档是由一系列的元素和标签组成的。元素名不区分大小写，HIML用标签来规定元素的属性和它在文件中的位置，HTML文档分为头部和主体两部分，在文档头部对文档进行一些必要的定义，主体部分是文档要显示的信息。

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

<html>处于文档的最前面，表示 HTML.文档的开始，即浏览器从<html>开始解释，直到
遇到</html>。每个HTML文档均以<html>开始，以</html>结束。

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

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

1.5.2.3 文档编码

文档编码格式如下：
<meta charset=" utf-8" />
为了被浏览器正确解释和通过W3C代码标准，所有的HTML文档都必须声明它们所使用的编码语言。文档声明的编码应该与实际编码一致，否则会成乱码。对于中文网页的设计
者来说，用户一般使用GB2313（简体中文）。

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

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

1.6 创建HTML文档

一个网页可以简单得只有文字，也可以复杂得既有图片、文字，又有超链接和视频、音频等。下面使用HBuilder 快速编辑一个HTML文件，通过它来学习网页的编辑、保存过程。
（1）使用HBuilder 新建项目。依次点击选择“文件”→“新建”→“Web项目”。

1.7 网页头部标签

1.7.1 <title>标签

<title></title>标签：设置网页的标题，给网页点明内容

1.7.2 <meta>标签

<meta charset="utf-8" />：三个作用，设置字符集；设置keywords（设置网页的关键字），用于对网页的检索；设置网站的描述信息，描述网页的内容；

1.7.2.1 keywords

keywords：可以设置网页的关键字，让其他人可以检索到自己的网站

1.7.2.2 description

 description：设置网站的描述信息，让他人更容易直接了解到网站的内容

1.7.3 <link>标签

<link>：引入css文件
<link rel="stylesheet"/：引入文件的样式
href="css/new_file.css"：引入文件的路径
type="text/css"/>：引入文件的类型；

1.7.4 <script>标签

<scripk></scripk>：引入JavaSCript文件
src="js/new_file.js"：引入文件的路径
type="text/javascript">：引入文件的类型；

1.8  HTML5文档注释和特殊符号

1.8.1 注释

注释   ：       <!-- 单行注释 -->

<!--

多

行

注

释

-->

1.8.2 特殊符号

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

<!DOCTYPE html>
<html>
	<head>
		<meta name="keywords" content="宋词,苏轼"
		<meta charset="utf-8" />
		<meta name="desvription" content="0">
		本网站收入精选宋词"/>
		<title>宋词精选</title>
		<style type="text/css">
			p{
				text-align: center;
				font-size: langer;
			}
			</style>
	</head>
	<body bgcolor="antiquewhite" text=#33333">
		<h2 aling="centre">临江仙.送钱穆父</h2>
		<p>宋 苏轼</p>
		
		<p>一别都门三改火，天涯踏尽红尘。<br/>
		        依然一笑做春温。<br/>
		   无波真古井，有节是春筠。<br/>
		   惆怅孤帆连夜发，送行淡月微云。<br/>
		   尊前不用翠眉颦。<br/>
		   <font color="black" >人生如逆旅,我亦是行人。</font></p >
			<img src="img/1.1.jpg" />
			<！--水平线-->
			<hr size="2" color="black" width="100%"/>
			<p align="center">网页制作教程Copyright&copy；广东南方职业学院</p >
			</body>
			</html>