Frame框架技术制作网页

《Frame框架技术制作网页》由会员分享，可在线阅读，更多相关《Frame框架技术制作网页（51页珍藏版）》请在金锄头文库上搜索。

1、Frame框架技术制作网页网页设计与制作学学 习习 目目 标标框架也称为帧，是设计网页时非常有用的工具。 它可以将浏览器窗口划分为若干个区域，每个区域分 别显示不同的网页，从而使用户能够一次浏览更多内 容。本章学习框架的一些基础知识，以及怎么同时在 一个浏览器窗口中显示多个网页。网页设计与制作本本 章章 重重 点点uu 框架的基本构成u 创建和设置框架u 框架中的链接目标u 框架中网页的设置u 框架设置滚动条网页设计与制作一个框架应用实例网页设计与制作页面分析该实例实质是一个应用了top left框架的网页。这种框 架的页面被分成了3个区域，其中包含了4个网页文件，分 别为：frameset网

2、页、上边topframe框架中包含的网页 文件、左边leftframe框架中包含的网页文件、右边 mainframe中包含的网页文件。因此在保存这个框架集网页时，需要4个文件。网页设计与制作实现基于框架的网页的基本思路如下： （1）在页面中创建框架集和框架，并对页面布局进行适当的调整。 （2）输入框架页面内容。 （3）保存框架集文件和框架文件。 （4）确认链接目标的框架设置，使所有链接内容都出现在正确的区域内。 （5）通过设置框架和框架集属性，来改变框架网页的外观等。网页设计与制作创建框架结构调出框架面板（frames），利用它可以进行选取、观 察修改框架等基本操作。在对框架操作时，最好一起打

3、开框 架面板！打开方法“窗口”“框架”。或者快捷键Shift+F2没有插入框架时的框架面板网页设计与制作插入top left结构的框架集页面n为了方便观察和操作 框架，需要启用可视 化助理，打开方法菜 单栏可视化助理n打开方法是：菜单栏 查看可视化助理 框架边框n当启用了辅助工具后 文档窗口的四周就出 现了灰色框架边框网页设计与制作对象面板上的框架集插入框架集插入一个框架集，操作步骤如下(1) 新建一个文件(2) 执行以下操作之一，插入DW预定的框架集A、菜单栏插入框架左边B、在对象面板上单击框架按钮，或者把按钮拖到页面上网页设计与制作n在文档窗口出现了包含3个区域的top left结构框 架

4、集。其中立体的灰色边框为框架集的边框，而 没有立体效果的细边框为框架边框。每一个框架 都有自己的名字，用于识别其他框架，默认的框 架名分别为topframe、leftframe、mainframe说明：创建框架集还可以使用自由托拽法，前提 是框架边框是可见的。用这个方法首先要分析要 创建的框架集的结构，然后进行相应的拖拽操作 即可。网页设计与制作Top left 结构的框架集 对应的框架面板自由创建Top left结构的框架集，操作步骤如下： (1) 将光标置于文档窗口框架的上边框。 (2) 待光标变为双箭头形状后，按住鼠标左键向下拖动上边框到适当的位置，这样就创建了一个上下结构的框架集。网页

5、设计与制作自由建立的框架集 所对应的框架面板(3) 按住alt的同时，用鼠标点击下边区域，按住鼠标左键向右拖 动左下边框到适当的位置，就可以生成top left结构框架。利用 这种方法，可以自由建立自己所需要的框架集。注意：利用自由拖拽创建的框架集，其框架名称均为“没有名 称”。由于框架名称将被作为超级链接的目标和脚本的引用，所 以需要为框架命名。网页设计与制作选取框架和框架集在插入框架集之后，如果不满意，可以进行相应 的修改操作。首先进行框架和框架集的选取操作：1.选取框架方法一：在框架面板中单击要选取的框架。方法二：在文档窗口中按alt键，在要选择的框架里点击，便选取了相应的框架。被选取的

