Web前端开发案例教程——HTML+CSS+JavaScript (3).pptVIP

设置浮动框架显示 常用属性 …… pa href=subframe/first.html target=mainFrame下边显示第一页/abr /br / a href=subframe/second.html target=mainFrame下边显示第二页/abr /br / a href=subframe/third.html target=mainFrame下边显示第三页/abr / /p iframe name=mainFrame width=800px height=150px scrolling=yes noresize=noresize src=subframe/second.html /… … 在内嵌窗口mainFrame显示链接内容 设置窗口名 实例3-6：iframe常用属性 练习——引用google主页 需求说明： 根据提供的素材实现 引用Google主页 * * * * 框架 第三章 学习目标 ?使用框架结构实现多窗口页面 ?使用iframe /内嵌复用页面 框架简介 框架用于导航 框架用于产品宣传 为什么使用框架2-2 框架的两类用途： 1、显示多窗口页面---使用frameset框架集 2、页面复用—使用iframe/内嵌框架 文件1： top.html 文件2：left.html 文件3： right.html 框架文件的特点 多个页面文件组成 主文件： index.html 创建框架网页的步骤： 创建各子窗口对应的HTML文件 创建整个框架页面文件，引用子窗口文件 frameset cols=25%,50%,* rows =50%,* border=5 frame src=the_first.html …… /frameset 框架页面的基本语法 边框尺寸大小 将窗口分割成左中右3个部分,可选 将窗口分割成上下2个部分,可选 引用各窗口要显示的网页文件 框架的基本结构3-1 frameset框架集 水平框架 …… frameset rows=20%,*,30% border=5 bordercolor=#FF0000 frame name=topFrame src=subframe/first.html / frame name=mainFrame src=subframe/second.html / frame name=bottoFrame src=subframe/third.html / /frameset noframes body 如浏览器不支持框架，才显示body内的内容 /body /noframes …… 注意： 1、框架和body不能共存 2、为了兼容性，可以使用noframes标签 窗口边框的宽度 框架的基本结构3-2 将窗口分割成上中下3部分 推荐：将窗口子文件放在单独的文件中用于区分 实例3-1：水平框架 垂直框架 …… frameset cols=200,*,200 border=5 bordercolor=#FF0000 frame name=leftFrame src=subframe/first.html / frame name=mainFrame src=subframe/second.html / frame name=rightFrame src=subframe/third.html / /frameset …… 框架的基本结构3-3 横向分为3个窗口 实例3-2：垂直框架 框架实现多窗口页面 混合框架 （1）页面结构分析 （2）框架修饰分析 frameset cols =20%,80% frame src=left窗口对应文件/ frameset rows=75%,25% frame src=main窗口对应文件/ frame src=bottom窗口对应文件/ /frameset /frameset frameset cols =20%,80% frame src=subframe/left.html frameset rows=75%,25% frame src=subframe/main.html / frame src=subframe/bottom.html / /frameset /frameset 实例3-3：混合框架 实现窗口间的关联 1、设置窗口名（框架主页） 2、设置a的target属性（窗口子页面 ） 如何实现窗口间的关联3-2 …… frameset cols =20%,80% frame src=subframe/left.html name=leftFrame frameset