第二章 静态网页制作基础 
 

一、预备知识：静态网页概述

　　初期的网站都是由静态网页组成的，网页中只有文字、图形、图像等，用户只能被动地接受这些信息。那时的Web页面的核心是HTML(一种标记语言)，它编写很方便，不要求有特定的语言环境，可以用任何一种编辑器写好，便可以放到浏览器观看结果。现在HTML已经有许多专门的编辑软件，如FrontPage、Hotdog、Dreamweaver等。
　　最初的Web是完全的静态，仅仅提供大量的信息服务，没有服务器端／客户端的概念。“静态”指的就是网站的网页内容“固定不变”。当用户浏览器通过互联网的HTTP (Hyper text Transfer Protocol)协议向Web服务器请求提供网页内容时，服务器仅仅是将原已设计好的静态HTML文档传送给用户浏览器。其页面的内容使用的是标准HTML代码，再加上GIF格式的动态图片。

二、工作内容

　　静态网页制作概括起来，有如下几个部分：
1、网页素材搜集与制作（图像处理与动画制作）
　　经常需要在网页中应用一些图像与动画，一方面是由于实际内容的需要，一方面是为了增加网页吸引力。在WWW上通常采用jpeg、GIF格式的图片和gif89a、flash等格式的动画。
2、网页版式设计
　　规划各元素在网页中的位置关系和表现方法，合理安排图像、文本等元素，使网页布局合理、美观大方。
3、文本编写
　　自己的网页中需要大量的文字材料，这就要在网页编辑器中用HTML语言中的标签编写。也可以利用网页编辑工具的“所见即所得”功能，直接写入文字。
4、处理网页之间的关联
　　这主要是建立合理、高效的网页导航系统。 
5、网页发布
　　主要是将建设好的网页上传到服务器中供用户浏览。

三、静态网页的制作工具

1、图像处理与动画制作工具：Photoshop、Flash等。
2、网页编辑工具：1）纯文本编辑工具，如Notepad等；2）转换工具，如word等；3）专用工具，如FrontPage、Dreamweaver等。
3、网页上传工具：1)FTP工具，如WS-FTP，CuteFTP等；2)专用网页编辑软件的文件传输功能。
4、网页优化工具：网页减肥茶、网页优化大师等。

四、网页制作工作步骤
1、步骤：1）制作网页--> 2）浏览器预览--（满意）---> 4）发布
　　　　　　　　个　　　　　　　　｜
　　　　　　　　 L--------(不满意)--| 　　　　　　　 
2、工作台： 网页编辑器<=======>网页浏览器

第二章 静态网页制作基础 

第一节 HTML基本知识
第二节 HTML重要标签
第三节 URL、路径、图像及超级链接

一、HTML简介

　　HTML是Hypertext Markup Language(超文本标志语言)的缩写，它是构成Web页面(Page)的主要工具，是用来表示网上信息的符号标志语言。
　　在网上，如果要向全球范围内出版和发布信息，需要有一种能够被广泛理解的语言，即所有的计算机都能够理解的一种用于出版的母语。WWW(World Wide Web)所使用的出版语言就是HTML语言。通过HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML翻译成可以识别的信息，就是现在所见到的网页。

HTML的功能
1)出版在线的文档，其中包含了标题、文本、表格、列表以及照片等内容。
2)通过超链接检索在线的信息。
3)为获取远程服务而设计表单，可用于检索信息、定购产品等。
4)在文档中直接包含表格数据、视频剪辑、声音剪辑以及其他的一些应用。

学习HTML的意义
　　便于优化专用工具生成的代码；为编写ASP等网络程序奠定基础。

