《网页设计类之框架的制作》由会员分享，可在线阅读，更多相关《网页设计类之框架的制作（8页珍藏版）》请在金锄头文库上搜索。
1、框架框架所谓框架就是将一个窗口划分为若干个独立的子窗口（或区域） ，每个子窗口可构成一个独立的网页，即可有各自的标题、背景、内容等，对各个区域可进行独立的操作。如为了使网页的版面结构清晰，我们可以对网页进行适当的区域分割，使网页中不同内容在不同区域中显示，达到布局合理的目的。1、创建框架创建框架又叫创建框架集页面，有三种方法：（1）单击主菜单“文件”“新建”命令或者单击标准工具栏上的 按钮，弹出“新建文档”对话框，然后选择“框架集”如图 1 所示，选择所需的结构。图 3-1图 1 新建框架集窗口（2）在已打开的空页面中，单击主菜单“插入”“框架”命令，在其子菜单中可以选择不同的框架样式，单击其
2、中一种命令就可在编辑页面中插入相应的框架。（3）在已打开的空页面中，直接单击“插入”面板组上的“框架”面板，然后选择所需的结构，如图 2 所示。图 3-2图 2 框架面板如选择所示的第一种结构：垂直拆分。 “显示设计”视图自动被拆分为左右两个窗口，显示如图 3 所示。图 3-3图 3 垂直拆分另外，可以通过单击主菜单“窗口”“其它”“框架”来显示或隐藏系统所提供的一个帮助编辑的“框架”面板。框架分割线，可单击“文档”工具栏的“视图选项” 按钮（弹出如图 4 所示的菜单）“可视化助理”“框架边框”进行显示和隐藏。图 3-4图 4 选择框架边框显示（隐藏）2、编辑框架集页面（1）手工调整框架页如图
3、 3 所示。将鼠标移至区域之间的边框线，鼠标光标变成双向箭头，然后左右拖动可以调整左右窗口的大小。 如需将页框再进行分割，可先在“框架”面板中选中对应的框（此时框线会变粗） ，如图 5 所示的小窗口。再在“显示设计”视图中拖动相应边框至合适位置即可。图 3-5图 5 框架再分割如在“框架”面板中选取右框，拖动“显示设计”视图的右框下边框，即可将右框分割成一上下框结构，如图 5 所示。删除某个页框时，只需拖动其边框线至整个编辑窗口的外边框即可。（2）通过属性检查器设置框架页在“框架”面板中，单击外框（或单击“显示设计”视图中各框架间的分割框线）以选取整个框架，属性检查器就会切换成框架集属性检查器
4、，如图 6 所示。图 3-6图 6 框架集属性检查器 框架集页面的属性设置在如图 6 所示框架集属性检查器中： 框架组：显示了框架集的组成为 1 行 2 列， Dreamweaver 默认输入。 边框：设置框架集中所有框架的边框是否显示，与框架中的“边框”属性一致。 边框宽度：框架集中所有框架边框的宽度，单位为像素。 边框颜色：框架集中所有框架边框的颜色，可在颜色选择器中选择。 列（行）：通过列和行的值设置框架集中框架的大小。因为本例中只有一行，所以只能设置列值。详细的设置方法将在后面的实例中介绍。 对单个框架的属性设置在“框架”面板中选取任意一个独立的框架部分，则属性检查器自动切换为单个框架
5、的属性检查器，如图 7 所示。图 3-7图 7 单个框架属性检查器 框架名称：框架的名称，可直接在文本框中输入。注意：框架名称有以后使用链接目标时经常用到，最好使用一个有意义的名称，例如用 leftframe 表示左框的名称。 源文件：框架源文件的路径和名称。拖动按钮到站点中的文件以建立链接，或者单击 按钮在站点中选择相关文件。 滚动：框架滚动条的显示方式，可在下拉列表中选择属性值。 “是”无论框架内容大小，都会显示滚动条；“否”无论框架内容大小，都不会显示滚动条：“自动”一当网页文档内容超过框架大小时出现滚动条；“默认”由浏览器决定是否显示滚动条。 不能调整大小：如果选中该复选框，在页面中不
6、能通过拖动框架的边框来调整框架的大小；如不选中，用户可以在页面中拖动框架的边框。 边框：设置框架的边框是否显示，可在下拉列表中选择属性值。 “是”显示框架的边框；“否”不显示框架的边框；“默认”由浏览器决定是否显示表格边框。 边框颜色：框架边框的颜色。 边界宽度：框架左右边界与文档内容之间的距离，单位为像素。 边界高度：框架上下边界与文档内容之间的距离，单位为像素。（3）框架页面间的链接打开属性检查器中的“目标”属性，除_blank、_self、_parent 和_top 外，又新增了“mainframe”和“leftFrame” ，它们就是图 3 所示的垂直拆分下的两个窗口名（分别为右边和左边框架的名称） 。图 3-8图 8 超级链接的目标属性另外，若事先将组成框架集的各个 HTML 文件先做好，然后只要在制作框架集页面时，在属性检查器上的“源文件”文本框中填入对应的 HTML 文件路径和名称亦可制作框架页面。3、保存框架页面对于框架结构必须先保存，才能进行预览。可以通过以下方式保存框架集页面（框架页）和各单个页框文件：（1）单击主菜单“文件”“保存框架页”或“文件”“框架页另存为”保存框架集页面。（2）单击主菜单“文件”“全部保存”保存框架集页面，同时还会将组成各页框的每个独立页面也保存。
