1.1.1.1网页 

       网页是由HTML编写，通过WWW网传输，且被浏览器编译后供用户获取信息的页面文件，又称Wed页，集合了文本，图片，声音，动画，数字电影和超链接登各种网页元素。如果说WWW是nternet(因特网)上的一个大型图书馆,那么图书馆的每一本书就是一个Web站点，而网页就是书中的一页，页码就是网址，网址与页面一一对应，多个网页关联组合在一起就成为一个Web站点。Web点中有一个特殊的网页叫作主页(Homepage，也叫首页)，相当于书的封面。        HTML不是一种程序语言，而是一种描述文档结构的标记语言，是用户与电子计算机(借称“电脑”)之间进行交流的一种文本技术。各种网页均是用HTML来描述的、用 HTML编写的网页文件的扩展名一般为“*.htm”或“*.html”。        由于网页中包含超级链接，网页也被称为超文本(Hypertext)，传输超文本的协议被称为超文本传输协议(Hyper Text Transfer Protocol,HTTP)。

1.1.1.2网站

       Web站点也称为网站，WWW信息是由无数的Web站点组成的，网页则是Web站点的基本信息单位，超链接将站点中的一个或多个网页连接成为一个便于浏览的有机整体。        Web站点其实是Internet上能够提供Internet服务的一个位置，这个位置由独一无二的 IP地址或者域名来描述，一个网站需要有一台或者是多台服务器来实现其WWW服务。不同网站的规模与大小各不相同:大的网站如新浪、搜狐等，需要多台服务器;小的网站如个人主页等，仅占据某台服务器上一个很小的空间。        网站是多个网页的集合，按网站内容可将网站分为5种类型:门户网站、企业网站、个人网站、专业网站和职能网站。按网站的设计技术可将网站分为静态网站和动态网站(ASP，JSP，PHP和Web后台服务器软件)。        网站是有独立域名、独立存放空间的内容的集合，这些内容可能是网页，也可能是程序或者其他文件。不一定需要很多的网页，只要有独立域名和空间，哪怕只有一个页面也可以称为网站。

1.1.1.3常用术语

       网页设计有其专业的常用术语，如Internet、WWW、浏览器、URL、IP、域名、HTTP FTP、站点、发布、超链接、导航条、客机和服务等，作为一名网页设计师，必须熟练掌握这些常用术语。        Internet:由各种不同类型的计算机网络连接起来的全球性网络。        WWW:其功能是让Web客户端(常用浏览器)访问Web服务器中的网页。        浏览器:将Internet中的文本文档和其他文件翻译成网页的软件，通过浏览器可以快捷地获取Intemet中的内容。常用的浏览器有Interet Explorer(IE)浏览器，Firefox浏览器和 Chrome浏览器等。         URL:统一资源定位，指定通信协议和地址，如“http://www.baidu.com”是一个 URL,“http://”表示通信协议为超文本传输协议,“www.baidu.com”表示网站名称。 IP:网际协议。Internet中的每台计算机都有唯一的IP地址，表示该计算机在Internet中的位置。IP通常分为A、B和C三类。        域名:指网站名称，在全世界是唯一的。通常把域名看成网站的网址。域名由固定的网络域名管理组织进行全球统一管理。域名需向各地的网络管理机构进行申请才能获取。域名的书写格式:机构名、主机名.类别名，地区名。        HTTP:超文本传输协议，是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准。         FTP:文件传输协议，通过该协议，可把文件从一个地方传到另外一个地方，从而真正地实现资源共享。        发布:指将制作好的网页传到网络上的过程，也称为上传网站。        站点:一个站点就是一个网站所有内容所存放的文件夹。Dreamweaver的使用是以站点为基础的，必须为每一个要处理的网站建立一个本地站点。站点可分父子站点。站点管理是对一个Intemet的站点进行组织、维护和管理的功能集合。                                                                                 超链接:从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，可以是相 在浏览网页时单击超链接就能跳转到与之相应的页面。同网页的不同位置，也可以是一个图片、一个电子邮件地址、一个文件，甚至是一个程序。            客户机和服务器:浏览网页是由个人计算机向Internet中的计算机发出请求，Intemet中的计算机在接受到请求后响应请求，将需要的内容发到个人计算机上，这种发送请求的个人计算机称为客户机或客户端，而Internet中的计算机称为服务器或服务端。11

