第一章网页的基础知识

1.1认识网页和网站

1.1.1网页、网站

网页和网站的区别：

1.1.1网页、网站
1.网页：网页是由 HTML 编与，迪过WWW 网传输，且被浏览器编译后供用户获取信息的页面文件，又称为wob页，集合了文本、图片、声音、动画、数字电彲和超级链接等各种网页元素

2.网站：Web站点也称为网站，www 信息是由无数的 Web 站点组成的，网页则是 Web 站点的
基本信息单位，超链接将站点中的一个或多个网页连接成为一个便于浏览的有机整体

3.常用术语：网页设计有其专业的常用术语，如 Iimveret、www、浏览器、URL、『：越名、HTTP、
D、站点、发布、超链按、导航条、容户机和服务器等，作为一名网页改计师，必须熟练
掌握这些常用木语。
Interet：由各种不同类型的计算机网络连接起来的全球性网络。
WwW：其功能是让 Web 容户端（常用浏览器）访问 Web 服务器中的网负。
浏览器：将 Internet 中的文本文档和其他文件翻洋成网页的软件，通过浏览器可以快捷

地我取 Intemet 中的内容。常用的浏览器有 Intermet Explorer （IE）河纪布，sireloxz览器和
Chrome 浏览器等。
UEL：统一资源定位符，指定通信协议和地址，如“http: //www.baidu.com”是一个
UEi,“http：//” 表示通信协议为超文本传输协议，“www.baidu.com” 表示网站名称。
业：网际协议。internet 中的每合计算机都有唯一的卫地址，表不该计算机在 Interet
甲的位置。『通常分为A、B和心三天。
域名：指网站名称，在全世界是唯一的。通常把域名看成网站的网址。域名由固定的网络域名管理组织进行全球统一管理。域名需向各地的网络管理机构进行申请才能获取。域名的书写格式：机构名。主机名．类别名．地区名。
HTTP：超文本传输协议，是互联网上应用最为广泛的一种网络协议。所有的 WWW文件都必须遵守这个标准。 b
FTP：文件传输协议，通过该协议，可把文件从一个地方传到另外一个地方，从而真正地实现资源共享。
发布：指将制作好的网页传到网络上的过程，也称为上传网站。
站点：一个站点就是一个网站所有内容所存放的文件夹。Dreamweaver 的使用是以站点为基础的，必预为每一个要处理的网站建立一个本地站点。站点可分父子站点。站点管理是对一个 Internet 的站点进行组织、维护和售理的功能集合

超維接：以一个网页指问一个目桥的难機悉委的这這是杯可以是男一个网頭，可以是相
个网员，可以是相
在沙览网页时单击超链接就能跳转到与之相应的贝面。
周网出的不同位登，也可以是一个園片，而行體 醫行機班，一个文件，越至是一个想件。
容户机和服务器：浏览网页是由个人计算机回 lolernet 中的汁算机发出 请求，Imvene 中的计算机在接受到请求后响应请求，将需要的内容发到个人计算机上，这种发送清求的个人
计算机称为容户机或客广端，而 Internet 中的计算机称为服务器或服务端。

1.1.2静态网页和动态网页

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

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

1.2网页的基本构成元素

一般网站的首页包含常见的网页元素，如导航栏、广告动画、图片、交互表单、文本和
超链接等
1.文本：文本具有体积小、网络传输速度快等特点，可使用户更方便地浏览和下载文本信恩，是网页最主要的基本兀茶，也是页面中最主要的信息载体。与图片相比，文本虽然不如图片那样能够很快引起浏览者的注意，但却能准确地表达信息的内容和含义。为了克服文本固有的鋏点，人们赋子了网页中文本更多的属性，如字体、字号、颜色、底纹和边框等，通过不同格式的区别，突出显不重要的内容。此外，用户还可以在网负中设计各种各样的文字列表，清晰地表达一系列项目

2图片和动画：图片比文本更加生动和直观，可以传逆一些文本不能表达的信息，具有强烈的视觉冲击力。网页中的网站标识、背欺、維找等都可以是因片。用户在网页中使用的图片格式主要包括GIR、JPRC 和PNC-等，其中使用最广泛的是 CTP 和 JPEC 两和格式。在网页中，为了重有效地吸引浏览者的注意，许多网站的广告都做成了动四形式

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

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

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

