
2.4 设置网页的页面属性
网页设计是一个网页创作的过程,是根据客户需求从无到有的过程,网页设计具有很强的视觉效果、互动性、操作性等特点。
一个成功的网页设计,首先在观念上要确立动态的思维方式,其次要有效地将图形引入网页设计中,提高人们浏览网页的兴趣。在崇尚鲜明个性风格的今天,网页设计应该增加个性化的因素。
网页设计并非是纯粹的技术型工作,而是融合了网格应用技术与美术设计两个方面。因此,对从事人员来说,仅掌握网页设计制作的相关软件是远远不够的,还需要有一定的美术功底和审美能力。本节将介绍网页背景的设计方法,帮助用户迈出网页设计的关键一步。
2.4.1 设置网页背景的颜色
在网页中合理地应用背景色彩是非常关键的,不同的色彩搭配产生不同的效果,并能影响用户的情绪。
素材文件 光盘\素材\第2章\2.4.1\Index.html
效果文件 光盘\效果\第2章\2.4.1\Index.html
视频文件 光盘\视频\第2章\2.4.1 设置网页背景的颜色.mp4
步骤01 单击“文件”|“打开”命令,打开一个网页文档,如图2-29所示。
步骤02 单击“修改”|“页面属性”命令,如图2-30所示。

图2-29 打开网页文档

图2-30 单击“页面属性”命令
步骤03 弹出“页面属性”对话框,单击“背景颜色”右侧的拾色器按钮,如图2-31所示。
步骤04 弹出拾色器面板,在其中选择相应的背景颜色色块,如图2-32所示。

图2-31 “页面属性”对话框

图2-32 选择颜色色块
步骤05 执行操作后,即可设置“背景颜色”选项,如图2-33所示。
步骤06 单击“确定”按钮,即可设置网页文档的背景颜色,效果如图2-34所示。

图2-33 设置“背景颜色”选项

图2-34 设置网页文档的背景颜色
2.4.2 设置网页的背景图像
文本和图像是网页中最基本的构成元素,在任何网页中,这两种基本的构成元素都是必不可少的,它们可以用最直接、最有效的方式向浏览者传达信息。而网页设计人员需要考虑如何把这些元素以一种更容易被浏览者接受的方式组织起来放到网页中去,对于网页中的基本构成元素(文本和图像),大多数浏览器本身都可以显示,无须任何外部程序或模块支持。随着技术的不断发展,更多的元素会在网页艺术设计中得到应用,使浏览者可以享受到更加完美的效果。在新技术不断发展的大环境下,网页设计的要求也在不断提高,而新技术也让网页设计提高到了更高的层次。
素材文件 光盘\素材\第2章\2.4.2\index.html
效果文件 光盘\效果\第2章\2.4.2\index.html
视频文件 光盘\视频\第2章\2.4.2 设置网页的背景图像.mp4
步骤01 单击“文件”|“打开”命令,打开一个网页文档,如图2-35所示。
步骤02 展开“属性”面板,单击“页面属性”按钮,如图2-36所示。

图2-35 打开网页文档

图2-36 单击“页面属性”按钮
步骤03 执行操作后,弹出“页面属性”对话框,单击“背景图像”右侧的“浏览”按钮,如图2-37所示。
步骤04 弹出“选择图像源文件”对话框,选择相应的背景图像文件,如图2-38所示。

图2-37 “页面属性”对话框

图2-38 “选择图像源文件”对话框
步骤05 单击“确定”按钮,即可添加背景图像文件,如图2-39所示。
步骤06 单击“应用”和“确定”按钮,即可设置网页的背景图像,效果如图2-40所示。

图2-39 添加背景图像文件

图2-40 设置网页的背景图像
2.4.3 设置网页的页面链接
链接是网站的灵魂,从一个网页指向另一个目的端的链接。超链接可以是文本或者图片,其中既有文本链接,又有图像链接,而且还可以通过导航栏进行超链接。
在网页中,一般文字上的超链接都是蓝色(用户也可以设置成其他颜色),文字下面有一条下画线。网页上的超链接一般分为以下3种。
第一种:绝对URL超链接。简单地讲,URL(Uniform Resource Locator,统一资源定位符)就是网络上的一个站点、网页的完整路径。
第二种:相对URL超链接。如将自己网页上的某一段文字或某标题链接到同一网站的其他网页。
第三种:同一网页的超链接,这种超链接又称书签。
在网页文档中,展开“属性”面板,单击“页面属性”按钮,如图2-41所示。弹出“页面属性”对话框,选择“分类”列表框中的“链接(CSS)”选项,切换到“链接(CSS)”选项卡,在其中用户可以设置链接页面的字体大小、链接颜色以及下画线样式等,如图2-42所示,设置完成后,单击“确定”按钮,即可完成页面链接的属性设置。

图2-41 单击“页面属性”按钮

图2-42 “链接(CSS)”选项卡