[学习交流] 【上海校区】自编教材《web标准网页制作实例教程》连载

绮丽

本帖最后由绮丽于 2017-8-23 10:03 编辑

大家好，本人是传智设计学科上海校区的王老师，从今天开始陆续放出本人编著的教材《web标准网页制作实例教程》，由于内容太多，只摘选主要部分，希望对大家有所帮助！

1.5.5.理解目录与路径

当我们创建好一个页面时，需要将页面保存到电脑的某个位置，通常是创建一个文件夹并保存到此文件内。我们创建的这个文件夹，就是我们保存网站的根目录，也就是我们网站项目的站点。
通常一个站点根目录内会包含多个子目录，每个子目录包含站点中的不同部分。例如，一个具有多种类型文件的门户网站我们可以将每种文件类型单独创建一个独立的子目录进行保存。
例如我们在D盘根目录创建了一个名为“百智时尚”的文件夹，这个文件夹就是我们的站点根目录。我们将content.html、index.html和list.html三个页面文件放到了根目录下，同时我们又在根目录下创建了css、images、js和swf几个子文件夹。在实际工作中我们将用到的CSS文件放全部放到css文件夹内，用到的图片文件全部放到images文件夹内，将用到的js文件全部放到js文件夹内，将flash文件全部放到swf文件夹内。如图1-11：

file:///C:\Users\王宾\AppData\Local\Temp\ksohtml\wps113E.tmp.jpg

图1-11

这样做的目的是可以方便我们整个站点的文件管理，同时也可以方便的找到我们需要的文件。可以设想一下，如果将Web站点中的所有文件都放到根目录的话，整个目录会变得杂乱无章，对于相应的文件的操作也会变得非常复杂。

绝对与相对路径

绝对路径：

在我们平时使用计算机时要找到需要的文件就必须知道该文件的位置，而表示文件的位置的方式就是路径，例如只要看到这个路径：D:\百智时尚\images\01.jpg我们就知道01.jpg文件是在D盘的百智时尚目录下的images子目录中。像这样完整的描述文件位置的路径就是绝对路径。根据绝对路径便可判断出文件的位置。
在网站中类似以来确定文件位置的方式也是绝对路径。从这个绝对路径地址中我们可知，31125.jpg这张图片是放在了主机根目录下的visual_page文件夹下的40文件夹下的22文件夹内。

　　相对路径：

　　网站制作初学者经常发生图片不能正常显示的情况。例如，现在有一个页面index.html,在这个页面中链接有一张图片photo.jpg。他们的绝对路径如下：
　　D:/百智时尚/index.html
　　D:/百智时尚/images/01.jpg

如果你使用绝对路径D:/百智时尚/images/01.jpg，那么在自己的计算机上将一切正常，因为确实可以在指定的位置。即D:/百智时尚/images/01.jpg上找到01.jpg这张图片，但是当你将页面上传到服务器的时候就很可能会出错了，因为你的网站可能在服务器的C盘，可能在D盘，也可能在E盘的某个目录下，总之没有理由会有D:/百智时尚/images/01.jpg这样一个路径。
那么，在index.html文件中要使用什么样的路径来定位01.jpg文件呢？对，应该是用相对路径，所谓相对路径，就是指这个文件所在的位置与其他文件或者文件夹的关系，也就是相对位置。在上例中index.html中链接的01.jpg可以使用images/01.jpg来定位文件，那么不论将这些文件放到哪里，只要他们的相对关系没有变，就不会出错。

　　另外我们使用“../”来表示上一级目录，“../../”表示上上级的目录，以此类推。
　　再看几个例子，注意所有例子中都是index.html文件中联接有一张图片01.jpg。

例：
D:/百智时尚/web/index.html
　　D:/百智时尚/images/01.jpg
　　在此例中index.html中链接的01.jpg很显然index.html需要跳出它自身的父目录web文件夹向上一级才能找到images这个目录，因此应该写成../images/01.jpg

　　例：
　　D:/百智时尚/web/fashion/index.html
　　D:/百智时尚/images/20140423/01.jpg
　　在此例中index.html中链接的01.jpg应该怎样表示呢？
　　我们分析一下，index.html需要跳出他自身所在的fashion文件夹，然后再跳出fashion所在的web文件夹才能找到images文件夹，也就是说需要向上跳两级，因此应该这样写../../images/20140423/01.jpg

通过上面的讲解，我们对目录与路径有了一个清楚的认识，从而能够避免在实际工作中经常容易出现的文件引用错误。

自编教材《web标准网页制作实例教程》连载2

bbacc · bbacc

1.1.1. hr分割线

