欢迎来到天天文库
浏览记录
ID:50209200
大小:97.00 KB
页数:20页
时间:2020-03-10
《网页设计与制作案例教程 教学课件 作者 池同柱第12章 使用框架灵活布局网页.ppt》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库。
1、第12章使用框架灵活布局网页一、创建基本框架网页框架(Frame)可以将浏览器显示窗口分割成多个子窗口,每个窗口都是一个独立的网页文档。当一个页面被划分为若干个框架时,Dreamweaver就建立起一个未命名的框架集文件,同时为每个框架建立一个文档文件。框架由两个主要部分组成:框架集和单个框架。创建框架网页的方法主要有4种:从“新建文档”对话框中创建、从“布局”插入栏中创建、从“插入记录”菜单中创建及手动创建,还可以创建嵌套框架集。具体如下:1.从“新建文档”对话框创建操作如下:在Dreamweaver
2、起始页中选择“文件/新建”命令,打开“新建文档”对话框。在“示例中的页”选项卡中的“示例文件夹”列表框中选择“框架集”选项,在右侧“示例页”列表框中选择需要的框架结构。单击右下角“创建”按钮。2、从布局插入栏中创建操作如下:新建空白网页后,将“插入”工具栏切换到“布局”工具栏。单击“布局”工具栏中右侧的图标按钮,在弹出的菜单中选择相应的选项。在打开“框架标签辅助功能属性”对话框中直接单击“确定”按钮即可创建框架网页。3、从“插入记录”菜单中创建操作如下:新建空白网页后,将光标插入预定义的窗口中。选择“插
3、入记录/HTML/框架”命令,在弹出的子菜单中选择相应的选项即可创建框架网页。4.手动创建框架网页前三种方法创建的网页都是预定义的框架样式,有时并不适合用户的实际制作需求。此时可以通过手动创建框架网页。操作如下:(1)新建空白网页文档,选择“查看/可视化助理/框架边框”命令,框架边框即可在边框四周显示出来。(2)将鼠标光标定位到需分割的框架中,按住Alt键的同时,将鼠标光标移到框架边框线上至光标变为双向箭头形状时,按住鼠标左键不放进行拖动,至合适位置后释放鼠标即可将一个柜架拆分为两个框架。5.创建嵌套框
4、架集在框架内部还可以创建框架集,即嵌套框架集。如果在一个框架集内,不同行或列有不同数目的框架,则要求使用嵌套的框架集。操作如下:(1)将光标定位到需创建嵌套框架集的框架中。(2)将“插入”工具栏切换到“布局”工具栏,单击“布局”工具栏中右侧的图标按钮,在弹出的菜单中选择相应的(“上方和下方框架”)选项。二、选择框架和框架集1、在编辑窗口中选择框架和框架集按住Alt键,在所需要选择的框架中单击鼠标左键即可选择该框架,被选择的边框为虚线。若要选择框架集,单击需要选择的框架集边框即可。选择的框架集包含的所有框
5、架边框呈现虚线。2、在“框架”面板中选择框架和框架集选择“窗口/框架”,打开“框架”面板,在面板中单击需要选择的框架,此时被选择的框架的边界就会被虚线包围。若要在“框架”面板中选择“框架集”,应在面板中单击包含要选择柜架集的边框即可。若要选择整个框架集,直接单击柜架最外面的边框即可,此时边框变成黑边显示。三、编辑框架1.删除框架用鼠标将要删除框架的边框拖至页面外面即可。如果要删除嵌套框架集,则需将其边框拖到父框架边框上或拖离页面。2、保存框架步骤如下:(1)将鼠标光标定位到需要保存网页文档的框架中。(2
6、)选择“文件/保存框架”命令,在打开的“另存为”对话框中的“保存在”下拉列表框中选择保存位置,在“文件名”文本框中输入文件名。3、保存全部当编辑完框架及框架文件后,必须对框架及框架文件进行保存,如果只保存鼠标所定位的框架内容,其余的框架内容将丢失,为避免这种情况的发生,可以使用“文件/全部保存”命令来完成。在保存时通常先保存框架集网页文档,再保存各个框架网页文档,被保存的当前文档所在的框架或框架集用粗线表示。4、框架链接使用框架可以通过单击左侧框架中的文本超链接改变右侧框架中的网页文档。具体步骤如下:(
7、1)选择左侧框架的文本,打开“属性”面板。(2)在“链接”下拉列表框中输入要链接网页的路径及名称。(3)在“目标”下拉列表框中选择右侧框架的名称,即在该框架中打开指定网页。(4)保存框架网页,选中框架集后按F12预览。四、设置框架和框架集属性1、设置框架属性在对框架或框架集进行设置的时候,首先要选择框架或框架集,当选中之后,在文档窗口下端将出现框架的“属性”面板。如图所示:参数设置如下:框架名称:用来作为链接指向的目标。“源文件”文本框:显示框架网页文档的路径及文件名称,单击文本框后的按钮,可在打开的对
8、话框中重新指定。“滚动”下拉列表框:用来设置当框架内的内容显示不下的时候是否出现滚动条。“不能调整大小”复选框:选中时则不能在浏览器中通过拖动框架边框来改变框架大小。“边框”下拉列表框:设置是否显示框架的边框。有“是”、“否”和“默认”三个选项。“边框颜色”文本框:设置框架的颜色。“边框宽度”文本框:设置框架边框和内容之间的左右边距,以像素为单位。“边框高度”文本框:设置框架边框和内容之间的上下边距,以像素为单位。2、设置框架集属性单击框架
此文档下载收益归作者所有