高效灵活的网页布局--框架的应用

1、电子工业出版社框架的应用框架的应用 8 8知识要点知识要点 认识框架及框架集认识框架及框架集 1掌握框架网页的创建方法掌握框架网页的创建方法 2掌握框架及框架集的基本操作掌握框架及框架集的基本操作 3掌握框架及框架集的属性设置方法掌握框架及框架集的属性设置方法 48.1 8.1 网页展示：使用框架布局网页展示：使用框架布局“乐途网乐途网”首页页面首页页面 采用框架布局的“乐途网”首页效果图 u本章使用框架布局制作本章使用框架布局制作“乐途网乐途网”首页及首页及“商商旅管理旅管理”页面。框架布页面。框架布局的首页效果如图所示，局的首页效果如图所示，网页窗口被分为上下两网页窗口被分为上下两部分，上

2、方为首页顶部，部分，上方为首页顶部，固定显示企业固定显示企业LogoLogo及导及导航等内容，下方为首页航等内容，下方为首页内容，拖动右侧滚动条内容，拖动右侧滚动条可以浏览页面内容。可以浏览页面内容。 8.1 8.1 网页展示：使用框架布局网页展示：使用框架布局“乐途网乐途网”首页页面首页页面 采用框架布局的“商旅管理”页面效果图 u在导航中点击在导航中点击“商旅管商旅管理理”超级链接，显示超级链接，显示“商旅管理商旅管理”页面内容，页面内容，如图所示。浏览器窗口如图所示。浏览器窗口同样被分为上下两部分，同样被分为上下两部分，通过拖动右侧的滚动条通过拖动右侧的滚动条可以浏览可以浏览“商旅管理商

3、旅管理”栏目主页面内容。在两栏目主页面内容。在两个页面中，上方的导航个页面中，上方的导航部分内容相同，在通过部分内容相同，在通过导航切换页面时，该部导航切换页面时，该部分内容保持不变，不会分内容保持不变，不会被刷新。被刷新。 8.2 8.2 网页制作网页制作 8.2.1 8.2.1 创建和保存框架页面创建和保存框架页面 步骤步骤1 1 启动启动Dreamweaver CS4Dreamweaver CS4，在，在“乐途网乐途网”站点中，站点中，执行【文件】执行【文件】| |【新建】命令，打开【新建文档】对话框。【新建】命令，打开【新建文档】对话框。步骤步骤2 2 在【新建文档】对话框中选择【示例

4、中的在【新建文档】对话框中选择【示例中的页】，在【示例文件夹】列表框中选择【框架页】，在页】，在【示例文件夹】列表框中选择【框架页】，在【示例页】列表框中选择框架结构【上方固定】。【示例页】列表框中选择框架结构【上方固定】。步骤步骤3 3 单击单击“创建创建”按钮，打开【框架标签辅助功按钮，打开【框架标签辅助功能属性】对话框。在能属性】对话框。在“框架框架”下拉列表框中选择框架，在下拉列表框中选择框架，在“标题标题”文本框中输入标题，通常保持默认设置。文本框中输入标题，通常保持默认设置。步骤步骤4 4 单击单击“确定确定”按钮关闭对话框，完成框架网按钮关闭对话框，完成框架网页的创建页的创建 8

5、.2 8.2 网页制作网页制作 步骤步骤5 5 执行【文件】执行【文件】| |【框架集另存为】菜单命令，【框架集另存为】菜单命令，将框架集页面命名为将框架集页面命名为“index.html”index.html”，保存在站点根目录，保存在站点根目录“ch8”ch8”文件夹中。文件夹中。步骤步骤6 6 鼠标点击选中上侧框架页面，执行【文件】鼠标点击选中上侧框架页面，执行【文件】| |【保存框架】菜单命令，将上侧框架页面命名为【保存框架】菜单命令，将上侧框架页面命名为“top.html”top.html”，保存在站点根目录中。，保存在站点根目录中。步骤步骤7 7 鼠标点击选中下侧框架页面，执行【文

