框架结构面的制作.pptx

网页编程技术网页编程技术1 1复习1.学会表格及嵌套表格的使用学会表格及嵌套表格的使用网页编程技术网页编程技术2 24.1框架的基本结构框架的基本结构什么是框架呢？框架也就是所谓的分割窗口、分割画面，把一个浏览器显示的网页窗口分成几部分。如右图把网页index.htm分成三部分，其中区域1显示a.htm,区域2显示b.htm,区域3显示c.htm。网页编程技术网页编程技术3 34.1.1框架集标志框架集标志那要如何才能显示框架(分割窗口)呢?肯定要用到新的HTML标签。在HTML文件中加入框架的标记有和标记，其中前者用来定义整个框架的分割方式(如水平、垂直及每个框架的大小尺寸)，后者用来定义各个框架的内容(哪个框架要显示哪个网页)。网页编程技术网页编程技术4 4框架使用的简单例子：框架使用的简单例子：加入要创建如下的框架，看怎么创建：网页编程技术网页编程技术5 5参考：参考：其中其中rows表示按水平分割窗口，具体分割的数表示按水平分割窗口，具体分割的数值由由属性决定。属性决定。标记中的中的src表示表示显示的网示的网页名，名，name是是给此分割窗口取的名字。此分割窗口取的名字。注意：注意：不能与不能与共用共用。网页编程技术网页编程技术6 6其常用的格式为：其常用的格式为：你的你的浏览器不支持框架器不支持框架网页编程技术网页编程技术7 7说明：rows表示分成多少行数，cols表示分成多少列数。可以只用rows表示分成m行，或cols表示分成n列，或者同时指定rows和cols表示将主网页分成m行和n列。其中每行或每列的子窗口的高度或宽度的数值可以用3种方式表示：a)数字：以绝对方式来定义框架的大小b)百分比：以相对窗口大小来定义各框架大小c)*:表示将剩下的空间进行分配。你的你的浏览器不支持框架器不支持框架表示如果表示如果浏览器不支持框架器不支持框架时，显示的内容。一般示的内容。一般浏览器是支持框器是支持框架的，所以一般情况下可以不写架的，所以一般情况下可以不写网页编程技术网页编程技术8 8如想把前面例子的主框架窗口分成上下两个字窗口的高度为1:3，可以这样设置：或者网页编程技术网页编程技术9 94.1.2嵌套框架嵌套框架假如要做一个我们这章刚开始提到时的框架。这个框架好像不是很规则(不是m行n列)。这个怎么设计呢？可以先把2、3部分看做一个整体(记作23)。这样处理后的框架为左右结构。其代码为：网页编程技术网页编程技术1010现在把子窗口bc:替替换成一个上下的框架：成一个上下的框架：于是就做出了嵌套框架：于是就做出了嵌套框架：网页编程技术网页编程技术1111网页编程技术网页编程技术12124.1.3框架集标签属性说明元素与属性元素与属性定定 义义在文档中定义框架集在文档中定义框架集cols=ncols=n按列创建框架集合的框架按列创建框架集合的框架(n(n是像素是像素宽度或百分比的集合宽度或百分比的集合)rows=nrows=n按行创建框架集合的框架按行创建框架集合的框架(n(n是像素是像素宽度或百分比的集合宽度或百分比的集合)frameborder=0,1frameborder=0,1打开或关闭框架边框，默认值为打开或关闭框架边框，默认值为1 1，显示框线。显示框线。border=nborder=n边框的粗细边框的粗细bordercolor=colorbordercolor=color边框颜色边框颜色framespacing=nframespacing=n定义框架之间的空间定义框架之间的空间网页编程技术网页编程技术13134.1.4框架标签框架标签属性属性src=URL定义此框架窗口要显示的网页定义此框架窗口要显示的网页name定义框架的目标名定义框架的目标名Bordercolor边框颜色边框颜色scrolling=yes,no,auto打开或关闭滚动条打开或关闭滚动条frameborder=0,1打开打开(1)或关闭或关闭(0)框线框线,默认值为默认值为1marginheight=n定义框架边缘高度定义框架边缘高度(以像素以像素)marginwidth=m定义框架边缘宽度定义框架边缘宽度(以像素以像素)noresize固定框架大小使用户不能调节固定框架大小使用户不能调节align框架的对齐方式框架的对齐方式(left,center,right,top,bottom)height=n框架的高度框架的高度(像素或百分比像素或百分比)width=m框架的宽度框架的宽度(像素或百分比像素或百分比)网页编程技术网页编程技术14144.2浮动框架浮动框架（1）语法：iframe与frameset的区别：iframe可以与body元素共同出现在同一篇文档之中。iframe的作用就是在网的作用就是在网页中中标记出一出一块区域，使得区域，使得这块区域可以区域可以显示其他内容示其他内容。iframe元素中的各种常用属性，name、border、frameborder、marginheight、marginwidth、scrolling等，与frame中的用法相同，不再重复。网页编程技术网页编程技术1515例子：例子：浮动框架的使用 右边显示的是test1.html中的内容。现在就好像是在这个网页中又嵌入了另外一个网页，使用的就是iframe元素。这样可以使网页的可实行加强，对于讲解、说明等特定网页十分适合。网页编程技术网页编程技术16164.3框架结构之间的链接框架结构之间的链接4.3.1普通框架与普通框架与链接接方法：在方法：在标记内加入内加入target属性来属性来设定定连接的目的网接的目的网页target属性除了可以直接指定框架的名称外，属性除了可以直接指定框架的名称外，还有下列几有下列几个常用的属性个常用的属性值，分，分别代表不同的功能：代表不同的功能：1target=“_blank”：将超：将超级链接网接网页显示在一个新的窗示在一个新的窗口。口。2target=“_top”：将超：将超级链接网接网页显示整个窗口。示整个窗口。3target=“_parent”：将超：将超级链接网接网页显示在上一示在上一层的框架。的框架。4target=“_self”：将超：将超级链接网接网页显示在当前的框架中示在当前的框架中（默（默认值）。）。网页编程技术网页编程技术17172、浮动框架与链接iframe元素的功能是在一个文档里内嵌一个文档，创建一个浮动的框架窗口。部分属性简介如下：Name：内嵌框架窗口名称Width：内嵌框架窗口宽度（可用像素值或百分比）Height：内嵌框架窗口高度Frameborder：内嵌框架窗口边框scrolling:是否出现滚动条（auto为自动，yes为显示，no为不显示）src：内嵌入文件的地址allowtransparency：是否允许透明网页编程技术网页编程技术1818浮动框架与链接的使用 可以把test2.html网页显示到框架inside中 网页编程技术网页编程技术1919综合实例综合实例:需求：现在想做一个类似下页关于显示NBA球星图片的网站。网站的上面以缩略图的形式从左向右运动显示球星的图片，单击左下方的球星姓名，就把对应的球星图片显示在右下方网页中(所需要的素材在images子目录中)。还可以根据自己的爱好作一些特殊的效果。网页编程技术网页编程技术2020网页编程技术网页编程技术2121方法方法1：用分割框架：用分割框架：frameset参考代码：网页编程技术网页编程技术2222方法方法2：用浮动框架：用浮动框架iframe显示示顶部的部分部的部分显示左下方部分示左下方部分右下方的部分右下方的部分网页编程技术网页编程技术2323具体的代码可以参看html2009目录下的NBA00.htm和NBA01.htm两个文件及相关的其他网页。网页编程技术网页编程技术2424【小结】通过这次课学习，大家对使用框架网页有一定的认识了，它的主要优点是：（1）可以使窗口中的一部分内容固定。（2）可以在一个窗格中显示所有页面的总索引，通过单击该区域中和超链接，相关网页就会显示在另一个窗格中，非常直观。用户在浏览局部内容时，仍对整个网站的结构有清楚的认识，不至于进入多层链接后而迷失方向。