1.4 设置页面属性

网页设计是一个网页创作的过程，是根据客户需求从无到有的过程，网页设计具有很强的视觉效果、互动性、操作性等其他媒体所不具有的特点。

一个成功的网页设计，首先在观念上要确立动态的思维方式，其次要有效地将图形引入网页设计中，提高人们浏览网页的兴趣。在崇尚鲜明个性风格的今天，网页设计应该增加个性化的因素。

网页设计并非是纯粹的技术型工作，而是融合了网格应用技术与美术设计两个方面。因此，对从业人员来说，仅掌握网页设计制作的相关软件是远远不够的，还需要有一定的美术功底和审美能力。在网络世界中，有许多设计精美的网页值得我们去学习欣赏，如图1-84所示。本节将介绍网页背景的设计方法，帮助用户迈出网页设计的关键一步。

图1-84 精美的网页背景

实战018 设置网页背景的颜色

实例位置：光盘\效果\第1章\实战018.html

素材位置：光盘\素材\第1章\实战018.html

视频位置：光盘\视频\第1章\实战018.mp4

实例介绍

在网页中合理地应用背景色彩是非常关键的，不同的色彩搭配产生不同的效果，并能够影响用户的情绪。

操作步骤

STEP 01 单击“文件”|“打开”命令，打开一幅网页文档，如图1-85所示。

图1-85 打开网页文档

STEP 02 单击“修改”|“页面属性”命令，如图1-86所示。

图1-86 单击“页面属性”命令

STEP 03 弹出“页面属性”对话框，单击“背景颜色”右侧的拾色器按钮，如图1-87所示。

图1-87“页面属性”对话框

STEP 04 弹出“拾色器”窗口，移动色相滑块至合适位置处，如图1-88所示。

图1-88 移动色相滑块

知识扩展

色彩在人类的生活中都是有丰富的感情和含义的，常见颜色的代表意义如下。

红色可以使人联想到玫瑰、喜庆以及兴奋。

白色可以使人联想到纯洁、干净和简洁。

紫色象征着女性化、高雅和浪漫。

蓝色象征着高科技、稳重和理智。

橙色代表了欢快、甜美和收获。

绿色代表了充满青春的活力、舒适和希望等。

当然，在特定的场合下，同种的色彩也可以代表不同的含义。在网页中更要合理使用色彩，一个网站不可能单一地运用一种颜色，这样容易让用户感觉单调、乏味。但是也不可能将所有的颜色都运用到网站中，会让用户感觉轻浮、花哨。一个网站必须有一种或两种主题色，一个页面尽量不要超过4种色彩，用太多的色彩让用户感到没有方向，没有侧重。当主题色确定好以后，考虑其他配色时，一定要考虑其他配色与主题色的关系，要体现什么样的效果。

STEP 05 移动光亮度滑块至合适位置处，如图1-89所示。

图1-89 移动光亮度滑块

STEP 06 移动Alpha滑块至合适位置处，如图1-90所示。

图1-90 移动Alpha滑块

STEP 07 执行操作后，即可设置“背景颜色”选项，如图1-91所示。

图1-91 设置“背景颜色”选项

STEP 08 单击“确定”按钮，即可设置网页文档的背景颜色，效果如图1-92所示。

图1-92 设置网页文档的背景颜色

实战019 设置网页的背景图像

实例位置：光盘\效果\第1章\实战019.html

素材位置：光盘\素材\第1章\实战019.html

视频位置：光盘\视频\第1章\实战019.mp4

实例介绍

文本和图像是网页中最基本的构成元素，在任何的网页中，这两种基本的构成元素都是必不可少的，它们可以用最直接、最有效的方式向浏览者传达信息。而网页设计人员需要考虑如何把这些元素以一种更容易被浏览者接受的方式组织起来放到网页中去，对于网页中的基本构成元素（文本和图像），大多数浏览器本身都可以显示，无须任何外部程序或模块支持。随着技术的不断发展，更多的元素会在网页艺术设计中得到应用，使浏览者可以享受到更加完美的效果。在新技术不断发展的大环境下，网页设计的要求也在不断提高，而新技术也让网页设计提高到了更高的层次。

网页之所以丰富多彩，都是因为有了图像，可见图像在网页中的重要性。在网页中既可以通过图像的形式表达主题，也可以通过图像对网页起一个装饰作用。图像在网页中的作用是无可替代的，一幅精美合适的图片，往往可以胜过数篇洋洋洒洒的文字，如图1-93所示。

