HTML(四).pptx

英特尔创新中心HTML（四）本章目标使用框架结构实现多窗口页面使用iframe /内嵌复用页面为什么使用框架2-1技术论坛产品宣传页面的一个固定部分显示LOGO或公司信息在另一个固定部分显示导航部分详细内容在此处显示详细内容，页面中此部分是变化的为什么使用框架2-2框架的两类用途：1、显示多窗口页面---使用frameset框架集2、页面复用—使用iframe/内嵌框架复用站外内容：引用Google搜索引擎、显示sohu新闻等复用站内页面：head和foot部分框架文件的特点多个页面文件组成文件1：top.html主文件：index.html文件3：right.html文件2：left.html框架的基本结构3-1创建框架网页的步骤：创建各子窗口对应的HTML文件创建整个框架页面文件，引用子窗口文件框架页面的基本语法边框尺寸大小将窗口分割成左中右3个部分,可选将窗口分割成上下2个部分,可选frameset cols=25%,50%,* rows =50%,* border=5 frame src=the_first.html ……/frameset引用各窗口要显示的网页文件框架的基本结构3-2纵向分割窗口将窗口分割成上中下3部分窗口边框的宽度……frameset bordercolor=red rows=25%,50%,* border=5 frame src=subframe/the_first.html name=top / frame src=subframe/the_second.html name=middle / frame src=subframe/the_third.html name=bottom //framesetnoframes body 如浏览器不支持框架，才显示body内的内容 /body/noframes……推荐：将窗口子文件放在单独的文件中用于区分注意：1、框架和body不能共存2、为了兼容性，可以使用noframes标签框架的基本结构3-3横向分割窗口横向分为3个窗口……frameset cols=200,*,200 border=5 bordercolor=#FF0000 frame name=leftFrame src=subframe/the_first.html / frame name=mainFrame src=subframe/the_second.html / frame name=rightFrame src=subframe/the_third.html //frameset……框架实现多窗口页面 典型的2行2列结构2行2列的窗口划分scrolling属性：是否显示滚动条frameset rows=20%,* frameborder=0 frame src=subframe/top.html name=topframe scrolling=no noresize=noresize / frameset cols=20%,* frame src=subframe/left.html name=leftframescrolling=no noresize=noresize / frame src=subframe/right.html name=rightframe / /frameset/frameset如何实现？如何实现窗口间的关联3-1如何实现左列导航，在右面显示相关页面？使用a标签的target目标窗口属性如何实现窗口间的关联3-2实现窗口间关联的步骤1、设置窗口名（框架主页）2、设置a的target属性（窗口子页面 ）设置右窗口名为：rightFrame……frameset rows=20%,* frameborder=0... ... frame src=subframe/right.html name=rightFrame... .../frameset……设置链接在右窗口中打开……a href=buy.html target=rightFrame……如何实现窗口间的关联3-3target的其他用法在新窗口中显示：_blank在自身窗口中显示：_self在上级窗口显示：_top在父窗口显示：_parent 练习——用框架分割多个窗口 完成时间：25分钟 为什么用iframe /frameset需要使用多个文件，目录结构复杂 内嵌较为灵活，可以在网页的任何位置使用可以作为模板，在本网站的多个页面复用整个页面只有局部窗口引用sohu的内容基本语法2-1 和frameset不同，放在body标签内……body iframe src=引用页面地址 name=框架标识名 frameborder=边框 scrolling=no /body……指明引用