通俗基础教程
电脑操作教程
电脑怎样拨号上网
如何做个人网页
怎样做局域网
Word教程(文字处理)
图形图象处理入门
经典提高教程
怎样使用代理服务器
如何做无盘工作站
Photoshop教程
Dreamweaver3教程
Flash4&5教程
Firework3教程
Frontpage2000教程
Authware教程
Office2000教程
如何制作动画图片
OICQ&ICQ使用方法

高手学习指南

硬件升级技巧
CGI教程
ASP教程

PHP教程

注册表使用技巧
路由器的设置
网站建设指南
SQL
最近更新:
Dreamweaver
相关内容

Dreamweaver3完全教程(21)
全套教程打包下载

编辑网页的头部内容
 

我们已经知道,一个HTML文件,通常由包括在<head>和</head>标记间的头部,和包括在<body>和</body>标记的正文两个部分组成。文档的标题信息就存储在HTML的头部位置,在浏览页面时,它会显示在浏览器的标题栏,当将页面放入浏览器的“收藏夹”时,文档的标题又会作为收藏夹中项目的名称。

除了标题之外,头部还可以包括很多非常重要的信息,例如文档的类型、语言的解码方式、JavaScript和VBScript的函数和变量,以及针对每个引擎的关键字和内容指示符等。

一般来说,不需要输入全部的头部内容。但是最好为文档设置标题和解码方式信息,养成良好的创作习惯。

要往文档的头部添加信息,您可以按照如下方法进行操作:

如果在文档窗口中,没有显示头部内容,可以打开“View”(查看)菜单,选择“Head Content”(头部内容)命令,显示文档的头部内容。
在对象面板上,打开其上的下拉菜单,选择“Head”(头部),显示同HTML头部相关的对象按钮,如图 3-19所示。

图 3-19 对象面板上的头部元素按钮

要插入某种元素,可以单击相应的按钮,这时会出现一个对话框。
输入需要的信息,确定操作,即可往文档的头部添加数据。
如果希望编辑头部信息,可以在文档窗口的头部窗格单击选中相应的标记,然后在属性面板上修改。
 

注意:除了使用对象面板之外,也可以通过打开“Insert”(插入)菜单,选择“Head”(头部),再选择相应的命令来实现头部元素的插入。为了说明简单,我们后面将只使用对象面板来插入头部元素。

认识头部元素
元数据(meta data)是HTML头部的主要组成部分主要用于表示一个文档的页面信息,这些信息可以被计算机识别,用于某些特定的场合。在HTML中,元数据的表现方式是多种多样的。

除了元数据之外,在HTML头部还可以包含其他类型的标记,例如<base>标记和<link>标记等,我们都在后面进行介绍。

<meta>标记
<meta>标记是实现元数据的主要标记,它能够提供文档的关键字、作者、描述等多种信息,在HTML的头部可以包括任意数量的<META>标记。

<meta>标记是非封闭类型的标记,它包括如下几种属性:

name = string

name属性用于定义一个元数据属性的名称,其中string是用于表示名称的字符串。

content = cdata

content属性用于定义元数据的属性值,其中cdata表示相关数据。

scheme = cdata

scheme属性说明用于解释元数据属性值的机制,其中cdata表示相关数据。

http-equiv = string

http-equiv属性可以用于替代name属性,HTTP服务器可以使用该属性来从HTTP响应头部收集信息,其中string是用于表示名称的字符串。

charset = encoding

charset属性用于定义文档的字符解码方式,其中encoding表示解码方式。

在HTML规范中,并没有硬性指定的属性标准,因此用户可以自行定义元数据。

例如,可以采用如下语句定义作者信息。

<meta name = "author" content = "周明涛">

有些搜索引擎使用关键字(keywords)和描述(description)来进行搜索。这时,在文档中可以提供如下语句:

<meta name = "keywords" content = "周明涛, 微文工作室, Zhou Mingtao, Microtext">

<meta name = "description" content = "微文工作室周明涛制作的主页">

 

<base>标记
<base>标记定义了文档的基础URL地址,在文档中所有的相对地址形式的URL都是相对于这里定义的URL而言的。一篇文档中的<base>标记不能多于一个,必须放于头部,并且应该在任何包含URL地址的语句之前。

<base>包含如下的属性:

href = url

href属性指定了文档的基础URL地址。该属性在<base>标记中是必须存在的。

例如,如果希望将文档的基础URL定义为“http://www.microsoft.com”,则可以使用如下语句:

<base href = "http://www.microsoft.com">

