1.1认识网页和网站
1.1.1网页，网站及常用术语
网页和网站是两个不同的概念，它们之间存在明显的区别。
-
定义与组成：网页是网站的基本组成单元，它是由HTML、CSS、JavaScript等编写的单个页面，可以包含文本、图像、视频、链接等元素，用于展示信息或提供功能。而网站则是由多个网页组成的集合体，这些网页通过链接相互连接，形成一个完整的在线资源。网站还包括导航菜单、标志、底部信息等共享的元素。
-
功能与技术：网页通常实现几个简单功能，如表单提交、图片点击等，而网站功能齐全，可能包括用户注册、登录、评论、搜索等，以满足用户的多样化需求。网站的开发和维护涉及到多种技术，如服务器端编程、数据库管理、前端开发等，而网页的开发主要涉及到前端技术。
-
独立性与结构：网站具有独立域名和存放空间，而单个网页没有独立的域名和空间只能称为网页。网站通常具有较为复杂的结构，包括导航栏、侧边栏、底部等多个部分，以便于用户浏览和查找信息。网页的结构相对简单，通常只包含一个主体部分，网页之间的跳转主要通过超链接实现。
-
访问与体验：网站需要部署到服务器，利用域名或IP地址访问，而网页可以直接在浏览器访问。网站给用户体验更为全面，是一个完整的系统，而网页只是一个功能界面展示。
综上所述，网页是构成网站的基本单元，而网站是由多个网页通过链接相互连接形成的完整在线资源，具有更复杂的功能和结构。
常用术语：Internet，www，浏览器，URL，IP，域名，HTTP，发图片，站点，发布，超链接，导航条，客户机和服务器等。
Internet：由各种不同类型的计算机网络连接起来的全球性网络。
www：其功能是让Web客户端(常用浏览器)访问Web服务器中的网页。
浏览器：将Internet中的文本文档和其他文件翻译成网页的软件，通过浏览器可以快捷地获取Internet中的内容。常用的浏览器有Internet 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的使用是以站点站点出点为基础的，必须为每一个要处理的网站建立一个本地站点。站点可分父子站点。站点管理是对一个 Internet 的站点进行组织、维护和管理的功能集合。
超链接:从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，可以是相同网页的不同位置，也可以是一个图片、一个电子邮件地址、一个文件，甚至是一个程序在浏览网页时单击超链接就能跳转到与之相应的页面。
客户机和服务器:浏览网页是由个人计算机向Intemet中的计算机发出请求，Imtemet中的计算机在接受到请求后响应请求，将需要的内容发到个人计算机上，这种发送请求的个人计算机称为客户机或客户端，而Intermet中的计算机称为服务器或服务端。
1.1.2静态网页和动态网页
1.静态网页
静态网页是指客户端的浏览器发送URL请求给WWW服务器，服务器查找需要的超文本文件并不加处理地直接下载到客户端，运行在客户端的页面是已经事先做好并存放在服务器中的网页。静态网页通常由纯粹的HTML/CSS 语言编写。
2.动态网页
动态网页能够根据不同浏览者的请求来显示不同的内容，无论网页本身是否具有视觉意义上的动态效果，只要采用动态网站技术生成的网页都称为动态网页，其本质主要体现在交互性方面。根据程序运行区域的不同，动态网页可分为客户端动态网页与服务端动态网页。客户端动态网页不需要与服务器进行交互，实现动态功能的代码往往采用脚本语言形式直接嵌人网页中，常见的客户端动态网页技术包括JavaScript，ActiveX和Flash等。
服务端动态网页则需要与客户端共同参与，客户端通过浏览器发出页面请求后，服务端根据URL携带的参数运行服务端程序，产生的结果页面再返回客户端。动态网页比较注重交互性，即网页会根据客户端的要求和选择而动态改变和响应。一般涉及数据库操作的网页(如注册、登录和查询等)都需要服务端动态网页程序
1.2 网页的基本构成元素
1.2.1.文本
文本具有体积小，网络传输速度快，可使用户方便地浏览下载文本信息，是网页的基本元素，也是网页中最主要的信息载体。
1.2.2.图片和动画
图片比文本更加生动和直观，可以传递一些文本不能表达的信息，具有强烈的视觉冲击力。
1.2.3.超链接
超链接技术是WWW流行起来的最主要的原因。超链接是从一个网页指向另一个目的端的链接，指定从一个位置跳转到另一个位置，可以是文本链接、图像链接和锚链接等。超链接可以在当前页面中进行跳转，也可以在页面外进行跳转。
1.2.4.音频视频
音频文件可使网页效果多样化，网页中常用的音频格式有mid 和mp3。其中mp3为压缩文件，其压缩率非常高，音质也不错，是背景音乐的首选。
网页中的视频文件一般为flv格式，它是一种基于FlashMX的视频流格式,具有文件小、加载速度快等特点，是网络视频格式的首选。
1.2.5.交互表单
网页中的表单通常用来接收用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端。这个目标可以是文本文件、网页和电子邮件，也可以是服务器端的应用程序。表单一般用来收集联系信息，接收用户要求，获得反馈意见，让浏览者注册为会员并以会员的身份登录站点等。
1.2.6.其他常见元素
网页中除了以上几种最基本的元素之外，还有一些其他的常用元素，包括悬停按钮、JavaScript与ActiveX等各种特效，它们不仅能点缀网页，使网页更活泼有趣，还在网上娱乐、电子商务等方面也有着不可忽视的作用。
1.3 页面布局结构
1.3.1 网页页面布局
1.国字型
国字型是最常见的一种布局方式其上方为网站标题和广告条，中间为正文，左右分列两栏，用于放置导航和工具栏等，下方是站点信息。
2. 厂字型
与“国字型”相似，上方为标题和广告条，中间左侧较窄的一栏放超链接一类的功能，右侧为正文下面为站点信息。
3.海报型
这种结构的布局方式比较简单主要用于突出需要表达的重点通常最上方为通栏的标题和导航条，下方是正文部分。
4. Flash型
常用于显示宣传网站首页，常以精美大幅图像为主题，设计方式多为Flash动画。
1.3.2 网页色彩搭配
(1)网页安全色。网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合。在使用网页安全色进行配色后，这些颜色在任何终端用户的显示设备上都将显示为相同的效果。
网页安全色是红色、绿和蓝色。当颜色数字信号值为0，51，102，153，204和255时，构成的颜色组合一共有216种颜色。
(2)网页中色彩的表达。在网页设计中，颜色值最常见的表达方式是十六进制。十六进制是计算机中数据的一种表示方法，由数字0~9和字母A~F组成，字母不区分大小写。颜色值可以采用6位的十六进制来进行表示，并且需要在前面加上特殊符号“#”，如#0E533D。还可通过RGB，HSB,Lab和CMYK来进行表示;RGB色彩模式是通过对红(R)、绿(G)、蓝(B)3个颜色通道的变化以及相互之间的叠加来得到各种颜色，是目前运用最广的颜色系统之一。HSB色彩模式是普及型设计软件中常见的色彩模式。Lab颜色模型由亮度(L)和a、b两个颜色通道组成，这种颜色混合后将产生具有明亮效果的色彩。 CMYK也称作印刷彩模式，由青、洋红(品红)、黄和黑4种色彩组合成各种颜色。
(3)常见的色彩搭配:
采用相近色配色:相近色是指相同色系的颜色，使用相近色进行网页色彩的搭配，可以使网页的效果更加统一和谐，如暖色调和冷色调就是相近色的两种运用。
采用近似色配色:在色相环中每一个颜色对面的颜色，称为互补色，也是对比最强的色组。也可以指两种明显区分的色彩，包括色相对比、明度对比、饱和度对比、冷暖对比等，如黄和蓝，紫和绿，红和青。任何色彩和黑、白、灰，深色和浅色，冷色和暖色，亮色和暗色都是对比色关系。
1.4 Web前端技术简介
1.4.1 初识WEB前端
Web前端即指平时上网浏览的网页，如上网浏览新闻，查询快递信息，淘宝购物等都是在浏览页面。
1.4.2 Web前端开发的三大核心技术
W3C组织，即万维网联盟，创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。W3C专门负责制定网页相关的标准，Web前端的相关技术都是基于W3C标准实现的。
下面来介绍 Web 前端开发所包括的三大核心技术:HTML、CSS语言和JavaScript 语言
1.HTML
HTML是制作网页的标准语言。“超文本”就是指页面内可以包含图片、超链接、音乐程序等非文字元素。超文本标记语言的结构包括“头部”(Head)和“主体”(Body)两部分，其中“头部”提供关于网页的信息,“主体”提供网页的具体内容。
2. CSS 语言
CSS是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，并拥有对网页对象和模型样式进行编辑的能力。
3.JavaScript 语言
JavaScript是一种属于网络的脚本语言，已经被广泛地用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。它的解释器被称为JavaScript弓l擎，属于浏览器的一部分，因此 JavaScript 代码由浏览器边解释边执行。通常JavaScript 脚本通过嵌人在 HTML,中的方式来实现自身的功能。万维网联盟(W3C)规定，Web标准需要将网页的结构、样式和行为三者进行分离
HTML+CSS+ JavaScript 本质上构成一个 MVC 框架，即 HTML用于描述网页的结构(Model)CSS用于描述网页的样式(View)，JavaScript 用于描述网页的行为即调度数据和实现某种展现逻辑(Controller)。
用盖房子的例子来描述三者之间的关系。首先需要把房子的地基和结构搭建好，有一良好的结构(HTML)。然后给房子刷上油漆和添加窗户，对房子样式进行美化(CSS)。后给房子添加电梯和地暖，与住户进行一些行为上的交互(JavaScript)，这样房子才算搭完毕。
1.4.3 前端开发工具
浏览器：谷歌浏览器 GoogleChrome
编辑器：HBilderX
1.5 HTML语法基础
1.5.1 HTML概述
HTML是Hyper Text Markup Language的缩写，即超文本标记语言，是一种用来制作超文本文档的简单标记语言。
1.语言
HTML作为一种超文本标记语言，有指定的语法规则，超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。协议的制定使浏览器在运行超文本时有了统一的规则和标准。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台。
2.超文本
超文本是可以加入图片、声音、动画、影视等内容的文本。事实上每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言，简单且易学易懂。
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.HTML 文档标签<html>……</html>
HTML文档标签的格式为
<html>HTML 文档的内容</html>
<hml>处于文档的最前面，表示 HTML文档的开始，即浏览器从<html>开始解释，直遇到</html>
2.HTML 文档头标签<head>…</head>
HTML文档包括头部(head)和主体(body)。HTML文档头标签的格式为<head>头部的内容</head>
文档头部内容在开始标签<html>和结東标签</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页</title>
</head>
<body>
<h1>欢迎来到我的简单网页</h1>
</body>
</html>运行结果：
3.文档编码
文档编码格式如下:
<mela charset=" uU-8"/>
为了被浏览器正确解释和通过W3C代码标准，所有的HTML文档都必须声明它们所使用的编码语言。文档声明的编码应该与实际编码一致，否则会成乱码。对于中文网页的设计者来说，用户一般使用GB2313(简体中文)。
4.HTML 文档主体标签<body>·…</body>
HTML文档主体标签的格式为
<body>网页的内容</body>主体位于头部以后，以<body>为开始标签，</body>为结束标签。它定义网页上显示的主要内容与显示格式，是整个网页的核心，网页中要真正显示的内容都包含在主体中。
1.6创建HTML文档
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页</title>
</head>
<body>
<h1>欢迎来到我的简单网页</h1>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
运行结果：
1.7网页头部标签
1.7.1 title
title：设置网页名字，是网页标题标签
1.7.2 meta
meta的三个作用：
1.设置字符集。
2.设置keywords也就是关键字，方便搜索，告诉搜索引擎网页使用的关键字。
3.设置description，描述一段网页的内容，描述信息。
1.7.3 link
link：引入css文件，格式->
<link rel="stylesheet"href="外部样式表文件名.css "type="texVess”/>
三个参数->
rel：指定文件的作用
href：指定文件的路径
type：指定文件的类型
>
1.7.4 script
引入JavaScript文件
格式：<scripttype="text/css" src="脚本文件名 n.js"></script>
<src：指定路劲
type：指定文件类型
1.8 HTML5文档注释和特殊符号
1.8.1 注释
单行注释
<!--注释内容-->
多行注释
<!--
注释内容
-->
1.8.2 特殊符号
由于大于号“>”和小于号“<”等已作为HTML的语法符号，所以，如果要在页面中显示这些特殊符号，就必须使用相应的HTML代码表示。这些特殊符号对应的HTML代码被
称为字符实体。常用的特殊符号及对应的字符实体见表。这些字符实体都以“&”开头，以“结束。
1.9综合案例——临江仙·送钱穆父
<!DOCTYPE html>
<html>
<head>
<meta name=""keywords" charset="宋词,苏轼"utf-8"/>
<meta name="description" content="本网站收录精选宋词"/>
<title>宋词精选</title>
<style type="text/css">
p{
text-align: center;
font-size: large;
}
</style>
</head>
<body bgcolor="antiquewhite" text="#333333">
<h2 align="center">临江仙·送钱穆父</h2>
<p >宋 苏轼</p>
<!--使用<br/>的效果-->
<p >一别都门三改火,天涯踏尽红尘。<br />
依然一笑作春温。<br />
无波真古井,有节是秋筠。<br />
惆怅孤帆连夜发,送行淡月微云。<br />
尊前不用翠眉颦。<br />
<font color="brown"face="微软雅黑">人生如逆旅,我亦是行人。
</font></p><img src="img/a.jpg" />
<!--水平线-->
<hr size=" 2" color=" black" width=" 100%"/>
<p align="center">网页制作教程 Copyright©江西应用工程学院<p>
</body>
</html>