网页设计与制作案例教程-电子教案4.ppt

《网页设计与制作案例教程-电子教案4.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作案例教程-电子教案4.ppt（44页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、第第4 4章页面的整体控制章页面的整体控制 本章主要学本章主要学习习如何如何设设置网置网页页的整体的整体页页面面属性。属性。l 课程引导课程引导（1 1）了解）了解DreamweaverDreamweaver 8 8的参数的参数设设置方法置方法（2 2）掌握）掌握页页面属性的面属性的设设置方法置方法（3 3）掌握）掌握设设置文件置文件头头内容的方法内容的方法（4 4）学）学习辅习辅助工具的使用助工具的使用l 知识技能目标知识技能目标 l站点效果展示站点效果展示 网网页页01.html01.html的的页页面属性整体面属性整体设设置效果如置效果如图图所示。所示。图图4-1网网页页01.html的

2、的页页面整体面整体设设置效果置效果 （1 1）在在站站点点“长长沙沙世世界界之之窗窗”根根目目录录下下创创建建一一个个文文件件夹夹“0101页页面面控控制制”，在在该该文文件件夹夹中中创创建一个命名建一个命名为为“01.html01.html”的网的网页页文档。文档。（2 2）设设置置“首首选选参参数数”，具具体体设设置置要要求求见见4.14.1节节。（3 3）设设置置网网页页“01.html01.html”的的外外观观属属性性、链链接接属属性性、标标题题属属性性、标标题题/编编码码属属性性，且且在在浏浏览览器器中中浏浏览览网网页页的的设设置置效效果果。具具体体设设置置要要求求见见4.24.2

3、节节。（4 4）为为网网页页“01.html01.html”插入关插入关键键字和字和说说明。明。l 本章操作任务本章操作任务4.14.1参参数数设设置置4.24.2设设置置页页面面属属性性4.34.3设设置置文文件件头头内内容容4.14.1参数设置参数设置 设设置置“首首选选参参数数”之之前前先先在在站站点点“长长沙沙世世界界之之窗窗”根根目目录录下下创创建建一一个个文文件件夹夹“0101页页面面控控制制”，在在 该该 文文 件件 夹夹 中中 创创 建建 一一 个个 命命 名名 为为“01.html01.html”的网的网页页文档。文档。在在DreamweaverDreamweaver 8 8

4、主窗口中，主窗口中，单击单击菜菜单单【编辑编辑】【首首选选参数参数】或者使用快捷或者使用快捷键键“Ctrl+UCtrl+U”，即可打开，即可打开“首首选选参数参数”对话对话框。框。1 1打开打开“首选参数首选参数”对话框对话框 “首首选选参数参数”对话对话框左框左边边的的“分分类类”列表中列表中列出了列出了2020种不同的种不同的类别类别，选择选择一种一种类别类别后，后，该类别该类别中所有可用的中所有可用的选项选项将会将会显显示在示在对话对话框框的右的右边边参数参数设设置区域。置区域。2 2参数设置方法参数设置方法 （1 1）设设置启置启动动DreamweaverDreamweaver 8 8

5、时时不再不再显显示示起始起始页页。打开打开“首首选选参数参数”对话对话框后，在框后，在该对话该对话框的框的左左边边的的“分分类类”列表中列表中选择选择“常常规规”选项选项，在右，在右边边“文档文档选项选项”的的“显显示起始示起始页页”复复选选框框 中中单击单击，取消复取消复选选框中的框中的选选中中标记标记，然后，然后单击单击【确定确定】按按钮钮。下次启。下次启动动DreamweaverDreamweaver 8 8时时将不再将不再显显示示起始起始页页。3 3参数设置举例参数设置举例 （2 2）设设置站点属性置站点属性“总总是是显显示本地文件于示本地文件于右右”。打开打开“首首选选参数参数”对话