<hr /> 单标签，标签在 HTML 页面中创建一条分割线。可以在视觉上将文档分隔成各个部分。我们可以利用CSS样式来对其进行进一步设置。

1.1.2. 修饰标签strong和em

strong&em都属于强调某一内容，其中是重点强调，一般显示为粗体。为斜体。例如：

嫦娥三号卫星是中国国家航天局嫦娥工程第二阶段的登月探测器，嫦娥三号由着陆器和巡视探测器组成.

效果如图2.11所示：

bbacc · bbacc

1.1.1. 超级链接a

有了超级链接互联网才如此丰富多彩，鼠标一点就可以轻松跳转到全球任意一个站点。超级链接简称超链接或链接。通常需要指定href或name属性。

当指定href值时，<a>便是一个超连接，用于链到其他页面。

<a>：HTML的一种标签，用它来标示的内容的链接

href:属性用于指定链接目标，引号中的网址也可替换成”#”号，代表空链接。也可以链到某个页面文件，如“about.html”。

target:打开方式 _blank:新窗口，不加此句话就是默认在原窗口打开。

当指定的是name属性时，<a>就代表一个锚点。锚点的作用就是如果你的页面很长的话，利用锚点可以直接跳到页面的某一部分。

命名锚点的语法如下：

定义好命名锚之后，然后链接中要指定这个锚点，并在连接名称上加上“#”号。例如：

...

<a name=”xm1”>项目一介绍</a>

当点击“项目一”时，便可以直接滚动到“项目一介绍”的地方。

在文章内容比较多时，利用锚点链接可以快速定位到文章中的某个位置，在网页中也经常会用到。

bbacc · bbacc

常用图片格式

从某种程度上说，判断一个网页设计师是否优秀，可以从其在Web开发（或网页设计）中是否合理的采用各种图片格式得出结论。事实上，或许所有人都知道图片存在GIF,JPG和PNG等格式，但并非所有人都知道它们之间的具体区别和使用技巧。

l JPG

JPG格式是一种大小与质量相平衡的压缩图片格式。其压缩比很高，压缩效果显著。支持全彩模式，可以表现非常丰富的图片色彩。其有损压缩所产生的损失，肉眼很难看出来。所以，网页中需要色彩比较丰富的全彩图像时，最好采用jpg格式。

用途：由于这种极其敏感的平衡特性，JPEG非常适合被应用在那些允许轻微失真的像素色彩丰富的照片场合。反之，JPEG格式图片并不适合做简单色彩色调少的图片，比如LOGO，各种小图标。

我们利用PhotoShop处理好图片并保存为jpg格式时，图像有最佳、高、中、低质量的选项，其图像的大小主要是由质量决定的。对于浏览器而言，用高或中的质量的就可以了。

l GIF

GIF格式：是一种无损8位图片格式。“无损”是指100%的保持原始图片的像素数据信息。专业名词“8位”是指，所能表现的颜色深度——一个8位图像仅最多只能支持256种不同颜色（一个多于256种颜色的图片若用gif图片保存会出现失真）。

用途： 由于8位颜色深度的限制，gif不适合应用于各种色彩过于丰富的照片存储场合。但它却非常适合应用在以下场合：

* logo

* 小图标（Icon）

* 仅包含不超过256种色彩的简单，小型图片场合

GIF动画：一个动态的GIF文件，是由若干帧图片所联结而成的动态图片。在显示时，这些动态帧被反复的绘制读取出来从而形成了简单的动画效果。合理的运用GIF动画能够为网页增添动静结合的效果，而过度的使用则会使网页杂乱无章。

l PNG

PNG格式也是一种无损压缩，但与GIF格式不同的是，PNG同时支持8位和24位的图像。

8位PNG图像：

一个8位PNG图片，支持透明背景且像素颜色不能超过256种。除了压缩算法不同之外，此8位PNG格式与GIF格式极其相似；

用途： 8位PNG图片的用途与GIF格式基本相同。

* Logo

* 小图标（Icon）

* 仅包含不超过256种色彩的简单，小型图片场合

24位PNG图像：

24位PNG，支持160万种不同的像素颜色且支持Alpha透明效果，这就意味着，无论透明度设置为多少，PNG图片均能够与背景很好的融合。

newu · newu

厉害了,强烈支持楼主ing……

bbacc · bbacc

1.1. HTML常用标签

HTML标签虽然有很多，但并不是都经常用到。下面我们开始先学习一些常用的HTML标签。

1.1.1. 标题<title>

