单元3任务2-框架.课件.ppt

任务2 框架的设计1单元单元3 3 HTMLHTML高级应用高级应用任务任务2 2：窗口框架的使用：窗口框架的使用 【任务陈述】 重复出现的内容被固定下来，每次浏览者发出对页面的请求时，只下重复出现的内容被固定下来，每次浏览者发出对页面的请求时，只下载发生变化的部分，其他子页面保持不变，必然能给浏览者带来方便，节载发生变化的部分，其他子页面保持不变，必然能给浏览者带来方便，节省时间 本任务，将仍以庄辉个人网站为例使用框架技术重新完成站点本任务，将仍以庄辉个人网站为例使用框架技术重新完成站点任务任务2 2：窗口框架的使用：窗口框架的使用 【知识准备】一、框架的含义与基本构成一、框架的含义与基本构成uu框架实际上有两部分组成，即框架集与框架框架实际上有两部分组成，即框架集与框架uu框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页示不同的网页uu所有的框架标签要放在一个所有的框架标签要放在一个HTMLHTML文档中，文档中，HTMLHTML页面的标签页面的标签被被框架集标签框架集标签所取代，然后通过所取代，然后通过的子窗口标签的子窗口标签定义每一个子窗口和子窗口页面属性。

定义每一个子窗口和子窗口页面属性uu最常见的框架结构就是网站的导航条作为一个单独的框架窗口，当用户最常见的框架结构就是网站的导航条作为一个单独的框架窗口，当用户查看具体的内容时，导航条窗口保持不变，这就为用户的浏览提供了方便查看具体的内容时，导航条窗口保持不变，这就为用户的浏览提供了方便任务任务2 2：窗口框架的使用：窗口框架的使用一、框架的含义与基本构成一、框架的含义与基本构成框架的基本结构基本语法： .Frame子框架的src属性的每个URL值指定了一个HTML文件任务任务2 2：窗口框架的使用：窗口框架的使用二、框架集二、框架集u框架集就是用来定义这一HTML文件为框架模式，并设定视窗如何分割的文件u通俗一点地说，框架集就是存放框架结构的文件，也是访问框架文件的入口文件u框架集基本属性：任务任务2 2：窗口框架的使用：窗口框架的使用二、框架集二、框架集属性说说明border设设置边边框粗细细，默认为认为 5像素bordercolor设设置边边框颜颜色frameborder指定是否显显示边边框：“0”便是不显显示边边框，“1”代表显显示边边框cols用“像素数”和“%”分割左右窗口，“*”表示剩余部分rows用“像素数”和“%”分割上下窗口，“*”表示剩余部分framespacing表示框架与框架间间的保留空白的距离noresize设设置框架不要调节调节 大小，只要设设定了前面的，后面的将继继承任务任务2 2：窗口框架的使用：窗口框架的使用二、框架集二、框架集（1）左右分割窗口属性cols语法： 将窗口分为40%，40%，20% 将300像素意外的两个窗口平均分配 将窗口分为三等份任务任务2 2：窗口框架的使用：窗口框架的使用二、框架集二、框架集（1）左右分割窗口属性colsu值的定义为宽，可以是数字（单位为像素），也可以是百分比和剩余值。