6、对话框后，在框后，在该对话该对话框的框的左左边边的的“分分类类”列表中列表中选择选择“站点站点”选项选项，然后在，然后在“总总是是显显示示”列表列表项项中中选择选择“本地文件本地文件”和和“右右”即即可。可。（4 4）设设置复制置复制/粘粘贴贴属性：使用属性：使用“编辑编辑 粘粘贴贴”从其他从其他应应用程序粘用程序粘贴贴到到设计视图时设计视图时，复制复制“带结带结构的文本及全部格式构的文本及全部格式”。4.24.2设置页面属性设置页面属性1 1打开打开“页面属性页面属性”对话框对话框 在在DreamweaverDreamweaver 8 8主窗口中，主窗口中，单击单击菜菜单单【修改修改】【页页

7、面属性面属性】或者在或者在“属性属性面板面板”中中单击单击【页页面属性面属性】按按钮钮都可以打都可以打开开“页页面属性面属性”对话对话框。框。2 2设置外观属性设置外观属性 对对网网页页“01.html01.html”外外观观属性的属性的设设置要求置要求如下：如下：（1 1）“页页面字体面字体”设设置置为为“宋体宋体”，“大大小小”设设置置为为“14px14px”。（2 2）“背景背景颜颜色色”设设置置为为“#CCFFFF#CCFFFF”。（3 3）“左左边边距距”和和“右右边边距距”设设置置为为“80px80px”。下面根据属性下面根据属性设设置要求完成网置要求完成网页页“01.html01

8、.html”外外观观属性的属性的设设置。置。（1 1）打开）打开“页页面属性面属性”对话对话框。框。（2 2）左）左边边“分分类类”列表中列表中选择选择“外外观观”。（3 3）从）从“页页面字体面字体”下拉列表框中下拉列表框中选择选择“宋体宋体”作作为页为页面中的默面中的默认认文本字体。文本字体。（4 4）在）在“背景背景颜颜色色”文本框中可以文本框中可以设设置网置网页页的背景的背景颜颜色色 一般情况下，背景一般情况下，背景颜颜色都色都设设置成白色，置成白色，如果不如果不设设置背景置背景颜颜色，常用的色，常用的浏览浏览器也会默器也会默认认网网页页的背景的背景颜颜色色为为白色。白色。为为了增了增

9、强强网网页页背背景效果，可以景效果，可以对对背景背景颜颜色色进进行行设设置。置。（5 5）设设置左置左边边距和右距和右边边距距 在在“左左边边距距”文本框中可以文本框中可以设设置网置网页页左左边边空白的空白的宽宽度，在度，在“右右边边距距”文本框中可以文本框中可以设设置网置网页页右右边边空白的空白的宽宽.（6 6）设设置背景置背景图图像像 在在“页页面属性面属性”对话对话框中也可以框中也可以设设置网置网页页的的“背景背景图图像像”，其方法是：在，其方法是：在“背景背景图图像像”文本框中文本框中输输入网入网页页背景背景图图像的路径和像的路径和名称。名称。（7 7）单击单击【确定确定】按按钮钮或者

10、或者【应应用用】按按钮钮，完成外，完成外观观属性的属性的设设置。置。（8 8）保存网）保存网页页的属性的属性设设置。置。3 3设置链接属性设置链接属性 “链链接接”选项选项主要主要对页对页面的超面的超链链接文本的接文本的字体、字体、颜颜色等色等进进行行设设置。置。对对网网页页“01.html01.html”链链接属性的接属性的设设置要求如下：置要求如下：（1 1）网）网页页中超中超链链接文本默接文本默认认状状态态下的下的字体字体设设置置为为“楷体楷体”、字体大小、字体大小设设置置为为14px14px。（2 2）网）网页页中超中超链链接文本的接文本的颜颜色色设设置置为为“blueblue”，访问

11、过访问过的超的超链链接接颜颜色色设设置置为为“purplepurple”。（3 3）网）网页页中已激活的超中已激活的超链链接文本接文本颜颜色色设设置置为为“navynavy”。（4 4）变换图变换图像像链链接接颜颜色色设设置置为为“aquaaqua”（即当鼠（即当鼠标标指指针针移移动动到网到网页页中超中超链链接文字上方接文字上方时时超超链链接的接的颜颜色色为为“aquaaqua”），），下划下划线样线样式式设设置置为为“仅仅在在变换图变换图像像时显时显示下示下划划线线”。下面根据属性下面根据属性设设置要求完成网置要求完成网页页“01.html01.html”链链接属性的接属性的设设置。置。（1