在前面的学习中，我们看到过在<head>元素内，有一组<title>标签，这里的<title>就是页面文档文件的标题，我们编写每个页面时，都应该设定具体的标题内容（默认是无标题文档），它的作用非常重要，具体体现在以下几个方面。

l 通常都是是位于浏览器的左上角。

l 作为浏览器中书签的默认名称。

l 搜索引擎通过抓取其内容帮助索引页面。

因此，使用描述站点内容的标题是至关重要的。千万不要将“欢迎访问我的小站”或者“主页”这类的废话用作标题。而是应该采用能够准确描述站点内容的语句。

下面通过一个小例子看下其表现效果，例如：

<head>

<title>芜湖新闻网|中国芜湖|安徽省芜湖市唯一重点新闻门户网站</title>

</head>

表现如图2-3：

图2-3

1.1.2. 标题heading系列h1~h6

人们在写文章时，通常是分若干个章节，根据实际情况在把章节分成多个层次，每个层次添加一个相应的题目，这就是heading。在HTML中heading共有六个元素，从h1至h6。<h1>代表最顶级标题,也叫一级标题，二级标题用<h2>表示，以此类推。

在这六级标题中，h1是最重要的，h6是最不重要的。他们的表现样式是h1最大h6最小。如图2-4所示：

图2-4

严格说，h1标签在一个页面只能用一次。相当于一篇文章的标题，你可以有一个副标题，但不会使用两个并列的标题一样。通常h1标签用来放页面中最重要的信息，如首页上网站的标题、列表页中列表的标题、内容页里文章的标题。

<h1>不仅是最大最突出的标题，搜索引擎也会将其视为仅次于<title>标签的另一个搜索关键词的来源。在后面的章节中我们会通过案例来说明其用法。

h2到h6可以任意使用多次，但它们应依设计意图，该按顺序使用。比如， h3应该是h2的子标题，h4应该是h3的子标题，以此类推。

1.1.3. 段落p

HTML里利用一对p标签表示一个段落，每一个段落都应该包含在起始标记和结束标记之间，例如：

这是铁路线上的一个小站。只有慢车才停靠两三分钟，快车疾驰而过。

你在车上甚至连站名也来不及看清楚，一间红瓦灰墙的小屋，一排白漆的木栅栏，或许还有三五个人影，眨眼就消失了。火车两旁依然是逼人而来的山崖和巨石，这样的小站在北方山区是常见的。

在浏览器显示中，段落通常在下一个段落之前插入一个新行，并添加一小段垂直空间，如下图2-5所示：

图2-5

1.1.4. 换行符br

通常情况下，浏览器会将文本之间的空白字符都转化为一个空格显示，将多余的空白字符过滤掉。例如，我们在代码视图输入包含换行的段落文本：

常记溪亭日暮，

沈醉不知归路。

兴尽晚回舟，

误入藉花深处。

争渡，争渡，

惊起一滩鸥鹭。

我们在浏览器中查看到的效果如下图2-6所示：

图2-6

我们发现，在代码视图中的换行部分，在浏览器中以一个空格显示，如图2-6。

当我们需要在某个地方换行显示时，我们可以使用换行符 ，当我们使用 时，在它后面的内容会另起一行显示。 元素是空元素，它不需要起始和结束标签。

当我们的内容并不希望像段落一样，而是像诗歌一样，可以这样：

常记溪亭日暮，

沈醉不知归路。

兴尽晚回舟，

误入藉花深处。

争渡，争渡，

惊起一滩鸥鹭。

表现效果如图2-7所示

图2-7

1.1.5. 预格式化pre

有时我们需要将预先排好的文本原封不动的显示出来。这时我们就需要用到pre元素。pre可以告诉浏览器它所封装的文本是被预格式化的。先看下的小例子：

*☆∵ ▁▂▄▂▁．★∵∴☆．★∵∴　

∴★◢█████◣* ☆．∴★∵★ * ☆　

☆◢████☆██◣．∴天氣冷了,☆　

◢■◤█████◥█◣．送你一件毛衣,* ★　

◥◤∴█████．◥◤∵小心別著涼了！━┛

<pre>

*☆∵ ▁▂▄▂▁．★∵∴☆．★∵∴　

∴★◢█████◣* ☆．∴★∵★ * ☆　

☆◢████☆██◣．∴天氣冷了,☆　

◢■◤█████◥█◣．送你一件毛衣,* ★　

◥◤∴█████．◥◤∵小心別著涼了！┛

</pre>

上例中的表现效果如下图2-8所示：

图2-8

从图2-8中便可以看出用p和用pre所包含元素的展示效果的区别。通常有pre元素包含代表预格式化的文本，可以让用户的浏览器的空白不动，用一种固定样式展示文本，停用自动的单词换行。以此来保证按照原样来展示预格式化文本。

