《网页设计与制作》第4章讲述.ppt

* * * * * * * * 第四章 框架 制作“帮助中心”页面 本章任务 使用框架结构实现多窗口页面 使用iframe /内嵌复用页面 本章目标 为什么使用框架2-1 页面的一个固定部分显示LOGO或公司信息 在另一个固定部分显示导航部分详细内容 在此处显示详细内容， 页面中此部分是变化的 产品 宣传 技术 论坛 客户 服务 为什么使用框架2-2 框架的两类用途： 1、显示多窗口页面---使用frameset框架集 2、页面复用—使用iframe/内嵌框架 复用站内页面： head和foot部分 复用站外内容： 引用Google搜索引擎、显示sohu新闻等 文件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 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 / /frameset noframes body 如浏览器不支持框架，才显示body内的内容 /body /noframes …… 注意： 1、框架和body不能共存 2、为了兼容性，可以使用noframes标签 窗口边框的宽度 框架的基本结构3-2 将窗口分割成上中下3部分 推荐：将窗口子文件放在单独的文件中用于区分 操作演示1：纵向分割窗口 横向分割窗口 …… 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 …… 框架的基本结构3-3 横向分为3个窗口 操作演示2：横向分割窗口 框架实现多窗口页面 典型的2行2列结构 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 scrolling属性：是否显示滚动条 如何实现？ 2行2列的 窗口划分 操作演示3：创建多个复杂的窗口 如何实现窗口间的关联3-1 如何实现左列导航，在右面显示相关页面？ 使用a标签的target目标窗口属性 实现窗口间关联的步骤 1、设置窗口名（框架主页） 2、设置a的target属性（窗口子页面 ） 如何实现窗口间的关联3-2 …… frameset rows=20%,* frameborder=0 ... ... frame src=subframe/right.html name=rightFrame ... ... /frameset …… 设置右窗口名为：rightFrame …… a href=buy.html target=rightFrame …… 设置链接在右窗口中打开 操作演示4：窗口链接的显示位置 target的其他用