6.其他常见元素：网负中除厂以上几种最基本的元素之外，还有一些其他的常用元素，包括悬停投租、waveseripl 5 Ativex 等各种特效，它们不仅能点级网页，使网页更活没有趣，还在网上娱乐、电子商务等

1.3页面布局结构

1.网页页面布局：根据不同的网页制作风格，可以将网页分为个人网页和商业网页。商业网负内容丰富、信息量大，一般都有统一的布局；个人网页风格比较多样、内容比较专一、形式比较灵活，更容易创造出美感网页中的位置分布进行分类的常见的结构布局包括“国字型”“厂字型”“海报型”“Flash型”

2.网页色彩搭配：a 网四发全色。网顶发全世是指在不园使你环绝、不同撰作系统、不同浏览器中都能生正路豆不的頭色我合。在使用网反纹金色廷行配色厅，这些國色在任何终端用户的显示设备上都将显示为相同的效果
网顶安全色是红色、绿色和蓝色。当色效子信号值为 0，51， 102，153,204 和1255
时，构成的颈色组合一共有216 种颜色。

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

（3） 常见的色彩搭配：
采用相近色配色：相近色是指相同色系的颜色，使用相近色进行网页色彩的搭配，可以使网页的效果更加统一和谐，如暖色调和冷色调就是相近色的两种运用。
我用近化色配色：在色相环中每一个颜色对面的颜色，称为互补色，也是对比最趣的色
君：也可以指啊和明品区分的色彩，包括色相对此、明麼对比、飽和废对比、冷眼5比，：
海我相燃，裝和錄，红和曹。任何色君和照、白、次，深色和洪色，没色和两色沿色和酒色都是对比色关系

1.4Web前端技术简介

1.4.1初识Wed前端
Weh 前满开发是从网页镇空而来的，名称上有明显的时代特征。随着用户体验要水越来趁高，前端开发的技木难度越来越大，web 前端开发这个职业也从设计和制作不分的局面中独立出米
早期的的瑞其实就是 Tabel 布局，后来发展到 Div+Css 网站重构，再到 JavaSeript逐镜成为web 前瑞开发的语言以及 web 2.0 的出现，每个阶段都涌现出相应的产品，如5N5博客、微博等

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

W3C 组织，即万维网联盟，创建于 1994年，是 Web技术领域最具权威和影响力的国际中立性技术标准机构。W3C 专门负责制定网页相关的标准，web 前端的相关技术都是基于W3C 标准实现的。
下面来介绍 web 前端开发所包括的三大核心技术：HITML、CSS 塔言和Javascript 语言。
1. HTML
FTMI 是制作网页的标准语言。“超文本” 就是指页面内可以包含图片、超链接、音乐、程序等非文宇元素。超文本标记语言的结构包括“头部”（Head）和“主体”（Body）两部分，其中“头部”提供关于网页的信息，“主体”提供网页的具体内容。
2.CSS 语言
cSS是一种用来 表现 HIIML 或XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网贝，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位萱的拜版进行像泰级橢确控制，支持儿乎所有的字体宇号样式，并拥有对网页对象和模型样式进行编辑的能力3. 3.Javascript 语言
JavaScript 是一种属于网络的脚本语言，已经被广泛地用于 Web 应用开发，常用来为阳页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。它的解释器被称为JaraSoripr引1擊，属于浏览器的一部分，因此 Javascript 代的由河览器边解释边执行。通常JavraSoript 脚本通过嵌人在 HITML 中的方式来实现自身的功能。
万维网联盟 （W3C）规定，web 标淮需要将网页的结构、样式和行为三者进行分离。
HTML+CSS+ Javaseript 本质上构成一个MVC 框架，即HTML 用于描述网页的结构 ( Model)，css 用于描述网页的样式（View)，JavaSoript 用于描述网页的行为即调度数据和实现某种展现逻辑 ( Controller)

1.4.3Wed前端开发工具

工欲善其事，必先利其器。”在HTML+CSS 开发过程中，需要先来选择适合的相关开发工具。FrTML+CSS 开发过程中主要涉及三大类工具：浏兜器、网页编辑器和切图软件。
1. 浏览器
浏览器是网页的运行平合，是可以把HIML 文件展示在其中，供用户进行浏览的一种软件。目前主流的河览器有 正浏览器、Chrome 浏览器、Firefox 浏览器、Satari 浏览器和 Opera浏览器等

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