1.1.6. 图像img

img元素用于在网页中插入图像。

格式： <img src=“图片路径“ alt="图像的替换文本" />

其中src（图像文件名及路径）属性和alt（替换文本）属性是必须的。

l src属性

src属性指加载图像的路径，路径可以是绝对路径，也可以是相对路径。通常我们会为站点中的图片创建独立的目录，如新建文件夹名为images或img，将图片存放在相应的文件夹中，方便管理与调用。

l alt属性

alt属性用于指定图像的替换文本，以防止用户因图像加载失败等原因无法看到图像时可以看到替换的文字。因此alt属性的值必须能够准确地描述图像。例如：

效果如图2-9所示：

图2-9

当图片不存在，或加载失败时，图片区域会显示alt属性里的内容。为了避免因为图片加载失败而导致用户无法得知图片展示内容，以及便于搜索引擎抓取信息，alt属性应尽可能填写。当图片加载失败时，效果如下图2-10：

图2-10

bbacc · bbacc

第1章. XHTML基础

本章开始，向读者介绍XHTML方面的知识，让读者对XHTML有个初步的认识。从而打下网页前端制作的基础。

1.1. 什么是XHTML

XHTML是EXtensible HyperText Markup Language(可扩展标记语言)的缩写，它的前身是HTML4.0是Web上最广泛使用的语言。它通常被看做是XML+HTML，两个词汇的结合。

HTML语法要求比较松散，这样对网页编写者来说，比较方便，但对于机器来说，语言的语法越松散，处理起来就越困难。对于传统的计算机来说，还有能力兼容松散语法，但对于许多其他设备，比如手机，难度就比较大。因此产生了由DTD定义规则，语法要求更加严格的XHTML。

XHTML可以认为是HTML的新版本，XHTML比HTML的语法要求更加严格。例如，在XHTML中元素和属性名称必须小些（早期的HTML版本不区分大小写），每个具有内容的标签必须有对应的结束标签。

因此，每个XHTML页面应当以一个DOCTYPE声明开始，以告诉浏览器该页面中使用的XHTML版本。

目前XHTML的使用的版本标准有着多种选择，包含Transitional，Strict和Frameset三种类型。

l Transitional （过渡型） 该版本仍然允许开发人员使用HTML4中不赞成使用的标记，以帮助用户逐渐适应XHTML。本教材所有实例都是基于该类型，是我们推荐使用的类型。

l Strict（严格型）该类型是一种严格型的应用方式，它不允许使用逐渐淘汰的标记，遵从新的更严格的语法。

l Frameset（框架型）该类型用于创建使用框架技术的Web页面。

1.2. XHTML文档的基本结构

当我们利用Dreamweaver创建一个页面时，你就会发现软件已经帮你写好部分代码，如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

</head>

<body>

</body>

</html>

以上Dreamweaver为我们创建好的代码，我们可以把它理解成两大部分，第一部分是文档头声明：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

我们可以将这部分看做是整个文档的序言。这部分的格式是：

<!DOCTYPE 根元素名 PUBLIC “DTD名称” “DTD_URL”>

文档类型定义（Document Type Definition,DTD）是一套标记的语法规则，DTD主要是对文档中出现的元素进行定义，这被称为元素声明。

以上代码表示，XHTML文档使用了一个公共的DTD，这个DTD的名称为“-//W3C//DTD XHTML 1.0 Transitional//EN”，这个DTD的网址是“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”。从这个DTD的名称可知这个DTD的所有者是W3C，也就是说是有W3C制定的，它是xhtml1-transitional.dtd。

第二部分就是文件本体部分，也就是包含文档的实际内容的部分：

<head>

<title>无标题文档</title>

</head>

<body>

</body>

</html>

从以上代码可以看出来，根元素HTML有两个分支：head和body。他们是根元素HTML的子元素。

l html元素

html是文档的根元素，确定文档的开始与结束。当我们编写Web页面时，整个页面都包含在起始标签<html>和结束标签</html>之间，如以上代码所示。

xmlns属性是代码名域空间，等号右边http://www.w3.org/1999/xhtml是XHTML名域。

l head元素

head部分通常称为页面的头，用来盛放有关文档本身的信息，或设置一些用于文档的特殊功能。head部分的内容至少包含title元素，这是它的最小内容模型。

l body元素

文档的内容主体部分，网页中所有的可见部分都写在这个部分。该元素包含的内容广泛，它是XHTML文档的主要组成部分。

1.3. 标签、元素和属性