1.1.2.1静态网页

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

1.1.2.2 动态网页

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

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

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

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

        音频文件可使网页效果多样化，网页中常用的音频格式有mid和mp3。其中mp3为压缩文件，其压缩率非常高，音质也不错，是背景音乐的首选。

       网页中的视频文件一般为flv格式，它是一种基于FlashMX的视频流格式，具有文件小、加载速度快等特点，是网络视频格式的首选。

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

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

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

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

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

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

1.4.2.1 HTML

       HTML是制作网页的标准语言。“超文本”就是指页面内可以包含图片、超链接、音乐、程序等非文字元素。超文本标记语言的结构包括“头部”(Head)和“主体”(Body)两部分，其中“头部”提供关于网页的信息,“主体”提供网页的具体内容。

1.4.2.2 CSS语言

      CSS是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，并拥有对网页对象和模型样式进行编辑的能力。

1.4.2.3 Javascript语言

       Javascript是一种属于网络的脚本语言，已经被广泛地用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。它的解释器被称为JavaSeript脚本通过嵌入在HTML中的方式来实现自身的功能。 Javascript引擎，属于浏览器的一部分，因JavaSeript代码由浏览器边解释边执行。          万维网联盟(W3C)规定，Web标准需要将网页的结构、样式和行为三者进行分离。HTML+CSS+ Javascript本质上构成一个MVC框架，即HTML用于描述网页的结构(Model). CSS用于描述网页的样式(View)，Javascript用于描述网页的行为即调度数据和实现某种展现逻辑(Controller)。        用盖房子的例子来描述三者之间的关系。首先需要把房子的地基和结构搭建好，有一个良好的结构(HTML)。然后给房子刷上油漆和添加窗户，对房子样式进行美化(CSS)。最后给房子添加电梯和地暖，与住户进行一些行为上的交互(Javascript)，这样房子才算搭建完毕。

1.4.3.1 浏览器

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

1.4.3.2 网页编辑

HBuilderX

1.4.3.3 切图软件

Photoshop

Fireworks

1.5.1.1 语言

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

1.5.1.2 超文本

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

1.5.1.3 标记

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

1.使用HBuilder新建项目。依次选择文件、新建、Web项目 2.创建项目名称 3.然后打开项目里会有:        css文件夹：   页面样式文件        img文件夹：  图片文件夹        js文件夹：  Javascript文件 4.可以开始编写代码，在inder.html中编写代码

       <title>标签是页面标题标签。它将HTML文件的标题显示在浏览器的标题栏中，用以说明文件的用途。这个标签只能应用于<houd>与</huad>之间。<tile>标签是对文件内容的需括。一个好的标题能使读者从中判断出该文件的大概内容。        网页的标题不会显示在文本窗口中，而以窗口的名称显示出来，每个文档只允许有一个标题。网页的标题能给浏览者带来方便，如果浏览者喜欢该网页，将它加人书签中或保存销磁盘上，标题就作为该页面的标志成文件名。另外，使用搜索引擎时显示的结果也是页面的标题。         < title>标签位于<bead>与</head>中，用于标示文档标题，格式如下:<title>标题</title> 例如，京东商城的文档标题:         <title>京木(JD.COM)-正品低价、品质保障、配送及时、轻松购物!</title> 打开网页后，在网页文档头部定义的标题内容不在浏览器窗口中显示，而是在浏览器的标题栏中显示，尽管文档头部定义的信息很多，但能在浏览器标题栏中显示的信息只有标题内容。

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

1.7.2.1 keywords

keywords用来告诉搜索引擎网页使用的关键字。

1.7.2.2 description

description用来告诉搜索引擎网页使用的关键字。

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

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

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

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