第八章框架网页PPT讲稿.ppt

《第八章框架网页PPT讲稿.ppt》由会员分享，可在线阅读，更多相关《第八章框架网页PPT讲稿.ppt（18页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。

1、第八章框架网页第1页，共18页，编辑于2022年，星期三第一节第一节 框架网页概述框架网页概述一、框架一、框架 1、概念、概念 框架指能够框架指能够独立变化和翻动的小窗口独立变化和翻动的小窗口。通过合理的组织和安排。通过合理的组织和安排这些小窗口，可以使这些小窗口，可以使Web网页具有更加漂亮的外观和视觉吸引力。网页具有更加漂亮的外观和视觉吸引力。2、作用、作用 框架可以框架可以集成集成以前也许以前也许需要多个单独屏幕装入的信息需要多个单独屏幕装入的信息。此外，。此外，因为在页面上显示的信息被分成独立的区域或框架，所以某因为在页面上显示的信息被分成独立的区域或框架，所以某单个框架内单个框架内容

2、的更新不会影响到其他框架的内容容的更新不会影响到其他框架的内容。框架在很多方面与表格很相似，只不过表格是对框架在很多方面与表格很相似，只不过表格是对网页区域网页区域的划的划分，而框架是对分，而框架是对整个窗口整个窗口的划分。框架比起表格更为有用，它不仅可以的划分。框架比起表格更为有用，它不仅可以组织数据组织数据，而且可以，而且可以组织浏览器的显示组织浏览器的显示。实际上，框架将浏览器窗。实际上，框架将浏览器窗口划分成为若干个区域，每个区域中的网页由不同内容的网页组成，口划分成为若干个区域，每个区域中的网页由不同内容的网页组成，而且每个区域中的网页可以独立于其他框架翻动或改变。而且每个区域中的网

3、页可以独立于其他框架翻动或改变。第2页，共18页，编辑于2022年，星期三 二、框架网页二、框架网页 1、框架网页、框架网页 框框架架网网页页是是一一种种特特殊殊的的HTML网网页页，它它可可将将浏浏览览器器窗窗口口分分成成不不同同的区域，称为的区域，称为框架区域框架区域。每个区域都可以显示不同的网页。每个区域都可以显示不同的网页.（1）框架网页的特点）框架网页的特点 只只要要单单击击某某一一个个框框架架区区域域内内的的超超链链接接，其其指指向向的的网网页页就就会会在在另另一个框架区域中显示，而不必将整个浏览器窗口中的内容更换一遍。一个框架区域中显示，而不必将整个浏览器窗口中的内容更换一遍。固

4、定网页中的某些内容。固定网页中的某些内容。并并不不是是所所有有的的浏浏览览器器都都能能显显示示框框架架网网页页，这这也也是是框框架架网网页页的的一一个局限。个局限。（2）框架网页的种类）框架网页的种类 根根据据框框架架分分布布的的不不同同和和各各框框架架作作用用的的不不同同，框框架架网网页页被被分分为为多多种种类类型型。使使用用FrontPage制制作作网网页页时时，常常用用到到的的框框架架网网页页是是：标标题题、标标题题页页脚脚和和目目录录、垂垂直直拆拆分分、横横幅幅和和目目录录、脚脚注注、目目录录、嵌嵌套套式式层层次次结构、水平拆分、页脚和自顶向下的层次结构。结构、水平拆分、页脚和自顶向下

5、的层次结构。第3页，共18页，编辑于2022年，星期三第二节第二节 利用利用FrontPage 2003处理框架处理框架 一、创建框架网页一、创建框架网页 选选择择“文文件件”“新新建建”命命令令，打打开开“新新建建网网页页”和和“新新建建站站点点”窗格；窗格；单单击击“新新建建网网页页”下下面面的的“其其他他网网页页模模板板”超超级级链链接接，打打开开“网页模板网页模板”对话框；对话框；单单击击“框框架架网网页页”选选项项卡卡，显显示示十十种种网网页页模模板板，选选择择其其中中任任一一种种形形式，在对话框右边会出现该模板形式的说明，以及模板预览。式，在对话框右边会出现该模板形式的说明，以及模

