《CH5网页框架的处理.ppt》由会员分享，可在线阅读，更多相关《CH5网页框架的处理.ppt（11页珍藏版）》请在金锄头文库上搜索。
1、 通过本章学习，应该掌握以下内容：通过本章学习，应该掌握以下内容：1.认识框架网页认识框架网页 2.创建框架网页的方法创建框架网页的方法 3.编辑框架网页的方法编辑框架网页的方法 4.设置框架属性的方法设置框架属性的方法 第第5章章 网页框架的处理网页框架的处理 5.1 利用利用FrontPage 2002处理框架处理框架 5.1.1 创建框架网页创建框架网页 1认识框架网页认识框架网页 框框架架网网页页是是种种特特殊殊的的HTML网网页页，它它可可将将浏浏览览器器窗窗口口分分成成不不同的区域，称为框架区域。每个区域都可以显示不同的网页同的区域，称为框架区域。每个区域都可以显示不同的网页.（1
2、）框架网页的特点）框架网页的特点 只只要要单单击击某某一一个个框框架架区区域域内内的的超超链链接接，其其指指向向的的网网页页就就会会在在另另一一个框架区域中显示，而不必将整个浏览器窗口中的内容更换一遍。个框架区域中显示，而不必将整个浏览器窗口中的内容更换一遍。 固定网页中的某些内容。固定网页中的某些内容。 并并不不是是所所有有的的浏浏览览器器都都能能显显示示框框架架网网页页，这这也也是是框框架架网网页页的的一一个个局限。局限。 （2）框架网页的种类）框架网页的种类 根根据据框框架架分分布布的的不不同同和和各各框框架架作作用用的的不不同同，框框架架网网页页被被分分为为多多种种类类型型。使使用用F
3、rontPage制制作作网网页页时时，常常用用到到的的框框架架网网页页是是：标标题题、标标题题页页脚脚和和目目录录、垂垂直直拆拆分分、横横幅幅和和目目录录、脚脚注注、目目录录、嵌嵌套套式式层层次结构、水平拆分、页脚和自顶向下的层次结构。次结构、水平拆分、页脚和自顶向下的层次结构。 2创建框架网页创建框架网页 选选择择“文文件件”| “新新建建”| “网网页页或或站站点点”命命令令，打打开开“新新建建网网页页或站点或站点”窗格；窗格； 单击单击“网页模板网页模板”超级链接，打开超级链接，打开“网页模板网页模板”对话框；对话框； 单单击击“框框架架网网页页”选选项项卡卡，显显示示十十种种网网页页模
4、模板板，选选择择其其中中任任一一种种形形式式，在在对对话话框框右右边边会会出出现现该该模模板板形形式式的的说说明明，以以及及模模板板预预览览。选选择择“嵌套式嵌套式”层次结构，单击层次结构，单击“确定确定”按钮，出现初始框架网页；按钮，出现初始框架网页； 单单击击每每个个框框架架中中的的“新新建建网网页页”按按钮钮，各各编编辑辑区区变变成成编编辑辑状状态态，可可以以依依次次编编辑辑各各个个网网页页。单单击击每每一一个个框框架架区区域域中中的的“设设置置初初始始网网页页”按按钮钮将将打打开开一一个个对对话话框框，可可以以在在该该对对话话框框中中选选择择一一个个网网页页作作为为框框架网页最初显示的
5、网页，并显示在框架区域中。架网页最初显示的网页，并显示在框架区域中。 5.1.2 编辑框架网页编辑框架网页 编编辑辑框框架架网网页页与与编编辑辑普普通通的的网网页页相相同同，也也可可以以在在框框架架网网页页中中添添加加和和格格式式化化文文本本、设设置置网网页页的的背背景景颜颜色色和和背背景景图图片片、在在网网页页中中插插入入图图片和添加组件，还可以调整框架的大小等。片和添加组件，还可以调整框架的大小等。 1在框架网页中添加和格式化文本在框架网页中添加和格式化文本 在在框框架架网网页页中中添添加加和和格格式式化化文文本本与与在在普普通通的的网网页页中中添添加加和和格格式式化化文本相同。文本相同。
6、 2调整框架的大小调整框架的大小 在在输输入入文文本本时时，可可能能输输入入的的文文本本内内容容比比较较多多，但但框框架架又又比比较较小小，所所以以输输入入文文本本时时会会有有一一部部分分文文本本不不能能显显示示，这这样样在在查查看看文文本本时时就就有有可能看不到文本的整体效果，这时可以调整框架的大小来显示文本。可能看不到文本的整体效果，这时可以调整框架的大小来显示文本。 通通常常调调整整框框架架的的大大小小的的方方法法有有两两种种，即即通通过过拖拖动动框框架架的的边边框框或或指指定想要的确切设置来调整框架的大小。定想要的确切设置来调整框架的大小。（1）拖动框架的边框调整框架大小）拖动框架的边
7、框调整框架大小 将将光光标标放放在在要要调调整整的的框框架架边边框框上上，当当光光标标变变为为“ ”形形状状时时，按按住住鼠鼠标标左左键键，并并向向下下拖拖动动。按按此此方方法法调调整整上上图图中中右右边边两两个个框框架架的的大大小，调整后的框架网页如图小，调整后的框架网页如图5.7所示。所示。（2）精确设置框架大小）精确设置框架大小 单单击击框框架架，将将光光标标置置于于框框架架内内，点点击击鼠鼠标标右右键键，从从弹弹出出的的快快捷捷菜菜单单中选择中选择“框架属性框架属性”命令，弹出命令，弹出“框架属性框架属性”对话框；对话框； 在在“框框架架大大小小”选选项项组组中中设设置置框框架架大大小
8、小为为固固定定像像素素数数后后，再再指指定定框框架的宽度和行高，单击架的宽度和行高，单击“确定确定”按钮。按钮。 3拆分框架拆分框架 在在框框架架网网页页中中不不但但可可以以调调整整框框架架的的大大小小，还还可可以以设设置置网网页页中中显显示示的框架的多少。在框架网页中可以任意地拆分框架。的框架的多少。在框架网页中可以任意地拆分框架。（1）拖动边框拆分框架）拖动边框拆分框架 将将光光标标放放在在要要拆拆分分的的框框架架边边框框上上，按按住住“Ctrl”健健，同同时时按按住住鼠鼠标标左左键键拖拖动动框框架架边边框框，拖拖出出一一段段距距离离后后放放开开鼠鼠标标左左键键和和“Ctrl”键，出现一个
9、框架。键，出现一个框架。 （2）将框架平均分成两行或两列）将框架平均分成两行或两列 将将光光标标放放在在要要拆拆分分的的框框架架边边框框内内，选选择择“框框架架”|“拆拆分分框框架架”命命令令弹弹出出“拆拆分分框框架架”对对话话框框。选选择择 “拆拆分分为为行行”或或“拆拆分分为为列列”，单击单击“确定确定”按钮。按钮。 4删除框架删除框架 将光标放在要删除的框架中；将光标放在要删除的框架中； 选择选择“框架框架”| “删除框架删除框架”命令。命令。 注注意意：从从框框架架网网页页中中删删除除框框架架时时，该该框框架架中中显显示示的的网网页页也也会会被被删删除除，但但是是框框架架网网页页中中其
10、其余余的的内内容容并并没没有有被被删删除除。若若框框架架网网页页仅仅含含有一个框架，就不能删除该框架。有一个框架，就不能删除该框架。 5为框架网页设置背景颜色和背景图片为框架网页设置背景颜色和背景图片 （1）设置框架网页的背景颜色）设置框架网页的背景颜色 将光标放在要设置背景颜色的框架中；将光标放在要设置背景颜色的框架中； 单单击击鼠鼠标标右右键键，从从弹弹出出的的快快捷捷菜菜单单中中选选择择“网网页页属属性性”命命令令，打打开开“网页属性网页属性”对话框；对话框； 单击单击“背景背景”标签，打开标签，打开“背景背景”选项卡；选项卡； 单击单击“背景背景”右侧的按钮，从弹出的颜色面板中选择背景
11、颜色；右侧的按钮，从弹出的颜色面板中选择背景颜色； 单击单击“确定确定”按钮。按钮。（2）设置框架网页的背景图片）设置框架网页的背景图片设置框架网页的背景图片与设置框架网页的背景颜色类似。设置框架网页的背景图片与设置框架网页的背景颜色类似。5.1.3 设置框架网页属性设置框架网页属性 设设置置框框架架的的属属性性包包括括设设置置边边框框的的隐隐藏藏或或显显示示、设设置置框框架架的的边边距距和和间距以及设置框架中滚动条的显示和隐藏。间距以及设置框架中滚动条的显示和隐藏。 1显示和隐藏框架边框显示和隐藏框架边框 可可以以根根据据所所需需的的网网页页外外观观来来选选择择显显示示或或隐隐藏藏框框架架网
12、网页页的的框框架架周围的边框。周围的边框。显示和隐藏边框的操作步骤如下：显示和隐藏边框的操作步骤如下： 将光标放在任意一个框架中；将光标放在任意一个框架中； 单单击击鼠鼠标标右右键键，从从弹弹出出的的快快捷捷菜菜单单中中选选择择“框框架架属属性性”命命令令，弹弹出出“框框架架属属性性”对对话话框框；单单击击“框框架架网网页页”按按钮钮，打打开开“网网页页属属性性”对话框；对话框； 选择或禁用选择或禁用“显示边框显示边框”复选框，就显示和隐藏框架边框；复选框，就显示和隐藏框架边框； 单击单击“确定确定”按钮，回到按钮，回到“框架属性框架属性”对话框；对话框； 单击单击“确定确定”按钮。按钮。 2
13、显示和隐藏框架滚动条显示和隐藏框架滚动条 在在“框框架架属属性性”对对话话框框中中，从从“显显示示滚滚动动条条”的的下下拉拉列列表表中中选选择择“显示显示”或或“不显示不显示”或者或者“需要时显示需要时显示”。 5.1.4 在框架网页中设置超链接在框架网页中设置超链接 在在框框架架组组中中设设置置超超级级链链接接后后，单单击击超超级级链链接接，该该链链接接所所指指向向的的网网页页通通常常会会在在另另一一个个框框架架中中打打开开，即即会会在在目目标标框框架架中中打打开开。在在使使用用FrontPage 2002的的框框架架网网页页模模板板所所创创建建的的框框架架网网页页下下，目目标标框框架架已已
14、经经设设置置好好了了。在在框框架架组组中中设设置置超超链链接接与与在在普普通通的的网网页页中中设设置置超超链链接接相同，也可以设置文本超链接和图片超链接。相同，也可以设置文本超链接和图片超链接。1在框架中设置文本超链接在框架中设置文本超链接 其操作步骤如下：其操作步骤如下： 在在框框架架中中选选择择要要设设置置超超链链接接的的文文本本，单单击击“常常用用工工具具栏栏”中中的的“插插入超链接入超链接”按钮，弹出按钮，弹出“插入超链接插入超链接”对话框；对话框； 选选择择要要链链接接的的文文件件，单单击击“目目标标框框架架”按按钮钮，弹弹出出 “目目标标框框架架”对话框；对话框； 选择目标框架，单
15、击选择目标框架，单击“确定确定”按钮，回到按钮，回到“插入超链接插入超链接”对话框；对话框； 单击单击“确定确定”按钮，则超链接设置完成。按钮，则超链接设置完成。2在框架中设置图片超链接在框架中设置图片超链接 在在框框架架中中设设置置图图片片超超级级链链接接与与在在框框架架中中设设置置文文本本超超级级链链接接基基本本相相同同 。 5.1.5保存框架网页保存框架网页 创创建建和和编编辑辑完完框框架架后后就就可可以以对对框框架架进进行行保保存存了了。保保存存框框架架与与保保存普通的页面方法相同存普通的页面方法相同 。5.2 其他处理网页框架的方法其他处理网页框架的方法5.2.1 利用利用Dream
16、weaver 4.0处理框架网页处理框架网页1. 建立框架建立框架 Dreamweaver 4.0在在对对象象面面板板“Frames（框框架架）”类类中中提提供供了了许许多组框架组，使用者点击鼠标就可以创建框架。多组框架组，使用者点击鼠标就可以创建框架。2编辑框架编辑框架 框框架架创创建建好好以以后后，就就可可以以对对框框架架进进行行编编辑辑了了。每每一一个个框框架架里里都都是是一一个个文文档档，可可以以直直接接添添加加内内容容，也也可可以以在在框框架架内内打打开开已已经经存存在在的的文档。文档。 3保存框架保存框架 每每一一个个框框架架都都包包含含一一个个文文档档，因因此此一一个个框框架架集
17、集会会包包含含多多个个文文档档。在在保保存存文文档档的的时时候候，不不能能只只简简单单地地保保存存一一个个文文档档，要要将将整整个个网网页页文文档都保存下来。档都保存下来。 4框架属性及框架集属性设置框架属性及框架集属性设置 使用框架属性面板可以查看和设置框架的属性。使用框架属性面板可以查看和设置框架的属性。 5.2.2利用利用HTML创建网页框架创建网页框架1。指定框架结构。指定框架结构 在在框框架架集集网网页页中中，除除了了基基本本的的HTML、HEAD等等标标记记符符以以外外，主主要要包包括括框框架架集集标标记记符符FRAMESET（必必须须有有结结束束标标记记符符）和框架标记符和框架标
18、记符FRAME（没有结束标记符）。没有结束标记符）。 由由于于框框架架是是按按照照行行或或列列排排列列的的，所所以以在在建建立立框框架架结结构构时时，使使用用FRAMESET标标记记符符的的rows属属性性或或cols属属性性分分别别可可以以构构造造出出横横向向分分隔框架和纵向分隔框架。隔框架和纵向分隔框架。 2框架的嵌套框架的嵌套 如如果果网网页页设设计计者者需需要要创创建建一一些些复复杂杂的的框框架架集集，即即同同时时包包含含横横向向和和纵纵向向的的框框架架，此此时时可可以以使使用用框框架架嵌嵌套套。框框架架嵌嵌套套时时只只要要在在要要使使用用FRAME标记时再使用标记时再使用FRAMES
19、ET标记一个框架集即可。标记一个框架集即可。 3框架的初始化框架的初始化 框框架架初初始始化化是是指指为为各各个个框框架架指指定定初初始始显显示示的的页页面面，此此时时应应使使用用FRAME标标记记的的src属属性性，将将该该属属性性的的值值指指定定为为要要在在框框架架中中显显示示的的页面即可。页面即可。 4边框效果边框效果 （1）框架边框的设置）框架边框的设置 border属性可以用于设置边框的宽度，其值为像素数。属性可以用于设置边框的宽度，其值为像素数。（2）框架滚动条的设置）框架滚动条的设置 使使用用FRAME标标记记符符的的scrolling属属性性可可以以控控制制是是否否在在框框架架
20、内内加加入入滚动条，其值可以取为滚动条，其值可以取为yes、no、auto。 （3）设置边框的不可移动属性设置边框的不可移动属性 使使用用FRAME标标记记符符的的noresize属属性性，该该属属性性不不需需要要任任何何取取值值，即即：（4）设置框架空白设置框架空白 FRAME标标记记符符的的framespacing属属性性可可以以控控制制框框架架边边框框与与数数据据之之间的距离，这个属性的取值都是像素数。间的距离，这个属性的取值都是像素数。5指定超链接的目标框架指定超链接的目标框架 控控制制超超链链接接的的目目标标文文件件在在哪哪一一个个框框架架内内显显示示的的方方法法是是在在A标标记记符符内使用内使用target属性，格式为：属性，格式为：超链接内容超链接内容
