设置网页属性

《设置网页属性》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、实验3设置网页属性实验要求通过实验，掌握设置网页属性和插入文件投标签的方法；了解网页属性和文件头标签对网页制作的意义。　说明网页属性是新建文档时首先需要设计的。它可以确定字体、大小、链接、标题、编码等整体网页风格。在网页属性中的设置会自动生成样式代码。对应知识点：设置网页属性定义网页的文件头内容对应《MacromediaDreamweaverMX2004标准教程》第3章的内容。实验课时：1课时实验素材实验2中创建的HTML网页。实验步骤1．启动DreamweaverMX2004程序，选择菜单“文件”“打开”命令，在“打开”对话框中选择

2、实验２中完成的“page.htm”网页，打开此文件。如图3-1所示。2．选择菜单“文件”“另存为”命令，打开“另存为”对话框，选择文件保存路径，在“文件名”编辑框内输入文件保存名称“page03”。如图3-2所示。　说明在这里使用“另存为”命令，相当于复制了一个文件。原来的page.html依然保存在以前的路径中。在网页制作过程中，如果想继续保持原来的网页风格，属性设置，文本内容等，经常会用到“保存为”命令。图3-1打开page.htm文件图3-2另存文件为page03.html3．单机“保存”按钮，此时文件page.htm变为pag

3、e03.html。下面在新复制的文件上进行网页属性的设置。4．在属性面板中，单机“页面属性”按钮按钮，或选择菜单“修改”“页面属性”命令，打开“页面属性”对话框。如图3-3所示。　　　　说明　使用“页面属性”对话框，指定布局和格式设置属性。在“页面属性”对话框中可以指定页面的默认字体和字体大小、背景颜色、编距、链接样式及页面设计的许多其他方面。用户可以为每个新页面制定页面属性，也可以修改现有页面的属性。　　　５．在“分类”列表中选择“外观”选项，右侧显示外观的编辑区域。在“大小”下拉列表内选择“14”，在后面的单位列表中选择“像素（p

4、x）”。此时网页中的文字大小被设置为14像素。6．单机“文本颜色”按钮，打开调色板，使用吸管工具选择颜色。如图3-4所示。在“文本颜色”编辑框内显示的是所选颜色的色标值。图3-3“页面属性”对话框图图3-4在调色板中吸取文本颜色　说明如果知道所需颜色的色标值，也可直接在“文本颜色”编辑框内输入该值。在调色板中单击“系统颜色拾取器”按钮按钮。可以在“颜色”对话框中选择更多颜色。如图3-5所示。7．在“背景颜色“编辑框中输入颜色标值#E1F7FF，设置背景颜色为浅颜色。8．单击“背景图像”编辑框右侧的“浏览”按钮，打开图3-5系统颜色拾取

5、器具“选择图像源文件”对话框。在对话框内选择要设置为背景图像的图像，单击“确定”按钮。如图3-6所示。背景图像的路径和文件名显示将在编辑框内。说明如果背景图像没有填满整个窗口，Dreamweaver会平铺（重复）背景图像，就像浏览器所做的那样。（要防止背景图像平铺，可使用层叠样式表。）在“页面属性”中，如果即设置了背景颜色，又设置了背景图像，那么，当浏览网页时，用户看到的网页将只显示“背景图像”。但是，如果设置的背景图像具有透明属性，则在背景图像透明的区域显示出背景颜色。９．设置左边距、右边距、上边距和下边距分别为20像素，表示网页中

6、的内容与浏览器边框的距离为20像素。以上内容设置完后，“页面属性”对话框如图3-7所示。图3-6“选择图像源文件”对话框图3-7“页面属性”对话框中“外观”区域的设置10．选择“分类”列表中的“链接”命令，右侧切换到“链接”区域。在其中设置链接文件的相关属性。在“链接颜色”和“已访问链接”编辑框内输入色标值＃FF0000，在“变换图像链接”编辑框内输入色标值＃003399。11．在“下划线样式”下拉列表中选择“仅在变换图像时显示下划线”命令。“页面属性”对话框如图3-8所示。说明在页面属性中“链接字体”和“大小”通常使用默认设置，链接

7、文字状态将继承在“外观”中的字体和大小的设置。12．选择“分类”列表中的“标题/编码”命令，右侧切换到“标题/编码”区域。在“标题”编辑框内输入其网页在标题栏显示的标题名称，这里我们输入文字“系统集成”；在“编码”下拉列表中选择“简体中文（GB2312）”选项。如图3-9所示。　　说明　在“编码”下拉列表中，有各种不同语言或版本的编码选项，根图3-8“页面属性”对话框中“链接”区域的设置图3-9“页面属性”对话框中“标题和编码”区域的设置据制作网页所用语言选择相应的编码。如，繁体中文（Big5），日文，韩文等，英文网页选项“西欧”选项

8、。13．单击“确定”按钮，返回网页编辑区，看到网页效果如图3-10所示。说明网页标题栏袁兰显示的“无标题文档”，现在显示为“系统集成”。背景平铺了的背景图像。14．下面制作“下一页”的文字，才可以查看到链接效果。把光标定