应用框架技术制作网.ppt

第6章 应用框架技术制作网页,学 习 目 标,框架也称为帧，是设计网页时非常有用的工具。它可以将浏览器窗口划分为若干个区域，每个区域分别显示不同的网页，从而使用户能够一次浏览更多内容。本章学习框架的一些基础知识，以及怎么同时在一个浏览器窗口中显示多个网页。,本 章 重 点,框架的基本构成 创建和设置框架 框架中的链接目标 框架中网页的设置 框架设置滚动条,一个框架应用实例,页面分析 该实例实质是一个应用了top left框架的网页。这种框架的页面被分成了3个区域，其中包含了4个网页文件，分别为：frameset网页、上边topframe框架中包含的网页文件、左边leftframe框架中包含的网页文件、右边mainframe中包含的网页文件。 因此在保存这个框架集网页时，需要4个文件。,实现基于框架的网页的基本思路如下： （1）在页面中创建框架集和框架，并对页面布局进行适当 的调整。 （2）输入框架页面内容。 （3）保存框架集文件和框架文件。 （4）确认链接目标的框架设置，使所有链接内容都出现在 正确的区域内。 （5）通过设置框架和框架集属性，来改变框架网页的外观 等。,创建框架结构,调出框架面板（frames），利用它可以进行选取、观 察修改框架等基本操作。在对框架操作时，最好一起打开框 架面板！ 打开方法“窗口”“框架”。或者快捷键Shift+F2,没有插入框架时的框架面板,插入top left结构的框架集页面,为了方便观察和操作框架，需要启用可视化助理，打开方法菜单栏可视化助理 打开方法是：菜单栏查看可视化助理框架边框 当启用了辅助工具后文档窗口的四周就出现了灰色框架边框,对象面板上的框架集,插入框架集,插入一个框架集，操作步骤如下 (1) 新建一个文件 (2) 执行以下操作之一，插入DW预定的框架集 A、菜单栏插入框架左边 B、在对象面板上单击框架按钮，或者把按钮拖 到页面上,在文档窗口出现了包含3个区域的top left结构框架集。其中立体的灰色边框为框架集的边框，而没有立体效果的细边框为框架边框。每一个框架都有自己的名字，用于识别其他框架，默认的框架名分别为topframe、leftframe、mainframe 说明：创建框架集还可以使用自由托拽法，前提是框架边框是可见的。用这个方法首先要分析要创建的框架集的结构，然后进行相应的拖拽操作即可。,Top left 结构的框架集 对应的框架面板,自由创建Top left结构的框架集，操作步骤如下： (1) 将光标置于文档窗口框架的上边框。 (2) 待光标变为双箭头形状后，按住鼠标左键向下拖动上边框 到适当的位置，这样就创建了一个上下结构的框架集。,自由建立的框架集 所对应的框架面板,(3) 按住alt的同时，用鼠标点击下边区域，按住鼠标左键向右拖动左下边框到适当的位置，就可以生成top left结构框架。利用这种方法，可以自由建立自己所需要的框架集。 注意：利用自由拖拽创建的框架集，其框架名称均为“没有名称”。由于框架名称将被作为超级链接的目标和脚本的引用，所以需要为框架命名。,选取框架和框架集,在插入框架集之后，如果不满意，可以进行相应的修改操作。首先进行框架和框架集的选取操作： 1.选取框架 方法一：在框架面板中单击要选取的框架。 方法二：在文档窗口中按alt键，在要选择的框架 里点击，便选取了相应的框架。 被选取的框架在框架面板中被加黑显示的细线围住，而在文档窗口中被较细的虚线框围着，同时在状态栏上加黑显示的是。,2.选取框架集 方法一：在框架面板中单击立体边框 方法二：在文档窗口中将鼠标移动到框架与框架之间的 分隔线上，单击鼠标左键选中框架集。 这时被选中的框架集边框在框架面板中被加黑显示，而在文档窗口中被较细的虚线框围住，同时在状态栏上加黑显示的是。 当我们在新建的页面中插入框架集时，默认选中的就是整个框架集。,选中的状态,选中的状态,增加框架,增加框架可以使用鼠标拖拽法和菜单方式。 1.鼠标拖拽法 (1) 按住alt键拖拽任一条框架边框，可以垂直或 水平分割文档(或已有的框架)。 (2) 按住alt键从一个角上拖拽框架边框，可以把 文档(或已有的框架)划分为4个框架。 注意：要选中框架才能在框架内部进行增加框架，否则默认是在外框架(整个框架集上增加!),直接从底部向上拖拽 出来的框架,选中右下方的框架后再按alt拖拽出来的框架,2.菜单方式,在菜单栏修改框架页，在子菜单中单击相应的选项。,删除框架,方法： 将想要删除的框架边框拖至文档窗口的边缘为止，或拖拽想要删除的框架边框到父框架的边框上。,调整框架的大小,插入框架后，会发现框架的大小并不一定符合要求，因此需要将框架的大小进行适当的调整。 方法：将鼠标指针移到要调整的框架边框线上，在出现双箭头后，按住鼠标左键(进行左/右、或上下的拖拽即可)。,编辑框架集页面内容,框架集设计好后就可以编辑每个框架的内容 了。编辑框架集中内容有两个方法： (1) 利用前面所学内容，直接在相应的框架中输 入内容。 (2) 将框架中的网页文件事先编辑好，然后在框 架中导入。,对话框,这两种不同的编辑方法，在保存框架集网页的操作过程有所不同。 使用第一种方法，直接在3个区域(框架)中分别插入相应的内容(页面中的文本可以直接从前面制作的网页上拷贝过来) 制作完成后按F12预览页面，弹出一个对话框。提示没有保存框架集和框架文件。我们必须先进行保存，以后每次修改框架网页时如果直接预览页面都会出现这个对话框!,该对话框提示在预览框架集网页之前需要保存框架集文件和各个框架文件。单击“确定”，将保存框架集文件和框架文件，然后才打开浏览器预览；单击“取消”则放弃预览。,保存框架集文件,保存的方法通常有两种： (1) 同时保存框架集中的所有网页文件。 (2) 分别保存框架集中的网页和各个框架中的网 页文件。,保存框架集中的所有网页文件，操作步骤如下： (1) 菜单栏中选择“文件” “全部保存”。 (2) top left结构的框架由4个网页文件组成，在 保存过程中会先后弹出4个“另存为”对话框， 依次进行保存。,同时保存框架集中的所有网页文件,小技巧： 保存的时候被虚线框围住的框架就是我们正在保存的框架文件。如果虚线框围在左边就是保存左边框架中的网页，在右边就是保存右边的框架中的网页。 但是如果使用导入网页到框架，保存的方法就有所不同了。,分别保存框架集中的网页和各个框架中的网页文件,保存框架集网页文件，操作步骤： (1) 选中整个框架集 (2) 在菜单中选择“文件”“保存框架” 保存单个框架网页文件的操作步骤如下： (1) 将光标定位在要保存网页文件的框架内，或 在框架面板上单击网页所在框架 (2) 在菜单栏中选择“文件”“保存框架页”,单独保存框架集网页文件,保存框架网页文件,注意： 在框架中设置网页标题的步骤：选中框架集在常用面板中，再对网页标题进行设置。(设置完成后要保存整个框架)，此时网页标题才能被设置，我们一般的网页标题设置方法不能直接设置。,设置框架中的链接目标,为左边框架中的各个导航栏目建立一个可以链接到右边框架中的超级链接。其步骤： (1) 选中文本，打开文本的属性面板。 (2) 在属性面板上单击文件夹按钮，选取要连接 的文件。 (3) 在属性面板上单击“目标”的下拉列表，点中 “mainframe”这个框架名称，告诉浏览器在 mainframe框架中打开被链接的网页文件。,选择不同的框架名称，链接文件将在不同的框架中打开： 选择“mainframe”，在窗口的右边mainframe框 架中显示所链接的文件内容。 (2) 选择“leftframe”，在窗口的左边leftframe框架 中显示所链接的文件内容。 (3) 选择“topframe”，在窗口的上边topfrmae框架 中显示所链接的文件内容。,将链接目标设置在默认框架中,这是4个默认的框架名称,(1) _blank(空白窗口)：在另一个新的窗口中显示链接内容，这样可以保留现有的窗口文档内容。 (2) _parent(父窗口)：在上一层的框架集中显示链接内容(该选项只有在框架集中还包含另一个框架集的情况下才能产生效果)。 (3) _self(当前窗口)：在本身所在的框架中显示链接内容这样会覆盖当前框架中的所有内容。该目标是默认值。 (4) _top(最高)：在整个浏览窗口中显示链接内容，这样会覆盖当前框架中所有内容。,修改框架集网页外观,框架默认的外观不好看，我们可以通过设置框架(或框架集)的属性来修改。 1、设置框架集属性 框架集属性包括框架的大小和框架之间的边框颜色及宽度等。查看和设置框架集的属性如下：,表示当前选择 的是框架集,表示当前的框架 结构为2行1列,用于设置当前框架集边框 的类型、宽度和颜色,设置选定行(列)的大小及其单位,行列选择器深色行为当前行,(1) 选中整个框架集。 (2) 在菜单栏中选择“窗口”“属性”，此时打开的属性面板为 整个框架集的属性面板为整个框架集的属性面板。 (3) 根据需要在属性面板上进行相应设置即可!,精确调整框架大小,将leftframe框架区域的列宽精确调整到180像素，步骤如下： (1) 在框架面板上单击上下框架之间的立体边框 (2) 此时属性面板为下边框架集的属性面板 (3) 在“值”文本框中输入180，单位选择像素即可 注意：如果想调整topframe框架区域的高度，就要选中整个框架集。在“值”文本框中输入一个数字即可设置行的大小,2.设置框架的边框及其宽度和颜色,在框架属性面板上的“边框”项用于设置在当文档在浏览器中被浏览时是否显示框架，共有三种选择： (1) yes(是)：显示边框，宽度由“边框宽度”中的 值指定 (2) no(否)：不显示边框 (3) default(默认)：让用户浏览器决定是否显示 边框。一般情况下为立体的灰色边框,“边框宽度”项用于设置框架边框的宽度，实际上是框架与框架之间的距离，与表格中单元格的间距相似，其单位默认为像素 刚建立框架集网页时，框架集中的边框设为“NO”，宽度设为0。在浏览框架网页时，看不到框架之间的边框，形成了一个整体，这就是无缝连接的效果。,没有边框时的无缝连接效果,设置边框为5时的框架效果,设置框架属性,框架属性包括框架的名称、源文件、边距、滚动、边框等。使用框架属性面板可以查看和设置框架属性。,通过执行以下操作之一选择框架： 在“文档”窗口的“设计”视图中，按住 Alt 键的同时单击一个框架 (Windows) 或在按住 Shift 和 Option 键的同时单击一个框架 (Macintosh)。 在“框架”面板（“窗口”“框架”）中单击框架。,1.命名框架 打开框架面板，可以看到在top left结构的框架集中，框架的默认名称分别为topframe、leftframe、和mainframe，这些名称都可以重新定义的。 (1) 在框架面板中的topframe框架内单击，以选 中topframe框架。 (2) 打开属性面板，在框架属性面板的“框架名 称”里输入框架的名称，回车即可。,表示当前选择的是 一个独立的框架,对框架名 称修改,以像素为单位设置 框架边框与内容之 间的左右间距,设置或显示当前框架中的网页文件,选中可防止用户 在浏览时调整当 前框架的大小,滚动：在下拉列表中设置框架是否出现滚动条,设置边框和 边框颜色,注意：,框架名称将被作为超级链接的目标和脚本使用，命名框架必须符合一下要求：框架名应该是一个单词，允许使用下划线(_)，但不能使用横杠(-)、名号(.)和空格；框架名应该以字母开头，不要使用JavaScript的保留字(如top或navigator)。,2.更换框架中的网页,利用“导入”，既可以在当前框架中导入预先设计好的网页文件，也可以更换当前框架中的网页。其步骤： （1）选中想要导入（或更换）网页的框架。 （2）使用以下几种方法依次导入网页： A、直接在框架属性面板上的“源文件”文本框中输入文件名。 B、单击框架属性面板上的黄色按钮，浏览并选择一个文件。 C、把光标置于页面中想更换内容的框架内，然后在菜单栏中选择“文件”“在框架中打开”命令打开一个文件。,三种在框架中打开文件的方法,3.为框架设置滚动条,使用“scroll”选项就可以为当前框架设置滚动条。好处：当没有足够的显示空间来显示框架内容时，通过拖动滚动条来显示剩下的内容。 其中的四个选择项： （1）yes（是）：显示滚动条 （2）no（否）：不显示滚动条 （3）auto（自动）：当没有足够的空间来显示当前框架 的内容时自动显示滚动条 （4）default（默认）：采用浏览器的默认值（大多数浏 览器默认为auto自动）。,一般情况下，在“scroll”的下拉列表中选择“默认”或“自动”，这样浏览器会自动跟据窗口的大小来判断是否需要出现滚动条。,4.为框架设置边框及颜色 5.设置框架边框与框架内容之间的距离 注意：设置框架属性会覆盖框架集中设置的相应属性,本章小结,1.在页面中创建框架集和框架，并对页面布局进行适当的调整 2.输入框架页面内容 3.保存框架集文件和框架