网页设计与制作-7.ppt

网页设计与制作 网页设计与制作 第七章　框架 第七章　框架 本章学习要点： 框架和框架集 框架与框架集的属性设置 用框架布局网页的方法 框架标签 框架的嵌套使用 浮动框架的使用 7.1案例1 利用框架布局网页 〖学习目标〗认识框架和框架集，掌握创建、保存框架和框架集，用框架布局页面。 〖知识要点〗创建框架和框架集；保存框架和框架集；用框架布局网页；向框架中插入网页内容等。案例效果如图所示。 7.1.1 认识框架与框架集 框架是进行网页布局的工具之一。 如果网站中的所有网页是同一个布局，并且在相同的位置有相同的网页元素，通过导航条的链接只更改网页中主要区域中的内容，这时就要使用框架来布局网页了。 操作步骤： 1.新建-示例中的页-框架集-”上方固定，下方固定” 或新建页面后点“工具栏”上的框架按钮。 2.保存 文件-保存全部 Index.html, bottom.html, main.html, top.html （注意保存在案例一文件夹中） （可以打开框架窗口来浏览框架页） 也可以保存单个框架页面或框架集页面 3.在top.html中插入图片 4.更改主框架中的显示页面 5.在下边输入文字 7.2 案例2 制作复杂的框架网页 〖学习目标〗通过学习利用框架来布局较复杂的网页，掌握框架和框架集的编辑、设置框架和框架集的属性、在框架中插入表格、链接框架等操作。 〖知识要点〗编辑框架和框架集；设置框架和框架集属性；链接框架；在框架中插入表格等。案例效果如图所示。 操作步骤： 创建“上主固定，左侧嵌套”框架集，保存框架集与框架页面文件。Index.html, top.html,left.html,main.html 框架的选择 窗口-框架 打开框架面板 在主框架中插入底部框架（利用工具栏框架按钮）保存，将新增的框架页存为bottom.html 在左边框架中插入“底部框架”保存，将新增的框架页存为left2.html 改变topFrame框架中显示的网页为”top素材网.html”,调整框架高度为162px 左边框架网页边距设为：3,0,0,0,并插入５行一列表格，输入文本，设置文本格式 左下解框架内页面边距设为０；插入准备好的图片。 准备一个关于数码相机的页面。改一下：图片ＵＲＬ 在主框架页边距设为０.（没用） 制作数据相机超链接，在主框架打开数码相机页面。 7.3 学习任务：框架标签 进一步理解和掌握框架标签的功能和属性设置，通过框架页面的“代码”窗口，进一步掌握框架标签的使用。 制作的框架页面 拆分窗口 “拆分”视图中，被选中的HTML代码即为frameset框架集标签。可见，frameset标签是成对出现的，以frameset开始，以/frameset结束。frameset标签代替了body标签，因此，框架标签不能包含在body标签中。 7.4 案例3 创建浮动框架网页 〖学习目标〗通过本案例的学习，掌握浮动框架的插入，掌握通过浮动框架显示其他网页内容的操作方法。 〖知识要点〗浮动框架；通过浮动框架显示其他网页内容等。案例效果如图所示。 浮动框架（iframe）是指在网页文档中，以框架形式显示其他网页文档、主页、公告板或记事本的功能，利用这一功能，可以在指定的位置以指定的大小显示其他网页文档或站点，例如滚动新闻等。 使用“标签选择器”可以将Dreamweaver CS3标签库中的标签插入到页面中。 谢 谢！ 网页设计与制作 网页设计与制作