《dw教学课件》第l六讲----框架布局.ppt

网页三剑客,主讲:刘苗,第六讲 框架,3,通过本章学习，掌握使用框架与超连接。,教学目标,4,各种框架的创建（重点） iframe内联框架（重点、难点）,本讲主要内容,5,任务一、框架概述,1、框架作用 将浏览器窗口划分成几个部分，每个部分可以各自独立地显示在窗口中，每个部分的页面也可以相互控制。使用框架可以使页面的结构更加合理。,6,2、框架的优缺点： 框架的缺点： 使页面打开的速度比较慢（输入网址开始时）因为此时需要打开两个以上的网页. 存在跨浏览器的状况 框架的优点： 结构更加合理 在一个窗口中多个显示网页 链接后刷新速度快,7,3、几个概念 框架文件：各框架内的文件。 框架集：是一组框架的集合，利用它可将不同类别的 内容放到同一页面中。 框架集文件：所要打开的文件为框架集文件。,8,任务二、创建框架,查看可视化助理框架边框 向下，向右拖拽框架上边框/左边框至目标位置，创建一个两栏框架。用鼠标直接拖动编辑窗口边框的左上角可以拖拽出栏式框架。 “窗口” “框架”，打开框架面板(编辑界面中框架的缩略图) 采用预设框架来建立框架结构 插入面板布局下框架命令建立框架 文件新建,9,任务三、编辑框架,1、框架面板:shift+F2,10,2、设置框架和框架集属性 选定框架集 单击文档窗口中两个框架的共用边界 单击框架集面板最外围的边界,11,框架集属性： Borders:设置框架的边框（yes或者1表示要边框、no或者0表示不要边框、default默认值） Border width:设置框架的边框厚度 Border color:设置框架的边框颜色 Row/col:设置行、列的值，units单位 Rowcol selection:行列选择，鼠标点击一下选择行点击两下选择列,12,框架属性 Frame name:框架的名称 Src:设定此框架要显示的网页文档的url地址，每个框架一定要对应一个html文档 Borders:设置框架的边框 Border color:边框颜色,13,Scroll:设置是否需要滚动条 auto随内容而增加滚动条， yes无论内容是否超出都显示滚动条 no与yes相反 Margin width：边界宽度 Margin height：边界高度 no resize:设定不让使用者在浏览器中改变框架的大小,14,3、保存框架和框架集文件 保存框架文件:文件保存全部 生成文件的个数：框架个数 保存框架集文件,15,任务四、 框架网页(设置框架的链接),使用链接控制框架内容 在框架属性中，为各框架命名 选择要作为链接的文本或其他对象,在Link文本框中输入超链接地址 在Target下拉列表框中选择打开链接内容目标框架的名称,16,本讲主要学习了框架的创建，可以利用框架结构有效管理网站框架的特征是在同一画面中同时显示多个网页文档，而且能够轻松，有效地管理网站.,本讲小结,17,上机作业,1、现有一分为7个框架的网页，则该窗口中含了几个文件？当保存时，需要保存几个文件？ 2、下图的框架中显示了各框架的名字，frame4frame5是被嵌入的框架。如何选中这七个框架中的任意一个？现选择frame4frame5组成的嵌入式框架，又如何操作？ 3、现右图的