12、 1）打开）打开“页页面属性面属性”对话对话框。框。（2 2）左）左边边“分分类类”列表中列表中选择选择“链链接接”。（3 3）在）在“链链接字体接字体”列表框中列表框中选择选择“楷体楷体”，如果字体下拉列表框中没有列出所需的，如果字体下拉列表框中没有列出所需的字体，可以字体，可以单击单击最后一最后一项项“编辑编辑字体列表字体列表”，添加所需的字体。，添加所需的字体。（4 4）在）在“大小大小”列表框中列表框中选择选择“1414”，单单位默位默认为认为“像素像素(pxpx)”。（5 5）在）在“链链接接颜颜色色”文本框中文本框中输输入入“blueblue”。（6 6）在）在“已已访问链访问链接

13、接”文本框中文本框中输输入入“purplepurple”。（7 7）在）在“活活动链动链接接”文本框中文本框中输输入入“navynavy”。（8 8）在）在“变换图变换图像像链链接接”文本框中文本框中输输入入“aquaaqua”。（9 9）在）在“下划下划线样线样式式”列表框中列表框中选择选择“仅仅在在变换图变换图像像时显时显示下划示下划线线”。（1010）单击单击【确定确定】按按钮钮或者或者【应应用用】按按钮钮，完成，完成链链接属性的接属性的设设置。置。（1111）保存网）保存网页页的属性的属性设设置。置。“标题标题”选项选项用于用于设设置网置网页页中各中各级标题级标题的的字体、大小等属性。

14、字体、大小等属性。对对网网页页“01.html01.html”标题标题属性的属性的设设置要求置要求如下：如下：（1 1）设设置网置网页页中中标题标题的字体的字体为为“黑体黑体”。（2 2）设设置置标题标题1 1的大小的大小为为“24px24px”，颜颜色色为为“blackblack”。4 4设置标题属性设置标题属性 “标题标题”选项选项用于用于设设置网置网页页中各中各级标题级标题的的字体、大小等属性。字体、大小等属性。对对网网页页“01.html01.html”标题标题属性的属性的设设置要求置要求如下：如下：（1 1）设设置网置网页页中中标题标题的字体的字体为为“黑体黑体”。（2 2）设设置置

15、标题标题1 1的大小的大小为为“24px24px”，颜颜色色为为“blackblack”。（3 3）在在“标标题题1 1”的的“大大小小”列列表表框框中中选选择择“2424”，单单位位默默认认为为“像像素素(pxpx)”，颜颜色色文文本本框框中中输输入入“blackblack”。（5 5）单单击击【确确定定】按按钮钮或或者者【应应用用】按按钮钮，完成完成标题标题属性的属性的设设置。置。（6 6）保存网）保存网页页的属性的属性设设置。置。“标标题题/编编码码”选选项项用用于于设设置置网网页页的的标标题题和文字和文字编码编码等属性。等属性。对对网网页页“01.html01.html”标标题题/编编

16、码码属属性性的的设设置置要要求求如下：如下：（1 1）网网页页的的标标题题设设置置为为“长长沙沙世世界界之之窗窗”。（2 2）文文档档类类型型设设置置为为“HTML HTML 4.0 4.0 TransitionalTransitional”，编编码码设设置置为为“简简体体中中文文(GB2312)(GB2312)”。5 5设置标题设置标题/编码属性编码属性 下下 面面 根根 据据 属属 性性 设设 置置 要要 求求 完完 成成 网网 页页“01.html01.html”标题标题/编码编码属性的属性的设设置。置。（1 1）打打开开“页页面面属属性性”对对话话框框，左左边边“分分类类”列表中列表中

17、选择选择“标题标题/编码编码”。（2 2）在在“标标题题”文文本本框框中中输输入入“长长沙沙世世界界之窗之窗”。（3 3）在在“文文档档类类型型”列列表表框框中中选选择择“HTML 4.0 TransitionalHTML 4.0 Transitional”。（4 4）在在“编编码码”列列表表框框中中选选择择“简简体体中中文文(GB2312)(GB2312)”，将网，将网页页的文字的文字编码设编码设置成中文。置成中文。（5 5）单单击击【确确定定】按按钮钮或或者者【应应用用】按按钮钮，完成，完成“标题标题/编码编码”属性的属性的设设置。置。（6 6）保存网）保存网页页的属性的属性设设置。置。4