6、板预览。单单击击每每个个框框架架中中的的“新新建建网网页页”按按钮钮，各各编编辑辑区区变变成成编编辑辑状状态态，可可以以依依次次编编辑辑各各个个网网页页。单单击击每每一一个个框框架架区区域域中中的的“设设置置初初始始网网页页”按按钮钮将将打打开开一一个个对对话话框框，可可以以在在该该对对话话框框中中选选择择一一个个网网页页作作为框架网页最初显示的网页，并显示在框架区域中。为框架网页最初显示的网页，并显示在框架区域中。二、编辑框架网页二、编辑框架网页 编编辑辑框框架架网网页页与与编编辑辑普普通通的的网网页页相相同同，也也可可以以在在框框架架网网页页中中添添加加和和格格式式化化文文本本、设设置置网

7、网页页的的背背景景颜颜色色和和背背景景图图片片、在在网网页页中中插入图片和添加组件，还可以调整框架的大小等。插入图片和添加组件，还可以调整框架的大小等。第4页，共18页，编辑于2022年，星期三 1在框架网页中添加和格式化文本在框架网页中添加和格式化文本 在框架网页中添加和格式化文本与在普通的网页中添加和格式化文本相同。在框架网页中添加和格式化文本与在普通的网页中添加和格式化文本相同。2调整框架的大小调整框架的大小 在在输输入入文文本本时时，可可能能输输入入的的文文本本内内容容比比较较多多，但但框框架架又又比比较较小小，所所以以输输入入文文本本时时会会有有一一部部分分文文本本不不能能显显示示，

8、这这样样在在查查看看文文本本时时就就有有可可能能看看不不到到文文本本的的整整体体效效果果，这这时时可可以以调调整整框框架架的的大大小小来显示文本。来显示文本。通通常常调调整整框框架架的的大大小小的的方方法法有有两两种种，即即通通过过拖拖动动框框架架的的边边框框或或指指定定想想要要的的确确切切设设置置来来调整框架的大小。调整框架的大小。（1）拖动框架的边框调整框架大小）拖动框架的边框调整框架大小 将将光光标标放放在在要要调调整整的的框框架架边边框框上上，当当光光标标变变为为“”形形状状时时，按按住住鼠鼠标标左左键键，并并向向下下拖拖动。动。（2）精确设置框架大小）精确设置框架大小 单单击击框框架

9、架，将将光光标标置置于于框框架架内内，点点击击鼠鼠标标右右键键，从从弹弹出出的的快快捷捷菜菜单单中中选选择择“框框架架属属性性”命命令，弹出令，弹出“框架属性框架属性”对话框；对话框；在在“框框架架大大小小”选选项项组组中中设设置置框框架架大大小小为为固固定定像像素素数数后后，再再指指定定框框架架的的宽宽度度和和行高，单击行高，单击“确定确定”按钮。按钮。第5页，共18页，编辑于2022年，星期三 3拆分框架拆分框架 在在框框架架网网页页中中不不但但可可以以调调整整框框架架的的大大小小，还还可可以以设设置置网网页页中中显显示示的的框框架架的的多多少少。在框架网页中可以任意地拆分框架。在框架网页

10、中可以任意地拆分框架。（1）拖动边框拆分框架）拖动边框拆分框架 将将光光标标放放在在要要拆拆分分的的框框架架边边框框上上，按按住住“Ctrl”健健，同同时时按按住住鼠鼠标标左左键键拖拖动动框框架架边边框，拖出一段距离后放开鼠标左键和框，拖出一段距离后放开鼠标左键和“Ctrl”键，出现一个框架。键，出现一个框架。（2）将框架平均分成两行或两列）将框架平均分成两行或两列 将将光光标标放放在在要要拆拆分分的的框框架架边边框框内内，选选择择“框框架架”|“拆拆分分框框架架”命命令令弹弹出出“拆拆分分框框架架”对话框。选择对话框。选择“拆分为行拆分为行”或或“拆分为列拆分为列”，单击，单击“确定确定”按

11、钮。按钮。4删除框架删除框架 将光标放在要删除的框架中；将光标放在要删除的框架中；选择选择“框架框架”|“删除框架删除框架”命令。命令。注注意意：从从框框架架网网页页中中删删除除框框架架时时，该该框框架架中中显显示示的的网网页页也也会会被被删删除除，但但是是框框架架网网页页中中其其余余的的内内容容并并没没有有被被删删除除。若若框框架架网网页页仅仅含含有有一一个个框框架架，就就不不能能删删除除该该框架。框架。第6页，共18页，编辑于2022年，星期三 5为框架网页设置背景颜色和背景图片为框架网页设置背景颜色和背景图片 （1）设置框架网页的背景颜色）设置框架网页的背景颜色 将光标放在要设置背景颜色