图1-93 以图片作为网页背景

操作步骤

STEP 01 单击“文件”|“打开”命令，打开一幅网页文档，如图1-94所示。

图1-94 打开网页文档

STEP 02 展开“属性”面板，单击“页面属性”按钮，如图1-95所示。

图1-95 单击“页面属性”按钮

STEP 03 弹出“页面属性”对话框，单击“背景图像”右侧的“浏览”按钮，如图1-96所示。

图1-96“页面属性”对话框

STEP 04 弹出“选择图像源文件”对话框，选择相应的背景图像文件，如图1-97所示。

图1-97 选择相应的背景图像文件

STEP 05 单击“确定”按钮，即可添加背景图像文件，如图1-98所示。

图1-98 添加背景图像文件

STEP 06 单击“应用”和“确定”按钮，即可设置网页的背景图像，效果如图1-99所示。

图1-99 设置网页的背景图像

STEP 07 单击“在浏览器中预览/调试”按钮，在弹出的列表框中选择相应的预览方式，如图1-100所示。

图1-100 选择相应的预览方式

STEP 08 执行操作后，即可在打开的浏览器中预览网页，效果如图1-101所示。

图1-101 预览网页效果

实战020 设置网页的页面链接

实例位置：光盘\效果\第1章\实战020.html

素材位置：光盘\素材\第1章\实战020.html

视频位置：光盘\视频\第1章\实战020.mp4

实例介绍

链接是网站的灵魂，从一个网页指向另一个目的端的链接。例如，指向另一个网页或相同网页上的不同位置。这个目的端通常是另一个网页，但也可以是一幅图片、一个电子邮件地址、一个文件、一个程序或者是本页中的其他位置。超链接可以是文本或者图片，如图1-102所示，其中既有文本链接，又有图像链接，而且还可以通过导航栏进行超链接。

在网页中，一般文字上的超链接都是蓝色（当然，用户也可以自己设置成其他颜色），文字下面有一条下划线。网页上的超链接一般分为以下3种。

第一种是绝对URL的超链接。URL（Uniform Resource Locator）就是统一资源定位符，简单地讲就是网络上的一个站点、网页的完整路径。

第二种是相对URL的超链接。如将自己网页上的某一段文字或某标题链接到同一网站的其他网页上面去。

第三种称为同一网页的超链接，这种超链接又叫作书签。

操作步骤

STEP 01 单击“文件”|“打开”命令，打开一幅网页文档，如图1-103所示。

图1-103 打开网页文档

STEP 02 展开“属性”面板，单击“页面属性”按钮，如图1-104所示。

图1-104 单击“页面属性”按钮

STEP 03 弹出“页面属性”对话框，选择“分类”列表框中的“链接（CSS）”选项，切换至相应选项卡，如图1-105所示。

图1-105 选择“链接（CSS）”选项

STEP 04 在“链接（CSS）”选项卡中，设置“链接颜色”为蓝色（#0815FC），如图1-106所示。

图1-106 设置“链接颜色”

STEP 05 在“大小”列表框中选择36选项，如图1-107所示。

图1-107 设置“大小”

STEP 06 在“下划线样式”列表框中选择“始终无下划线”选项，如图1-108所示。

图1-108 设置“下划线样式”

STEP 07 单击“确定”按钮，即可设置网页的链接属性，效果如图1-109所示。

图1-109 设置网页的链接属性

STEP 08 按【F12】键保存网页后，即可在打开的IE浏览器中看到网页效果，如图1-110所示。

图1-110 预览网页效果

实战021 设置网页的标题属性

实例位置：光盘\效果\第1章\实战021.html

素材位置：无

视频位置：光盘\视频\第1章\实战021.mp4

实例介绍

在浏览一个网页时，通过浏览器顶端的显示条出现的信息就是网页标题，如图1-111所示。网页标题是对一个网页的高度概括，一般来说，网站首页的标题就是网站的正式名称，而网站中文章内容页面的标题就是文章的题目，栏目首页的标题通常是栏目名称。当然这种一般原则并不是固定不变的，在实际工作中可能会有一定的变化，但无论如何变化，总体上仍然会遵照这种规律。

图1-111 网页的标题信息

在网页HTML代码中，网页标题位于<head>和</head>标签之间，其形式如图1-112所示。其中“360导航_新一代安全上网导航”就是这一网站首页的标题。

图1-112 网页的标题信息