u剩余值用“*”号表示，剩余值表示所有窗口设定之后的剩余部分，当“*”只出现一次时，表示该子窗口的大小将根据浏览器窗口的大小自动调整，当“*”出现一次以上时，表示按比例分割剩余的窗口空间ucols的默认值为一个窗口任务任务2 2：窗口框架的使用：窗口框架的使用二、框架集二、框架集（2）上下分割窗口属性rows语法： u将页面沿水平方向切割，也就是将页面分成上下排列的多个窗口任务任务2 2：窗口框架的使用：窗口框架的使用三、子窗口三、子窗口标签的设定标签的设定 是个标签，标签要放在框架集frameset中，设置了几个子窗口就必须对应几个标签，而且每一个标签内还必须设定一个网页文件（src=”*.html”）任务任务2 2：窗口框架的使用：窗口框架的使用属性说明src指示加载载的url文件地址bordercolor设设置边边框颜颜色frameborder指定是否显显示边边框：“0”便是不显显示边边框，“1”代表显显示边边框border设设置边边框粗细细name指示框架名称，是链链接标签标签 的target所要的参数noresize指示不能调调整窗口的大小，省略此项时项时 可调调整scorling指示是否要滚动滚动 条，auto根据需要自动动出现现，yes有，no无marginwidth设设置内容与窗口左右边缘边缘 的距离，默认值为认值为 1marginheight设设置内容与窗口上下边缘边缘 的边边距，默认值为认值为 1width框窗的宽宽及高，默认为认为 width=”100” height=”100”align可选值为选值为 left、right、top、middle、bottom任务任务2 2：窗口框架的使用：窗口框架的使用三、子窗口三、子窗口标签的设定标签的设定属性设置：设置边框-frameborder语法： 或者u在默认情况下，框架窗口的四周有一条边框线，通过frameborder 参数可以调整边框线的显示情况。

uframeborder 的取值只能为0或1如果取值为 0，那么边框线将会被隐藏；如果取值为1，边框线将会显示在frameset 中设置将会对整个框架有效，在frame中设置则只对当前这个框架有效任务任务2 2：窗口框架的使用：窗口框架的使用三、子窗口三、子窗口标签的设定标签的设定属性设置：框架的边框宽度-framespacing语法： u框架的边框宽度在默认情况下是1像素，通过参数 framespacing 可以调整其大小u边框宽度就是在页面中各个边框之间的线条宽度，以像素为单位而这一参数只能对框架集使用，对单个框架无效任务任务2 2：窗口框架的使用：窗口框架的使用三、子窗口三、子窗口标签的设定标签的设定属性设置：框架的边框颜色-bordercolor语法： u使用参数bordercolor可以设置框架集的边框颜色u该参数同样只对整个框架集有效，对于单个框架无效任务任务2 2：窗口框架的使用：窗口框架的使用三、子窗口三、子窗口标签的设定标签的设定属性设置：页面源文件-src语法： u框架结构中的各个页面都是一个单独的文字，而这些文件是通过src 参数进行设置的u页面文件是框架页面的具体内容的所在，对于没有设置源文件的框架，只是空白页面，是没有任何作用的。

页面的源文件可以是正常的HTML文件，也可以是一个图片或者其他的文件 任务任务2 2：窗口框架的使用：窗口框架的使用三、子窗口三、子窗口标签的设定标签的设定属性设置：页面名称-name语法： u页面名称是为了便于页面的查找和链接所提供的一个属性框架的页面名称中不允许包含特殊字符、连字符-、空格等，必须是单个的一个单词或者字母组合任务任务2 2：窗口框架的使用：窗口框架的使用三、子窗口三、子窗口标签的设定标签的设定属性设置：调整窗口的尺寸-noresize语法： u当用鼠标拖动框架的边框的时候，框架窗口的尺寸就会随之 变化如果希望框架窗口的大小保持不变，可以设置 noresize 参数u在 frame 标记中添加“noresize参数，就表示框架窗口的尺寸不能改变 任务任务2 2：窗口框架的使用：窗口框架的使用三、子窗口三、子窗口标签的设定标签的设定属性设置：边框与页面内容的水平边距-marginwidth语法： u框架页面与 HTML中的表格一样，也可以设置边框与页面内容的水平边距水平边距设置页面的左右边缘与框架边框的距离，单位是像素 任务任务2 2：窗口框架的使用：窗口框架的使用三、子窗口三、子窗口标签的设定标签的设定属性设置：边框与页面内容的垂直边距-marginheight语法： u与水平边距类似，通过marginheight 参数可以设置边框与页面的垂直边距。