（2)Chrome 浏览器。Chrorme 刘览器一般指 Google Chromeo Google Chrome 是由 Gogle
公司开发的一款设计简单、高效的 wcb 浏览器，采用 JavaSeript引擎，可铁速设行叉染的大望网站，从而降低浏览者访问的等待时长。该沙路器基于其他开源软件選与，米用 Webli
和Blink 内核实现，目标是提升稳定性、速度和安全性，并创造出简单且有效举的使用者界面

（3) Finedior河览器。Finefox 浏览器一股指Morilla firelox，中文份称“火狐”，是曲Morilla 公司出品的一款自由的及开放源代码的 Web浏览器，采用 Gecko 內校实现，支持多
神操作系、如 Windows 和 Mac OS X及 GNU/Linux等。
(4) Safari 浏览 器。Satari 浏览器是由苹果公司出品的用于苹果计算机操作系统 Mac os，中的浏览器，采用 webokit 内校实现，使用了 KDE 的 KHITVL 作为浏览器的运算校心。无论是在 Mac 还是在PC 上运行时，Safari 都可提供极致愉悦的网络体验方式。
(3）Opera 河览器。Opera 测览器是由挪威 Opera Software ASA 公司制作的一款支持多页南杯签式浏览的浏览器，采用Presto 内核实现。它是跨平台闪览器，可以在 Windows, Mac和 Linux 了个操作系统平台上运行。
注：浏览器内核负贡对网页语法进行解祥并道染 （显不）网页。通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定子浏览器如何显示网页的内容以及页面的格式信息

2.网页编辑器

这里介绍儿款常用的网页开发工具软
1: Adobe Dreamweaver, Sublime Text, NotePad++, EditPlus 和 HBuilder。

（1) Adobe Dreanoweavero. Adobe Dreamaweaver 是一款所见即所得的网页编辑器，申文名称为 “梦想编织者” 或 “织梦”
Drcamweaver 支持 HTMIL5/CSS3 源代码的编辑和预览功能，最大的优点是可视化性能带
*的直观教果，开发界面可以分屏为代码部分与预览视阁，当开发者修改代码部分时，镇览祝图会随看修改内谷实时变化Drameaver 也有它的弱点，由于不同浏览器存在兼容性问题，Dreamweaver 的预览视图雅以达到与所有浏览器完全一致的效果。如斋专虑跨浏览器兼容问题，预览画面仅能作为辅助参考
(2) Sublime Testo Sublime Text 的界面布局非常有特色，它支持文件夹导航图和代码缩略图效果。该软件支持多种编程语言的语法高亮品不，也具有代码自动完成提示功能。该软件还具有自动恢复功能，如果在编程过程中意外退出，在下次启动该软件时文件会自动恢复为关闭之前的编辑状态。
(3)Mote?ad+十。Noterad十十的名称来源于 Windows 系列操作系统自带的记事本sovetad， 在此基甜上多厂两个加号，立刻带来了 质的飞跃。这是一款免费开源的纯文本锅博雄，具有完整中文化接口并支持 UTF-8技术