例如，看到很多网站的首页标题较长，除了网站名称（公司名称）之外，还有网站相关业务之类的关键词，这主要是为了在搜索引擎检索结果中获得排名优势而考虑的，也属于正常的搜索引擎优化方法。因为一般的公司名称（或者品牌名称）中可能不包含核心业务的关键词，这样当用户通过核心业务来检索时，如果网站标题中没有这样的关键词，在搜索结果排名中将处于不利地位。

网页标题的设置技巧如下。

（1）既简洁、醒目又能概括主要信息。每个网页都应该有自己独立的标题，对企业网站而言尤其是每个产品具体内容页面更应正视网页标题的设计。网页标题体现网页的核心内容，并含有有效关键词。网页标题与网页正文内容应该具有高度相关性。

知识扩展1

当用户通过搜索引擎检索时，在检索结果页面中的内容一般是网页标题（加链接）和网页摘要信息。要引起用户的关注，网页标题发挥了很大的作用，如果网页标题和页面摘要信息有较大的相关性，摘要信息对网页标题将发挥进一步的补充作用，从而引起用户对该网页信息点击行为的发生（也就意味着搜索引擎推广发挥了作用）。另外，当网页标题被其他网站或者本网站其他栏目/网页链接时，一个概括了网页核心内容的标题有助于用户判断是否点击该网页标题链接。

（2）站在一个搜索者的角度思考。想想这标题对于那些在寻找问题解答的人来讲，他们在百度或者谷歌等搜索引擎上会不会敲下这几个字。如果是几乎不可能或者极少人会想到用你这个标题来查找信息的，那么建议换另外一个。

（3）网页标题不宜过短或者多长。一般来说6～10个汉字比较理想，最好不要超过30个汉字。网页标题字数过少可能包含不了有效关键词，字数过多不仅搜索引擎无法正确识别标题中的核心关键词，而且也让用户难以对网页标题（尤其是首页标题，代表了网站名称）形成深刻印象，也不便于其他网站链接。

（4）网页标题中应含有丰富的关键词。考虑到搜索引擎营销的特点，搜索引擎对网页标题中所包含的关键词具有较高的权重，尽量让网页标题中含有用户检索所使用的关键词。以网站首页设计为例，一般来说首页标题就是网站的名称或者公司名称，但是考虑到有些名称中可能无法包含公司/网站的核心业务，也就是说没有核心关键词，这时通常采用“核心关键词+公司名/品牌名”的方式来作为网站首页标题。

（5）主关键字的词频都并非越大越好，而是有一定的限制。很多人以为标题中主关键字出现的次数越多越好，于是在标题中不断地重复该关键字。实际上，不管在页面的什么位置，主关键字的词频都并非越大越好，而是有一定的限制。通常，在标题中主关键字出现3次以内，每个辅关键字只出现1次是比较合理的。

知识扩展2

在标题中，即使主、辅关键字及词频都相同，表达方式也各有不同。以下是两种最常见的标题表达方式。

方式1:<title>影视 |电视剧 </title>

方式2:<title>影视- 打造全国最好最全的电视剧网站</title>

这两种表达方式除了能有效提高主关键字“影视”的词频外，还增加了意义相近的辅关键字“电视剧”。其中，方式1中采取的是多个关键字简单排列的形式；而方式2则采取的是对主关键字进行描述的形式，这样不但更能得到搜索引擎的青睐，同时也更能吸引用户的点击。

（6）符合搜索引擎的检索的需要。每一个网页都应该有一个能正确描述该网页内容的独立的标题，正如每个网页都应该有一个唯一的URL一样，这是一个网页区别于其他网页的基本属性之一。

操作步骤

STEP 01 在Dreamweaver中新建一个空白网页文档，在“标题”文本框中输入“影视 | 电视剧”，如图1-113所示。

图1-113 输入标题

STEP 02 展开“属性”面板，单击“页面属性”按钮，如图1-114所示。

图1-114 单击“页面属性”按钮

STEP 03 弹出“页面属性”对话框，选择“分类”列表框中的“标题（CSS）”选项，切换至相应选项卡，如图1-115所示。

图1-115 选择“标题（CSS）”选项

STEP 04 在“标题字体”列表框中，选择相应的字体样式，如图1-116所示。

图1-116 选择相应的字体样式

STEP 05 单击“确定”按钮，按【F12】键保存网页后，即可在打开的IE浏览器中预览网页效果，如图1-117所示。

图1-117 预览网页效果

实战022 设置网页的标题编码

实例位置：无

素材位置：无

视频位置：光盘\视频\第1章\实战022.mp4

