第7章创建框架网页ppt课件

1、Dreamweaver基础篇基础篇Dreamweaver基础篇基础篇Dreamweaver基础篇基础篇第第7章章 创建框架网页创建框架网页Dreamweaver基础篇基础篇回想掌握表格的插入掌握表格属性的设置掌握选择表格的方法掌握编辑表格和单元格Dreamweaver基础篇基础篇学习目标了解框架网页概述掌握创建框架和框架集掌握框架和框架集的选择掌握框架和框架集属性的设置掌握完整的框架网页创建掌握嵌入式框架的创建掌握框架的使用技巧 Dreamweaver基础篇基础篇7.1 框架网页概述在Dreamweaver 8中，框架是一个非常重要的页面布局工具。它可以把浏览器的窗口分割成若干相互独立又有联系

2、的区域，在每个区域中显示一个独立的网页文件，从而实现了一个网页内显示多个HTML文件的目的。使用框架的优点在于可以把不同层次的网页中的不改变的内容放在一个框架中，把不断改变的文档内容放在一个框架中。框架技术可以被广泛的应用到网站导航和文档浏览中，方便访问者对网页的浏览，减少访问者下载页面所需要的时间。 框架由框架集和框架组成。框架集就是框架的集合，它是在一个文档内一组框架结构的HTML网页，定义了网页显示的框架数、框架的大小、载入框架的网页源和其他可定义的属性等。框架是框架集中显示的文档，每个框架实质上都是一个独立存在的HTML文档。Dreamweaver基础篇基础篇7.2 创建框架和框架集

3、在Dreamweaver中预定义了多种框架集，可以很方便地创建想要的框架网页。创建框架集选择预定义的框架集将自动设置创建布局所需要的所有框架集和框架，它是迅速创建基于框架布局的最简单方法。创建框架集的具体操作步骤如下。1选择菜单中的【文件】|【新建】命令，翻开【新建文档】对话框，在对话框中选择【常规】选项卡中的【类别】|【框架集】|【上方固定，左侧嵌套】选项。如图7-1：Dreamweaver基础篇基础篇Dreamweaver基础篇基础篇2.单击【创建】按钮，即可创建一上方固定，左侧嵌套的框架网页。如图7-2：提示：还可以用以下两种方法创建框架网页：Dreamweaver基础篇基础篇在【规划】

4、插入栏中单击按钮，在弹出的菜单中选择【左侧和嵌套的下方框架】选项，即可创建框架网页。如图7-3：选择菜单中的【插入】|【HTML】|【框架】|【左侧及下方嵌套】命令，即可创建框架网页。 Dreamweaver基础篇基础篇插入预定义框架集插入预定义框架集插入预定义框架集的具体操作步骤如下。插入预定义框架集的具体操作步骤如下。1标放置在头部框架中，选择菜单中的【修正】标放置在头部框架中，选择菜单中的【修正】|【页面属性】【页面属性】命令，翻开【页面属性】对话框中将【左边距】设置为命令，翻开【页面属性】对话框中将【左边距】设置为0像素，像素，【右边距】设置为【右边距】设置为0像素。如图像素。如图7-

5、4： Dreamweaver基础篇基础篇2【确定】按钮。选中头部框架，在【属性】面板中单击【源文件】文本框右侧的【浏览文件】按钮，翻开【选择HTML文件】对话框，在对话框中选择top1.htm。3单击【确定】按钮，插入文件。4将光标放置在左侧框架中，修改页面属性，在【属性】面板中单击【源文件】文本框右侧的【浏览文件】按钮，在打开的【选择HTML文件】对话框中选择leftlhtm，单击【确定】按钮，插入文件。5将光标放置在右侧框架中，修改页面属性，在【属性】面板中单击【源文件】文本框右侧的【浏览文件】按钮，在打开的【选择HTML文件】对话框中选择right.htm，单击【确定】按钮，插入文件。

6、Dreamweaver基础篇基础篇保存框架和框架集文件保存框架和框架集文件在浏览器中预览框架集之前，必须保存框架集文件以及要在在浏览器中预览框架集之前，必须保存框架集文件以及要在框架中显示的所有文档。可以单独保存每个框架集文件和带框架中显示的所有文档。可以单独保存每个框架集文件和带框架的文档，也可以同时保存框架集文件和框架中出现的所框架的文档，也可以同时保存框架集文件和框架中出现的所有文档。保存框架和框架集文件的具体操作步骤如下。有文档。保存框架和框架集文件的具体操作步骤如下。1新建一上方固定，左侧嵌套的框架网页。选择菜单中的新建一上方固定，左侧嵌套的框架网页。选择菜单中的【文件】【文件】|【

