《框架实现多窗口页面》由会员分享，可在线阅读，更多相关《框架实现多窗口页面（20页珍藏版）》请在金锄头文库上搜索。
1、第第6 6章章 框架实现多窗框架实现多窗口口网页网页第第6章章 框架实现多窗口框架实现多窗口网页网页第第六六章章 框架实现多窗口框架实现多窗口网页网页内容提要内容提要框架框架与与框架集框架集框架框架的基的基本操本操作作框架框架的的属性属性框架布局框架布局网页网页实例实例制作制作浮动框架浮动框架第第6章章 框架实现多窗口框架实现多窗口网页网页6.1 6.1 框架框架与与框架集框架集u框架集也是一个网页布局工具，使用框架集可以把浏览器窗口划分成若干区域，分别在不同的区域显示不同的网页文档。一个框架是一个独立的HTML页面，就是浏览器窗口中的一个区域。u框架通过框架集的使用能够很好的在一起运作；u框
2、架集是由多个框架嵌套组合而成的，它包含同一网页上多个框架的布局、链接和属性信息。u框架集文档本身不包含要在浏览器中显示的HTML内容，但noframes部分除外。u要在浏览器中查看一组框架，必须打开框架集文档。第第6章章 框架实现多窗口框架实现多窗口网页网页6.1 6.1 框架框架与与框架集框架集第第6章章 框架实现多窗口框架实现多窗口网页网页6.2 6.2 框架框架的基的基本操本操作作6.2.1 6.2.1 在在HTMLHTML代代码中中创建框架建框架1.1.创建建基基本框架本框架基本HTML中使用，和标签来定义框架。（1）框架集标签标签用于定义一个框架集，成对出现。框架集的作用是将一个窗口
3、划分成多个子窗口，即框架，每个框架都是一个独立的页面，又叫框架页面。通过cols属性和rows属性来将一个窗口划分为多个框架。（2）框架标签框架标签用于设定单个框架页面，单个出现。也可以通过属性设置框架的外观第第6章章 框架实现多窗口框架实现多窗口网页网页6.2 6.2 框架框架的基的基本操本操作作（3）标签使用该标签可以在用户浏览器不支持框架显示时告之用户一些相关信息，以免浏览者对空白窗口画面感觉莫名其妙。标签是成对使用的，首尾标签之间的内容就是告之浏览者的信息。（4）基本结构标签是可以嵌套使用的，也就是说，可以将其中某一个或几个子窗口划分为若干个更小的窗口。第第6章章 框架实现多窗口框架实
4、现多窗口网页网页6.2 6.2 框架框架的基的基本操本操作作6.2.2 6.2.2 在在DreamweaverDreamweaver中中创建框架建框架 Dreamweaver提供了两种创建框架结构网页的方法，即：可以从若干预定义的框架集中选择，也可以自己设计框架集。1.1.创建建预定定义的的框架集框架集（1）选择预定义框架集（2）为各个框架设置标题2.2.自定自定义框架集框架集自定义框架集是指由网页设计者根据需要，自己设置框架集中框架的数量、布局等属性，适合于创建复杂框架结构页面。第第6章章 框架实现多窗口框架实现多窗口网页网页6.2 6.2 框架框架的基的基本操本操作作6.2.3 6.2.3
5、 框架框架页的页的选择1 1在在“框架框架”面板中面板中选择框架和框架集框架和框架集u选择主菜单的【窗口】【框架】或者按下Ctrl+F10，打开框架面板。u在“框架”面板中点击框架则可选取框架，若要在“框架”面板中选取框架页，则需在“框架”面板中点击环绕着框架的边框。 2 2在在“文档文档”窗口中窗口中选择框架和框架集框架和框架集u按住Alt键的同时单击框架内部；u要选择一个框架集，则需单击框架内部的分隔线。u通过单击窗口左下角的标签选择器来选择相应的框架或框架集。第第6章章 框架实现多窗口框架实现多窗口网页网页6.2 6.2 框架框架的基的基本操本操作作6.2.4 6.2.4 框架框架页的页
6、的保存保存u框架网页由框架页（也叫框架集）和（子）框架两部分组成。u框架页定义框架的结构、数量、尺寸及装入框架的网页文件。u框架页是一种特殊的网页文件。其中，保存描述子框架数量，以及在各个子窗口中显示网页的文件名（路径）等信息。u子框架是子窗口、框架。每个子框架中打开一个独立的网页文件。u一个包含三个框架（子）窗口的网页，由四个网页文件组成。第第6章章 框架实现多窗口框架实现多窗口网页网页6.2 6.2 框架框架的基的基本操本操作作指定框架指定框架网页网页文件文件 当完成框架集的创建后，还需要为每个框架指定一个网页文件，该操作的实质就是把网页文件放到相应的框架中。当这个框架中被保存后，所指定的
7、文档就成为在浏览器中打开框架页时该框架显示的默认网页文档。这些被放入框架中的网页可以是空白网页，也可以是事先编辑好的网页文件。实际上，当创建一个框架页文件时，就已经创建了框架所对应的空白网页文件。操作方法是：1.将插入点放在需要插入网页的框架中；2.选择【文件】【在框架中打开】菜单命令，打开“选择HTML文件”对话框。3.在“选择HTML文件”对话框中选择要打开的网页文件，单击“确定”，即可完成网页的插入。第第6章章 框架实现多窗口框架实现多窗口网页网页6.2 6.2 框架框架的基的基本操本操作作设设置框架中置框架中的的链接接 在框架中可以使用超链接，并且可以通过一个框架中的超链接改变另一个框
8、架中的内容，这种方法通常用于创建导航页面。要在一个框架汇总使用超链接打开另一个框架中的文档，必须设置链接目标。链接目标用于确定链接内容在哪里打开。为框架框架网页设网页设置超置超链接接的的操操作作步步骤如下：如下：1.在网页文件中选择要设置链接的对象（如具体的文字、图片等）；2.在属性面板的“链接”选项中设置链接的网页文件。3.在属性面板的“目标”下拉列表中选择打开链接文件的窗口第第6章章 框架实现多窗口框架实现多窗口网页网页6.3 6.3 框架框架的的属性属性设设置框架集置框架集的的属性属性（1）使用框架集属性面板（2）设置框架集标题首先选中要设置标题的框架集，然后再在“文档”工具栏的“标题”
9、框中键入框架集文档的名称即可。第第6章章 框架实现多窗口框架实现多窗口网页网页6.3 6.3 框架框架的的属性属性2.2.设设置框架属性置框架属性第第6章章 框架实现多窗口框架实现多窗口网页网页6.4 6.4 框架布局框架布局网页网页实例例第第6章章 框架实现多窗口框架实现多窗口网页网页6.4 6.4 框架布局框架布局网页网页实例例第第6章章 框架实现多窗口框架实现多窗口网页网页制作制作浮浮动框架框架1.浮动框架基础u浮动框架又叫嵌入式框架，就是在HTML文档中的一个区域内插入一个HTML文档，就像在HTML文档的一部分区域中显示图像一样。u浮动框架不需要在单独的网页中创建框架，而是通过标签建
10、立的，其常用属性属性属性说明明srcsrc嵌入框架嵌入框架内容的内容的源源namename标记框架名框架名frameborderframeborder设设置和置和隐藏框架藏框架边界界scrollingscrolling设设置框架置框架滚动条，取条，取值yesyes，nono或或autoautowidthwidth设设置浮置浮动框架框架宽度，度，单位像素位像素heightheight设设置浮置浮动框架高度，框架高度，单位像素位像素第第6章章 框架实现多窗口框架实现多窗口网页网页制作制作浮浮动框架框架2.在记事本中制作浮动框架 嵌入式框架 美好回忆 第第6章章 框架实现多窗口框架实现多窗口网页网页制作制作浮浮动框架框架3.在Dreamweaver中制作浮动框架（1）插入浮动框架（2）将光标定位在“代码”模式中已插入的“”标签内，然后按回车键，自动打开下拉列表，选择“src”选项，（3）接着显示“浏览”按钮（4）依照前两个步骤或以直接输入的方法，编写代码“width=300 height=400”，设置浮动框架的宽度和高度，（5）保存该网页，按F12在浏览器中预览，第第6章章 框架实现多窗口框架实现多窗口网页网页制作制作浮浮动框架框架第第6章章 框架实现多窗口框架实现多窗口网页网页Thanks！