12、的框架中；将光标放在要设置背景颜色的框架中；单单击击鼠鼠标标右右键键，从从弹弹出出的的快快捷捷菜菜单单中中选选择择“网网页页属属性性”命令，打开命令，打开“网页属性网页属性”对话框；对话框；单击单击“背景背景”标签，打开标签，打开“背景背景”选项卡；选项卡；单单击击“背背景景”右右侧侧的的按按钮钮，从从弹弹出出的的颜颜色色面面板板中中选选择择背景颜色；背景颜色；单击单击“确定确定”按钮。按钮。（2）设置框架网页的背景图片）设置框架网页的背景图片 与设置框架网页的背景颜色类似。与设置框架网页的背景颜色类似。6.设置框架网页的边框、边距、间距及滚动条设置框架网页的边框、边距、间距及滚动条 设设置置

13、框框架架的的属属性性包包括括设设置置边边框框的的隐隐藏藏或或显显示示、设设置置框框架架的的边边距距和和间间距以及设置框架中滚动条的显示和隐藏。距以及设置框架中滚动条的显示和隐藏。第7页，共18页，编辑于2022年，星期三 1显示和隐藏框架边框显示和隐藏框架边框 可可以以根根据据所所需需的的网网页页外外观观来来选选择择显显示示或或隐隐藏藏框框架架网网页页的的框框架周围的边框。架周围的边框。显示和隐藏边框的操作步骤如下：显示和隐藏边框的操作步骤如下：将光标放在任意一个框架中；将光标放在任意一个框架中；单单击击鼠鼠标标右右键键，从从弹弹出出的的快快捷捷菜菜单单中中选选择择“框框架架属属性性”命命令令

14、，弹弹出出“框框架架属属性性”对对话话框框；单单击击“框框架架网网页页”按按钮钮，打打开开“网网页页属属性性”对话框；对话框；选择或禁用选择或禁用“显示边框显示边框”复选框，就显示和隐藏框架边框；复选框，就显示和隐藏框架边框；单击单击“确定确定”按钮，回到按钮，回到“框架属性框架属性”对话框；对话框；单击单击“确定确定”按钮。按钮。2.设置框架边距的宽度和高度设置框架边距的宽度和高度 在在“框框架架属属性性”对对话话框框中中，设设置置“边边距距”选选项项的的属属性性即即可可。通通过过这些设置可以设定框架内内容与框架边框的距离以及内容的高度。这些设置可以设定框架内内容与框架边框的距离以及内容的高

15、度。3.显示和隐藏框架滚动条显示和隐藏框架滚动条 在在“框框架架属属性性”对对话话框框中中，从从“显显示示滚滚动动条条”的的下下拉拉列列表表中选择中选择“显示显示”或或“不显示不显示”或者或者“需要时显示需要时显示”。第8页，共18页，编辑于2022年，星期三 四、在框架网页中设置超链接四、在框架网页中设置超链接 在在框框架架组组中中设设置置超超级级链链接接后后，单单击击超超级级链链接接，该该链链接接所所指指向向的的网网页页通通常常会会在在另另一一个个框框架架中中打打开开，即即会会在在目目标标框框架架中中打打开开。在在使使用用FrontPage 2003的的框框架架网网页页模模板板所所创创建建

16、的的框框架架网网页页下下，目目标标框框架架已已经经设设置置好好了了。在在框框架架组组中中设设置置超超链接链接与在普通的网页中设置超链接相同与在普通的网页中设置超链接相同，也可以设置文本超链接和图片超链接。，也可以设置文本超链接和图片超链接。1在框架中设置文本超链接在框架中设置文本超链接 其操作步骤如下：其操作步骤如下：在在框框架架中中选选择择要要设设置置超超链链接接的的文文本本，单单击击“常常用用工工具具栏栏”中中的的“插插入超链接入超链接”按钮，弹出按钮，弹出“插入超链接插入超链接”对话框；对话框；选择要链接的文件，单击选择要链接的文件，单击“目标框架目标框架”按钮，弹出按钮，弹出“目标框架