当定义了基础URL地址之后,文档中所有引用的URL地址都从该基础URL地址开始,例如,对于上面的语句,如果文档中一个超级链接指向china/document.html,则它实际上指向的是如下URL地址:

http://www.microsoft.com/china/document.html

target = frameset

target属性同框架一起使用,它定义了当文档中的链接被点击后,哪一个框架集中展开页面。如果文档中超级链接没有明确指定展开页面的目标框架集,则就使用这里定义的地址代替。

其中frameset可以被设置如下的值,请参看表 3-2。

 表 3-2 target的属性值

属性值 含义
_blank 表明在新窗口中展开链接指向的页面
_self 在当前文档的框架集中展开页面
_parent 在当前文档的父级框架集中展开页面
_top 在链接所在的完整窗口中展开页面

<link>标记
<link>标记定义了文档之间的包含。在HTML的头部可以包含任意数量的<link>标记。有些浏览器并不能很好处理link属性,因此不建议使用它。

<link>标记带有很多属性,下面是一些常用的属性:

href = url

href属性指向链接资源所在的URL,其中url是链接的地址。

title = string

title属性用于描述该链接关系。其中string是描述关系的字符串。

rel = linktype

rel属性定义了文档和所链接资源的链接关系,其中,linktype表明链接类型,可能的值包括Alternate,Stylesheet,Start,Next,Prev,Contents,Index,Glossary,Copyright,Chapter,Section,Subsection,Appendix,Help,和Bookmark等。如果希望指定不止一个链接关系,可以在这些值之间用空格隔开。

rev = linktype

rev属性定义了文档和所链接资源之间的反向关系。其中linktype表明链接类型,其可能的取值同rel属性相同。

插入元数据
 

利用Dreamweaver可以很方便地插入任意类型的元数据,您可以按照如下方法进行操作:

单击对象面板上的下拉列表,选择“Head”(头部)。
单击对象面板上的“Insert Meta”(插入元数据)按钮。
这时会出现如图 3-20所示的对话框,提示您输入元数据。


图 3-20 插入元数据

Attribute(属性) 在该下拉列表中,可以选择两种类型的属性:name和http-equiv。
Value(值) 在该文本框中,可以输入属性值。
Content(内容) 在该文本框中,可以输入属性内容。
设置完毕,按下“OK”按钮,确定操作。
图 3-20所示的情形实际上输入的是如下的代码:

 

<meta name="author" content="周明涛">

 

在这里也可以指定文档的解码方式,例如,要将文档的解码方式设置为中文简体,可以在“Attribute”(属性)下拉列表中选择“http-equiv”,在“Value”文本框中输入“Content-Type”,在“Content”(内容)文本框中输入“text/html; charset=gb2312”即可。这实际上是输入了如下的代码:

 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

 

如果希望编辑插入的元数据,可以首先显示文档的头部窗格,单击元数据标记,即可在属性面板上进行编辑,如图 3-21所示。

 

 图 3-21 选中元数据时的属性面板

插入关键字
 

关键字信息仍然属于元数据的范畴,但是由于它经常被使用,Dreamweaver额外定义了相应的插入命令,允许直接插入关键字属性。

您可以按照如下方法操作:

单击对象面板上的“Insert Keywords”(插入关键字)按钮。
这时会出现如图 3-22所示的对话框,允许您输入关键字信息。

图 3-22 插入关键字

输入相应的关键字信息,多个关键字之间可以使用逗号隔开。
按下“OK”按钮,确定操作。
图 3-22显示的操作,实际上等同于输入了如下语句:

 

<meta name="keywords" content="周明涛,微文工作室">

 

要编辑关键字信息,可以从文档的头部窗格中,选中关键字标记,然后在属性面板上修改,如图 3-23所示。

 

 

图 3-23 编辑关键字时的属性面板

插入描述信息
 

描述信息也属于元数据的范畴,Dreamweaver单独提供了插入描述信息的方法,您可以按照如下步骤进行操作:

单击对象面板上的“Insert Description”(插入描述)按钮。
这时会出现一个对话框,提示您输入描述信息,该对话框同图 3-22所示的对话框类似。
输入描述信息。
按下“OK”按钮确定操作。
该操作相当于输入如下的语句,其中content的值就是这里输入的描述信息。
 

<meta name="description" content="微文工作室周明涛的主页">

要编辑描述信息,可以从文档的头部窗格中,选中描述标记,然后在属性面板上修改。

定义自动刷新
 

您可以为网页设置自动刷新特性,让它在被浏览器显示时,隔一段指定的时间,然后跳转到某个页面或是重新刷新自身。

您可以按照如下步骤进行操作:

单击对象面板上的“Insert Refresh”(插入刷新)按钮,这时会出现如图 3-24所示的对话框。

