网页制作基础知识_IT分享知识网

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

1.1.2 静态网页和动态网页

静态网页：静态网站是指客户端的浏览器发送URL请求给WWW服务，服务器查找需要的超文本文件并不加处理的直接下载到客户端。静态网页通常是由HTML/CSS语言编写，静态网页的内容是固定不变的网页，它们是预先由设计师编写好。

动态网页：是指那些能根据浏览者的请求来显示不同的内容的网页，其本质体现在交互性方面。动态网页可以分为客户端动态网页和服务端动态网页，客户端动态网页不需要与服务器进行交互，实现动态代码往往采用脚本语言的形式嵌入到网页中去，常见的动态网页技术有JavaScript，ActiveX和Flash等。

静态网页和动态网页的区别：

静态网页的内容固定，而动态网页的内容可以根据客户端的要求和选择而动态改变和响应。一般涉及数据库操作的网页（如注册、登录和查询等）都需要服务端动态网页程序。
注意区分，并非在静态网页放一个视频就会变成动态网页，而是要看它是否能根据用户的需求做出动态改变。

1.2 网页的基本构成元素

文本
图片和动画
超链接：超链接是从一个网页指向另一个目标端的链接，它可以从一个位置跳转到另一个位置，超链接可以是文本链接、图像链接和锚链接等。
音频视频：网页中常用的音频格式有mid和mp3。其中mp3为压缩文件，其压缩率非常高，音质也不错，是背景音乐的首选。网页中的视频文件一般为flv格式，它是一种基于FashMX的视频流格式，具有文件小、加载速度快等特点。
交互表单：网页中的表单通常用来接收用户在浏览器端的输入，表单一般用来收集用户信息（如:注册账号时），接收用户要求，获得反馈意见。
其他常见元素：网页中除了以上几种最基本的元素之外，还有一些其他的常用元素，包括悬停按钮、JavaScript与ActiveX等各种特效。

1.3 页面布局结构

1.3.1 网页页面布局

1.3.2 网页色彩搭配

(1)网页安全色。网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合。网页安全色是红色、绿色和蓝色。
(2)网页中色彩的表达。在网页设计中，颜色值最常见的表达方式是十六进制。字母不区分大小写颜色值可以采用6位的十六进制来进行表示，并且需要在前面加上特殊符号“#”，如#0E533D。还可通过RGB，HSB，Lab和CMYK来进行表示。RGB色彩模式是通过对红(R)、绿(C)、蓝(B)3个颜色通道的变化以及相互之间的叠加来得到各种颜色，是目前运用最广的颜色系统之一；HSB色彩模式是普及型设计软件中常见的色彩模式；Lab颜色模型由亮度(L)和a、b两个颜色通道组成，这种颜色混合后将产生具有明亮效果的色彩；CMYK也称作印刷色彩模式，由青、洋红(品红)、黄和黑4种色彩组合成各种颜色。
(3)常见的色彩搭配
采用相近色配色（相近色是指相邻于色轮上，通常相差30度）

采用近似色配色（近似色是色轮上，通常相差60度）

1.4 Web前端技术简介

1.4.1 初识WEB前端

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

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

(1). HTML

三者之间的关系：万维网联盟(W3C)规定，Web标准需要将网页的结构、样式和行为三者进行分离HTML+CSS+ JavaScript本质上构成一个 MVC框架，即HTMIL用于描述网页的结构(Model),CSS用于描述网页的样式(View)，JavaScript用于描述网页的行为即调度数据和实现某种展现逻辑。HTML就相当于一个房子的结构，CSS就是对房子的美化，JavaScript是于住户进行的行为上的交互

1.4.3 前端开发工具

a.浏览器：

IE浏览器
chrome浏览器
Firefox浏览器（火狐浏览器）
Safari浏览器
Opera浏览器

b.网页编辑器

（1）Adobe Dreamweaver

（2）Sublime Text

（3）NotePad++

（4）EdiPlus

（5）HBuilderX（目前业内主流）（后续会出它的安装教程）

c.切图软件

1.5 HTML语法基础

1.5.1 HTML概述

语言：HTML不是一种程序语言，而是一种超文本标记语言
超文本：超文本是可以加入图片、声音、动画、影视等内容的文本。事实上每一个HTML 文档都是一种静态的网页文件。
标记：HTML5 文件是由一系列成对出现的元素标签嵌套组合而成的。这些标签用“<”和“>”括起来。它们被称为标记（也称标签），是用来划分网页的元素，以形成文本的布局、文字的格式及画面。标签分为单标签和双标签两大类:
单标签指的是只存在一个标签的写法，如<meta><input>等。
双标签指的是存在一对标签的写法，如<head></head>，<body></body>等。
注意，在双标签中第一个标签称为起始标签，第二个标签称为结束标签，结束标签需要在左尖括号后添加一个关闭符“/”。

