《设计框架网》PPT课件

单击此处编辑母版标题样式,第三级,*,1,第,6,章,设计框架网页,Web,页的设计方式中，包含有框架网页设计。它可以将,Web,浏览器窗口分为不同的可滚动的区域。这些区域可独立显示几个,Web,页。一个窗口可保持不变，而其他窗口根据用户选择的超链接变化。,而目前，框架网页多数用在网站后面的界面中，可以通过左侧的栏目导航，在右则显示不同的设置数据页面。除此之外，还有,Iframe,内嵌框架方式，而这种多数应用于前台的主页中。它可将主页不同功能版块分割成不同的单个文件，这样便于修改网页内容。,本章学习要点：,2,创建框架,编辑框架集,设置框架的属性,内嵌框架应用,6.1,框架网页,3,框架提供将一个浏览器窗口划分为多个区域、每个区域都可以显示不同,HTML,文档的方法。使用框架的最常见情况就是，一个框架显示包含导航菜单的文档，而另一个框架显示包含内容的文档。,6.1.1,框架网页概述,4,很多用户可能将网页中的框架看成是一个文件，但实际上文档不是框的一部分，而框是存放文档的容器。,1,框架集,框架集是,HTML,文件，它定义一组框架的布局和属性，包括框架的数目、框架的大小和位置以及最初在每个框架中显示的页面的,URL,。,5,2,框架集的优势,3,嵌套的框架,集,框架的最常见用途就是导航。一组框架通常包括一个含有导航条的框架和另一个要显示主要内容页面的框架。,在另一个框架集中的框架集称为嵌套框架集。一个框架集文件可以包含多个嵌套的框架集。大多数使用框架的,Web,页实际上都使用嵌套的框架，并且在,Dreamweaver,中大多数预定义的框架集也使用嵌套。如果在一组框架里，不同行或不同列中有不同数目的框架，则要求使用嵌套的框架集。,6.1.2,创建各种框架,在,Dreamweaver,中有两种创建框架集的方法：既可以从若干预定义的框架集中选择，也可以自己设计框架集。,6,7,1,创建框架集,在,Dreamweaver,中，创建框架集是非常简单的。,8,2,创建嵌套框架集,将光标放置框架集的顶部中，单击【框架】下拉按钮，然后在列表中选择一种框架布局方式，则该框架集就是嵌套框架集。,9,3,创建浮动框架,要想在一个,HTML,网页的局部显示另外一个,HTML,网页，就需要用到浮动框架。浮动框架是一个,HTML,网页在另外一个,HTML,网页中显示的容器。浮动框架可以在空白页面中创建，也可以在表格中创建。,6.1.3,编辑框架集,【框架】面板提供框架集内各框架的可视化表示形式。它能够显示框架集的层次结构，而这种层次结构在【文档】窗口中的显示可能不够直观。,在【框架】面板中，环绕每个框架集的边框非常粗；而环绕每个框架的是较细的灰线，并且每个框架由框架名称标识。,10,1,在面板中选择框架,2,选择布局框架,3,选择不同的框架,6.1.4,向框架中添加内容,在选择框架后，可以向框架不同部分的文件（框架中每一个部分，都是一个独立的文件。）中添加内容，也可以指定为现在文件。,11,1,添加框架文档,2,为框架添加内容,用户可以通过将新内容插入框架的空文档中，或通过在框架中打开现有文档，来指定框架的初始内容。,无论是框架还是框架集，均是显示,HTML,网页的容器。要添加网页元素则是在框架网页中，而在框架网页中添加元素，与普通网页的操作方法相同，同样可以在其中插入表格、文本、图像、多媒体等。,6.1.5,保存框架集,如果一个站点在浏览器中显示为包含两个框架的单个页面，则实际上至少由三个,HTML,文档组成：框架集文件以及两个文档，这两个文档包含最初在这些框架内显示的内容。在,Dreamweaver,中设计使用框架集的页面时，必须保存所有这三个文件，该页面才能在浏览器中正常显示。,12,1,框架集保存,2,嵌套框架集保存,6.2,框架属性,选择不同的框架部分，会得到不同的属性。而框架集网页中，有些框架网页为固定网页，而框架集中的,mailFrame,框架网页为活动网页，所以框架集的超级链接目标与普通网页会有所不同。,13,6.2.1,布局框架基本属性,由于布局框架中包括框架集和框架，所以在设置其属性时也不尽相同。而某些框架属性还会覆盖框架集中的某些属性，所以在设置过程中要有所注意。,14,1,框架集属性,2,框架属性,结合,Alt,键单击某个框架选中该框架后，在【属性】检查器面板中会显示相应的属性参数,。,当选择框架集后，【属性】检查器面板中显示的是其各个属性参数,。,6.2.2,框架链接,框架页的超级链接之所以要特别指出，是因为框架网页少则,2,个，多则几个框架，链接的网页在哪一个框架中打开，是需要设定的。在创建框架集后，在【框架】面板中会显示每个框架网页的默认名称。,15,6.2.3,框架标签,创建框架集后，在【代码】视图中发现，选择单个框架与选择框架集的代码是不同的，因为页面所有框架标签需要放在一个,HTML,的文档，这个档案只记录了该框架如何分割，不会显示任何资料。,在布局框架代码中，,为框架集标签，,为框架标签，,为浏览器不支持框架时的标签，以及脱离框架集的浮动框架标签,。,16,17,1,标签,2,标签,当浏览者使用的浏览器版本过低，不支持框架功能时，看到的将是一片空白。为了避免这种情况，可以使用,这个标签，当浏览者的浏览器看不到框架时，就会看到,与,之间的内容，而不是一片空白。,是框架集的标签，,把画面分成左右两个部分，左部是显示,leftFrame,，右部则会显示,mainFrame,。在,标签中，包含一些参数。,3,标签,标签为单个框架标签，是包含在,标签中的，并且该标签为空标签，不需要关闭标签。在,标签包括设置框架的属性参数。,18,6.3,内嵌框架,Iframe,IFRAME,元素也就是文档中的文档，或者好像浮动的框架,(FRAME),。,frames,集合提供了对,IFRAME,内容的访问。使用,frames,集合读写,IFRAME,内包含的元素。,19,6.3.1,关于,Iframe,浮动框架（,iframe,）又被称做嵌入帧，是一种特殊的框架结构。其可以象层一样插入到普通的,XHTML,网页中，并且可以自由地移动位置。可以将其理解为一种可在网页中浮动的框架。,20,1,浮动框架概述,2,插入浮动框架,浮动框架是一种灵活的框架，是一种块状对象，其与层（,div,）的属性非常类似，所有普通块状对象的属性都可以应用在浮动框架中。,6.3.2 Iframe,属性,浮动框架除了可以使用普通块状对象的属性，也可以使用一些专有的属性，例如，框架独有的属性和浮动框架独有的属性。浮动框架的各种属性如下所示。,21,属性值,说明,top,顶部对齐，使用此属性值后，浮动框架将对齐在其父对象的顶端。,middle,居中对齐，使用此属性值后，浮动框架将对齐在其父对象的中间。,left,左侧对齐，使用此属性值后，浮动框架将对齐在其父对象的左侧。,right,右侧对齐，使用此属性值后，浮动框架将对齐在其父对象的右侧。,bottom,底部对齐，使用此属性值后，浮动框架将对齐在其父对象的底部。,