HTML的编写工具
　　用HTML编写的文件(文档)的扩展名是．HTML或．HTM。它们是供浏览器解释浏览文件的格式。可以使用记事本、写字板等编辑工具来编写HTML文件。HTML语言使用标志对(标签)的方法来编写文件，既简单又方便。它通常使用<标志名>来表示标志的开始和结束(例如标志对)，因此在HTML文档中这样的标志对都必须是成对使用的。 
　　在今天，做网页的工具到处都是,只要动几下鼠标，一个精彩的网页就出来了，HTML是否要学呢？答案是肯定的，因为工具就是工具，它们生成的代码是机械的，不够简洁，使网页打开的速度减慢。还有很多新的功能，工具是生成不了的。必需对代码进行编辑。

HTML文件的本质
　　HTML文件的实质是以.htm或.html为扩展名的纯文本文件。

html文件的格式
　查看网页源文件，可见html文件的格式如下：





……………………


　　其中省略号部份是网页的内容,其实每个标记都是一一对应的。每个网页文件都是以开始和以结束。之间的内容是网页的标题。会显示在浏览器的标题栏上。与之间放的是网页内容。

标志（tag）的结构特点 
　　1、用<>包围。
　　2、多数成对出现。
　　3、结束标记用/。
　　4、标签是嵌入式的。
　　5、标签可有多种属性和属性值。 
　　6、标签用西文半角字符，对大小写不敏感。

HTML文件的组成
　　头部和主体
　　标志和普通文本 

文件标题标志
文件标题标志为。使用过浏览器的人可能都会注意到浏览器窗口最上边的蓝色部分显示的文本信息，那些信息一般是网页的主题。要将网页的主题显示到浏览器的顶部其实很简单，只要在标志对之间加入要显示的文本即可。

颜色表示方法
　　HTML用#RRGGBB字符串代表色彩，成为RGB值。RGB值中的RR、GG和BB分别代表红绿蓝三原色的两位十六进制整数值。每种原色的取值范围在00和FF（即十进制的0和255）之间，即一个字节存储一种原色。每种原色都有256种由浅至深的色彩变化，网页中呈现的色彩都是由这三种原色调配出来的。rgb值可以表示出（256*256*256）种颜色。

常用颜色举例

黑色	白色	绿色	黄色	红色	蓝色
#000000	#FFFFFF	#00FF00	#FFFF00	#FF0000	#0000FF

二、HTML基础

页面格式标志
在网页设置中，会用到HTML页面设置、列表设置等格式标志。
段落标志
预处理文本

换行标志


列表标志
1、定义列表
　　

用来创建一个定义列表，

用来创建列表中的上层项目，用来创建列表中最下层项目，和都必须放在

标志对之间。

 

源代码	效果
中国城市 北京 上海 广州 美国城市 华盛顿 芝加哥 纽约	中国城市  北京  上海  广州  美国城市  华盛顿  芝加哥  纽约

2、有序列表和无序列表

 

源代码	效果
北京 上海 广州 美国城市   华盛顿 芝加哥 纽约   中国城市	中国城市 1. 北京  2. 上海  3. 广州  美国城市 · 华盛顿  · 芝加哥  · 纽约

标题格式标志
　　HTML语言提供了一系列对文本中的标题进行操作的标志对：

 

文本标志
用来使文本以黑体字的形式输出。
用来使文本以斜体字的形式输出。
用来使文本以下加一划线的形式输出。
下标
上标
用来输出打字机风格字体的文本。
用来输出引用方式的字体，通常是斜体。
用来输出需要强调的文本(通常是斜体加黑体)。
则用来输出加重文本(通常也是斜体加黑体)。
设定文本的字体大小、颜色、字体名等，通过属性size、color、face的控制来实现。size属性用来改变字体的大小，它可以取值：-N、N和+N；而color属性则用来改变文本的颜色；face属性值为系统中现有的字体，如“楷体_GB2312”。为保证在客户端浏览器中显示正确字体的网页，不要使用非系统自带的特殊字体，如“华文彩云繁”等。

特殊字符

©	＆copy；	®	®；	™	＆＃153;
±	＆plusmn;	空格	＆nbsp;	¥	＆yen;

