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