17、目标框架”对话框；对话框；选择目标框架，单击选择目标框架，单击“确定确定”按钮，回到按钮，回到“插入超链接插入超链接”对话框；对话框；单击单击“确定确定”按钮，则超链接设置完成。按钮，则超链接设置完成。2在框架中设置图片超链接在框架中设置图片超链接 在框架中设置图片超级链接与在框架中设置文本超级链接基本相同在框架中设置图片超级链接与在框架中设置文本超级链接基本相同。第9页，共18页，编辑于2022年，星期三 五、五、保存框架网页保存框架网页 创创建建和和编编辑辑完完框框架架后后就就可可以以对对框框架架进进行行保保存存了了。保保存存框框架架与与保保存存普普通通的的页页面方法相同面方法相同。注注意

18、意：框框架架网网页页保保存存后后，生生成成的的网网页页文文件件除除了了一一个个框框架架网网页页文文件件外外，还保存了每个框架中新建的网页文件。这些网页文件可以单独打开。还保存了每个框架中新建的网页文件。这些网页文件可以单独打开。第10页，共18页，编辑于2022年，星期三第三节第三节第三节第三节 利用利用利用利用HTMLHTML创建框架网页创建框架网页创建框架网页创建框架网页 一、一、一、一、标记标记标记标记 用来定用来定义义一个框架一个框架组组。如果在。如果在HTML文档中包含了一个文档中包含了一个标标记记，就不能再包含，就不能再包含标记标记，这这两个两个标记标记是互相排斥的。除了一个特是互

19、相排斥的。除了一个特殊的殊的标记标记（）之外，）之外，该标记该标记中不中不应应有任何其他的有任何其他的标记标记、文本、超、文本、超链链接等。接等。格式：格式：网网页标题页标题 框架网框架网页页定定义义 1.COLS属性属性 格式格式为为：例如：例如：第11页，共18页，编辑于2022年，星期三 其中第一个框架其中第一个框架宽宽度是度是100个像素个像素单单位位值值，第二个框架，第二个框架宽宽度是屏幕度是屏幕宽宽度的度的50%，第三个框架利用了剩余的空，第三个框架利用了剩余的空间间。2.ROWS属性属性 类类似似COLS属性，只不属性，只不过过是是纵纵向划分屏幕。向划分屏幕。二、二、二、二、标记

20、标记 在布局好基本的框架在布局好基本的框架组组后，必后，必须须把每一个框架与一个把每一个框架与一个HTML文文档关档关联联，即用，即用标记标记定定义义每一个框架。例如：每一个框架。例如：1.SRC属性属性 完成框架的初始化，即完成框架的初始化，即为为各个框架指定初始各个框架指定初始显显示的示的页页面，此面，此时时应应使用使用FRAME标记标记的的src属性，将属性，将该该属性的属性的值值指定指定为为要在框架中要在框架中显显示示的的页页面即可。面即可。第12页，共18页，编辑于2022年，星期三 2.NAME属性属性 为为每一个框架取一个名字（最起每一个框架取一个名字（最起码码在同一框架在同一框

21、架组组中中应应是不同的名字），是不同的名字），目的是在其他地方引用目的是在其他地方引用该该框架。格式框架。格式为为：3.标记标记的其他属性的其他属性 属性 值 说明Scrolling AUTO（默认）需要时显示滚动条 NO 不显示滚动条 YES 不管需要与否都显示Noresize 默认时边框可调，不可调Marginheight 像素 设置文档上下空白Marginwidth 像素 设置文档左右空白第13页，共18页，编辑于2022年，星期三 三、三、三、三、标记标记标记标记 如果在不支持框架的如果在不支持框架的Web浏览浏览器中装入框架定器中装入框架定义义的文档，得到的信息是的文档，得到的信息是