网页图像格式
　　JPEG、GIF、PNG格式。
1、可交换图像文件格式 (GIF)
　　由于几乎所有的 Web 浏览器都支持 GIF 格式（文件扩展名为 .gif），因而该格式是万维网上最常用的两个图像文件格式之一。由于此格式最多仅可以显示 256 种颜色，因而最适于黑白线条图形、彩色剪辑图片和具有大块实心颜色的图片。GIF89a 格式也同时支持透明和动画。GIF 文件用于：
　　包含透明区域的图像。 
　　有限的彩色，例如 256 色或更少。 
　　离散区域中的彩色。 
　　黑白图像。 
　　小尺寸图像，例如站点上的按钮。 
　　清晰度和边缘清晰度很重要的图形，例如线条图形或卡通。 
　　包含文本的图像。 
　　动画。
2、联合摄影专家组 (JPEG)
　　JPEG 格式（文件扩展名为 .jpg 或 .jpeg）是 Web 上的另一个最常用的图像文件格式。它不局限于 256 色，因此您可以使用它来显示高质量的照片或包含上百万种颜色的图片。由于它被设计为图像存储格式，因而可以有效地将高质量的大照片压缩为非常紧密的文件，这在您用电子邮件发送大图像时很有用。然而，您将图像文件的大小压缩的越多（或修改并重新保存图像），图像信息的丢失也越多——并且质量也会下降。此外，该格式不支持透明和动画。JPEG 文件用于：
　　照片。 
　　自然视觉效果图像。 
　　大数量的颜色，例如上百万。 
　　具有大量细节的图像，例如房地产站点上房屋的照片。 
　　大尺寸的图像。
3、可移植网络图形 (PNG)
　　PNG 格式（文件扩展名为 .png）可以显示上百万种颜色。然而，由于它是一种新的格式，当前只有很少的浏览器可以支持（尽管它正快速获得支持）。以这种格式保存的图像，即便将文件压缩，其质量也不会降低。它支持透明，但不支持动画（因为它不能包含多个图像）。

图像标志
　　图像在网页制作中担任着非常重要的角色。HTML语言也专门提供了标志来处理图像的输出。
　　标志并非真正地将图像融入到HTML文档中，而是标明图像文件的存放位置。
　　src属性是标志中不可缺少的一部分,必须赋值，其值是图形文件的存放位置和文件名。。
　　align是图像的对齐方式。
　　border属性是图像的边框，可以取大于或者等于０的整数，默认单位是像素。
　　width和height属性是图像的宽和高，默认单位也是像素。
　　alt属性是当鼠标移动到图像上时显示的文本。

图像实例
中国医科大学 border=1>

水平线标志

---

标志是在HTML文档中加入一条水平线，它可以直接使用，具有size、color、width和noshade属性：
　　size是设置水平线的厚度。
　　width是设定水平线的宽度，默认单位是像素。
　　noshade属性不用赋值，而是直接加入标志即可使用，它是用来加入一条没有阴影的水平线(不加入此属性，水平线将有阴影)。

表格标志
　　表格标志对于制作网页是很重要的，现在很多网页都是使用多重表格，主要是因为表格不但可以固定文本或图像的输出，而且还可以任意地进行背景和前景颜色的设置。可见表格在网页排版中的作用。
　　 标志对用来创建一个表格，有如下属性：

属性	用途
bgcolor	设置表格的背景色
border	设置边框的宽度，若不设置此属性，则边框宽度默认为0
bordercolor	设置边框的颜色
bordercolorlight	设置边框明亮部分的颜色(当border的值大于等于1时才有用)
bordercolordark	设置边框昏暗部分的颜色(当border的值大于等于1时才有用)
cellspacing	设置表格的单元格之间的空间大小
cellpadding	设置表格的单元格边框与其内部内容之间的空间大小
width	设置表格的宽度，单位用绝对像素值或总宽度的百分比
align	表格在网页中的位置