图 3-24 定义刷新特性

在“Delay...seconds”(隔...秒)文本框中,可以输入网页刷新的间隔时间。
在“Action”(动作)区域可以设置刷新的动作,您可以指定在指定的时间间隔到达后跳转到某个页面上,或是仅仅重新在浏览器中刷新自身。
设置完毕,按下“OK”按钮,确定操作。
自动刷新特性目前已经被越来越多的网页所使用。例如,可以首先在一个页面上显示欢迎信息,经过一段时间,自动跳转到指定的网页上。另外一种使用自动刷新特性的原因是网站地址的迁移,这时可以首先在原先网址的主页上显示新的网址信息,以通知访问旧网址的用户,然后经过一段时间,自动跳转到新地址上。

图 3-24的设置实际上添加了如下的语句,我们可以看到,它仍然是元数据的一种表现形式。 

<meta http-equiv="refresh" content="10;URL=www.microsoft.com"> 

要编辑自动刷新设置,可以从文档的头部窗格中,选中刷新标记,然后在属性面板上修改,如图 3-25所示。
注意:需要展开属性面板看到定义延迟时间的文本框。

 

图 3-25 设置自动刷新时的属性面板

设置基础URL地址
 

如果希望为文档中的URL设置基础URL地址,可以按照如下方法进行操作:

单击对象面板上的“Insert Base”(插入基础)按钮,这时会出现如图 3-26所示的对话框。

图 3-26 插入基础URL地址

在“Href”文本框中输入基础URL地址,也可以单击“Browse”按钮,选择基础地址路径,这实际上设置的是<base>标记的href属性。
在“Target”下拉列表框中,可以选择链接文档在哪个框架集中被打开,这实际上设置的是<base>标记的target属性值。
设置完毕,按下“OK”按钮,确定操作。
图 3-26操作实际上生成的是如下语句:
 

<base href="www.microsoft.com" target="_parent"> 

要编辑基础URL地址,可以从文档的头部窗格中,选中基础标记,然后在属性面板上修改,如图 3-27所示。

 

 图 3-27 编辑URL基础时的属性面板

设置文档链接
 

使用<link>标记可以定义文档和引用资源之间的链接关系。在Dreamweaver中,可以通过如下方法实现:

单击对象面板上的“Insert Link”(插入链接)按钮,这时会打开如图 3-28所示的对话框。

图 3-28 设置文档链接关系

在“Href”文本框中输入链接资源所在的URL地址,或单击“Browse”按钮从磁盘或网络上选择,这里实际上设置的是<link>标记的href属性。
在“ID”文本框中输入ID值,这实际上设置的是<link>标记的ID属性。
在“Title”文本框中输入对该链接的描述,这里实际上设置的是<link>标记的title属性。
在“Rel”和“Rev”文本框中输入文档同链接资源的链接关系,这里实际上设置的是<link>标记的rel属性和rev属性。
设置完毕,按下“OK”按钮,确定操作。
图 3-28的设置实际上输入了如下语句:

 

<link href="file:///C|/WINNT/Web/Tip.htm" id="Tip" rel="Alternate" rev="Alternate" title="Tips">

 

要编辑链接关系,可以从文档的头部窗格中,选中链接标记,然后在属性面板上修改,如图 3-29所示。

 

 图 3-29 编辑链接关系时的属性面板

Dreamweaver3完全教程(1)
Dreamweaver3完全教程(2)
Dreamweaver3完全教程(3)
Dreamweaver3完全教程(4)
Dreamweaver3完全教程(5)
Dreamweaver3完全教程(6)
Dreamweaver3完全教程(7)
Dreamweaver3完全教程(8)
Dreamweaver3完全教程(9)
Dreamweaver3完全教程(10)
Dreamweaver3完全教程(11)
Dreamweaver3完全教程(12)
Dreamweaver3完全教程(13
Dreamweaver3完全教程(14)
Dreamweaver3完全教程(15)
Dreamweaver3完全教程(16)
Dreamweaver3完全教程(17)
Dreamweaver3完全教程(18)
Dreamweaver3完全教程(19)
Dreamweaver3完全教程(20)
Dreamweaver3完全教程(21)
Dreamweaver3完全教程(22)
Dreamweaver3完全教程(23)
Dreamweaver3完全教程(24)
Dreamweaver3完全教程(25)
Dreamweaver3完全教程(26)
Dreamweaver3完全教程(27)
Dreamweaver3完全教程(28)
Dreamweaver3完全教程(29)
Dreamweaver3完全教程(30)
 
 
 
 
教程站
收集整理
服务大家