《单元3任务2框架》由会员分享，可在线阅读，更多相关《单元3任务2框架（29页珍藏版）》请在金锄头文库上搜索。
1、任务2 框架的设计,1,单元3 HTML高级应用,任务2：窗口框架的使用,【任务陈述】重复出现的内容被固定下来，每次浏览者发出对页面的请求时，只下载发生变化的部分，其他子页面保持不变，必然能给浏览者带来方便，节省时间。本任务，将仍以庄辉个人网站为例使用框架技术重新完成站点。,任务2：窗口框架的使用,【知识准备】,一、框架的含义与基本构成 框架实际上有两部分组成，即框架集与框架。 框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。 所有的框架标签要放在一个HTML文档中，HTML页面的标签被框架集标签所取代，然后通过的子窗口标签定义每一个子窗口和子窗口页面属性。 最常见
2、的框架结构就是网站的导航条作为一个单独的框架窗口，当用户查看具体的内容时，导航条窗口保持不变，这就为用户的浏览提供了方便。,任务2：窗口框架的使用,一、框架的含义与基本构成,框架的基本结构 基本语法：.Frame子框架的src属性的每个URL值指定了一个HTML文件。,任务2：窗口框架的使用,二、框架集 框架集就是用来定义这一HTML文件为框架模式，并设定视窗如何分割的文件。 通俗一点地说，框架集就是存放框架结构的文件，也是访问框架文件的入口文件。 框架集基本属性：,任务2：窗口框架的使用,二、框架集,任务2：窗口框架的使用,二、框架集,（1）左右分割窗口属性cols 语法： 将窗口分为40%
3、，40%，20%将300像素意外的两个窗口平均分配将窗口分为三等份,任务2：窗口框架的使用,二、框架集,（1）左右分割窗口属性cols 值的定义为宽，可以是数字（单位为像素），也可以是百分比和剩余值。 剩余值用“*”号表示，剩余值表示所有窗口设定之后的剩余部分，当“*”只出现一次时，表示该子窗口的大小将根据浏览器窗口的大小自动调整，当“*”出现一次以上时，表示按比例分割剩余的窗口空间。 cols的默认值为一个窗口,任务2：窗口框架的使用,二、框架集,（2）上下分割窗口属性rows 语法： 将页面沿水平方向切割，也就是将页面分成上下排列的多个窗口。,任务2：窗口框架的使用,三、子窗口标签的设定是
4、个标签，标签要放在框架集frameset中，设置了几个子窗口就必须对应几个标签，而且每一个标签内还必须设定一个网页文件（src=”*.html”）,任务2：窗口框架的使用,任务2：窗口框架的使用,三、子窗口标签的设定,属性设置：设置边框-frameborder 语法： 或者 在默认情况下，框架窗口的四周有一条边框线，通过frameborder 参数可以调整边框线的显示情况。 frameborder 的取值只能为0或1。如果取值为 0，那么边框线将会被隐藏；如果取值为1，边框线将会显示。在frameset 中设置将会对整个框架有效，在frame中设置则只对当前这个框架有效。,任务2：窗口框架的使
5、用,三、子窗口标签的设定,属性设置：框架的边框宽度-framespacing 语法： 框架的边框宽度在默认情况下是1像素，通过参数 framespacing 可以调整其大小。 边框宽度就是在页面中各个边框之间的线条宽度，以像素为单位。而这一参数只能对框架集使用，对单个框架无效。,任务2：窗口框架的使用,三、子窗口标签的设定,属性设置：框架的边框颜色-bordercolor 语法： 使用参数bordercolor可以设置框架集的边框颜色。 该参数同样只对整个框架集有效，对于单个框架无效。,任务2：窗口框架的使用,三、子窗口标签的设定,属性设置：页面源文件-src 语法： 框架结构中的各个页面都是
6、一个单独的文字，而这些文件是通过src 参数进行设置的。 页面文件是框架页面的具体内容的所在，对于没有设置源文件的框架，只是空白页面，是没有任何作用的。页面的源文件可以是正常的HTML文件，也可以是一个图片或者其他的文件。,任务2：窗口框架的使用,三、子窗口标签的设定,属性设置：页面名称-name 语法： 页面名称是为了便于页面的查找和链接所提供的一个属性。框架的页面名称中不允许包含特殊字符、连字符-、空格等，必须是单个的一个单词或者字母组合。,任务2：窗口框架的使用,三、子窗口标签的设定,属性设置：调整窗口的尺寸-noresize 语法： 当用鼠标拖动框架的边框的时候，框架窗口的尺寸就会随之
7、 变化。如果希望框架窗口的大小保持不变，可以设置 noresize 参数。 在 frame 标记中添加“noresize“参数，就表示框架窗口的尺寸不能改变。,任务2：窗口框架的使用,三、子窗口标签的设定,属性设置：边框与页面内容的水平边距-marginwidth 语法： 框架页面与 HTML中的表格一样，也可以设置边框与页面内容的水平边距。水平边距设置页面的左右边缘与框架边框的距离，单位是像素。,任务2：窗口框架的使用,三、子窗口标签的设定,属性设置：边框与页面内容的垂直边距-marginheight 语法： 与水平边距类似，通过marginheight 参数可以设置边框与页面的垂直边距。
8、垂直边距用来设置页面的上下边缘与框架边框的距离，单位是像素。,任务2：窗口框架的使用,属性设置：设置框架滚动条显示-scrolling 语法： 默认情况下，当页面的内容超出浏览器窗口的大小时，页面会自动添加滚动条以便用户浏览。但是有时候用户希望不显示滚动条，这可以通过设置 scrolling 参数来实现。 scrolling 参数在这里只能取Yes、No或Auto三个值中的一个。其中，Yes表示一直显示滚动条，而No则表示无论什么情况都不显示滚动条；Auto是系统的默认值，它是根据具体内容来调整的，也就是当页面长度超出浏览器窗口的范围就会自动显示 滚动条。,任务2：窗口框架的使用,三、子窗口标
9、签的设定,（1）框架窗口的水平分隔 子窗口的排列遵循从左到右、从上到下的次序 标签，是自动生成，当浏览者使用的浏览器版本太低，不支持框架这个功能时，他看到的将会是一片空白。为了避免这种情况，即可使用这个标签。 ,任务2：窗口框架的使用,三、子窗口标签的设定,（2）框架窗口的垂直分隔 实例：,任务2：窗口框架的使用,四、窗口的名称与链接,如果在窗口中要设置超链接，就必须为每一个子窗口命名，以便于窗口间的链接。窗口的命名最好为拼音或英文单词，命名规则与程序语言中的变量命名相似。窗口的链接还用用到target属性，用这个属性就可以将链接的内容放置到想要放置的窗口内。,任务2：窗口框架的使用,【任务实
10、施】庄辉个人网站框架设计为“上方固定，左侧嵌套”的嵌套结构， 主框架也default.html，左侧页面为left.html，右侧页面为right.html以及其他作品页面。 一、定义主框架页面default.html页面,任务2：窗口框架的使用,二、定义左侧嵌套页面left.html页面,任务2：窗口框架的使用,三、定义右侧展示页面 右侧展示主页页面（right.html）、草书作品（cszp.html）、楷书作品（kszp.html）等页面。,任务2：窗口框架的使用,【任务拓展】一、浮动窗口标签的应用浮动框架是一种较为特殊的框架，是在浏览器窗口中嵌套子窗口，也就是整个页面并不是框架页面，但是却包含一个框架窗口。在框架窗口内显示相应的页面内容。与普通框架结构类似，浮动框架也可以设置很多参数,任务2：窗口框架的使用,一、浮动窗口标签的应用,基本语法： ,任务2：窗口框架的使用,一、浮动窗口标签的应用,