6、件】鼠标点击选中下侧框架页面，执行【文件】| |【保存框架】菜单命令，将下侧框架页面命名为【保存框架】菜单命令，将下侧框架页面命名为“indexmain. html”indexmain. html”，保存在站点根目录，保存在站点根目录“ch8”ch8”文件夹文件夹中。完成框架网页的保存。中。完成框架网页的保存。 8.2 8.2 网页制作网页制作 8.2.2 8.2.2 设置框架及框架集属性设置框架及框架集属性 步骤步骤1 1 执行【窗口】执行【窗口】| |【框架】菜单命令，打开【框【框架】菜单命令，打开【框架】面板，选择框架集。架】面板，选择框架集。步骤步骤2 2 在【属性】面板中设置边框为在

7、【属性】面板中设置边框为“无无”，边框，边框宽度为宽度为0 0，行高设置为，行高设置为190190像素。像素。步骤步骤3 3 在【框架】面板中选择在【框架】面板中选择“topFrame”topFrame”框架，框架，在【属性】面板中设置上侧框架的属性。在【属性】面板中设置上侧框架的属性。步骤步骤4 4 在【框架】面板中选择在【框架】面板中选择“mainFrame”mainFrame”框架，框架，在【属性】面板中设置下侧框架的属性。在【属性】面板中设置下侧框架的属性。8.2 8.2 网页制作网页制作 8.2.3 8.2.3 制作顶部和下侧框架页面制作顶部和下侧框架页面 步骤步骤1 1 在【文件】

8、面板中双击顶部页面在【文件】面板中双击顶部页面top.htmltop.html文文件，在工作区以设计视图打开文件。件，在工作区以设计视图打开文件。步骤步骤2 2 打开【页面属性】对话框，设置打开【页面属性】对话框，设置top.htmltop.html页页面的上下和左右边距。面的上下和左右边距。步骤步骤3 3 在在top.htmltop.html中插入表格，保证表格高度与中插入表格，保证表格高度与“topFrame”topFrame”框架的行高一致，并设置表格的对齐方式为框架的行高一致，并设置表格的对齐方式为“居中对齐居中对齐”。 步骤步骤4 4 在表格中插入图片、文本及导航图像，并设在表格中插

9、入图片、文本及导航图像，并设置好置好CSSCSS样式，完成导航页面样式，完成导航页面top.htmltop.html的制作。的制作。步骤步骤5 5 在工作区以设计视图打开下侧框架页面在工作区以设计视图打开下侧框架页面indexmain.htmlindexmain.html文件，该页面的内容为已制作的文件，该页面的内容为已制作的“乐途网乐途网”首页去掉顶部内容之后的部分。在【页面属性】对话框中首页去掉顶部内容之后的部分。在【页面属性】对话框中设置上下边距和左右边距都设为设置上下边距和左右边距都设为0 0。 8.2 8.2 网页制作网页制作步骤步骤6 6 在在indexmain.htmlindex

10、main.html中插入表格，用于制作首中插入表格，用于制作首页的主要内容，设置表格的对齐方式为页的主要内容，设置表格的对齐方式为“居中对齐居中对齐” ” 。步骤步骤7 7 在表格中插入图片和文本，并设置好在表格中插入图片和文本，并设置好CSSCSS样式，样式，完成完成indexmain.htmlindexmain.html页面的制作。页面的制作。步骤步骤8 8 将页面全部保存，在浏览器中浏览将页面全部保存，在浏览器中浏览index.htmlindex.html，就会看到图，就会看到图8-18-1所显示的页面效果。整个浏所显示的页面效果。整个浏览器窗口被分为上下两部分，上侧框架中显示览器窗口被

