[Dreamweaver设置网页属性.doc

实验3 设置网页属性 实验要求 通过实验，掌握设置网页属性和插入文件投标签的方法；了解网页属性和文件头标签对网页制作的意义。 　 说明 网页属性是新建文档时首先需要设计的。它可以确定字体、大小、链接、标题、编码等整体网页风格。在网页属性中的设置会自动生成样式代码。 对应知识点： 设置网页属性 定义网页的文件头内容 实验素材 实验2中创建的HTML网页。 实验步骤 1．启动Dreamweaver MX 2004程序，选择菜单“文件” “打开”命令，在“打开”对话框中选择实验２中完成的“page.htm”网页，打开此文件。如图3-1所示。 2．选择菜单“文件” “另存为”命令，打开“另存为”对话框，选择文件保存路径，在“文件名”编辑框内输入文件保存名称“page03”。如图3-2所示。 　 说明 在这里使用“另存为”命令，相当于复制了一个文件。原来的page.html依然保存在以前的路径中。在网页制作过程中，如果想继续保持原来的网页风格，属性设置，文本内容等，经常会用到“保存为”命令。 图3-1 打开page.htm 文件 图3-2 另存文件为page03.html 3．单机“保存”按钮，此时文件page.htm变为page03.html。下面在新复制的文件上进行网页属性的设置。 4．在属性面板中，单机“页面属性”按钮按钮 ，或选择菜单“修改” “页面属性”命令，打开“页面属性”对话框。如图3-3所示。 　　　 　 说明　使用“页面属性”对话框，指定布局和格式设置属性。在“页面属性”对话框中可以指定页面的默认字体和字体大小、背景颜色、编距、链接样式及页面设计的许多其他方面。用户可以为每个新页面制定页面属性，也可以修改现有页面的属性。 　　　５．在“分类”列表中选择“外观”选项，右侧显示外观的编辑区域。在“大小”下拉列表内选择“14”，在后面的单位列表中选择“像素 （px）”。此时网页中的文字大小被设置为14像素。 6．单机“文本颜色”按钮，打开调色板，使用吸管工具选择颜色。如图3-4所示。在“文本颜色”编辑框内显示的是所选颜色的色标值。 图3-3 “页面属性”对话框图 图3-4 在调色板中吸取文本颜色 　 说明 如果知道所需颜色的色标值，也可直接在“文本颜色”编辑框内输入该值。在调色板中单击“系统颜色拾取器”按钮按钮。可以在“颜色”对话框中选择更多颜色。如图3-5所示。 7．在“背景颜色“编辑框中输入颜色标值#E1F7FF，设置背景颜色为浅颜色。 8．单击“背景图像”编辑框右侧的“浏览”按钮，打开图3-5 系统颜色拾取器具 “选择图像源文件”对话框。在对话框内选择要设置为背景图像的图像，单击“确定”按钮。如图3-6所示。背景图像的路径和文件名显示将在编辑框内。 说明 如果背景图像没有填满整个窗口，Dreamweaver会平铺（重复）背景图像，就像浏览器所做的那样。（要防止背景图像平铺，可使用层叠样式表。） 在“页面属性”中，如果即设置了背景颜色，又设置了背景图像，那么，当浏览网页时，用户看到的网页将只显示“背景图像”。但是，如果设置的背景图像具有透明属性，则在背景图像透明的区域显示出背景颜色。 ９．设置左边距、右边距、上边距和下边距分别为20像素，表示网页中的内容与浏览器边框的距离为20像素。以上内容设置完后，“页面属性”对话框如图3-7所示。 图3-6 “选择图像源文件”对话框 图3-7 “页面属性”对话框中“外观”区域的设置 10．选择“分类”列表中的“链接”命令，右侧切换到“链接”区域。在其中设置链接文件的相关属性。在“链接颜色”和“已访问链接”编辑框内输入色标值＃FF0000，在“变换图像链接”编辑框内输入色标值＃003399。 11．在“下划线样式”下拉列表中选择“仅在变换图像时显示下划线”命令。“页面属性”对话框如图3-8所示。 说明 在页面属性中“链接字体”和“大小”通常使用默认设置，链接文字状态将继承在“外观”中的字体和大小的设置。 12．选择“分类”列表中的“标题/编码”命令，右侧切换到“标题/编码”区域。在“标题”编辑框内输入其网页在标题栏显示的标题名称，这里我们输入文字“系统集成”；在“编码”下拉列表中选择“简体中文（GB2312）”选项。如图3-9所示。 　　说明　 在“编码”下拉列表中，有各种不同语言或版本的编码选项，根 图3-8 “页面属性”对话框中“链接” 区域的设置