《网页前端技术》HTML任务七.ppt

HTML 任务七 使用框架对页面进行分割 案例分解 案例资讯 使用普通框架进行页面分割 使用内部框架进行页面分割 框架概述 框架的设置 内部框架 教学目的： 了解框架的概念 掌握使用普通框架进行页面分割 掌握使用内部框架进行页面分割 教学重点： 掌握使用普通框架进行页面分割 掌握使用内部框架进行页面分割 教学难点： 掌握使用普通框架进行页面分割 掌握使用内部框架进行页面分割 案例一 使用普通框架进行页面分割 利用普通的框架进行页面分割。 案例资讯 重复添加页眉页脚等元素，浪费时间，浏览时也会带来不便、消耗更多的时间，为了解决这种问题，我们可以使用框架来对网页进行布局，即网页分割。 一、框架概述 使用框架可以把浏览器窗口分为多个区域，每个区域可以显示不同的网页，每次浏览者在访问框架页面时，只下载框架页面中变化的区域，对于不变的区域，不用重新下载，节省时间。 一个框架结构是由两部分组成的：框架集和框架。它主要是利用frameset标签和frame标签来定义的。 1、框架集 框架集是在一个文档内定义一组框架结构的HTML网页，它定义了网页显示的框架数、框架的大小、载入框架的网页源和其他可以定义的属性，用frameset标签来定义一个窗口框架。 框架集页面的结构是通过属性rows和cols来设置的，根据框架的分割方式可分为：上下分割窗口，左右分割窗口，嵌套分割窗口。 2、框架集属性 frameborder：设置边框宽度像素，0无框 border：设置边框宽度像素数（netscape），0无框 noresize：禁止访问者调整框架的大小 framespacing：控制框架间的总间距（ie） scrlooing：滚动条设置，yes 、no、 auto marginheight：框架的上下边界像素数 marginwidth：框架的左右边界像素数 bordercolor：设置边框的颜色 3、框架的作用 在页面的一个固定部分显示logo或静态信息。 左侧框架显示目录，右侧框架显示内容，用户只需要单击左侧窗口的目录，在右侧窗口中就会显示相应内容，如网上在线学习教程、论坛、后台管理、产品介绍等。 框架能有机第把多个页面组合在一起，这多个页面之间可互相独立，却又可相互联系。 二、框架的设置 框架的基本结构html head title /title /head frameset cols=”25%,50%,*” rows=”50%,*” border=”5” frame src=“url地址”frame src=“url地址” /… /frameset /html 说明：frameset仅是一个框架的集合。frame标签可以提供对单独html文档url引用，其中每个html文档占据一个框架。cols将页面沿垂直方向分割为几个窗口，cols可以取多个值，不同的值用逗号隔开，单位可以是像素，也可以是占浏览器的百分比。rows将页面沿水平方向分割为几个窗口，也可以取多个值，是由逗号分割的像素值或百分比。src指定框架窗口的源文件。 案例步骤 一、之前的准备 做三个简单的网页 第一个： html head title 我的第一个网页 /title /head body Hello World! /body /html 第二个：在上面的稍微改一下，“我的第一个网页”改成“我的第二个网页”；“Hello World!”改成“How Are You!”。 第三个：“我的第一个网页”改成“我的第三个网页”；“Hello World!”改成“How Are You!”。“How Do You Do!”。 二、普通框架分割页面 记事本中代码如下： html head title普通框架页面分割/title /head frameset border=5 rows=20%,* frame src=the_first.html name=topframe scrolling=no frameset cols=20%,* frame src=the_second.html name=leftframe scrolling=no noresize frame src=the_third.html name=rightframe /frameset /frameset /html 案例二 使用内部框架进行页面分割 在这个案例中我们将使用内部的框架进行页面分割。 案例