11、分为上下两部分，上侧框架中显示top.htmltop.html页页面内容，下侧框架中显示面内容，下侧框架中显示indexmain.htmlindexmain.html页面内容。页面内容。 8.2 8.2 网页制作网页制作 8.2.4 8.2.4 制作制作“商旅管理商旅管理”主页面主页面 步骤步骤1 1 在【文件】面板中双击在【文件】面板中双击ctmmain.htmlctmmain.html文件，文件，在工作区以设计视图打开文件。设置在工作区以设计视图打开文件。设置ctmmain.htmlctmmain.html页面的页面的上下边距和左右边距都为上下边距和左右边距都为0 0。步骤步骤2 2 在在

12、ctmmain.htmlctmmain.html中用表格进行布局，设置表中用表格进行布局，设置表格的对齐方式为格的对齐方式为“居中对齐居中对齐”。步骤步骤3 3 在表格中插入图片和文本，并设置好在表格中插入图片和文本，并设置好CSSCSS样式，样式，完成完成ctmmain.htmlctmmain.html页面的制作。页面的制作。 8.2 8.2 网页制作网页制作 8.2.5 8.2.5 在框架中创建超级链接在框架中创建超级链接 步骤步骤1 1 在设计视图中打开导航页面在设计视图中打开导航页面top.htmltop.html，选择，选择导航条中的导航条中的“首页首页”图片，在【属性】面板中设置图

13、像链图片，在【属性】面板中设置图像链接为接为“indexmain.html”indexmain.html”，目标为，目标为“mainframe” mainframe” 。保存，。保存，完成链接到首页的超链接设置。完成链接到首页的超链接设置。 步骤步骤2 2 在在top.htmltop.html中，鼠标单击选择中，鼠标单击选择“商旅管理商旅管理”导航图片，在【属性】面板中设置图像链接为导航图片，在【属性】面板中设置图像链接为“ctmmain.html”ctmmain.html”，目标为，目标为“mainframe”mainframe”。保存，完成。保存，完成“商旅管理商旅管理”超链接设置。超链接

14、设置。8.2 8.2 网页制作网页制作步骤步骤3 3 用同样的方法创建好其他栏目的超级链接，用同样的方法创建好其他栏目的超级链接，链接的目标都设置为链接的目标都设置为“mainFrame”mainFrame”，这样超链接对应页，这样超链接对应页面内容就会在面内容就会在“mainframe”mainframe”框架中显示。框架中显示。步骤步骤4 4 保存保存top.htmltop.html页面，在浏览器中浏览框架集页面，在浏览器中浏览框架集页面页面index.htmlindex.html，测试设置好的超级链接，超链接所对应，测试设置好的超级链接，超链接所对应的栏目页面会在下侧框架中显示，而浏览器

15、的地址栏中一的栏目页面会在下侧框架中显示，而浏览器的地址栏中一直保持为直保持为index.htmlindex.html页面地址。页面地址。 8.3 8.3 知识链接知识链接v认识框架和框架集认识框架和框架集 v创建框架网页创建框架网页 v框架及框架集的基本操作框架及框架集的基本操作 v框架与框架集的属性设置框架与框架集的属性设置 v使用超链接控制框架内容使用超链接控制框架内容 v为不能显示框架的浏览器定义内容为不能显示框架的浏览器定义内容 8.3.1 8.3.1 认识框架和框架集认识框架和框架集 框架网页是一种特殊的框架网页是一种特殊的HTMLHTML网页，框架的作用就是网页，框架的作用就是把

16、浏览器窗口划分成若干个区域，每个区域都可以分别把浏览器窗口划分成若干个区域，每个区域都可以分别显示不同的网页。框架网页由两个主要部分组成：框架显示不同的网页。框架网页由两个主要部分组成：框架集和单个框架。框架集是在一个文档内定义一组框架结集和单个框架。框架集是在一个文档内定义一组框架结构的构的HTMLHTML网页，该网页文件中定义了要显示的框架数、网页，该网页文件中定义了要显示的框架数、框架的大小、载入框架的网页源和其他可定义的属性。框架的大小、载入框架的网页源和其他可定义的属性。单个框架是指在网页上定义的一个区域，每个框架就是单个框架是指在网页上定义的一个区域，每个框架就是不同的不同的HTM