18、.34.3设置文件头内容设置文件头内容 对对网网页页“01.html01.html”文件文件头头内容的内容的设设置要求置要求如下：如下：（1 1）设设置网置网页页“01.html01.html”的文字的文字编码为编码为“简简体中文体中文”。（2 2）为为网网页页“01.html01.html”插入关插入关键键字字“长长沙沙”、“旅游旅游”、“世界之窗世界之窗”。下面根据文件下面根据文件头头内容的内容的设设置要求完成网置要求完成网页页“01.html01.html”文件文件头头内容属性的内容属性的设设置。如果网置。如果网页处页处于关于关闭闭状状态态，先打开网，先打开网页页“01.html01.h

19、tml”。4.3.14.3.1在设计视图中显示在设计视图中显示“文件文件头内容头内容”的工具栏的工具栏 在在Dreamweaver Dreamweaver 8 8主主窗窗口口中中，单单击击菜菜单单【查查看看】【文文件件头头内内容容】，这这样样文文件件头头内内容容工具工具栏栏便会出便会出现现在在设计视图设计视图的上部。的上部。4.3.24.3.2设置文件头内容的方法设置文件头内容的方法 设设置置MetaMeta的步的步骤骤如下：如下：（1 1）“插插入入”工工具具栏栏切切换换到到“HTMLHTML”类类型型，然然后后在在“文文件件头头”下下拉拉菜菜单单中中单单击击【METAMETA】按按钮钮。打

20、打开开“METAMETA”对对话话框框，接接下下来来在在该该对对话话框中框中进进行参数行参数设设置。置。（2 2）该该对对话话框框中中的的属属性性设设置置完完成成后后，单单击击【确定】按【确定】按钮钮。1 1设置设置METAMETA 插入关插入关键键字的步字的步骤骤如下：如下：“插入插入”工具工具栏栏切切换换到到“HTMLHTML”类类型，然型，然后在后在“文件文件头头”下拉菜下拉菜单单中中单击单击【关关键键字字】按按钮钮，打开，打开“关关键键字字”对话对话框，在框，在该对话该对话框中框中输输入关入关键键字字“长长沙，旅游，世界之窗沙，旅游，世界之窗”即可。即可。2 2插入关键字插入关键字 许

21、许多搜索引擎可以多搜索引擎可以读读取描述取描述MetaMeta标记标记的的内容，插入内容，插入说说明的方法与插入关明的方法与插入关键键字相似，字相似，在在“HTMLHTML”插入工具插入工具栏栏的的“文件文件头头”下拉菜下拉菜单单中中单击单击【说说明明】按按钮钮，弹弹出出“说说明明”对话对话框，框，在在该对话该对话框中框中输输入入对页对页面的面的说说明信息即可。明信息即可。3 3插入说明插入说明 “链链接接”可以定可以定义义当前网当前网页页和本地站点中另和本地站点中另一个网一个网页页之之间间的关系，的关系，让让其他网其他网页页提供提供给给当当前网前网页页文件相关的文件相关的资资源和信息。源和信

22、息。4 4设置链接设置链接 课堂实践课堂实践 1 1操作要求操作要求 打开打开“课课堂堂实实践践”站点文件站点文件夹夹“0101页页面控制面控制”下的网下的网页页文档文档“01.html01.html”，然后完成以下各，然后完成以下各项项的操作。的操作。（1 1）首）首选选参数的参数的设设置要求置要求 设设置启置启动动DreamweaverDreamweaver 8 8时显时显示起始示起始页页；设设置站点属性置站点属性“总总是是显显示本地文件于左示本地文件于左”；创创建网建网页页文档文档时时，设设置默置默认认文档文档为为“HTMLHTML”文文档，档，设设置默置默认扩认扩展名展名为为“.htm