　　表格的定义顺序是先定义行，再定义该行中的单元格。 标志对用来创建表格中的每一行。此标志对只能放在

标志对之
间使用，而在此标志对之间加入文本将是无用的，因为在 之间只能紧跟   标志对才是有效的语法。   标志对用来创建单元格，此标志对只有放在 标志对之间才是有效的，输入的文本也只有放在   标志对中才有效(即才能够显示出来)。
  具有width、colspan、rowspan和nowrap属性：
　　width是单元格的宽度，单位用绝对像素值或总宽度的百分比。
　　colspan设置一个表格单元格跨占的列数(缺省值为1)。
　　rowspan设置一个表格单元格跨占的行数(缺省值为1)。
表格实例：

 
1单元格跨越多行
2
3

 
4
5

 
6
7单元格跨越多列

１单元格 跨越多行	２	３
	４	５
６	７单元格跨越多列

超级链接[重点]

1、网页内部链接 点击链接热点，网页跳转到资源片段：
　　定义链接热点#资源片段名>到资源片段 
　　定义资源片段资源片段

2、相对路径、站内绝对路径、绝对路径
　　相对路径：相对于当前文档 [../的用法]
　　站内绝对路径：相对于网站根 [/的用法]
　　绝对路径：资源在网上完整的存放地址，网址。

3、网页间链接
　　链接文字
　　例：中文主页 

4、网站间链接
　　网站间的链接，必须使用目标资源的绝对路径，从协议开始。如新浪网

5、链接到电子邮件地址
　　语法格式：

将图像作为超级链接的锚点
　　语法： 

活动字幕标记—marquee［参考资料］
　　活动字幕，也称为滚动看板、滚动字幕。活动字幕的使用使得整个网页更有动感，显得很有生气。现在的网站中也越来越多地使用活动字幕来加强网页的互动性。用Javascript编程可以实现活动字幕效果；用Dreamweaver的图层再用其时间线功能可以做出非常漂亮的滚动看板。而用HTML的活动字幕标记所需的代码最少，确实能够以较少的下载时间换来较好的效果。该标记语法格式如下： 

behavior=type height＝n hspace＝n scrollamount=n Scrolldelay=n width=n VSpace=n loop＝n>
字母内容

　　各参数的含义： 
align：是设定活动字幕的位置，不过除了居左、居中、居右三种位置外，又增加靠上（align=top）和靠下（align=bottom）两种位置。 
Bgcolor：用于设定活动字幕的背景颜色，一般是十六进制数。 
Direction：用于设定活动字幕的滚动方向是向左、向右、向上、向下。 
Behavior：用于设定滚动的方式，主要由三种方式：behavior=scroll表示由一端滚动到另一端；behavior=slide:表示由一端快速滑动到另一端，且不再重复； behavior=alternate表示在两端之间来回滚动。 
Height：用于设定滚动字幕的高度。 
Width：则设定滚动字幕的宽度。 
Hspace和vspace：分别用于设定滚动字幕的左右边框和上下边框的宽度。 
Scrollamount：用于设定活动字幕的滚动距离。 
scrolldelay：用于设定滚动两次之间的延迟时间。 
Loop：用于设定滚动的次数，当loop=-1表示一直滚动下去，直到页面更新。 
实例：




微软窗口 
　　初始叶面.htm name=iframe> 
　　说明：src属性为窗口载入的初始网页；name属性指明窗口的名称，它和标签的target属性相对应。

 

…

 

，即一共有6对标题的标志对。

 

是最大的标题，而

 

则是最小的标题，也即是标志中h后面的数字越大标题文本就越小。如果HTML文档中需要输出标题文本，就可以使用这6对标题标志对中的任何一对。

标志对用来创建一个有序列表；标志对用来创建一个无序列表；

标志对只能在或标志对之间使用，此标志对用来创建一个列表项。