（4) EdiPluso EditPlus 是由韩国 Sangil Kim ( ES-Computing） 公司发布的一款文字编辑
器，交持 HTML, CSS,JavaSeript， PHP 和Java 等多种计算机程序的语法高亮显不与代码折叠功能。其中最具特色的是 EditPlus 具有自动完成功能
(5）HBuildero HBuilder 是由 DCloud(数宇天堂）推出的一款支持 HTML5 的Web 开发IDE。HBuilder主要用于开发 HTML， JS （JavaSoript）和 CSS，同时配合 HTML 的后瑞脚本语言如 PHP 和JSP 也可以适用，还有前場的预编洋语言如 less 以及人们钟爱的markdown都可以良好地进行编辑

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

1.5HTML语法基础

1.5.1HTML概述

HATNEL 是 Ayreur rea Mheauktup lamsuaese的缩写
HAPN 作为一科超文术标记语亭，有指充的谢记规则：雄文在传論的议规定了浏览整在三的规则和标谁。用HTML铺马的超文本文档称为ErTMI 文档，它能独立于各种獎作系统，台。自1900 4以来 HTWI就一直被用作 wKW 的信恩表不露言，使用 HTML 据达的文件，需要通过 Web 浏览HITTP 显示出效果
2.超文本
超文本是可以加人图片、声音、动画、影视等内容的文本。事实上每一个 HTMI 文档都
是一种静态的网页文件，这个文件里面包含了 HTML 指令代码，这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言，简单且易学易懂。
3.标记
HTML5 实际上不算是一种编程语言，而是一种标记语言。HTML5 文件是由一系列成对出现的元素标签联套组合而成的。这些标签用“＜”和“”括起来。它们被称为标记，也称标签，是用来划分网页的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。标签通过指定某块信息为段落或标题等来标识文档的某个部分。在HTML中每个用作标签的符号都是一条命令，它会告诉浏览器如何显示文本。这些标签均由“＜”和“＞”符号以及一个宇符串组成。如<head>，<body>等。而浏览器的功能是对这些标记进行解释，显示出文字、图片、动画和播放声音。这些标签符号用“<标签名字属性＞”来表示。标签分为单标签和
双标签两大类：
单标签指的是只存在一个标签的写法，如<meta><input>等。
双标签指的是存在一对标签的写法，如<head> </head>， <body></body>等。
注意，在双标签中第一个标签称为起始标签，第二个标签称为结束标签，结束标签需要在左尖括号后添加一个关闭符“”。
HITML 只是一个纯文本文件。创建一个HTVL 文档，需要 HTML 编辑器和 Web 浏览器两个工具。HTMI.编辑器是用于生成和保存 HITML 文档的应用程序。web 浏览器用来打开
web网页文件，提供查看 web资源的客户端程序。
1.5.2 HTML 基本结构
HTML 文档是由一系列的元素和标签组成的。元素名不区分大小写，HTMI 用标签来规定元素的属性和它在文什中的位置，FTML, 文档分为头部和主体两部分，在文档头部对文档进行一些必要的定义，主体部分是文档要显示的信息

1.HTML 文档标签<htmls.•</htmls
HTML 文档标签的格式为
＜html>HTML 文档的内容<html>
chumls处于文档的最前面，我示 HTML,文档的开始，即测跑器以<htmal>于始解群，直组
週到</hml>为止。每个HITML, 文档均以himl>开始，以</htmal>结束。
2.HTML 文档头标签<head>.</heads
HTML文档包括头部（heud）和主体（body)。HTML,文档头杯签的格式为shead>大邮的内容</head>
文档头部内容在开始标然<htrml>和结束怀签<homl>之间定义，其内容可以是标题名域者文本文件地址、创作信息等网页信息说明。
3.文档编码
文档编码格式如下：
＜meta charset=" utf-8" />
为了被浏览器正确解释和通过 w3C 代码标谁，所有的 HTML 文档都必须声明它们所使用的编码语言。文档声明的编码应该与实不編的一致，否则会成乱码。对于中文网顶的设计者来说，用户一股使用 GB2313（简体中文)。
4.HTML 文档主体标签<body>…•</body>
HTML 文档主体标签的格式为
<body>网页的内容</body>
主体位于头部以后，以<body>为开始标签，</body>为结束标签。它定义网页上显示的主要内容与显示格式，是整个网页的核心，网页中要真正显不的内容都包含在主体中

1.6创建HTML文档

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

1.7网页头部标签

在网页的头部中，通常存放一些介绍页面内容的信息。例如，页面杯题、描达机天键问链楼的 CSS 样式文件和容户端的 Javascript 脚本文件等

1.7.1<title>标签

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

1.7.2<meta>标签

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

2. description

1.7.3<link>标签

slink>标签用于连接外部资源和当前 HTMI文档，它只在首部标签<head>和</head>中通常连接外部式样

1.7.4<lscript>标签

sscript>标签是脚本标签，用于为 FrTML 文档定义客户端脚本信息。此标签可以在文指中包含一段客户端脚本程序，可以位于文档申任何位置，但常位于<head>杯签内，以便于维护

1.8HTML文档注释和特殊符号

1.8.1注释

增加 HITMI.S 文档的可读性，可为其添加注释部分。注释是文档甲的说明文字，不会被浏览器执行。ITM5 使用<！一…-->标签为文档进行注群，注群标签以“<！-“开头，以“--＞”结束，中间的“…”替换为注释文字内容即可。＜！-一-->标签支特单行和多行注释

1.8.2

由于大于号 “＞”和小于号“＜”等已作为 HTML的语法待号，所以，如果要在负面甲显示这些特殊符号，就必须使用相应的 HTML 代码表示。这些特殊符号对应的 HTML 代码被称为字符实体

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

<!--综合案例-->
<!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/efaffde2c0c36f29773b43319f21de4.jpg"/>
	<!-- 水平线 -->
	<hr size="2" color="black" width="100%" />
	</body>
</html>

​​​​​​​