实例介绍

“标题/编码”页面属性类别可指定特定于制作Web页面时所用语言的文档编码类型，以及指定要用于该编码类型的Unicode标准化表单。

操作步骤

STEP 01 新建一个空白网页文档，展开“属性”面板，单击“页面属性”按钮，弹出“页面属性”对话框，选择“分类”列表框中的“标题/编码”选项，切换至相应选项卡，如图1-118所示。

图1-118 切换至相应选项卡

STEP 02 “标题”文本框用于指定在“文档”窗口和大多数浏览器窗口的标题栏中出现的页面标题，用户可以在此输入相应的标题内容，如图1-119所示。

图1-119 输入标题

STEP 03 “文档类型（DTD）”用于指定文档类型定义，如图1-120所示。例如，可从弹出式菜单中选择“XHTML 1.0 Transitional”或“XHTML 1.0 Strict”，使 HTML文档与XHTML兼容。

图1-120“文档类型（DTD）”列表框

STEP 04 “编码”用于指定文档中字符所用的编码，如图1-121所示。

图1-121“编码”下拉列表框

STEP 05 “Unicode 标准化表单”选项仅在选择UTF-8作为文档编码时启用，如图1-122所示。

图1-122“Unicode 标准化表单”列表框

STEP 06 选中“包括 Unicode 签名（BOM）”复选框，即可在文档中包括字节顺序标记（BOM），如图1-123所示。单击“确定”按钮即可完成设置。

图1-123 选中“包括 Unicode 签名（BOM）”复选框

知识扩展1

“Unicode 标准化表单”列表框中有4种Unicode 标准化表单，最重要的是标准化表单C，因为它是用于万维网的字符模型的最常用表单。Macromedia提供其他3种Unicode标准化表单作为补充。在Unicode中，有些字符看上去很相似，但可用不同的方法存储在文档中。例如，“”（e 变音符）可表示为单个字符“e 变音符”，或两个字符“正常拉丁语 e”+“组合变音符”。Unicode组合字符是与前一个字符结合使用的字符，因此变音符会显示在“拉丁语 e”的上方。这两种形式都显示为相同的印刷样式，但保存在文件中的每种形式是不同的。

标准化是指确保可用不同形式保存的所有字符都使用相同的形式进行保存的过程。即，文档中所有“”字符都保存为单个“e 变音符”或“e”+“组合变音符”，而不是在一个文档中保存为这两种形式。

知识扩展2

BOM是位于文本文件开头的2～4个字节，可将文件标识为Unicode，如果是这样，还标识后面字节的字节顺序。由于UTF-8没有字节顺序，因此可以选择添加UTF-8 BOM。对于UTF-16和UTF-32，在文档中包括字节顺序标记（BOM）是必需的。

实战023 设置网页的跟踪图像

实例位置：无

素材位置：无

视频位置：光盘\视频\第1章\实战023.mp4

实例介绍

“跟踪图像”选项可以让设计者在设计页面时插入用作参考的图像文件。

操作步骤

STEP 01 新建一个空白网页文档，展开“属性”面板，单击“页面属性”按钮，弹出“页面属性”对话框，选择“分类”列表框中的“跟踪图像”选项，切换至相应选项卡，如图1-124所示。

STEP 02 在“跟踪图像”选项卡中，单击“跟踪图像”选项右侧的“浏览”按钮，如图1-125所示。

图1-124 切换至相应选项卡

图1-125 单击“浏览”按钮

知识扩展

不少人喜欢在网页中加上背景图案，认为如此可以增加美观程度，但却不知这样会耗费传输时间，而且容易影响阅读视觉，反而给予用户不好的印象。因此，若没有绝对必要，最好避免使用背景图案，保持干净清爽的背景。但如果真的喜欢使用背景，那么最好使用单一色系，而且要跟前景的文字可以明显区别，最忌讳使用花哨多色的背景，因为这样不仅大量耗费传输与显示时间，而且会严重影响阅读。

STEP 03 弹出“选择图像源文件”对话框，选择相应的图像源文件，如图1-126所示。

图1-126 选择相应的图像源文件

STEP 04 单击“确定”按钮，即可添加跟踪图像，如图1-127所示。

图1-127 添加跟踪图像

STEP 05 设置“不透明度”为80%，如图1-128所示。

图1-128 设置“不透明度”

STEP 06 单击“确定”按钮，即可在设计窗口显示相应图像，如图1-129所示。

图1-129 显示相应图像

上一章目录下一章