购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

3.1 入门
——基本概念与基本操作

3.1.1 设置头信息

前面介绍过,每一张网页都离不开HTML代码,或者说由HTML脚本所组成的*.htm、*.html文件就是网页文件。一个完整的HTML网页文件包含两个部分,即head部分和body部分。其中head部分包含许多不可见的信息(头信息),例如语言编码、搜索关键字、版权声明、作者信息、网页描述等。而body部分则包含的是网页中可见的内容,例如文字、图片、表格、表单等。

下面就以“胡崧之工作室的网站”为例,说明插入的头部内容。

1.插入META

首先,在Dreamweaver CS5的工作区显示头部内容,步骤说明如下。

1 选择“查看”→“文件头内容”,命令Head的内容会显示在工作区的上部,如图3-1所示。

2 双击头部内容窗口的第一个图标,打开属性面板查看该元素的属性,如图3-2所示。

图3-1 查看头部内容

图3-2 查看属性

3 要插入某种元素,可以选择相应的内容,输入需要的信息,确认操作后,即可往文档的头部添加数据,如图3-3所示。

图3-3 插入作者

下面将介绍META属性的设置。

“属性”下拉列表框中有“HTTP-equivalent”和“名称”两个选项,分别对应HTTPEQUIV变量和NAME变量。

“值”文本框中应输入HTTP-EQUIV变量或NAME变量的值。

“内容”文本框中应输入HTTP-EQUIV变量或NAME变量的内容。

在“属性”下拉列表框里选择“HTTP-equivalent”选项,则对应HTTP-EQUIV变量,此时可以有以下常见设置。

设置网页的文字编码。前面我们已经设置过网页的文字编码,这里是另外一种设置方法。例如,在“值”文本框中填入“Content-Type”,在“内容”文本框中填入“text/html; charset=gb2312”,则设置文字编码为简体中文,如图3-4所示。

图3-4 设置网页的文字编码

设置网页的到期时间。例如在“值”文本框中填入“Expires”,在“内容”文本框中填入“Wed, 20 Jun 200308:20:00 GMT”,则网页在格林威治时间2003年6月20日8点20分过期,此时无法脱机浏览这个网页,必须联网重新浏览这个网页,如图3-5所示。

图3-5 设置网页的到期时间

禁止浏览器从本地缓存中调阅页面内容。例如在“值”文本框中填入“Pragma”,在“内容”文本框中填入“no-cache”,则禁止此页面保存在访问者缓存中。浏览器访问某个页面时会将它存在缓存中,再次访问时就可以从缓存中读取,以提高访问速度。当用户希望访问者每次访问都刷新网页广告的图标,或每次都刷新网页的计数器时,就要禁用缓存了,如图3-6所示。

图3-6 禁止浏览器从本地缓存中调阅页面内容

定时让网页自动转向到其他网页。例如,在“值”文本框中填入“Refresh”,在“内容”文本框中填入“5;URL=http://www.yahoo.com”,则网页打开后5秒钟自动转向地址为http://www.yahoo.com的网页,如图3-7所示。

图3-7 定时让网页自动转向到其他网页

设置cookie过期。例如在“值”文本框中填入“set-cookie”,在“内容”文本框中填入“Wed, 20 Dec 200308:20:00 GMT”,则cookie在格林威治时间2003年12月20日8点20分过期,被自动删除,如图3-8所示。

图3-8 设置cookie过期

提示

cookie是小的数据包,里面包含着关于用户网上冲浪习惯的信息,随后就为互联网上了解cookie的站点所知。cookie的主要用途是广告代理商用来追踪人口统计,查看某个站点吸引了哪种消费者。一些网站还用cookie来保存用户最近的账号信息。这样,当用户进入某个站点(如Amazon.com)而又在该站点有账号时,站点就会立刻知道此用户是谁,自动载入这个用户的个人参数选项。

