网页设计类之框架的制作

《网页设计类之框架的制作》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、框架所谓框架就是将一个窗口划分为若干个独立的子窗口（或区域），每个子窗口可构成一个独立的网页，即可有各自的标题、背景、内容等，对各个区域可进行独立的操作。如为了使网页的版面结构清晰，我们可以对网页进行适当的区域分割，使网页中不同内容在不同区域中显示，达到布局合理的目的。1、创建框架创建框架又叫创建框架集页面，有三种方法：（1）单击主菜单“文件”→“新建”命令或者单击标准工具栏上的按钮，弹出“新建文档”对话框，然后选择“框架集”如图1所示，选择所需的结构。图1新建框架集窗口（2）在已打开的空页面中，单击主菜单“

2、插入”→“框架”命令，在其子菜单中可以选择不同的框架样式，单击其中一种命令就可在编辑页面中插入相应的框架。（3）在已打开的空页面中，直接单击“插入”面板组上的“框架”面板，然后选择所需的结构，如图2所示。图2框架面板如选择所示的第一种结构：垂直拆分。“显示设计”视图自动被拆分为左右两个窗口，显示如图3所示。图3垂直拆分另外，可以通过单击主菜单“窗口”→“其它”→“框架”来显示或隐藏系统所提供的一个帮助编辑的“框架”面板。框架分割线，可单击“文档”工具栏的“视图选项”按钮（弹出如图4所示的菜单）→“可视化助理”

3、→“框架边框”进行显示和隐藏。图4选择框架边框显示（隐藏）2、编辑框架集页面（1）手工调整框架页如图3所示。①将鼠标移至区域之间的边框线，鼠标光标变成双向箭头，然后左右拖动可以调整左右窗口的大小。②如需将页框再进行分割，可先在“框架”面板中选中对应的框（此时框线会变粗），如图5所示的小窗口。再在“显示设计”视图中拖动相应边框至合适位置即可。图5框架再分割如在“框架”面板中选取右框，拖动“显示设计”视图的右框下边框，即可将右框分割成一上下框结构，如图5所示。③删除某个页框时，只需拖动其边框线至整个编辑窗口的外边

4、框即可。（2）通过属性检查器设置框架页在“框架”面板中，单击外框（或单击“显示设计”视图中各框架间的分割框线）以选取整个框架，属性检查器就会切换成框架集属性检查器，如图6所示。图6框架集属性检查器①框架集页面的属性设置在如图6所示框架集属性检查器中：●框架组：显示了框架集的组成为1行2列，Dreamweaver默认输入。●边框：设置框架集中所有框架的边框是否显示，与框架中的“边框”属性一致。●边框宽度：框架集中所有框架边框的宽度，单位为像素。●边框颜色：框架集中所有框架边框的颜色，可在颜色选择器中选择。●列（

5、行）：通过列和行的值设置框架集中框架的大小。因为本例中只有一行，所以只能设置列值。详细的设置方法将在后面的实例中介绍。②对单个框架的属性设置在“框架”面板中选取任意一个独立的框架部分，则属性检查器自动切换为单个框架的属性检查器，如图7所示。图7单个框架属性检查器●框架名称：框架的名称，可直接在文本框中输入。注意：框架名称有以后使用链接目标时经常用到，最好使用一个有意义的名称，例如用leftframe表示左框的名称。●源文件：框架源文件的路径和名称。拖动按钮到站点中的文件以建立链接，或者单击按钮在站点中选择相关

6、文件。●滚动：框架滚动条的显示方式，可在下拉列表中选择属性值。“是”——无论框架内容大小，都会显示滚动条；“否”——无论框架内容大小，都不会显示滚动条：“自动”一－当网页文档内容超过框架大小时出现滚动条；“默认”——由浏览器决定是否显示滚动条。●不能调整大小：如果选中该复选框，在页面中不能通过拖动框架的边框来调整框架的大小；如不选中，用户可以在页面中拖动框架的边框。●边框：设置框架的边框是否显示，可在下拉列表中选择属性值。“是”——显示框架的边框；“否”——不显示框架的边框；“默认”——由浏览器决定是否显示表

7、格边框。●边框颜色：框架边框的颜色。●边界宽度：框架左右边界与文档内容之间的距离，单位为像素。●边界高度：框架上下边界与文档内容之间的距离，单位为像素。（3）框架页面间的链接打开属性检查器中的“目标”属性，除_blank、_self、_parent和_top外，又新增了“mainframe”和“leftFrame”，它们就是图3所示的垂直拆分下的两个窗口名（分别为右边和左边框架的名称）。图8超级链接的目标属性另外，若事先将组成框架集的各个HTML文件先做好，然后只要在制作框架集页面时，在属性检查器上的“源文件

8、”文本框中填入对应的HTML文件路径和名称亦可制作框架页面。3、保存框架页面对于框架结构必须先保存，才能进行预览。可以通过以下方式保存框架集页面（框架页）和各单个页框文件：（1）单击主菜单“文件”→“保存框架页”或“文件”→“框架页另存为”保存框架集页面。（2）单击主菜单“文件”→“全部保存”保存框架集页面，同时还会将组成各页框的每个独立页面也保存。