22、个空白个空白页页。为为此，可使用此，可使用标记标记，格式：，格式：Mypage 在支持框架的在支持框架的浏览浏览器中，器中，块块内的文本不能被正常内的文本不能被正常显显示出来，示出来，但当但当页页面是被装入不支持框架的面是被装入不支持框架的浏览浏览器中器中时时，文本就被，文本就被显显示出来。示出来。第14页，共18页，编辑于2022年，星期三四、四、设设置置边边框及框及颜颜色色 框架的框架的边边框可用框可用border属性属性(或或frameborder属性，二者具有同等效果）属性，二者具有同等效果）设设置（可取四个置（可取四个值值：yes、no、0、1）。）。BorderColor属性属性设

23、设置置边边框的框的颜颜色。当色。当这这两个使用在两个使用在标签标签中，中，则这则这一一设设置置对对本框架网本框架网页页中的所有框架都起作用；中的所有框架都起作用；使用在使用在标签标签中中则则只只对该对该框架起作用。框架起作用。五、五、五、五、链链链链接文档到接文档到接文档到接文档到单单单单个框架个框架个框架个框架 如果把某一网如果把某一网页页文档文档链链接到某一特定名称的框架中，接到某一特定名称的框架中，则则当点当点击击超超链链接接时时，目，目标标框架中将框架中将显显示示该该网网页页文档。文档。这这一一过过程用超程用超链链接的接的target属性属性实现实现。1.1.标签标签标签标签的的的的T

24、argetTarget属性属性属性属性 通常当通常当单击单击一个超一个超链链接接时时，新，新页页面的内容会取代当前面的内容会取代当前页页面。然而在窗面。然而在窗口口环环境中，新境中，新页页面的内容也可以在一个新窗口下面的内容也可以在一个新窗口下显显示。示。Target属性能属性能够够通知通知Web浏览浏览器器显显示示单击过单击过的信息，此信息通的信息，此信息通过过超超级级链链接指向被称接指向被称为为Window_name的一个窗口中，我的一个窗口中，我们们可可对对新窗口取任何一个不新窗口取任何一个不由下划由下划线线开开头头的名字。的名字。这这些名字被一些名字被一组组指定的指定的Target值值

25、所保留。所保留。第15页，共18页，编辑于2022年，星期三 当使用当使用Target属性属性时时，浏览浏览器首先器首先检验检验名名为为Window_name的窗口是否的窗口是否 存在。若存在，用超链接指向的文档取代当前的存在。若存在，用超链接指向的文档取代当前的Window_name的内容。另一的内容。另一方面，若名为方面，若名为Window_name的窗口当前不存在，将打开一个新的浏览器窗口，并的窗口当前不存在，将打开一个新的浏览器窗口，并命名为命名为Window_name，并用超链接指向的文档装入新建的窗口中。，并用超链接指向的文档装入新建的窗口中。2.2.链链链链接文档到接文档到接文档

26、到接文档到单单单单个框架的格式个框架的格式个框架的格式个框架的格式超超链链接要接要显显示的文字示的文字 例如：例如：超超链链接要接要显显示的文字示的文字 特殊的特殊的 4 类类操作操作:新窗口新窗口 本窗口本窗口 父窗口父窗口 整个整个浏览浏览器窗口器窗口3.3.标签标签标签标签 当使用当使用Target属性时，有时会遇到这种情况：在属性时，有时会遇到这种情况：在Web页面上所有的或大多数超页面上所有的或大多数超链接都指向同一窗口链接都指向同一窗口尤其是尤其是第16页，共18页，编辑于2022年，星期三 使用框架使用框架时时。在在这这种情况下，代替每个种情况下，代替每个标记标记中的中的Targ

27、et属性，可用属性，可用标记标记，给给Web页页面的所有面的所有链链接定接定义义一个全局目一个全局目标标。格式。格式为为：如果在如果在中包含了中包含了标记标记，则对则对每个没有相每个没有相应应Target属性的属性的标签标签将将显显示用示用窗口指向窗口指向的文档的文档。六、浮六、浮六、浮六、浮动动动动窗口窗口窗口窗口 可以使用可以使用标签来定义浮动框架，该标记允许在一个标签来定义浮动框架，该标记允许在一个 HTML文档任一位文档任一位置的框架中插入另一个置的框架中插入另一个HTML文档。常见的属性有：文档。常见的属性有：width:指定包含指定包含HTML文档的浮动框架的宽度（像素单位）文档的

28、浮动框架的宽度（像素单位）height：浮动框架的宽度（像素单位）：浮动框架的宽度（像素单位）src：指定框架中显示的：指定框架中显示的HTML文档的位置文档的位置 name：指定浮动框架的名字：指定浮动框架的名字 frameborder:指名框架是否要显示边框。值为指名框架是否要显示边框。值为1显示，为显示，为0不显示。不显示。border：指定边框宽度（像素单位）：指定边框宽度（像素单位）第17页，共18页，编辑于2022年，星期三 bordercolor:指定边框颜色指定边框颜色 framespacing：指定框架边框之间附加的像素数：指定框架边框之间附加的像素数 marginwidth：页边空白的宽度（像素）：页边空白的宽度（像素）marginheight：页边空白的高度（像素）：页边空白的高度（像素）noresize：不可调整大小：不可调整大小第18页，共18页，编辑于2022年，星期三