HTML网页设计教程 第7章 框架.ppt

Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,Click to edit Master title style,第,7,章 使用框架创建多页面布局,清华大学出版社,主要内容,建立水平或垂直的框架分割窗口,用嵌套框架分割窗口,对滚动条进行控制,在空白窗口显示网页,在框架或浮动框架上进行链接,7.1,框架简介,框架技术可以将浏览器分割成多个小窗口，并且在每个小窗口中，可以显示不同的网页，这样我们就可以很方便的在浏览器中浏览不同的网页效果。,当浏览器分割成多个窗口后，各窗口就会扮演不同的角色，实现不同的功能。举例来说，有些论坛就是把浏览器分割成两个窗口，一个窗口主要来显示帖子的标题，而另一个窗口会显示具体的内容。这样的设计显然比起一个窗口的网页在浏览时方便得多，而且用户也可以任意的切换题目。,框架的基本结构,框架的基本结构主要分为框架和框架集两个部分。它是利用,标记与,标记来定义。其中,标记用于定义框架，而,标记则用于定义框架集。,框架的基本结构,框架的基本结构,7.2,框架的设置,常见的对窗口的分割包括：水平分割、垂直分割和嵌套分割。具体采用哪种分割方式，取决于实际需要，可用,标记中的,rows,（水平分割）或,cols,（垂直分割）属性来进行分割。,窗口的水平分割,rows,属性可定义一个水平分割的窗口框架。,窗口的水平分割,语法说明,rows,属性的值代表各子窗口的高度，第一个子窗口高为高度,1,，第二个子窗口高为高度,2,，依此类推，而最后一个*，则代表最后一个子窗口的高度，值为其他子窗口高度分配后所剩余的高度。,设置高度数值的方式有两种：,采用整数设置，单位为像素（,px,），语法如下：,用百分比设置，语法如下：,采用整数设置窗口的水平分割,窗口的垂直分割,cols,属性可定义一个垂直分割的窗口框架。,基本语法,：,一个垂直分割的例子,采用整数设置窗口的水平分割,窗口的嵌套分割,在实际应用中，“厂”字型框架使用极为广泛。“厂”字型的网页就是窗口中包含水平和垂直分割，如图所示，实现“厂”字型框架需要对窗口进行嵌套分割。,窗口的嵌套分割,窗口的嵌套分割,框架的边框,在,标记中，可运用,border,属性控制分割窗口框架的边框。,基本语法：,语法说明：,n,为整数，代表此窗口框架的宽度，单位为像素,(,px,),。,框架的边框,框架的边框控制,框架的边框,框架的隐藏,frameborder,属性用于控制窗口框架的周围是否显示框架，此属性可使用在,标记与,标记中，如果使用在,标记内时，可控制窗口框架的所有子窗口，如果用在,标记中，则只能控制该标记所代表的子窗口。,基本语法：,语法说明：,0,表示不显示边框，,1,表示显示边框，默认值为,17.3,子窗口的设置,指定子窗口显示网页,定义子窗口名称,控制子窗口滚动条,调整子窗口的尺寸,设置子窗口的边距,指定子窗口显示网页,src,属性是用来指定要导入到某个子窗口的,HTML,文件的位置，语法如下：,基本语法：,语法说明：,src,属性的设置方法和前面介绍的,标记的,src,属性的用法是一样的，下面的,标记，将设置子窗口显示名称为,frame.html,的网页。,。,指定子窗口显示网页,指定子窗口显示网页,指定子窗口显示网页,定义子窗口名称,name,属性用来指定窗口的名称，当完成子窗口的名称定义后，可指定超链接的链接目标显示到网页的某个子窗口。,基本语法：,指定子窗口的名称,控制子窗口滚动条,scrolling,属性用于控制窗口框架中是否显示滚动条，使用此属性，可以避免,HTML,文件因内容过多而无法完全显示。此属性用于,标记中。,基本语法：,语法说明：,yes,表示为显示滚动条，,no,表示不显示滚动条，,auto,为自动设置。,控制框架滚动条,调整子窗口的尺寸,在前面的学习中，我们学习了如何运用,标记的,rows,和,cols,属性来水平或垂直分割窗口。但设置后，各窗口框架的大小并非固定无法更改，当我们想更改窗口框架大小时，可以将鼠标指针移到要更改的框架上，待指针呈现双箭头符号时，再用鼠标进行拖拽，就可调整窗口的大小。,当然我们不希望用户能随意地改变子窗口的大小，那么这时我们可以在,标记中，添加,noresize,属性，语法如下：,设置子窗口的边距,网页的边距可以通过“,margin”,来设定，那么框架和网页一样也可设置边距，可以利用,标记中的,marginwidth,属性来设置框架左右边缘的宽度；,marginheight,属性可以设置框架上下边缘的宽度。,基本语法：,语法说明：,在,HTML,文件中，利用框架,标记中的,marginwidth,和,marginheight,属性可以设置相应子框架的左右和上下边缘的空白。,设置框架边距,7.4,浮动框架,在浏览网页的时候会看到在浏览器窗口含有孤立的子窗口，那么这就是浮动框架，插入浮动框架要使用成对的标记,，同样，我们会用,src,属性来设置框架中显示文件的路径。,基本语法：,语法说明：,与框架不同的是，浮动框架可以包含在,标记中。,7.5,小实例,将浏览器画面分割成多个子窗口时，可赋予各子窗口不同的功能。最常见的应用方式，就是以一个子窗口作为网页的主画面，另一个窗口则用于控制该窗口的显示内容。要达到这个目的，我们可以运用,标记的,target,属性，来指定显示链接网页的子窗口。,厂字型布局图,小结,本章主要介绍了两种框架方式：一种是分割窗口式，一种是嵌入式，两种框架的介绍主要包括插入方式、大小调整、显示方式、初始页设置、名称设置等内容，框架一般来说应用比较多的是在导航这块内容，因为一般来说一个网站的导航栏是相似的，比如可以包含一些广告，或相同的图片，我们可以只做一个框架来调用我们的导航，这些可以提高我们的工作效率。,Thank You!,