《(精品)第八章框架网页.ppt》由会员分享，可在线阅读，更多相关《(精品)第八章框架网页.ppt（18页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第第8 8章章 框架网页的框架网页的制作制作l什么是框架网页？什么是框架网页？l如何使用如何使用FrontPage2003制作框架网页？制作框架网页？l如何使用如何使用HTML编写框架网页代码？编写框架网页代码？第一节第一节 框架网页概述框架网页概述一、框架一、框架 1、概念、概念 框架指能够框架指能够独立变化和翻动的小窗口独立变化和翻动的小窗口。通过合理的组织。通过合理的组织和安排这些小窗口，可以使和安排这些小窗口，可以使Web网页具有更加漂亮的外观和视网页具有更加漂亮的外观和视觉吸引力。觉吸引力。2、作用、作用 框架可以框架可以集成集成以前也许以前也许需要多个单独屏幕装入的信息需要多个单独
2、屏幕装入的信息。此外，因为在页面上显示的信息被分成独立的区域或框架，所此外，因为在页面上显示的信息被分成独立的区域或框架，所以某以某单个框架内容的更新不会影响到其他框架的内容单个框架内容的更新不会影响到其他框架的内容。框架在很多方面与表格很相似，只不过表格是对框架在很多方面与表格很相似，只不过表格是对网页区网页区域域的划分，而框架是对的划分，而框架是对整个窗口整个窗口的划分。框架比起表格更为有的划分。框架比起表格更为有用，它不仅可以用，它不仅可以组织数据组织数据，而且可以，而且可以组织浏览器的显示组织浏览器的显示。实际。实际上，框架将浏览器窗口划分成为若干个区域，每个区域中的网上，框架将浏览器
3、窗口划分成为若干个区域，每个区域中的网页由不同内容的网页组成，而且每个区域中的网页可以独立于页由不同内容的网页组成，而且每个区域中的网页可以独立于其他框架翻动或改变。其他框架翻动或改变。二、框架网页二、框架网页 1、框架网页、框架网页 框框架架网网页页是是一一种种特特殊殊的的HTML网网页页，它它可可将将浏浏览览器器窗窗口口分分成成不不同同的的区区域域，称称为为框框架架区区域域。每每个个区区域域都都可可以以显显示示不不同同的的网网页页.（1）框架网页的特点）框架网页的特点 只只要要单单击击某某一一个个框框架架区区域域内内的的超超链链接接，其其指指向向的的网网页页就就会会在在另另一一个个框框架架
4、区区域域中中显显示示，而而不不必必将将整整个个浏浏览览器器窗窗口口中中的的内内容容更换一遍。更换一遍。固定网页中的某些内容。固定网页中的某些内容。并并不不是是所所有有的的浏浏览览器器都都能能显显示示框框架架网网页页，这这也也是是框框架架网网页的一个局限。页的一个局限。（2）框架网页的种类）框架网页的种类 根根据据框框架架分分布布的的不不同同和和各各框框架架作作用用的的不不同同，框框架架网网页页被被分分为为多多种种类类型型。使使用用FrontPage制制作作网网页页时时，常常用用到到的的框框架架网网页页是是：标标题题、标标题题页页脚脚和和目目录录、垂垂直直拆拆分分、横横幅幅和和目目录录、脚脚注注
5、、目目录、嵌套式层次结构、水平拆分、页脚和自顶向下的层次结构。录、嵌套式层次结构、水平拆分、页脚和自顶向下的层次结构。第二节第二节 利用利用FrontPage 2003处理框架处理框架 一、创建框架网页一、创建框架网页 选选择择“文文件件”“新新建建”命命令令，打打开开“新新建建网网页页”和和“新新建站点建站点”窗格；窗格；单单击击“新新建建网网页页”下下面面的的“其其他他网网页页模模板板”超超级级链链接接，打开打开“网页模板网页模板”对话框；对话框；单单击击“框框架架网网页页”选选项项卡卡，显显示示十十种种网网页页模模板板，选选择择其其中中任任一一种种形形式式，在在对对话话框框右右边边会会出
6、出现现该该模模板板形形式式的的说说明明，以以及及模板预览。模板预览。单单击击每每个个框框架架中中的的“新新建建网网页页”按按钮钮，各各编编辑辑区区变变成成编编辑辑状状态态，可可以以依依次次编编辑辑各各个个网网页页。单单击击每每一一个个框框架架区区域域中中的的“设设置置初初始始网网页页”按按钮钮将将打打开开一一个个对对话话框框，可可以以在在该该对对话话框框中中选选择择一一个个网网页页作作为为框框架架网网页页最最初初显显示示的的网网页页，并并显显示示在在框框架架区区域域中。中。二、编辑框架网页二、编辑框架网页 编编辑辑框框架架网网页页与与编编辑辑普普通通的的网网页页相相同同，也也可可以以在在框框架
7、架网网页页中中添添加加和和格格式式化化文文本本、设设置置网网页页的的背背景景颜颜色色和和背背景景图图片片、在在网网页中插入图片和添加组件，还可以调整框架的大小等。页中插入图片和添加组件，还可以调整框架的大小等。1在框架网页中添加和格式化文本在框架网页中添加和格式化文本 在在框框架架网网页页中中添添加加和和格格式式化化文文本本与与在在普普通通的的网网页页中中添添加加和和格格式式化化文文本本相相同。同。2调整框架的大小调整框架的大小 在在输输入入文文本本时时，可可能能输输入入的的文文本本内内容容比比较较多多，但但框框架架又又比比较较小小，所所以以输输入入文文本本时时会会有有一一部部分分文文本本不不
8、能能显显示示，这这样样在在查查看看文文本本时时就就有有可可能能看看不不到到文文本本的整体效果，这时可以调整框架的大小来显示文本。的整体效果，这时可以调整框架的大小来显示文本。通通常常调调整整框框架架的的大大小小的的方方法法有有两两种种，即即通通过过拖拖动动框框架架的的边边框框或或指指定定想想要要的确切设置来调整框架的大小。的确切设置来调整框架的大小。（1）拖动框架的边框调整框架大小）拖动框架的边框调整框架大小 将将光光标标放放在在要要调调整整的的框框架架边边框框上上，当当光光标标变变为为“”形形状状时时，按按住住鼠鼠标标左键，并向下拖动。左键，并向下拖动。（2）精确设置框架大小）精确设置框架大
9、小 单单击击框框架架，将将光光标标置置于于框框架架内内，点点击击鼠鼠标标右右键键，从从弹弹出出的的快快捷捷菜菜单单中中选择选择“框架属性框架属性”命令，弹出命令，弹出“框架属性框架属性”对话框；对话框；在在“框框架架大大小小”选选项项组组中中设设置置框框架架大大小小为为固固定定像像素素数数后后，再再指指定定框框架架的宽度和行高，单击的宽度和行高，单击“确定确定”按钮。按钮。3拆分框架拆分框架 在在框框架架网网页页中中不不但但可可以以调调整整框框架架的的大大小小，还还可可以以设设置置网网页页中中显显示示的的框框架架的多少。在框架网页中可以任意地拆分框架。的多少。在框架网页中可以任意地拆分框架。（
10、1）拖动边框拆分框架）拖动边框拆分框架 将将光光标标放放在在要要拆拆分分的的框框架架边边框框上上，按按住住“Ctrl”健健，同同时时按按住住鼠鼠标标左左键键拖拖动动框框架架边边框框，拖拖出出一一段段距距离离后后放放开开鼠鼠标标左左键键和和“Ctrl”键键，出出现现一一个个框架。框架。（2）将框架平均分成两行或两列）将框架平均分成两行或两列 将将光光标标放放在在要要拆拆分分的的框框架架边边框框内内，选选择择“框框架架”|“拆拆分分框框架架”命命令令弹弹出出“拆拆分分框框架架”对对话话框框。选选择择“拆拆分分为为行行”或或“拆拆分分为为列列”，单单击击“确确定定”按钮。按钮。4删除框架删除框架 将
11、光标放在要删除的框架中；将光标放在要删除的框架中；选择选择“框架框架”|“删除框架删除框架”命令。命令。注注意意：从从框框架架网网页页中中删删除除框框架架时时，该该框框架架中中显显示示的的网网页页也也会会被被删删除除，但但是是框框架架网网页页中中其其余余的的内内容容并并没没有有被被删删除除。若若框框架架网网页页仅仅含含有有一一个个框框架架，就就不不能删除该框架。能删除该框架。5为框架网页设置背景颜色和背景图片为框架网页设置背景颜色和背景图片 （1）设置框架网页的背景颜色）设置框架网页的背景颜色 将光标放在要设置背景颜色的框架中；将光标放在要设置背景颜色的框架中；单单击击鼠鼠标标右右键键，从从弹
12、弹出出的的快快捷捷菜菜单单中中选选择择“网网页页属属性性”命令，打开命令，打开“网页属性网页属性”对话框；对话框；单击单击“背景背景”标签，打开标签，打开“背景背景”选项卡；选项卡；单单击击“背背景景”右右侧侧的的按按钮钮，从从弹弹出出的的颜颜色色面面板板中中选选择背景颜色；择背景颜色；单击单击“确定确定”按钮。按钮。（2）设置框架网页的背景图片）设置框架网页的背景图片 与设置框架网页的背景颜色类似。与设置框架网页的背景颜色类似。6.设置框架网页的边框、边距、间距及滚动条设置框架网页的边框、边距、间距及滚动条 设设置置框框架架的的属属性性包包括括设设置置边边框框的的隐隐藏藏或或显显示示、设设置
13、置框框架架的的边距和间距以及设置框架中滚动条的显示和隐藏。边距和间距以及设置框架中滚动条的显示和隐藏。1显示和隐藏框架边框显示和隐藏框架边框 可可以以根根据据所所需需的的网网页页外外观观来来选选择择显显示示或或隐隐藏藏框框架架网网页页的框架周围的边框。的框架周围的边框。显示和隐藏边框的操作步骤如下：显示和隐藏边框的操作步骤如下：将光标放在任意一个框架中；将光标放在任意一个框架中；单单击击鼠鼠标标右右键键，从从弹弹出出的的快快捷捷菜菜单单中中选选择择“框框架架属属性性”命命令令，弹弹出出“框框架架属属性性”对对话话框框；单单击击“框框架架网网页页”按按钮钮，打开打开“网页属性网页属性”对话框；对
14、话框；选选择择或或禁禁用用“显显示示边边框框”复复选选框框，就就显显示示和和隐隐藏藏框框架架边框；边框；单击单击“确定确定”按钮，回到按钮，回到“框架属性框架属性”对话框；对话框；单击单击“确定确定”按钮。按钮。2.设置框架边距的宽度和高度设置框架边距的宽度和高度 在在“框框架架属属性性”对对话话框框中中，设设置置“边边距距”选选项项的的属属性性即即可可。通通过过这这些些设设置置可可以以设设定定框框架架内内内内容容与与框框架架边边框框的的距距离离以以及内容的高度。及内容的高度。3.显示和隐藏框架滚动条显示和隐藏框架滚动条 在在“框框架架属属性性”对对话话框框中中，从从“显显示示滚滚动动条条”的
15、的下下拉拉列列表中选择表中选择“显示显示”或或“不显示不显示”或者或者“需要时显示需要时显示”。四、在框架网页中设置超链接四、在框架网页中设置超链接 在在框框架架组组中中设设置置超超级级链链接接后后，单单击击超超级级链链接接，该该链链接接所所指指向向的的网网页页通通常常会会在在另另一一个个框框架架中中打打开开，即即会会在在目目标标框框架架中中打打开开。在在使使用用FrontPage 2003的的框框架架网网页页模模板板所所创创建建的的框框架架网网页页下下，目目标标框框架架已已经经设设置置好好了了。在在框框架架组组中中设设置置超超链链接接与与在在普普通通的的网网页页中中设设置置超超链链接接相相同
16、同，也可以设置文本超链接和图片超链接。也可以设置文本超链接和图片超链接。1在框架中设置文本超链接在框架中设置文本超链接 其操作步骤如下：其操作步骤如下：在在框框架架中中选选择择要要设设置置超超链链接接的的文文本本，单单击击“常常用用工工具具栏栏”中中的的“插入超链接插入超链接”按钮，弹出按钮，弹出“插入超链接插入超链接”对话框；对话框；选选择择要要链链接接的的文文件件，单单击击“目目标标框框架架”按按钮钮，弹弹出出“目目标标框框架架”对话框；对话框；选选择择目目标标框框架架，单单击击“确确定定”按按钮钮，回回到到“插插入入超超链链接接”对对话话框；框；单击单击“确定确定”按钮，则超链接设置完成
17、。按钮，则超链接设置完成。2在框架中设置图片超链接在框架中设置图片超链接 在框架中设置图片超级链接与在框架中设置文本超级链接基本相同在框架中设置图片超级链接与在框架中设置文本超级链接基本相同。五、五、保存框架网页保存框架网页 创创建建和和编编辑辑完完框框架架后后就就可可以以对对框框架架进进行行保保存存了了。保保存存框框架架与与保保存普通的页面方法相同存普通的页面方法相同。注注意意：框框架架网网页页保保存存后后，生生成成的的网网页页文文件件除除了了一一个个框框架架网网页页文文件件外外，还还保保存存了了每每个个框框架架中中新新建建的的网网页页文文件件。这这些些网网页页文文件件可可以以单单独独打开。
18、打开。第三节第三节 利用利用HTML创建框架网页创建框架网页 一、一、一、一、标记标记标记标记 用来定用来定义义一个框架一个框架组组。如果在。如果在HTML文档中包含了一个文档中包含了一个标记标记，就不能再包含，就不能再包含标记标记，这这两个两个标记标记是互是互相排斥的。除了一个特殊的相排斥的。除了一个特殊的标记标记（）之外，）之外，该标记该标记中中不不应应有任何其他的有任何其他的标记标记、文本、超、文本、超链链接等。接等。格式：格式：网网页标题页标题 框架网框架网页页定定义义 1.COLS属性属性 格式格式为为：例如：例如：其中第一个框架其中第一个框架宽宽度是度是100个像素个像素单单位位值
19、值，第二个框架，第二个框架宽宽度度是屏幕是屏幕宽宽度的度的50%，第三个框架利用了剩余的空，第三个框架利用了剩余的空间间。2.ROWS属性属性 类类似似COLS属性，只不属性，只不过过是是纵纵向划分屏幕。向划分屏幕。二、二、标记标记 在布局好基本的框架在布局好基本的框架组组后，必后，必须须把每一个框架与一个把每一个框架与一个HTML文档关文档关联联，即用，即用标记标记定定义义每一个框架。例如：每一个框架。例如：1.SRC属性属性 完成框架的初始化，即完成框架的初始化，即为为各个框架指定初始各个框架指定初始显显示的示的页页面，面，此此时应时应使用使用FRAME标记标记的的src属性，将属性，将该
20、该属性的属性的值值指定指定为为要在框要在框架中架中显显示的示的页页面即可。面即可。2.NAME属性属性 为为每一个框架取一个名字（最起每一个框架取一个名字（最起码码在同一框架在同一框架组组中中应应是不是不同的名字），目的是在其他地方引用同的名字），目的是在其他地方引用该该框架。格式框架。格式为为：3.标记标记的其他属性的其他属性 属性 值 说明Scrolling AUTO（默认）需要时显示滚动条 NO 不显示滚动条 YES 不管需要与否都显示Noresize 默认时边框可调，不可调Marginheight 像素 设置文档上下空白Marginwidth 像素 设置文档左右空白 三、三、三、三、标
21、记标记标记标记 如果在不支持框架的如果在不支持框架的Web浏览浏览器中装入框架定器中装入框架定义义的文档，的文档，得到的信息是个空白得到的信息是个空白页页。为为此，可使用此，可使用标记标记，格式：，格式：Mypage 在支持框架的在支持框架的浏览浏览器中，器中，块块内的文本不能被正内的文本不能被正常常显显示出来，但当示出来，但当页页面是被装入不支持框架的面是被装入不支持框架的浏览浏览器中器中时时，文本，文本就被就被显显示出来。示出来。四、四、四、四、设设设设置置置置边边边边框及框及框及框及颜颜颜颜色色色色 框架的框架的边边框可用框可用border属性属性(或或frameborder属性，二者具
22、有同等属性，二者具有同等效果）效果）设设置（可取四个置（可取四个值值：yes、no、0、1）。）。BorderColor属性属性设设置置边边框的框的颜颜色。当色。当这这两个使用在两个使用在标签标签中，中，则这则这一一设设置置对对本框本框架网架网页页中的所有框架都起作用；使用在中的所有框架都起作用；使用在标签标签中中则则只只对该对该框架起框架起作用。作用。五、五、五、五、链链链链接文档到接文档到接文档到接文档到单单单单个框架个框架个框架个框架 如果把某一网如果把某一网页页文档文档链链接到某一特定名称的框架中，接到某一特定名称的框架中，则则当点当点击击超超链链接接时时，目，目标标框架中将框架中将显
23、显示示该该网网页页文档。文档。这这一一过过程用超程用超链链接的接的target属属性性实现实现。1.1.标签标签标签标签的的的的TargetTarget属性属性属性属性 通常当通常当单击单击一个超一个超链链接接时时，新，新页页面的内容会取代当前面的内容会取代当前页页面。然面。然而在窗口而在窗口环环境中，新境中，新页页面的内容也可以在一个新窗口下面的内容也可以在一个新窗口下显显示。示。Target属性能属性能够够通知通知Web浏览浏览器器显显示示单击过单击过的信息，此信息通的信息，此信息通过过超超级链级链接指向被称接指向被称为为Window_name的一个窗口中，我的一个窗口中，我们们可可对对新
24、窗口新窗口取任何一个不由下划取任何一个不由下划线线开开头头的名字。的名字。这这些名字被一些名字被一组组指定的指定的Target值值所所保留。保留。当使用当使用Target属性属性时时，浏览浏览器首先器首先检验检验名名为为Window_name的窗口是否的窗口是否 存在。若存在，用超链接指向的文档取代当前的存在。若存在，用超链接指向的文档取代当前的Window_name的内容。的内容。另一方面，若名为另一方面，若名为Window_name的窗口当前不存在，将打开一个新的的窗口当前不存在，将打开一个新的浏览器窗口，并命名为浏览器窗口，并命名为Window_name，并用超链接指向的文档装入新，并用
25、超链接指向的文档装入新建的窗口中。建的窗口中。2.2.链链链链接文档到接文档到接文档到接文档到单单单单个框架的格式个框架的格式个框架的格式个框架的格式超超链链接要接要显显示的文字示的文字 例如：例如：超超链链接要接要显显示的文字示的文字 特殊的特殊的 4 类类操作操作:新窗口新窗口 本窗口本窗口 父窗口父窗口 整个整个浏览浏览器窗口器窗口3.3.标签标签标签标签 当使用当使用Target属性时，有时会遇到这种情况：在属性时，有时会遇到这种情况：在Web页面上所有的页面上所有的或大多数超链接都指向同一窗口或大多数超链接都指向同一窗口尤其是尤其是 使用框架使用框架时时。在在这这种情况下，代替每个种
26、情况下，代替每个标记标记中的中的Target属性，可用属性，可用标记标记，给给Web页页面的所有面的所有链链接定接定义义一个全局目一个全局目标标。格式。格式为为：如果在如果在中包含了中包含了标记标记，则对则对每个没有相每个没有相应应Target属性的属性的标签标签将将显显示用示用窗窗口指向的文档口指向的文档。六、浮六、浮动动窗口窗口 可以使用可以使用标签来定义浮动框架，该标记允许在一个标签来定义浮动框架，该标记允许在一个 HTML文档任一位置的框架中插入另一个文档任一位置的框架中插入另一个HTML文档。常见的属性有：文档。常见的属性有：width:指定包含指定包含HTML文档的浮动框架的宽度（
27、像素单位）文档的浮动框架的宽度（像素单位）height：浮动框架的宽度（像素单位）：浮动框架的宽度（像素单位）src：指定框架中显示的：指定框架中显示的HTML文档的位置文档的位置 name：指定浮动框架的名字：指定浮动框架的名字 frameborder:指名框架是否要显示边框。值为指名框架是否要显示边框。值为1显示，为显示，为0不显示。不显示。border：指定边框宽度（像素单位）：指定边框宽度（像素单位）bordercolor:指定边框颜色指定边框颜色 framespacing：指定框架边框之间附加的像素数：指定框架边框之间附加的像素数 marginwidth：页边空白的宽度（像素）：页边空白的宽度（像素）marginheight：页边空白的高度（像素）：页边空白的高度（像素）noresize：不可调整大小：不可调整大小