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