17、LHTML文档。框架集和框架之间的关系就是包含与文档。框架集和框架之间的关系就是包含与被包含的关系。被包含的关系。8.3.2 8.3.2 创建框架网页创建框架网页 1 1通过【新建文档】对话框创建通过【新建文档】对话框创建 前面使用框架布局前面使用框架布局“乐途网乐途网”首页页面时采首页页面时采用的方法就是通过【新建文档】对话框直接创建用的方法就是通过【新建文档】对话框直接创建预定义框架集。预定义框架集。 8.3.2 8.3.2 创建框架网页创建框架网页 2 2从从“布局布局”插入栏中创建插入栏中创建 步骤步骤1 1 新建空白网页文档，将【插入】面板切换到新建空白网页文档，将【插入】面板切换到

18、“布局布局”插入插入栏。栏。 步骤步骤2 2 单击单击“框架框架”按钮右侧的下三角按钮，在弹出的菜单项中按钮右侧的下三角按钮，在弹出的菜单项中选择需要的框架，这里选择选择需要的框架，这里选择“顶部框架顶部框架”，如图所示。，如图所示。 选择框架集 8.3.2 8.3.2 创建框架网页创建框架网页 2 2从从“布局布局”插入栏中创建插入栏中创建 步骤步骤3 3 在打开的【框架标签辅助功能属性】对话框中在打开的【框架标签辅助功能属性】对话框中直接单击直接单击“确定确定”按钮，完成框架网页的创建，如图所示。按钮，完成框架网页的创建，如图所示。 创建框架网页 8.3.2 8.3.2 创建框架网页创建框

19、架网页 3 3从【插入】菜单中创建框架页面从【插入】菜单中创建框架页面 步骤步骤1 1 创建空白网页文档。创建空白网页文档。 步骤步骤2 2 执行【插入】执行【插入】| |【HTMLHTML】| |【框架】菜单命令，在弹出的子【框架】菜单命令，在弹出的子菜单中选择相应的选项即可创建框架网页，如图所示。菜单中选择相应的选项即可创建框架网页，如图所示。从【插入】菜单中创建框架页面 8.3.2 8.3.2 创建框架网页创建框架网页 4 4手动创建框架手动创建框架 步骤步骤1 1 新建空白网页文档，执行【查看】新建空白网页文档，执行【查看】| |【可视化助理】【可视化助理】| |【框架【框架边框】菜单

20、命令，将框架的边框在编辑窗口四周显示出来，如图所示。边框】菜单命令，将框架的边框在编辑窗口四周显示出来，如图所示。 步骤步骤2 2 将光标定位到需要分割的框架中，按住将光标定位到需要分割的框架中，按住AltAlt键，将鼠标移动键，将鼠标移动到框架边框线上，当鼠标指针变为双向箭头形状时，按住鼠标左键不放，到框架边框线上，当鼠标指针变为双向箭头形状时，按住鼠标左键不放，拖动到合适位置释放鼠标，即可将一个框架拆分为两个框架，如图所示。拖动到合适位置释放鼠标，即可将一个框架拆分为两个框架，如图所示。 显示框架边框拆分框架8.3.2 8.3.2 创建框架网页创建框架网页 5 5创建嵌套框架集创建嵌套框架

21、集 步骤步骤1 1 将鼠标定位到需要创建嵌套框架集的框架中，如图所示。将鼠标定位到需要创建嵌套框架集的框架中，如图所示。 步骤步骤2 2 在【插入】面板中单击【布局】【框架】【下方和嵌套在【插入】面板中单击【布局】【框架】【下方和嵌套的左侧框架】命令项。的左侧框架】命令项。 步骤步骤3 3 在打开的【框架标签辅助功能属性】对话框中单击在打开的【框架标签辅助功能属性】对话框中单击“确定确定”按钮，完成嵌套框架的制作，如图所示。按钮，完成嵌套框架的制作，如图所示。 鼠标定位 创建嵌套框架 8.3.3 8.3.3 框架及框架集的基本操作框架及框架集的基本操作 1 1保存框架和框架集文件保存框架和框架

