1.1 认识网页和网站
1.1.1网页，网站
网页和网站的区别： 网页可以是网站，但网站不能是网页。网站是多个网页的集合，也可以是有独立域名、独立存放空间的内容的集合。
常用术语
Internet:又各种不同类型的计算机网络连接起来的全球性网络。
WWW：其功能是让web客户端（常用浏览器）访问web服务器中的网页。
浏览器:将Internet中的文本文档和其他文件翻译成网页的软件，通过浏览器可以快提地获取Internet中的内容。常用的浏览器有Internet Explorer(IE)浏览器，Firefox浏览器 Chrome 浏览器等。
URL:统一资源定位符，指定通信协议和地址，如“http://www.baidu.com”是一个 URL，“http://”表示通信协议为超文本传输协议，“www.baidu.com”表示网站名称。
IP:网际协议。Internet中的每台计算机都有唯一的IP地址，表示该计算机在Intene中的位置。IP通常分为A、B和C三类。
域名:指网站名称，在全世界是唯一的。通常把域名看成网站的网址。域名由固定的网络域名管理组织进行全球统一管理。域名需向各地的网络管理机构进行申请才能获取。域名的书写格式:机构名:主机名.类别名.地区名。
HTTP:超文本传输协议，是互联网上应用最为广泛的一种网络协议。所有的WWW大件都必须遵守这个标准。
FTP:文件传输协议，通过该协议，可把文件从一个地方传到另外一个地方，从而真正地实现资源共享。
发布:指将制作好的网页传到网络上的过程，也称为上传网站。
站点:一个站点就是一个网站所有内容所存放的文件夹。站点管理是对一个Internet的站点进行组织、维护和管理的功能集合。
超链接：从一个网页指向一个目标的连接关系，这个目标可以是图片、文件等内容或另一个网页。在浏览网页时单击连接就能跳转到与之相应的页面。
客户机和服务器：浏览网页需要客户端向服务器发送请求，再服务器接收到请求后响应，并将需要的内容发送到客户端。一般客户端都是个人计算机，而服务器一般是Internet中的计算机。
1.1.2 静态网页和动态网页
静态网页中运行在客户端的页面是已经事先做好并存放在服务器中的网页，服务器需要查找的超文本文件不加处理地直接下载到客户端。静态网页通常由纯粹的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种颜色。
网页中色彩的表达。在网页设计中，颜色值最常见的表达方式是十六进制。还可通过RGB，HSB，Lab和CMYK来进行表示；RGB通过红绿蓝的不同搭配来得到各种颜色，是目前运用最广的颜色系统之一。HSB色彩模式是普及型设计软件中常见的色彩模式。Lab由亮度和a、b两个颜色通道组成。CMYK由青、洋红、黄和黑4种色彩合成各种颜色。
常见色彩搭配：相近色配色，近似色配色
1.4 Web前端技术简介
1.4.1 初识Web前端
Web前端即指平常上网浏览的网页。
1.4.2 Web前端开发的三大核心技术
HTML CSS JavaScript
1.4.3 前端开发工具
1.浏览器：谷歌浏览器 GoogleChrome
2.编辑器：HBuilderX
1.5 HTML语法基础
1.5.1 HTML概述
HTML是超文本标记语言，是一种用来制作超文本文档的简单标记语言。
1.5.1.1 语言
HTML作为一种超文本标记语言，有指定的语法规则
1.5.1.2 超文本
超文本是可以加入图片、声音、动画、影视等内容的文本。
1.5.1.3 标记
HTML5实际上不算是一种编程语言，而是一种标记语言。HTML5 文件是由一系列成对出现的元素标签嵌套组合而成的。这些标签用“<”和“>”括起来。它们被称为标记，也称标签，是用来划分网页的元素。标签又分为单标签和双标签两大类：
单标签指的是只存在一个标签的写法，如<meta><input>等。
双标签指的是存在一对标签的写法，如<head></head>，<body></body>等。
注意，在双标签中第一个标签称为起始标签，第二个标签称为结束标签，结束标签需要在左尖括号后添加一个关闭符“/”。
1.5.2 HTML基本结构
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 文档编码
为了被测览器正确解释和通过 W3C代码标准，所有的HTL文档都必须声明它们所使用的编码语言。文档声明的编码应该与实际编码一致，否则会成乱码。对于中文网页的设计者来说，用户一般使用 GB2313(简体中文)。
1.5.2.4 HTML文档主体标签<body>...</body>
主体位于头部以后，以<body>为开始标签，</body>为结束标签。它定义网页上显示的主要内容与显示格式，是整个网页的核心，网页中要真正显示的内容都包含在主体中。
1.6 创建HTML文档
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<link rel="stylesheet"
href="/css/index.css"
type="text/css"/>
<script type="text/javascript"
src ="/js/index.js"></script>
<title>第一个网页</title>
</head>
<body>
<p>我的第一个网页</p>
<p>2023软件一班</p>
</body>
</html>
1.7 网页头部标签
1.7.1 <title>标签
<title>标签是页面标签。它将HTML,文件的标题显示在测览器的标题栏中，用以说明文件的用途。这个标签只能应用于<head>与</head>之间。<iide>标签是对文件内容的概括。
1.7.2 <meta>标签
<meta>标签是元信息标签，在HTML,中是一个单标签。
<meta>标签分两大属性;HTTP标题属性(http-equiv)和页面描述属性(name)。
name属性主要用于描述网页摘要信息，与之对应的属性值为 contemt。content 中的内容主要是便于搜索引擎查找信息和分类信息用。name 属性主要有以下两个参数;keywords(关键字)和 deseription(网站内容描述)。
1.7.2.1 keywords
keywords 用来告诉搜索引擎网页使用的关键字。
1.7.2.2 description
description用来告诉搜索引擎网站主要的内容。
1.7.3 <link>标签
<link>标签用于连接外部资源和当前 HTML 文档，它只在首部标签<head>和</head>中，通常用于连接外部样式表。
1.7.4 <script>标签
<script>标签是脚本标签，用于为HTML,文档定义客户端脚本信息，可以位于文档中任何位置。
1.8 HTML5文档注释和特殊符号
1.8.1 注释
为增加 HTML5 文档的可读性，可为其添加注释部分。注释是文档中的说明文字，不会被浏览器执行。HTML5 使用<!--.·-->标签为文档进行注释，注释标签以“<!--”开头，以“-->”结束，中间的“…”替换为注释文字内容即可。<!---->标签支持单行和多行注释。
1.8.2 特殊符号
| 特殊符号 | 字符实体 | 示例 |
| 空格 |   ; | 银河商务 热线:400-111-1111 |
| 大于(>) | > | 3> 2 |
| 小于(<） | < | 2<3 |
| 引号(”） | " ; | |
| 版权号(©) | © ; | Copyright©网页设计教程 |
1.9 综合案例——临江仙 · 送钱穆父
<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 >
<p>一到都门三放火，天涯踏尽红尘。<br/>依然一笑作春温。<br/>无波真古井，有节是秋筠。<br/>饲像孤帆连夜发，遥行淡月微云。<br/>尊前不用翠眉辈。<br/>
<font color="brown" face="微软雅黑">人生如逆旅，我亦是行人。</font> </p >
<img src="img/1.1.jpg">
<hr size="2" color="black" width="100%"/>
<p align="center">网页制作教程 Copyright©江西应用工程职业学院</p >
</body>
</html>
扫一扫
7912
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