23、l.html”；设设置置“复制复制/粘粘贴贴”属性：使用属性：使用“编辑编辑 粘粘贴贴”从其他从其他应应用程用程序粘序粘贴贴到到设计视图时设计视图时，复制，复制“带结带结构的文本构的文本”，不清理，不清理WordWord段落段落间间距。距。（2 2）页页面属性的面属性的设设置要求置要求p 外外观观属性的属性的设设置置 “页页面字体面字体”采用采用“默默认认字体字体”，“大小大小”采采用用“12px12px”；“背景背景图图像像”选选用用imageimage文件文件夹夹下的下的“bj01.jpgbj01.jpg”；“左左边边距距”和和“右右边边距距”设设置置为为“100px100px”，“上上边

24、边距距”和和“下下边边距距”设设置置为为“20px20px”。p 链链接属性的接属性的设设置要求置要求 网网页页中超中超链链接文本默接文本默认认状状态态下的字体下的字体设设置置为为“宋体宋体”，字体大小，字体大小设设置置为为14px14px；网；网页页中中超超链链接文本的接文本的颜颜色色设设置置为为“blueblue”，访问过访问过的超的超链链接的接的颜颜色色设设置置为为“oliveolive”；当鼠；当鼠标标指指针针移移动动到网到网页页中超中超链链接文字上方接文字上方时时超超链链接的接的颜颜色色设设置置为为“maroonmaroon”，下划，下划线样线样式式设设置置为为“变换图变换图像像时隐

25、时隐藏下划藏下划线线”；网；网页页中已激活的超中已激活的超链链接文本接文本颜颜色色设设置置为为“fuchsiafuchsia”。p 标题标题属性的属性的设设置要求置要求 设设置网置网页页中中标题标题的字体的字体为为“隶隶书书”，标题标题1 1的大小的大小为为“18px18px”，颜颜色色为为“aquaaqua”。p“标题标题/编码编码”属性的属性的设设置要求置要求 网网页页的的标题设标题设置置为为“湘江谷湘江谷”；文档；文档类类型型设设置置为为“HTML 4.0 TransitionalHTML 4.0 Transitional”，编码编码设设置置为为“简简体中文体中文(GB2312)(GB2

26、312)”。（1 1）参数）参数设设置在置在“首首选选参数参数”对话对话框中框中进进行，行，单击单击菜菜单单【编辑编辑】【首首选选参数参数】或或者使用快捷者使用快捷键键“Ctrl+UCtrl+U”，即可打开，即可打开“首首选选参参数数”对话对话框。框。2 2制作要点提示制作要点提示 （2 2）页页面属性面属性设设置在置在“页页面属性面属性”对话对话框中框中进进行，行，单击单击菜菜单单【修改修改】【页页面属性面属性】或者在或者在“属性面板属性面板”中中单击单击【页页面属性面属性】按按钮钮都可以打开都可以打开“页页面属性面属性”对话对话框。框。课外拓展实践课外拓展实践 1 1在在“湖湖铁职铁职院学

27、院网站院学院网站”站点的文件站点的文件夹夹 “0101页页面控制面控制”中中创创建一个网建一个网页页文档，命名文档，命名为为“01.html01.html”。2 2对对网网页页01.html01.html设设置首置首选选参数、参数、设设置置页页面属性、面属性、设设置文件置文件头头内容。内容。本章小结本章小结 本章主要本章主要讲讲解了如何解了如何设设置首置首选选参数，如参数，如何何设设置置页页面属性，如何面属性，如何设设置文件置文件头头内容，内容，辅辅助工具如何使用。助工具如何使用。这这些些设设置都是从外置都是从外观观上上对对页页面面进进行有效控制，方便网行有效控制，方便网页页的制作和的制作和浏览浏览。页页面整体控制的方法，除了面整体控制的方法，除了设设置常置常规规的背景的背景颜颜色、背景色、背景图图片等属性之外，片等属性之外，DreamweaverDreamweaver 8 8还还有有辅辅助助线线、缩缩放等常用且必放等常用且必备备的功能，的功能，掌握好掌握好这这些基本工具的使用，有助于我些基本工具的使用，有助于我们们更更好的制作网好的制作网页页。