22、集文件 框架及框架集都是框架及框架集都是HTMLHTML文档，因此这些文件必须一起文档，因此这些文件必须一起保存。在保存。在DreamweaverDreamweaver中用户可以单独保存一个框架集文件，中用户可以单独保存一个框架集文件，也可以保存某个框架文件，还可以保存所有打开的框架文也可以保存某个框架文件，还可以保存所有打开的框架文件和框架集文件。件和框架集文件。 （1 1）保存框架集的所有文件）保存框架集的所有文件 要保存所有文件，包括框架集文件和框架文件，可以要保存所有文件，包括框架集文件和框架文件，可以执行【文件】执行【文件】| |【保存全部】菜单命令。这时【保存全部】菜单命令。这时D

23、reamweaverDreamweaver将逐个保存网页中的所有框架。将逐个保存网页中的所有框架。 8.3.3 8.3.3 框架及框架集的基本操作框架及框架集的基本操作 （2 2）保存框架集文件）保存框架集文件 执行【文件】执行【文件】| |【框架集另存为】菜单命令，可以把当【框架集另存为】菜单命令，可以把当前框架集另存为新文件。前框架集另存为新文件。 （3 3）保存框架文件）保存框架文件 框架文件实际上就是在框架内打开的网页文件，要保框架文件实际上就是在框架内打开的网页文件，要保存框架文件，在框架内单击鼠标，定位到要保存的框架页存框架文件，在框架内单击鼠标，定位到要保存的框架页面，然后执行【

24、文件】面，然后执行【文件】| |【保存框架】菜单命令。【保存框架】菜单命令。 8.3.3 8.3.3 框架及框架集的基本操作框架及框架集的基本操作 2 2选择框架和框架集选择框架和框架集 选中框架和框架集后，可以改变其属性。选择框架和框架集有两种方式。选中框架和框架集后，可以改变其属性。选择框架和框架集有两种方式。 （1 1）通过【框架】面板选择框架和框架集）通过【框架】面板选择框架和框架集 执行【窗口】执行【窗口】| |【框架】菜单命令，显示【框架】面板，在【框架】面板【框架】菜单命令，显示【框架】面板，在【框架】面板中在框架上单击就可以选中框架，如图所示。中在框架上单击就可以选中框架，如图

25、所示。选择框架8.3.3 8.3.3 框架及框架集的基本操作框架及框架集的基本操作 若要选择框架集，只需单击框架集的边框即可，如若要选择框架集，只需单击框架集的边框即可，如图所示。在【框架】面板中，选中的框架或框架集周围图所示。在【框架】面板中，选中的框架或框架集周围会出现黑色边框，在编辑窗口中，对应所选中的框架或会出现黑色边框，在编辑窗口中，对应所选中的框架或框架集的边界会被虚线包围。框架集的边界会被虚线包围。 选择框架集8.3.3 8.3.3 框架及框架集的基本操作框架及框架集的基本操作 （2 2）在编辑窗口中选择框架和框架集）在编辑窗口中选择框架和框架集 在编辑窗口的设计视图中，也可以直

26、接选择框架和在编辑窗口的设计视图中，也可以直接选择框架和框架集。如果要选择框架，可以按下框架集。如果要选择框架，可以按下AltAlt键，然后单击需键，然后单击需要选择的框架即可。如果要选择框架集，直接用鼠标单要选择的框架即可。如果要选择框架集，直接用鼠标单击框架边框即可。所选中的框架或框架集的边框会呈现击框架边框即可。所选中的框架或框架集的边框会呈现虚线。虚线。 8.3.3 8.3.3 框架及框架集的基本操作框架及框架集的基本操作 3 3删除框架删除框架 删除不需要的框架，可用鼠标将要删除框架删除不需要的框架，可用鼠标将要删除框架的边框拖动到页面之外即可。如果是嵌套框架，的边框拖动到页面之外即

