使用框架灵活布局网.ppt

第12章 使用框架灵活布局网页,一、创建基本框架网页,框架（Frame）可以将浏览器显示窗口分割成多个子窗口，每个窗口都是一个独立的网页文档。当一个页面被划分为若干个框架时，Dreamweaver就建立起一个未命名的框架集文件，同时为每个框架建立一个文档文件。框架由两个主要部分组成：框架集和单个框架。创建框架网页的方法主要有4种:从“新建文档”对话框中创建、从“布局”插入栏中创建、从“插入记录”菜单中创建及手动创建，还可以创建嵌套框架集。具体如下：,1.从“新建文档”对话框创建 操作如下：在Dreamweaver起始页中选择“文件/新建”命令，打开“新建文档”对话框。在“示例中的页”选项卡中的“示例文件夹”列表框中选择“框架集”选项，在右侧“示例页”列表框中选择需要的框架结构。单击右下角“创建”按钮。,2、从布局插入栏中创建 操作如下：新建空白网页后，将“插入”工具栏切换到“布局”工具栏。单击“布局”工具栏中右侧的图标按钮，在弹出的菜单中选择相应的选项。在打开“框架标签辅助功能属性”对话框中直接单击“确定”按钮即可创建框架网页。,3、从“插入记录”菜单中创建操作如下：新建空白网页后，将光标插入预定义的窗口中。选择“插入记录/HTML/框架”命令，在弹出的子菜单中选择相应的选项即可创建框架网页。,手动创建框架网页前三种方法创建的网页都是预定义的框架样式，有时并不适合用户的实际制作需求。此时可以通过手动创建框架网页。操作如下：(1)新建空白网页文档，选择“查看/可视化助理/框架边框”命令，框架边框即可在边框四周显示出来。(2)将鼠标光标定位到需分割的框架中，按住Alt键的同时，将鼠标光标移到框架边框线上至光标变为双向箭头形状时，按住鼠标左键不放进行拖动，至合适位置后释放鼠标即可将一个柜架拆分为两个框架。,5创建嵌套框架集在框架内部还可以创建框架集，即嵌套框架集。如果在一个框架集内，不同行或列有不同数目的框架，则要求使用嵌套的框架集。操作如下：（1）将光标定位到需创建嵌套框架集的框架中。（2）将“插入”工具栏切换到“布局”工具栏，单击“布局”工具栏中右侧的图标按钮，在弹出的菜单中选择相应的(“上方和下方框架”)选项。,二、选择框架和框架集,1、在编辑窗口中选择框架和框架集按住Alt键，在所需要选择的框架中单击鼠标左键即可选择该框架，被选择的边框为虚线。若要选择框架集，单击需要选择的框架集边框即可。选择的框架集包含的所有框架边框呈现虚线。,2、在“框架”面板中选择框架和框架集选择“窗口/框架”，打开“框架”面板，在面板中单击需要选择的框架，此时被选择的框架的边界就会被虚线包围。若要在“框架”面板中选择“框架集”，应在面板中单击包含要选择柜架集的边框即可。若要选择整个框架集，直接单击柜架最外面的边框即可，此时边框变成黑边显示。,三、编辑框架,1 删除框架用鼠标将要删除框架的边框拖至页面外面即可。如果要删除嵌套框架集，则需将其边框拖到父框架边框上或拖离页面。2、保存框架步骤如下：（1）将鼠标光标定位到需要保存网页文档的框架中。（2）选择“文件/保存框架”命令，在打开的“另存为”对话框中的“保存在”下拉列表框中选择保存位置，在“文件名”文本框中输入文件名。,3、保存全部 当编辑完框架及框架文件后，必须对框架及框架文件进行保存，如果只保存鼠标所定位的框架内容，其余的框架内容将丢失，为避免这种情况的发生，可以使用“文件/全部保存”命令来完成。在保存时通常先保存框架集网页文档，再保存各个框架网页文档，被保存的当前文档所在的框架或框架集用粗线表示。,4、框架链接 使用框架可以通过单击左侧框架中的文本超链接改变右侧框架中的网页文档。具体步骤如下：（1）选择左侧框架的文本，打开“属性”面板。（2）在“链接”下拉列表框中输入要链接网页的路径及名称。（3）在“目标”下拉列表框中选择右侧框架的名称，即在该框架中打开指定网页。（4）保存框架网页，选中框架集后按F12预览。,四、设置框架和框架集属性,1、设置框架属性 在对框架或框架集进行设置的时候，首先要选择框架或框架集，当选中之后，在文档窗口下端将出现框架的“属性”面板。如图所示：参数设置如下：,框架名称：用来作为链接指向的目标。“源文件”文本框：显示框架网页文档的路径及文件名称，单击文本框后的按钮，可在打开的对话框中重新指定。“滚动”下拉列表框：用来设置当框架内的内容显示不下的时候是否出现滚动条。“不能调整大小”复选框：选中时则不能在浏览器中通过拖动框架边框来改变框架大小。“边框”下拉列表框：设置是否显示框架的边框。有“是”、“否”和“默认”三个选项。“边框颜色”文本框：设置框架的颜色。“边框宽度”文本框：设置框架边框和内容之间的左右边距，以像素为单位。“边框高度”文本框：设置框架边框和内容之间的上下边距，以像素为单位。,2、设置框架集属性单击框架的边框，选中框架集，在文档窗口下端将出现框架集的“属性”面板。如图所示。框架集“属性”面板各设置参数的含义和框架“属性”面板基本相同，不同之处是：在“行”或“列”栏中，可设置框架的行或列的宽度（即框架的大小）。在“单位”下拉列表框中，选择度量单位后即可输入所需数值。,五、在HTML代码创建框架,1框架集的属性frameset框架主要包括2个部分，一个是框架集，一个是框架。框架集是在一个文档内定义一组框架结构的HTML网页。语法：说明：标记用来定义怎样将一个窗口划分为多个框架。每一个标记可以定义一行或者一列元素，它用来控制浏览器窗口中框架的布局视图。,2框架窗口属性name页面名称是为了便于页面的查找和链接所提供的一个属性。语法：说明：框架的页面名称中不允许包含特殊字符、连字符、空格等，必须是单个的单词或者字母组合。,3使用src标记每一个内嵌套框架结构都有一个默认初始页面，src属性用来指定这个页面的URL链接地址。这个地址可以是绝对路径、相对路径，也可以是一个页面的链接锚点定位，甚至可以是当前文档本身，这样产生的效果就是无限层次的页嵌入框架。语法：说明：通过src属性设置框架显示的文件路径。,六、内框架iframe,目前在很多网站中流行一种内置框架的效果，即在网页内部有一个完全独立的框架用于显示一个独立的页面，这是内框架iframe效果。使用标签选择器插入内框架iframe，具体步骤如下：（1）将光标置于要创建内框架的网页文档页面中，在菜单栏中选择“插入记录/标签”命令，弹出“标签选择器”对话框，选择“HTML标签/页面元素/iframe”选项。或选择“窗口/插入”命令，打开“插入”工具栏，选择“常用”选项，单击“常用”工具栏中的图标按钮，也可弹出“标签选择器”对话框。,（2）在对话框中单击“HTML标签”，选择“页元素”选项，在右边的列表框中选择“iframe”。（3）单击“插入”按钮，弹出的“标签编辑器iframe”对话框，单击“源”文本框右边的“浏览”按钮，选择相应的文件，单击“确定”按钮，将文件添加到“源”文本框中，在“名称”文本框中输入名称，在“宽度”和“高度”中分别输入宽和高。（4）单击“确定”按钮，在“拆分”视图下可以看到插入的标签。（5）保存网页文档，按F12在浏览器中浏览。,