6、框架在框架面板中被加黑显示的细线围住，而 在文档窗口中被较细的虚线框围着，同时在状态栏上加黑显 示的是。网页设计与制作2.选取框架集方法一：在框架面板中单击立体边框方法二：在文档窗口中将鼠标移动到框架与框架之间的分隔线上，单击鼠标左键选中框架集。n这时被选中的框架集边框在框架面板中被加黑显示，而在 文档窗口中被较细的虚线框围住，同时在状态栏上加黑显 示的是。n当我们在新建的页面中插入框架集时，默认选中的就是整 个框架集。网页设计与制作选中的状态选中的状态网页设计与制作增加框架增加框架可以使用鼠标拖拽法和菜单方式。 1.鼠标拖拽法(1) 按住alt键拖拽任一条框架边框，可以垂直或水平分割文档(或

7、已有的框架)。(2) 按住alt键从一个角上拖拽框架边框，可以把文档(或已有的框架)划分为4个框架。注意：要选中框架才能在框架内部进行增加框架 ，否则默认是在外框架(整个框架集上增加!)网页设计与制作直接从底部向上拖拽 出来的框架选中右下方的框架后再 按alt拖拽出来的框架网页设计与制作2.菜单方式在菜单栏修改框架 页，在子菜单中单击 相应的选项。网页设计与制作删除框架方法：将想要删除的框架边框拖至文档窗口的边缘 为止，或拖拽想要删除的框架边框到父框架的边 框上。网页设计与制作调整框架的大小 插入框架后，会发现框架的大小并不一定符 合要求，因此需要将框架的大小进行适当的调整 。方法：将鼠标指针

8、移到要调整的框架边框线 上，在出现双箭头后，按住鼠标左键(进行左/右 、或上下的拖拽即可)。网页设计与制作编辑框架集页面内容框架集设计好后就可以编辑每个框架的内容 了。编辑框架集中内容有两个方法：(1) 利用前面所学内容，直接在相应的框架中输入内容。(2) 将框架中的网页文件事先编辑好，然后在框架中导入。网页设计与制作对话框n这两种不同的编辑方法，在保存框架集网页的操作过程有 所不同。n使用第一种方法，直接在3个区域(框架)中分别插入相应 的内容(页面中的文本可以直接从前面制作的网页上拷贝过 来)n制作完成后按F12预览页面，弹出一个对话框。提示没有 保存框架集和框架文件。我们必须先进行保存，

9、以后每次 修改框架网页时如果直接预览页面都会出现这个对话框!网页设计与制作该对话框提示在预览框架集网页之前需要保存 框架集文件和各个框架文件。单击“确定”，将保 存框架集文件和框架文件，然后才打开浏览器预 览；单击“取消”则放弃预览。网页设计与制作保存框架集文件保存的方法通常有两种：(1) 同时保存框架集中的所有网页文件。(2) 分别保存框架集中的网页和各个框架中的网页文件。网页设计与制作保存框架集中的所有网页文件，操作步骤如下：(1) 菜单栏中选择“文件” “全部保存”。(2) top left结构的框架由4个网页文件组成，在保存过程中会先后弹出4个“另存为”对话框，依次进行保存。同时保存框

10、架集中的所有网页文件网页设计与制作小技巧：保存的时候被虚线框围住的框架就是我们正 在保存的框架文件。如果虚线框围在左边就是保 存左边框架中的网页，在右边就是保存右边的框 架中的网页。但是如果使用导入网页到框架，保存的方法 就有所不同了。网页设计与制作分别保存框架集中的网页和各个框架中的网页文件保存框架集网页文件，操作步骤：(1) 选中整个框架集(2) 在菜单中选择“文件”“保存框架”保存单个框架网页文件的操作步骤如下：(1) 将光标定位在要保存网页文件的框架内，或在框架面板上单击网页所在框架(2) 在菜单栏中选择“文件”“保存框架页”网页设计与制作单独保存框架集网页文件保存框架网页文件网页设计

11、与制作注意：在框架中设置网页标题的步骤：选中框架集 在常用面板中，再对网页标题进行设置。(设置 完成后要保存整个框架)，此时网页标题才能被设 置，我们一般的网页标题设置方法不能直接设置 。网页设计与制作设置框架中的链接目标为左边框架中的各个导航栏目建立一个可以链 接到右边框架中的超级链接。其步骤：(1) 选中文本，打开文本的属性面板。(2) 在属性面板上单击文件夹按钮，选取要连接 的文件。(3) 在属性面板上单击“目标”的下拉列表，点中 “mainframe”这个框架名称，告诉浏览器在mainframe框架中打开被链接的网页文件。网页设计与制作选择不同的框架名称，链接文件将在不同的框架中打开：

