设置网页属性.doc

实验3 设立网页属性 实验规定通过实验，掌握设立网页属性和插入文献投标签的措施；理解网页属性和文献头标签对网页制作的意义　 阐明 网页属性是新建文档时一方面需要设计的它可以拟定字体、大小、链接、标题、编码等整体网页风格在网页属性中的设立会自动生成样式代码相应知识点： 设立网页属性 定义网页的文献头内容相应《Macromedia Dreamweaver MX 原则教程》第3章的内容实验学时：1学时 实验素材 实验2中创立的HTML网页 实验环节1．启动Dreamweaver MX 程序，选择菜单“文献” “打开”命令，在“打开”对话框中选择实验２中完毕的“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，在“变换图像链接”编辑框内输入色标值＃00339911．在“下划线样式”下拉列表中选择“仅在变换图像时显示下划线”命令页面属性”对话框如图3-8所示阐明 在页面属性中“链接字体”和“大小”一般使用默认设立，链接文字状态将继承在“外观”中的字体和大小的设立12．选择“分类”列表中的“标题/编码”命令，右侧切换到“标题/编码”区域在“标题”编辑框内输入其网页在标题栏显示的标题名称，这里我们输入文字“系统集成”；在“编码”下拉列表中选择“简体中文（GB2312）”选项如图3-9所示　　阐明　 在“编码”下拉列表中，有多种不同语言或版本的编码选项，根 图3-8 “页面属性”对话框中“链接” 区域的设立 图3-9 “页面属性”对话框中“标题和编码”区域的设立 据制作网页所用语言选择相应的编码如，繁体中文（Big5），日文，韩文等，英文网页选项“西欧”选项13．单击“拟定”按钮，返回网页编辑区，看到网页效果如图3-10所示阐明 网页标题栏袁兰显示的“无标题文档”，目前显示为“系统集成”。

背景平铺了的背景图像14．下面制作“下一页”的文字，才可以查看到链接效果把光标定位在文本主体内容的结尾处，按Enter键换行在属性面板中单击“右对齐”按钮按钮，输入文字“下一页”15．拖动鼠标选项中“下一页”文字，在属性面板“链接”编辑框内输入“＃”，制作无址链接此时文字由本来的黑色显示为红色如图3-11所示图3-10 “页面属性”设立后的网页效果 图3-11 制作“下一页”文字链接16．在网页编辑框口中，不能看到鼠标通过时链接文字的显示效果要查看效果，可按Ctrl+S快捷键保存网页，然后按F12键，打开IE浏览器窗口查看链接文字的状态如图3-12所示17．返回Dreamweaver 编辑窗口，选择“插入”　“HTML” “文献头标签”　　“核心字”命令在打开的“核心字”对话框中输入“系统集成，网络，方案”等核心字如图3-13所示18．单机“拟定”按钮，返回网页编辑窗口按文档面板的“拆分”按钮按钮，切换到代码视图和设计模式在…代码之间显示了核心字代码：图3-12 鼠标通过时文字显示效果 阐明 在“核心字”对话框中输入的网页内容有关的“核心字”，可以提高在搜索引擎中查找网页的精确率，并提高访问量。

19．选择“插入” “文献头标签” “刷新”命令，打开“刷新“对话框在对话框“延迟”编辑框内输入10，表达每10秒钟刷新一次网页在“操作”区选择“刷新此文档”单选钮如图3-14所示20．单击“拟定”按钮，在代码编辑窗口…代码之间显示了刷新代码：如图3-15所示 阐明 “刷新”功能常用在BBS或聊天室中，或在某些常常更新的网页中也会用到它使网页浏览者可以随时看到网页更新的内容在“刷新”对话框中“转到URL”命令，可以实现页面跳动的功能当估计顾客应当阅读完此网页内容后，自动跳转到其她网页这项功能对于网页内容比较少的广告类页面使用的较多单击编辑框右侧的“浏览”按钮，可以选择跳转到的网页，或直接输入URL网址图3-13 “核心字”对话框 图3-14 “刷新”对话框 图3-15 代码窗口中显示的文献头标签 21．单击“设计”按钮按钮，返回设计视图模式选择菜单“文献” “保存”命令或按Ctrl+S键，保存网页 22．按F12键，自动弹出浏览器窗口查看网页效果，如图3-16所示。

图3-16 在浏览器中查看网页 实验作业 模仿 1． 打开实验2中制作完毕的网页page.htm，另存为page03.html2．在“页面属性”对话框中，设立网页的字体大小、背景颜色、文本颜色、背景图像，以及上、下 、左、右的边距3．在“页面属性”对话框中，设立文本链接的状态在“页面属性”对话框中，设立网页标题和编码编辑文献头标签，设立网页“核心字”标签设立网页“刷新”标签 创作1． 创立一种新网页，编辑自己感爱好的一段文字 2．根据文本的内容，在“页面属性”对话框中，设立网页的字体大小、背景颜色、文本颜色、背景图像等内容 3．在“页面属性”对话框中，设立文本链接和标题／编码　　 4．根据文本内容，设立网页“核心字”标签5．设立网页“刷新”标签，并使网页自动跳转到其她网页6．在本书配套光盘exp2-3\site03文献夹中有某些网页，可模仿或根据内容重新创立自己的网页如图3-17和图3-18所示 图3-17 设立网页属性 图3-18 设立网页属性　　 实验报告实验名称姓 名 班 级分 组实 验 室实验时间： 年 月 日实验环节序 号操作要领实验成果。