由于XHTML是HTML的升级版为，在后面的学习中，我们也将其称之为HTML。

在正式学习HTML之前，我们还是要先了解两个基本概念，即什么是标签？什么是元素？什么是标签的属性？

查看上面例子中的第一行和最后一行代码，可以看到包括HTML的成对的尖括号。两个成对的尖括号和里面的字符称为标签。同时上面的代码中还存在很多标签，如head、title、body这几个都是成对出现的标签。

在成对的标签中，前面的标签称为起始标签，后面的标签成为结束标签。两者的不同点是结束标签在第一个尖括号后面有一个正斜杠。

某对标签和其中包含的内容统称为元素。我们以页面中的常见标签超链接<a>为例来说明，如下图2-1：

图2-1

HTML标签中绝大部分都是双标记成对出现。只有几个特例是单标记。单标记的表示方法是直接在标签后面添加“/ ”如上面的meta标签以及我们后面要学的<img />、 等。

还有一些标签通常是要带有属性和属性值的。因此，还有一点我们必须要明确：什么是标签的属性以及属性的值。上面示例虽然表明它是一个<a>元素，但是我们必须要给其指定属性以及属性值，才能实现正真意义上的链接。

图2-2

如上图2-2所示就是一个简单的链接到百度的文字链接，其中的“a”表示链接标签。

href表示链接的一种属性代表链接到的地址，而引号里的内容就是属性的值。属性和属性值通常都是写在开始标签内，属性与属性值用等号连接。

1.4. XHTML标签与功能简述

结构标签：	文本控制	表格
html [size=9.0000pt] html根元素	p 段落	table 表格
head [size=9.0000pt] html头部元素	h1[size=9.0000pt]～h6 标题[size=9.0000pt]1[size=9.0000pt]～[size=9.0000pt]6[size=9.0000pt]级	tr [size=9.0000pt]行
body [size=9.0000pt] html主体元素	strong 加重重点	td 单元格
div [size=9.0000pt] 区块定义标签	em 重点、强调	th 表头
span [size=9.0000pt] 行间区块定义标签	abbr 定义文本的简写词	tbody 表格主体
Meta信息	address 标签的联系信息	thead 表格头部
Doctype 文档类型指定	cite 行间引用内容	tfoot 表格底部
title 浏览器标题栏	ins 编辑注解：插入内容	col 表格列
link 链接到扩展资源	del 编辑注解：删除内容	colgroup 表格列的集合
meta meta信息	dfn 文本术语注释	caption 表格的标题
style 样式表区域	pre 文本预格式化	表单
脚本	samp 举例	form 表单区域
script 脚本区域	var 文本是一个变量	input 输入框
nescript 无法执行脚本替代	br 回车	textarea 文本框
图像和对象	q 行间小型引用	select 下拉列表
img 插入图像	code 源代码区	option 下拉列表项
area 图像热区细节	blockquote 块状引用内容	optgroup 下拉列表项集合
map 图像热区	abbr 定义文本的简写词	button 按钮
object 插入对象	acronym 定义首字母简写词	label 标签
param 对象的参数	kbd 文本需要键盘输入	fieldset 标签页
列表	表现	legent 标签页的标题
ul 无序列表	b 加粗	链接
ol 有序列表	i 斜体	a 链接
li 列表项	tt 打字机字体	vbase 基础链接类
dl 自定义列表	sub 下标	[size=9.0000pt]
dt 自定义列表的标题	sup 上标	[size=9.0000pt]
dd 自定义列表的描述	hr 分割线	[size=9.0000pt]

以上几乎包含了HTML所有的标签，并不是每一个都会经常用到。在后面的章节我们会学习大部分标签的用法。

倪蓓洁 · 倪蓓洁

厉害了

刘嘉诚 · 刘嘉诚

WEB标准实例出来的非常好，因为一般对于路径非常头疼，老是喜欢搞不清楚访问的路径，这个可以解决实际问题。

敬一 · 敬一

厉害了我的王老师

李雅洁 · 李雅洁

厉害了

那么那么纯洁 · 那么那么纯洁

厉害了

天树123 · 天树123

绮丽 · 绮丽

最6我宾哥

15000604524

6666666666666666666666

小执拗 · 小执拗

厉害厉害

wendyYao · wendyYao

e66666666666

徐子君老师 · 徐子君老师

腻害了

她笑艳阳天 · 她笑艳阳天

厉害了我的斌哥

angelH · angelH

哇哦～～～男神～～～期待后续～～～～

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【上海校区】自编教材《web标准网页制作实例教程》连载

评分

20 个回复