《网页设计类之框架的制作》由会员分享,可在线阅读,更多相关《网页设计类之框架的制作(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)单击主菜单“文件”“全部保存”保存框架集页面,同时还会将组成各页框的每个独立页面也保存。