强制页面在当前窗口以独立页面显示。在“值”文本框中填入“Window-target”,在“内容”文本框中填入“_top”,则可以防止这个网页被显示在其他网页的框架结构里,如图3-9所示。有关框架结构的说明和设置请参见本书相关章节的介绍。

图3-9 强制页面在当前窗口以独立页面显示

设置网页打开时的效果。例如在“值”文本框中填入“Page-Enter”,在“内容”文本框中填入“revealTrans(duration=10, transition=50)”,如图3-10所示。

图3-10 设置网页打开时的效果

设置网页退出时的效果。例如在“值”文本框中填入“Page-Exit”,在“内容”文本框中填入“revealTrans(duration=20, transition=10)”,如图3-11所示。

图3-11 设置网页退出时的效果

设置网页分级。例如在“值”文本框中填入“PICS-Label”,在“内容”文本框中填入“(PICS-1.1″http://www.rsac.org/ratingsv01.html″gen true comment″RSACi North America Server″for″http://www.rsac.org″on ″1996.04.16T08:15-0500″ r (n 0 s0 v 0 l 0))”。在浏览器Internet选项中有一个内容设置,它可以防止浏览一些受限制的网站。浏览器会自动识别某些网站是否受限制,在网站META标签中已经设置好了该网站的级别,该级别的评定是由美国RSAC,即娱乐委员会的评级机构评定的。如果需要评价自己的网站,可以访问http://www.rsac.org,按要求提交表格,RSAC会提供一段META代码,把这段代码复制到“内容”文本框里就可以了,如图3-12所示。

图3-12 设置网页分级

在“属性”下拉列表框里选择“名称”选项,则对应NAME变量,此时会有以下常见设置。

设置网页的搜索引擎关键词。在“值”文本框里填入“keywords”,在“内容”文本框里填入网页的关键词,各关键词用逗号隔开。这是告诉搜索引擎放出的机器人,把“内容”文本框里填入的内容作为网页的关键词添加到搜索引擎。许多搜索引擎都通过放出机器人搜索来登录网站,这些机器人要用到META元素的一些特性来决定怎样登录。如果网页上没有这些META元素,则不会被登录。

设置网页的搜索引擎说明。在“值”文本框里填入“description”,在“内容”文本框中填入网页的说明。这是告诉搜索引擎放出的机器人,把“内容”文本框里填入的内容作为网页的说明添加到搜索引擎。

告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。在“值”文本框中填入“robots”,在“内容”文本框中可填入“all”、“index”、“noindex”、“follow”、“nofollow”或“none”。“all”是默认值,告诉搜索引擎放出的机器人登录此网页,而且可以顺此页的超链接进行检索。“index”是告诉搜索引擎放出的机器人登录此网页。“noindex”是不让搜索引擎放出的机器人登录此网页,但可以顺此页的超链接进行检索。“follow”是告诉搜索引擎放出的机器人顺此页的超链接进行检索。“nofollow”是不让搜索引擎放出的机器人顺此页的超链接进行检索,但可以登录此页。“none”是既不让搜索引擎放出的机器人登录此网页,也不让其顺此页的超链接进行检索。

设置网页编辑器的说明。在“值”文本框中填入“Generator”,在“内容”文本框中填入所用的网页编辑器。这是对使用的网页编辑器的说明。

设置网页作者说明。例如在“值”文本框中填入“Author”,在“内容”文本框中填入“胡崧”,则说明这个网页的作者是胡崧。

设置版权声明。在“值”文本框中填入“Copyright”,在“内容”文本框中填入版权声明。

4 如果希望编辑头部信息,可以在文档窗口的头部窗格中单击相应的标记,然后在属性面板上修改即可,如图3-13所示。

图3-13 编辑头部信息

2.插入关键字

关键字的作用是协助网络上的搜索引擎寻找网页。网站的来访者在大多数情况下是由搜索引擎引导来的。

提示

许多搜索引擎装置(自动浏览网页为搜索引擎收集信息以编入索引的程序)读取关键字META标签的内容,并使用该信息在数据库中将页面编入索引。因为有些搜索引擎限制索引的关键字或字符的数目,或者当超过了限制的数目时,它将忽略所有的关键字,所以最好只使用几个精选的关键字。

插入关键字的步骤说明如下。

1 在“插入”面板中选择“文件头”选项,在“文件头”下拉菜单中,选择如图3-14所示的“关键字”选项。

2 在如图3-15所示的弹出对话框中直接输入关键字即可,不同关键字之间用逗号分隔,单击“确定”按钮后,关键字的信息就设定好了。

图3-14 插入关键字

图3-15 设定关键字

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

图3-16 编辑关键字

通过以上设置后,当有浏览者通过网络上的搜索引擎搜索“胡崧”这个关键字,查找该软件的使用方法时,这个网页的网址就可能被搜索到,同时说明文字会给浏览者更多的关于此网页的信息。

3.插入说明

许多搜索引擎装置读取M ETA标签的内容。有些使用该信息在数据库中将页面编入索引,而有些还在搜索结果页面中显示该信息。

插入说明的步骤说明如下:

1 在“插入”面板中选择“文件头”选项,在“文件头”下拉菜单中,选择如图3-17所示的“说明”选项。

2 在如图3-18所示的弹出对话框中直接写入对页面的说明语句,单击“确定”按钮后,说明的信息就设定好了。

图3-17 插入说明

图3-18 设置说明

3 要编辑描述信息,可以从文档的头部窗口中选中描述标记,然后在属性面板上更改,如图3-19所示。

图3-19 编辑说明

4.插入刷新

刷新主要适用于两种情况:一种情况是网页地址发生变化,可以在原地址的网页上使用刷新功能,规定在若干秒之后让浏览器自动跳转到新的网页;第二种情况是网页经常更新,可以让浏览器在若干秒之后自动刷新网页。

插入刷新的步骤说明如下。

1 在“插入”面板中选择“文件头”选项,在“文件头”下拉菜单中,选择如图3-20所示的“刷新”选项。

2 在弹出的如图3-21所示的“刷新”对话框中,进行下面的设定。

图3-20 插入刷新

图3-21 设定刷新

在“刷新”对话框上,“延迟”后填入一个数值,这是页面延时的秒数。经过这个时间页面即可刷新或转到另外一个页面。

在“刷新”对话框上,“操作”后有“转到URL”和“刷新此文档”两个选项。选择“转到URL”即是经过一段时间后转到另外一个网页。在后面的文本框里填入要转到的页面的地址,或单击“浏览”按钮弹出“选择文件”对话框直接选择。若选择“刷新此文档”,则网页经过一段时间后自动刷新。

例如,我们希望首页停留8秒钟后自动跳转到“猫儿时空”的网站,可以在“延迟”处输入8,在“操作”中选择“转到URL”,然后输入猫儿时空的网址“www.51vc.com”,如图3-22所示。

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

图3-22 设定自动跳转

图3-23 编辑跳转

5.设定基址

网站内部文件之间的链接都是以相对地址的形式出现,在默认情况下,都是相对于首页设置链接,这里称之为基础网页。可以通过头内容设置基础网页的地址,这里简称基址。

设定基址的步骤说明如下。

1 在“插入”面板中选择“常用”,在“文件头”下拉菜单中,选择如图3-24所示的“基础”。

2 在弹出的如图3-25所示的“基础”对话框中,进行下面的设定。

图3-24 插入基础

图3-25 设定基础

在HREF项填入基址网页路径,也可以通过旁边的浏览按钮打开浏览窗口,在本地网站中选取。

在“目标”项中填入打开链接的窗口。

_self是浏览器的默认值,会在当前网页所在的窗口或框架中打开链接的网页;_top会在完整的浏览器窗口中打开网页,去除所有的框架结构。有关框架等内容,请参考后面的章节;_blank在一个新的未命名浏览器窗口中打开链接的网页;_parent代表如果是嵌套的框架,链接会在父框架或窗口中打开,如果不是嵌套的框架,则等同于_top,在整个浏览器窗口中显示。

例如,有一个网页上大量的超链接都基于地址http://www.51vc.com,我们就可以把这个地址设置为基础。这样,假如页面有一个超链接本来要链接到http://www.51vc.com/test.htm,设置了这个基础以后,超链接只写作test.htm即可,方便多了。

又比如,一个网页上大量的超链接都需要在新窗口打开,每个超链接都设置新窗口打开将很麻烦,这时可在“基础”对话框上设置打开方式为新开窗口打开,设置后该网页所有的超链接都会在新窗口里打开。

3 要编辑基址信息,可以从文档的头部窗口中,选中基址标记,然后在属性面板上更改,如图3-26所示。

图3-26 编辑基础

6.设定链接

“链接”设定可以定义当前网页和本地站点中的另一网页之间的关系,让这个另外的文件提供给当前网页文件相关的资源和信息。

设定链接的步骤说明如下。

1 在“插入”面板中选择“常用”,选择“文件头”选项,在“文件头”下拉菜单中,选择如图3-27所示的“链接”选项。

2 在弹出的如图3-28所示的“链接”对话框中,进行下面的设定。

图3-27 插入链接

图3-28 设定链接

在“链接”对话框中,“HREF”用来设置要建立链接关系的文件地址。可以在文本框里输入文件的路径,也可以单击“浏览”按钮弹出浏览框来选择这个文件。

“ID”文本框为链接指定一个唯一的标识符。

“标题”文本框用来描述这个链接的关系。

“Rel”文本框用来指定当前文档与“HREF”文本框中所设置文档之间的关系,可填的值有“Alternate”、“Stylesheet”、“Start”、“Next”、“Prev”、“Contents”、“Index”、“Glossary”、“Copyright”、“Chapter”、“Section”、“Subsection”、“Appendix”、“Help”和“Bookmark”等。“Alternate”表示替代关系;“Stylesheet”表示调用样式表;“Start”表示开始关系;“Next”表示下一步关系;“Prev”表示上一步关系;“Contents”表示内容关系;“Index”表示索引关系;“Glossary”表示术语表关系;“Copyright”表示版权关系;“Chapter”表示章关系;“Section”表示节关系;“Subsection”表示小节关系;“Appendix”表示附录关系;“Help”表示帮助关系;“Bookmark”表示书签关系。如果要指定多个关系,需要用空格将各个值隔开。

“Rev”文本框用来指定当前文档与“HREF”文本框中所设置文档之间的相反关系(与Rel 相对),可填的值同“Rel”文本框一样,有“Alternate”、“Stylesheet”、“Start”、“Next”、“Prev”、“Contents”、“Index”、“Glossary”、“Copyright”、“Chapter”、“Section”、“Subsection”、“Appendix”、“Help”和“Bookmark”等。如果要指定多个关系,需要用空格将各个值隔开。

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

图3-29 编辑链接

3.1.2 设置页面属性

将网页编辑窗口切换到源代码视图,会看到一对<body></body>标记,网页的主体部分就位于这两个标记之间。body作为一个对象,会有许多相关的属性,本节就将围绕这些属性的设置展开。这其中将包括网页的标题、网页颜色、背景图片等设置。

在编辑窗口下,选择“修改→页面属性”命令,打开“页面属性”设置对话框,如图3-30所示,页面属性的设置包括以下方面。

图3-30 页面属性设置对话框

1.设置外观

Dreamweaver CS5将页面属性设置分为许多类别,其中“外观”是设置页面的一些基本属性,如图3-31所示。

在“页面字体”后面的文本框中可以定义页面中默认文本的字体。

在“大小”后面的文本框中可以定义页面中默认文本的字号。

在“文本颜色”后面的文本框中可以设置网页文本的颜色。颜色设置的具体方法请参见后面章节的介绍。

图3-31 外观选项

在“背景颜色”后面的文本框中可以设置网页的背景颜色。一般情况下,背景颜色都设置成白色,在文本框里输入“#ffffff”。如果在这里不设置颜色,常用的浏览器也会默认网页的背景色是白色,但低版本的浏览器会显示网页的背景色为灰色。为了增强网页的通用性,这里还是需要对背景色进行设置。

在“背景图像”后面的文本框中可以填入网页背景图像的路径,给网页添加背景图像。注意,为避免出现问题,此时应填入相对路径,而不要使用绝对路径。相对路径和绝对路径将在稍后介绍。也可以单击文本框后的“浏览”按钮,弹出“选择图像源文件”对话框,如图3-32所示。

图3-32 选择图像源

在“选择图像源文件”对话框中定位并选择要设置为背景的图像文件,单击“确定”按钮即可使用这个图像作为背景图像。

提示

如果背景图像没有填满整个窗口,Dreamweaver CS5会平铺背景图像,若要防止背景图像平铺,请使用CSS 样式表禁用图像平铺(详见后面的章节)。

在“左边距”后面的文本框中可以设置网页左边空白的宽度。比如,设置为8,则网页左边界距浏览器左边框为8个像素。只有Internet Explorer浏览器支持。

在“上边距”后面的文本框中可以设置网页顶部空白的高度。比如,设置为8,则网页上边界距浏览器顶部边框为8个像素。只有Internet Explorer浏览器支持。

在“右边距”后面的文本框中可以设置网页右边空白的宽度。比如,设置为8,则网页右边界距浏览器右边框为8个像素。只有Internet Explorer浏览器支持。

在“下边距”后面的文本框中可以设置网页底部空白的高度。比如,设置为8,则网页下边界距浏览器底部边框为8个像素。只有Internet Explorer浏览器支持。

2.设置链接

在“链接”选项中设置和页面链接相关的项目,如图3-33所示。

图3-33 链接选项

在“链接字体”后面的文本框内定义页面超链接文本在默认状态下的字体。

在“大小”后面的文本框内定义超链接文本的字体大小。

在“链接颜色”后面的文本框中可以设置网页里超链接的颜色。

在“已访问链接”后面的文本框中可以设置网页里访问过的超链接的颜色。

在“活动链接”后面的文本框中可以设置网页里激活的超链接的颜色。

在“变换图像链接”指定光标移动到文本链接上方时文本字体改变为何种颜色。

在“下划线样式”后面的文本框中可以设置网页里鼠标上滚时采用何种下划线。

3.设置标题

在“标题”选项中设置标题字体的一些属性,如图3-34所示。

图3-34 标题选项

标题字体:定义标题的字体。

标题1: 定义一级标题的字号和颜色。

标题2: 定义二级标题的字号和颜色。

标题3: 定义三级标题的字号和颜色。

标题4: 定义四级标题的字号和颜色。

标题5: 定义五级标题的字号和颜色。

标题6: 定义六级标题的字号和颜色。

4.设置标题和编码

在“标题/编码”选项中设置网页标题与文字编码,如图3-35所示。

图3-35 标题/编码选项

在“标题”文本框中可以填入网页标题。

在“编码”后面的下拉列表中可以设置网页的文字编码。一般把这里设置成中文,应选择简体中文(GB2312)。

5.设置跟踪图像

在“跟踪图像”选项中设置跟踪图像的属性,如图3-36所示。

图3-36 跟踪图像选项 kGP7M8+PaMSHjrTXZGJG6q7qFBLrjSKzWx18uSdOhczqLiW/+7KIZ4JaP7sPnSQq

点击中间区域
呼出菜单
上一章
目录
下一章
×