7、保存全部】命令，翻开【另存为】对话框，此时【保存全部】命令，翻开【另存为】对话框，此时整个框架集内侧出现阴影，所以询问的是框架集的名称，在整个框架集内侧出现阴影，所以询问的是框架集的名称，在【文件名】文本框中输入【文件名】文本框中输入index.htm。如图。如图7-5：Dreamweaver基础篇基础篇Dreamweaver基础篇基础篇2单击【保管】按钮，打开第2个【另存为】对话框，因为右侧框架内侧出现阴影，所示询问的是右侧框架的名称，在【文件名】文本框中输入right.htm。如图7-6：Dreamweaver基础篇基础篇3单击【保管】按钮，打开第3个【另存为】对话框，因为左侧框架内侧出现

8、阴影，所以询问的是左侧框架的名称，在【文件名】丈本框中输入left.htm。如图7-7：Dreamweaver基础篇基础篇4单击【保管】按钮，打开第4个【另存为】对话框，因为头部框架内侧出现阴影，所示询问的是头部框架的名称，在【文件名】文本框中输入top.htm。如图7-8： 5单击【保管】按钮，至此整个框架保存完毕。Dreamweaver基础篇基础篇7.3 选择框架和框架集在【框架】面板中选择框架或框架集在【框架】面板中选择框架或框架集在【框架】面板中选择框架或框架集的具体操作步骤如下。在【框架】面板中选择框架或框架集的具体操作步骤如下。1.选择菜单中的【窗口】选择菜单中的【窗口】|【框架】

9、命令，翻开【框架】面【框架】命令，翻开【框架】面板，在面板中单击需要选择的框架，框架的边界就会被虚板，在面板中单击需要选择的框架，框架的边界就会被虚线包围。如图线包围。如图7-9：Dreamweaver基础篇基础篇提示：按组合键，翻开【框架】面板。Dreamweaver基础篇基础篇2.在【框架】面板中单击框架集的边框，也可以选择整个框架集，框架集的内侧出现虚线。如图7-10：Dreamweaver基础篇基础篇在文档窗口中选择框架或框架集在文档窗口中选择框架或框架集 在文档窗口中选择框架或框架集的具体操作步骤如下。在文档窗口中选择框架或框架集的具体操作步骤如下。 1将光标放置在要选择的框架中，按

10、住将光标放置在要选择的框架中，按住键单击鼠标左键单击鼠标左键，框架边框内侧出现虚线，即可选择该框架。键，框架边框内侧出现虚线，即可选择该框架。2将光标放置在任意框架中，按住将光标放置在任意框架中，按住键，当鼠标指针靠近键，当鼠标指针靠近框架边线时，出现上下或左右箭头时，单击鼠标左键，框架集框架边线时，出现上下或左右箭头时，单击鼠标左键，框架集内侧出现阴影，即可选中整个框架集。如图内侧出现阴影，即可选中整个框架集。如图7-11：Dreamweaver基础篇基础篇Dreamweaver基础篇基础篇7.4 设置框架和框架集属性设置框架属性设置框架属性 使用框架【属性】面板可以查看和设置大多数框架属使

11、用框架【属性】面板可以查看和设置大多数框架属性。选中一个框架，选择菜单中的【窗口】性。选中一个框架，选择菜单中的【窗口】|【属性】命【属性】命令，翻开【属性】面板中显示选中的框架属性。令，翻开【属性】面板中显示选中的框架属性。框架【属性】面板参数如下。如图框架【属性】面板参数如下。如图7-12：Dreamweaver基础篇基础篇【框架名称】：用于为当前框架命名。【源文件】：确定框架的源文档，可以直接输入名字，或单击文本框右边的固按钮查找并选取文件。【滚动】：当框架内的内容显示不下的时候是否出现滚动条，包括【是】、【否】、【启动】和【默许】4个选项。【不能调整大小】：限定框架尺寸，防止用户拖动框

12、架边框。【边界宽度】：设置以像素为单位的框架边框和内容之间的左右边距。【边界高度】：设置以像素为单位的框架边框和内容之间的上下边距。【边框】：用来控制当前框架边框，包括【是】、【否】和【默许】3个选项。【边框颜色】：设置与当前框架相邻的所有框架的边框颜色。Dreamweaver基础篇基础篇设置框架集属性设置框架集属性选中框架集，翻开【属性】面板，在【属性】面板中设置框架集的属性。选中框架集，翻开【属性】面板，在【属性】面板中设置框架集的属性。框架集【属性】面板参数如下。如图框架集【属性】面板参数如下。如图7-13： 【边框】：设置是否有边框，包括【是】、【否】、【默许】3个选项。选择【默许】选