12、 (1) 选择“mainframe”，在窗口的右边mainframe框 架中显示所链接的文件内容。 (2) 选择“leftframe”，在窗口的左边leftframe框架中显示所链接的文件内容。 (3) 选择“topframe”，在窗口的上边topfrmae框架中显示所链接的文件内容。网页设计与制作将链接目标设置在默认框架中这是4个默认的框架名称(1) _blank(空白窗口)：在另一个新的窗口中显示链接内容，这 样可以保留现有的窗口文档内容。 (2) _parent(父窗口)：在上一层的框架集中显示链接内容(该选 项只有在框架集中还包含另一个框架集的情况下才能产生效果)。 (3) _self

13、(当前窗口)：在本身所在的框架中显示链接内容这样会 覆盖当前框架中的所有内容。该目标是默认值。 (4) _top(最高)：在整个浏览窗口中显示链接内容，这样会覆盖 当前框架中所有内容。网页设计与制作修改框架集网页外观框架默认的外观不好看，我们可以通过设置框 架(或框架集)的属性来修改。1、设置框架集属性框架集属性包括框架的大小和框架之间的边框 颜色及宽度等。查看和设置框架集的属性如下：网页设计与制作表示当前选择 的是框架集表示当前的框架 结构为2行1列用于设置当前框架集边框 的类型、宽度和颜色设置选定行(列)的大小及其单位行列选择器深 色行为当前行(1) 选中整个框架集。 (2) 在菜单栏中选

14、择“窗口”“属性”，此时打开的属性面板为整个框架集的属性面板为整个框架集的属性面板。 (3) 根据需要在属性面板上进行相应设置即可!网页设计与制作精确调整框架大小将leftframe框架区域的列宽精确调整到180 像素，步骤如下：(1) 在框架面板上单击上下框架之间的立体边框(2) 此时属性面板为下边框架集的属性面板(3) 在“值”文本框中输入180，单位选择像素即可n注意：如果想调整topframe框架区域的高度， 就要选中整个框架集。在“值”文本框中输入一个 数字即可设置行的大小 网页设计与制作2.设置框架的边框及其宽度和颜色在框架属性面板上的“边框”项用于设置在当 文档在浏览器中被浏览时

15、是否显示框架，共有三 种选择：(1) yes(是)：显示边框，宽度由“边框宽度”中的值指定(2) no(否)：不显示边框(3) default(默认)：让用户浏览器决定是否显示边框。一般情况下为立体的灰色边框网页设计与制作n“边框宽度”项用于设置框架边框的宽度，实际上 是框架与框架之间的距离，与表格中单元格的间 距相似，其单位默认为像素n刚建立框架集网页时，框架集中的边框设为“NO” ，宽度设为0。在浏览框架网页时，看不到框架之 间的边框，形成了一个整体，这就是无缝连接的 效果。网页设计与制作没有边框时的无缝连接效果网页设计与制作设置边框为5时的框架效果网页设计与制作设置框架属性框架属性包括框

16、架的名称、源文件、边距、 滚动、边框等。使用框架属性面板可以查看和设 置框架属性。网页设计与制作通过执行以下操作之一选择框架： n在“文档”窗口的“设计”视图中，按住 Alt 键的同时单 击一个框架 (Windows) 或在按住 Shift 和 Option 键的同时单击一个框架 (Macintosh)。 n在“框架”面板（“窗口”“框架”）中单击框架。网页设计与制作1.命名框架打开框架面板，可以看到在top left结构的框 架集中，框架的默认名称分别为topframe、 leftframe、和mainframe，这些名称都可以重 新定义的。(1) 在框架面板中的topframe框架内单击，以选中topframe框架。(2) 打开属性面板，在框架属性面板的“框架名称”里输入框架的名称，回车即可。网页设计与制作表示当前选择的是 一个独立的框架对框架名 称修改以像素为单位设置 框架边框与内容之 间的左右间距设置或显示当前框架中的网页文件选中可防止用户 在浏览时调整当 前框架的大小滚动：在下拉列表中设置框架是否出现滚动条设置边框和 边框颜色