前面介绍过,每一张网页都离不开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 编辑链接
将网页编辑窗口切换到源代码视图,会看到一对<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 跟踪图像选项