13、项，将由浏览器端的设置来决定。【边框宽度】：设置整个框架集的边框宽度，以像素为单位。【边框颜色】：用来设置整个框架集的边框颜色。【行或列】：【属性】面板中显示的是行或列，是由框架集的结构而定。【单位】：行、列尺寸的单位，包括【像素】、【百分比】、【相对】3个选项。 Dreamweaver基础篇基础篇7.5 技巧提升如何隐藏滚动条如何隐藏滚动条在【属性】面板中设置【边框】和【滚动】都为【否】，在【属性】面板中设置【边框】和【滚动】都为【否】，框架的边框是隐藏的，勾选【不能调整大小】复选框，即框架的边框是隐藏的，勾选【不能调整大小】复选框，即可隐藏滚动条。可隐藏滚动条。如何调整框架边框的粗细如何调

14、整框架边框的粗细 选择整个框架集，打开框架集【属性】面板，将【边框选择整个框架集，打开框架集【属性】面板，将【边框宽度】设置为宽度】设置为0，则不显示边框，想要调整边框粗细，设，则不显示边框，想要调整边框粗细，设置【边框宽度】即可。置【边框宽度】即可。Dreamweaver基础篇基础篇如何准确地选择所需的框架如何准确地选择所需的框架在制作框架网页时，往往不能够准确地选择某个框架集，在制作框架网页时，往往不能够准确地选择某个框架集，对制作框架网页来说非常不方便，准确地选择所需的框架对制作框架网页来说非常不方便，准确地选择所需的框架的具体操作方法如下。的具体操作方法如下。选择菜单中的【窗口】选择菜

15、单中的【窗口】|【框架】命令，翻开【框架】面【框架】命令，翻开【框架】面板，在面板中单击想要选择的框架，框架的边界就会被虚板，在面板中单击想要选择的框架，框架的边界就会被虚线包围。线包围。如何调整框架大小如何调整框架大小选中要调整大小的框架集，选择菜单中的【窗口】选中要调整大小的框架集，选择菜单中的【窗口】|【属【属性】命令，翻开【属性】面板，在面板的【行列选择范围】性】命令，翻开【属性】面板，在面板的【行列选择范围】显示框中单击左侧标签或顶部标签分别选定要调整框架所显示框中单击左侧标签或顶部标签分别选定要调整框架所在的行或列，然后在【值】文本框中输入数值，在后面的在的行或列，然后在【值】文本

16、框中输入数值，在后面的下拉列表中选择【值】的单位。下拉列表中选择【值】的单位。Dreamweaver基础篇基础篇如何实现单击一个链接改变两个框架中的内容如何实现单击一个链接改变两个框架中的内容单击一个链接改变两个框架中的内容的具体操作步骤如下。单击一个链接改变两个框架中的内容的具体操作步骤如下。1.在左侧框架中选中图像，在【属性】面板中选择【矩形热点】在左侧框架中选中图像，在【属性】面板中选择【矩形热点】工具，在文字上面绘制热点。工具，在文字上面绘制热点。2.选中热点，在【属性】面板中的【链接】文本框中输入选中热点，在【属性】面板中的【链接】文本框中输入right1.htm，在【目的】下拉列表

17、中选择，在【目的】下拉列表中选择mainFrame。3.选中热点，选择菜单中的【窗口】选中热点，选择菜单中的【窗口】|【行为】命令，翻开【行【行为】命令，翻开【行为】面板，在面板中单击按钮，在弹出的菜单中选择【转到为】面板，在面板中单击按钮，在弹出的菜单中选择【转到URL】选项。】选项。4.翻开【转到翻开【转到URL】对话框，在对话框中的【打开在】列表框】对话框，在对话框中的【打开在】列表框中选择【框架中选择【框架topFrome”】，在】，在URL文本框中输入文本框中输入toplhtm。5.单击【确定】按钮，添加行为。单击【确定】按钮，添加行为。6.保存文档，按保存文档，按键在浏览器中预览效

18、果。键在浏览器中预览效果。Dreamweaver基础篇基础篇怎样使框架集在不同的浏览器中正常显示怎样使框架集在不同的浏览器中正常显示在为以百分比或者相对值指定大小的框架分配空间之前，先为以在为以百分比或者相对值指定大小的框架分配空间之前，先为以像素为单位指定大小的框架分配空间。设置框架大小最常用的方像素为单位指定大小的框架分配空间。设置框架大小最常用的方法是将左侧框架设置为固定像素宽度，将右侧框架大小设置为相法是将左侧框架设置为固定像素宽度，将右侧框架大小设置为相对大小，这样在分配像素宽度后右侧框架就能够伸展，以占据所对大小，这样在分配像素宽度后右侧框架就能够伸展，以占据所有的剩余空间。有的剩余空间。Dreamweaver基础篇基础篇 如何防止我的网页内容被放在其他网站的框架中显示防止我的网页内容被放在其他网站的框架中显示的具体操作步骤如下。1切换到拆分视图，在与之间相应的位置输入以下代码。2在语句中输入代码onload=“checkframe()；”。3保存文档，按键在