Download presentation
Presentation is loading. Please wait.
1
第6章 框架实现多窗口网页
2
第六章 框架实现多窗口网页 内容提要 框架与框架集 框架的基本操作 框架的属性 框架布局网页实例 制作浮动框架
3
6.1 框架与框架集 框架集也是一个网页布局工具，使用框架集可以把浏览器窗口划分成若干区域，分别在不同的区域显示不同的网页文档。一个框架是一个独立的HTML页面，就是浏览器窗口中的一个区域。 框架通过框架集的使用能够很好的在一起运作； 框架集是由多个框架嵌套组合而成的，它包含同一网页上多个框架的布局、链接和属性信息。 框架集文档本身不包含要在浏览器中显示的HTML内容，但noframes部分除外。 要在浏览器中查看一组框架，必须打开框架集文档。
4
6.1 框架与框架集
5
6.2 框架的基本操作 6.2.1 在HTML代码中创建框架 1.创建基本框架 基本HTML中使用<frameset>，<frame>和<noframes>标签来定义框架。 （1）<frameset>框架集标签 <frameset>标签用于定义一个框架集，成对出现。框架集的作用是将一个窗口划分成多个子窗口，即框架，每个框架都是一个独立的页面，又叫框架页面。<frameset>通过cols属性和rows属性来将一个窗口划分为多个框架。 （2）<frame>框架标签 <frame>框架标签用于设定单个框架页面，单个出现。<frame>也可以通过属性设置框架的外观
6
6.2 框架的基本操作 （3）<noframes>标签
（4）基本结构 <frameset>标签是可以嵌套使用的，也就是说，可以将其中某一个或几个子窗口划分为若干个更小的窗口。
7
6.2 框架的基本操作 6.2.2 在Dreamweaver中创建框架 Dreamweaver提供了两种创建框架结构网页的方法，即：可以从若干预定义的框架集中选择，也可以自己设计框架集。 1.创建预定义的框架集 （1）选择预定义框架集 （2）为各个框架设置标题 2.自定义框架集 自定义框架集是指由网页设计者根据需要，自己设置框架集中框架的数量、布局等属性，适合于创建复杂框架结构页面。
8
6.2 框架的基本操作 6.2.3 框架页的选择 1．在“框架”面板中选择框架和框架集 2．在“文档”窗口中选择框架和框架集
选择主菜单的【窗口】—【框架】或者按下Ctrl+F10，打开框架面板。 在“框架”面板中点击框架则可选取框架，若要在“框架”面板中选取框架页，则需在“框架”面板中点击环绕着框架的边框。 2．在“文档”窗口中选择框架和框架集 按住Alt键的同时单击框架内部； 要选择一个框架集，则需单击框架内部的分隔线。 通过单击窗口左下角的标签选择器来选择相应的框架或框架集。
9
6.2 框架的基本操作 6.2.4 框架页的保存 框架网页由框架页（也叫框架集）和（子）框架两部分组成。
框架页定义框架的结构、数量、尺寸及装入框架的网页文件。 框架页是一种特殊的网页文件。其中，保存描述子框架数量，以及在各个子窗口中显示网页的文件名（路径）等信息。 子框架是子窗口、框架。每个子框架中打开一个独立的网页文件。 一个包含三个框架（子）窗口的网页，由四个网页文件组成。
10
6.2 框架的基本操作 6.2.5指定框架网页文件 当完成框架集的创建后，还需要为每个框架指定一个网页文件，该操作的实质就是把网页文件放到相应的框架中。当这个框架中被保存后，所指定的文档就成为在浏览器中打开框架页时该框架显示的默认网页文档。这些被放入框架中的网页可以是空白网页，也可以是事先编辑好的网页文件。实际上，当创建一个框架页文件时，就已经创建了框架所对应的空白网页文件。 操作方法是： 1.将插入点放在需要插入网页的框架中； 2.选择【文件】—【在框架中打开】菜单命令，打开“选择HTML文件”对话框。 3.在“选择HTML文件”对话框中选择要打开的网页文件，单击“确定”，即可完成网页的插入。
11
6.2 框架的基本操作 6.2.7设置框架中的链接 在框架中可以使用超链接，并且可以通过一个框架中的超链接改变另一个框架中的内容，这种方法通常用于创建导航页面。要在一个框架汇总使用超链接打开另一个框架中的文档，必须设置链接目标。链接目标用于确定链接内容在哪里打开。 为框架网页设置超链接的操作步骤如下： 1.在网页文件中选择要设置链接的对象（如具体的文字、图片等）； 2.在属性面板的“链接”选项中设置链接的网页文件。 3.在属性面板的“目标”下拉列表中选择打开链接文件的窗口
12
6.3 框架的属性 设置框架集的属性 （1）使用框架集属性面板 （2）设置框架集标题 首先选中要设置标题的框架集，然后再在“文档”工具栏的“标题”框中键入框架集文档的名称即可。
13
6.3 框架的属性 2.设置框架属性
14
6.4 框架布局网页实例
15
6.4 框架布局网页实例
16
6.5制作浮动框架 1.浮动框架基础 浮动框架又叫嵌入式框架，就是在HTML文档中的一个区域内插入一个HTML文档，就像在HTML文档的一部分区域中显示图像一样。 浮动框架不需要在单独的网页中创建框架，而是通过<iframe>标签建立的，其常用属性 属性 说明 src 嵌入框架内容的源 name 标记框架名 frameborder 设置和隐藏框架边界 scrolling 设置框架滚动条，取值yes，no或auto width 设置浮动框架宽度，单位像素 height 设置浮动框架高度，单位像素
17
6.5制作浮动框架 <html> <head> <title>嵌入式框架</title>
2.在记事本中制作浮动框架 <html> <head> <title>嵌入式框架</title> </head> <body> <p><a href="p2.jpg" target="a" >美好回忆</a></p> <iframe width="300" height="400" name="a"> </body> </html>
18
6.5制作浮动框架 3.在Dreamweaver中制作浮动框架 （1）插入浮动框架 （2）将光标定位在“代码”模式中已插入的“<iframe>”标签内，然后按回车键，自动打开下拉列表，选择“src”选项， （3）接着显示“浏览”按钮 （4）依照前两个步骤或以直接输入的方法，编写代码“width="300" height="400"”，设置浮动框架的宽度和高度， （5）保存该网页，按F12在浏览器中预览，
19
6.5制作浮动框架
20
Thanks！
Similar presentations