27、可。如果是嵌套框架，可用鼠标将其边框拖动到父框架边框上或者拖动可用鼠标将其边框拖动到父框架边框上或者拖动到页面之外即可。到页面之外即可。 8.3.3 8.3.3 框架及框架集的基本操作框架及框架集的基本操作 4 4使用浮动框架制作页面使用浮动框架制作页面 浮动框架浮动框架iframeiframe与框架与框架frameframe的功能一样，不同的是可以的功能一样，不同的是可以把把iframeiframe布置在网页中的任何位置，包括层中，可以给网页布置在网页中的任何位置，包括层中，可以给网页设计带来很大的灵活性。创建浮动框架的步骤如下：设计带来很大的灵活性。创建浮动框架的步骤如下： 步骤步骤1 1

28、 在网页文档中，将光标定位在要创建浮动框架的在网页文档中，将光标定位在要创建浮动框架的位置。在【插入】面板中单击【常用】【标签选择器】按位置。在【插入】面板中单击【常用】【标签选择器】按钮，如图所示。钮，如图所示。 选择“标签选择器” 8.3.3 8.3.3 框架及框架集的基本操作框架及框架集的基本操作 步骤步骤2 2 在弹出的【标签选择器】对话框中单击在弹出的【标签选择器】对话框中单击“HTMLHTML标标签签”项，在右侧标签列表中选择项，在右侧标签列表中选择“iframe”iframe”，如图所示。，如图所示。 【标签选择器】对话框 8.3.3 8.3.3 框架及框架集的基本操作框架及框架

29、集的基本操作 步骤步骤3 3 单击单击“插入插入”按钮，打开【标签编辑器】对话按钮，打开【标签编辑器】对话框，如图所示。在该对话框中对框，如图所示。在该对话框中对iframeiframe的属性进行编辑，包的属性进行编辑，包括要显示的源文件、浮动框架名称以及浮动框架的宽度和高括要显示的源文件、浮动框架名称以及浮动框架的宽度和高度等。度等。 【标签编辑器】对话框8.3.3 8.3.3 框架及框架集的基本操作框架及框架集的基本操作 步骤步骤4 4 属性设置好后，单击属性设置好后，单击“确定确定”按钮，再关闭【标签选择器】按钮，再关闭【标签选择器】对话框，在对话框，在“拆分拆分”视图中就可以看到插入的

30、标签。视图中就可以看到插入的标签。 步骤步骤5 5 保存网页文档，按保存网页文档，按F12F12键，在浏览器中浏览。浮动框架键，在浏览器中浏览。浮动框架iframeiframe的网页效果如图所示。的网页效果如图所示。 浮动框架效果8.3.4 8.3.4 框架与框架集的属性设置框架与框架集的属性设置 1 1设置框架的属性设置框架的属性 要设置框架的属性，可以先选中相应的框架，然后在要设置框架的属性，可以先选中相应的框架，然后在框架属性面板中设置框架的属性，如图所示。框架属性面板中设置框架的属性，如图所示。 设置框架的属性 8.3.4 8.3.4 框架与框架集的属性设置框架与框架集的属性设置 2 2设置框架集的属性设置框架集的属性 要设置框架集的属性，可先选中框架集，然后在框架要设置框架集的属性，可先选中框架集，然后在框架集属性面板中设置框架集的属性，如图所示。集属性面板中设置框架集的属性，如图所示。 设置框架集的属性 8.3.5 8.3.5 使用超链接控制框架内容使用超链接控制框架内容 使用超链接控制框架内容，也就是在一个框架中用链使用超链接控制框架内容，也就是在一个框架中用链接来控制另一个框架中的显示内容，这也是使用框架的主要接来控制另一个框架中的显示内容，这也是使用框