1.5.2 HTML基本结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>页面标题</title>
		<p>头部内容</p>
	</head>
	<body>
		<p>网页的内容</p>
	</body>
</html>

（1）HTML文档标签<html>…</html>

格式：<html>文档内容</html>

HTML文档以<html>开始，以</html>结束。

（2）文档头标签<head>…</head>

格式：<head>头部内容</head>

其内容可以是标题名或者文本文件地址。

（3）文档编码

格式：<meta charset=”utf-8″ />

对于中文网页设计者来说，用户一般使用GB2312（简体中文）

（4）HTML文档主体标签<body>…</body>

格式：<body>网页的内容</body>

其内容是网页的核心

1.6 创建HTML文档

1.7 网页头部标签

1.7.1 <title>标签

<title>标签是页面标题标签。它将HTML文件的标题显示在浏览器的标题栏中，用以说明文件的用途。这个标签只能应用于<head>与</head>之间。<title>标签是对文件内容的概括，用于标示文档标题，格式如下：<title>标题</title>

1.7.2 <meta>标签

name 属性主要有以下两个参数：keywonds(关键字)和 descripton(网站内容描述)。

1.7.2.1 keywords

keywonds 用来告诉搜索引擎网页使用的关键字。例如，著名的京东商城网，其主页的关键字如下：<meta name=”keywords” content=”网上购物，网上商城，家电，手机，电脑，服装，居家，母婴，美妆，个护，食品，生鲜，京东”/>

1.7.2.2 description

1.7.3 <link>标签

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

1.7.4 <script>标签

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

格式如下：< script type = ” text / css ” src = “脚本文件名n.js ” > < / script >

1.8 HTML5文档注释和特殊符号

1.8.1 注释

注释标签以“ <! – – ” 开始，以“ – – > ”结束。“ <! – – XXXX – – > ” 中间的XXXX可以替换为其他的内容。“ <! – – XXXX – – > ” 支持多行注释。

1.8.2 特殊符号

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

常用的特殊符号及对应的字符实体
特殊符号	字符实体	示例
空格		天空商务    热线：100-200-1564
大于（ > ）	>	3 > 2
小于（ < ）	<	4 < 5
引号（ ” ）	"	" 樱花 "
版权号（ © ）	©	Copyright © 网页设计

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>
		<!--使用<br/>的效果-->
		<p>一别都门三改火, 天涯踏尽红尘。</br>
				依然一笑作春温。</br>
			无波真古井，有节是秋筠。</br >
			惆怅孤帆连夜发，送行淡月微云。</br >
			尊前不用翠眉颦。</br >
			<font color="brown" face="微软雅黑">人生如逆旅，我亦是行人。</font></p >
		<!-- <img src="作业.jpg"/></img> -->
		<img src="img/作业.jpg"/>
		<!--水平线-->
		<hr size="2" color="black" width="100%"/>
		<p align="center"> 网页制作教程 Copyright&copy;</p >
	</body>
</html>

素材

临江仙·送钱穆父

宋苏轼

一别都门三改火, 天涯踏尽红尘。
依然一笑作春温。
无波真古井，有节是秋筠。
惆怅孤帆连夜发，送行淡月微云。
尊前不用翠眉颦。
人生如逆旅，我亦是行人。

图片：

网页制作教程 Copyright

代码讲解：

图片插入：

方法一：将图片放在img文件的目录下，写法：<img src=”img/图片的名字及后缀”/>
方法二：将图片放在与这个HTML文件相同的目录下，src后面需要填写图片的名字及后缀。写法：<img src =”图片的名字及后缀”></img>
color: 这个属性用来设置文本的颜色。在代码示例中，color 属性被设置为 “brown”, 这意味着文本颜色将会是棕色。
face: 这个属性用来设置文本的字体。在代码示例中，face 属性被设置为 “微软雅黑”, 这意味着文本字体将会是微软雅黑。
size: 这个属性用来设置文本的大小。它通常以像素为单位。例如，size="3" 将会使文本大小为 3 像素。然而，在提供的代码示例中没有使用 size 属性。
<p>标签：换行标签
<hr>标签：水平分割线

<p>标签和<hr>标签，在后面的《网页制作的排版方法》中具体讲解，插入图片也会在后面的《网页制作的基础习题》的题二中讲解

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/118284.html

网页制作基础知识

1.1 认识网页和网站

1.1.1 网页、网站及常用术语