u垂直边距用来设置页面的上下边缘与框架边框的距离，单位是像素 任务任务2 2：窗口框架的使用：窗口框架的使用属性设置：设置框架滚动条显示-scrolling语法： u默认情况下，当页面的内容超出浏览器窗口的大小时，页面会自动添加滚动条以便用户浏览但是有时候用户希望不显示滚动条，这可以通过设置 scrolling 参数来实现uscrolling 参数在这里只能取Yes、No或Auto三个值中的一个其中，Yes表示一直显示滚动条，而No则表示无论什么情况都不显示滚动条；Auto是系统的默认值，它是根据具体内容来调整的，也就是当页面长度超出浏览器窗口的范围就会自动显示 滚动条任务任务2 2：窗口框架的使用：窗口框架的使用三、子窗口三、子窗口标签的设定标签的设定（1）框架窗口的水平分隔u子窗口的排列遵循从左到右、从上到下的次序u标签，是自动生成，当浏览者使用的浏览器版本太低，不支持框架这个功能时，他看到的将会是一片空白为了避免这种情况，即可使用这个标签u任务任务2 2：窗口框架的使用：窗口框架的使用三、子窗口三、子窗口标签的设定标签的设定（2）框架窗口的垂直分隔实例：任务任务2 2：窗口框架的使用：窗口框架的使用四、窗口的名称与链接四、窗口的名称与链接 如果在窗口中要设置超链接，就必须为每一个子窗口命名，以便于窗口间的链接。

窗口的命名最好为拼音或英文单词，命名规则与程序语言中的变量命名相似窗口的链接还用用到target属性，用这个属性就可以将链接的内容放置到想要放置的窗口内任务任务2 2：窗口框架的使用：窗口框架的使用【任务实施】 庄辉个人网站框架设计为庄辉个人网站框架设计为“ “上方固定，左侧嵌套上方固定，左侧嵌套” ”的嵌套结构，的嵌套结构， 主框架主框架也也default.htmldefault.html，左侧页面为，左侧页面为left.htmlleft.html，右侧页面为，右侧页面为right.htmlright.html以及其他作以及其他作品页面一、定义主框架页面一、定义主框架页面default.htmldefault.html页面页面任务任务2 2：窗口框架的使用：窗口框架的使用二、定义左侧嵌套页面二、定义左侧嵌套页面left.htmlleft.html页面页面任务任务2 2：窗口框架的使用：窗口框架的使用三、定义右侧展示页面三、定义右侧展示页面右侧展示主页页面（右侧展示主页页面（right.htmlright.html）、草书作品（）、草书作品（cszp.htmlcszp.html）、楷书作品（）、楷书作品（kszp.htmlkszp.html）等页面。

等页面任务任务2 2：窗口框架的使用：窗口框架的使用【任务拓展】 一、浮动窗口标签一、浮动窗口标签的应用的应用 浮动框架是一种较为特殊的框架，是在浏览器窗口中嵌套子窗口，也就浮动框架是一种较为特殊的框架，是在浏览器窗口中嵌套子窗口，也就是整个页面并不是框架页面，但是却包含一个框架窗口在框架窗口内显示是整个页面并不是框架页面，但是却包含一个框架窗口在框架窗口内显示相应的页面内容相应的页面内容 与普通框架结构类似，浮动框架也可以设置很多参数与普通框架结构类似，浮动框架也可以设置很多参数任务任务2 2：窗口框架的使用：窗口框架的使用 一、浮动窗口标签一、浮动窗口标签的应用的应用基本语法：任务任务2 2：窗口框架的使用：窗口框架的使用 一、浮动窗口标签一、浮动窗口标签的应用的应用属性含义义src指示浮动动窗口中要加载载的url文件地址name指示框架名称，是链链接标记标记 的target所要的参数align可选值为选值为 left、right、top、middle、bottomwidth框窗的宽宽及高，默认为认为 width=”100” height=”100”marginwidth设设置内容与窗口左右边缘边缘 的距离，默认值为认值为 1marginheight设设置内容与窗口上下边缘边缘 的边边距，默认值为认值为 1framebord。