项目7制作框架网页.ppt

项目7 制作框架网页 理解框架网页的概念 掌握框架网页的制作方法和熟知框架页面结构 掌握框架网页中的超链接方法 知识目标： 技能目标： 熟练创建框架页面 能够正确设置框架中的超链接属性 项目描述 框架是网页中经常使用的页面设计方式，框架的作用就是把网页在一个浏览器窗口下分割成几个不同的区域，实现在一个浏览器窗口中显示多个HTML页面。珠海航展最新资讯主页包括三部分，顶部、主体部和底部本项目利用框架制作最新资讯主页，如图7-1所示。 任务1 使用框架制作网页 　　使用框架实现网页布局，制作“最新资讯”新闻主页，如图7-1所示，该主页包括三部分，顶部、主体部和底部，顶部为logo部分，主体部为新闻列表部分，底部为备注部分。 任务描述 图7-1 关于航展主页 任务 任务1 使用框架制作网页 相关知识与技能 1、认识框架 （1）框架的作用 框架是一个比较早出现的HTML对象，框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。使用框架可以非常方便的完成导航工作，而且各个框架之间决不存在干扰问题，所以在模板出现以前框架技术一直普遍应用于页面的导航，它可以使网站导航比较清晰。 （2）框架的特点 使用框架建设网站的最大的特点是使网站风格能够保持统一。一个网站的众多网页最好都有相同的地方，来做到风格统一。可以把这个相同的部分单独的制作一个页面，作为框架结构的各个子框架的内容给整个站点公用。通过这个方法达到了网站的风格的统一。 （3）框架的组成 框架实际上有两部分组成，即框架集与框架。由于框架集在文档中仅定义了框架的结构、数量、尺寸及装入框架的页面文件，因此，框架集并不显示在浏览器中，它只是存储了一些框架如何显示的信息。 2.创建框架 在创建框架集或使用框架前，通过选择【查看】|【可视化助理】|【框架边框】命令，使框架边框在文档窗口的设计视图中可见。 （1）使用预制框架集 ①新建一个HTML文件，在快捷工具栏选择“布局”，单击 “框架”按钮，如图7-2所示，在弹出的下拉菜单中选择“上方和下方框架”，如图7-3所示。 图7-2 工具栏 图7-3 框架下拉选择框 　　②也可以执行【插入】|【HTML】|【框架】菜单命令插入框架，在级联菜单中单击相应的框架样式。 　　③通过框架集属性面板设置各属性，如图7-4所示，也可以使用鼠标直接拖动框架的两条线调整各部分宽度，如图调整后框架结构如图7-5所示。 图7-4 框架集“属性”面板 图7-5 框架结构 （2）鼠标拖动创建框架 ①新建普通网页，命名后将其打开。 ②把鼠标放到框架边框上，出现双箭头光标时拖拽框架边框，可以垂直或水平分割网页，如图7-6所示。 图7-6 鼠标拉动边框制作框架 3.保存编辑框架 （1）保存框架 每一个框架都有一个框架名称，可以用默认的框架名称，也可以在属性面板修改名称，我们采用系统默认的框架名称topFrame（上方）、mainFrame（中部）、bottomFrame（底部）。 选择菜单栏【文件】|【保存全部】，将框架集保存为index.html，上方框架保存为top.html，中部框架保存为main.html，下方框架保存为bottom.html。 （2）编辑框架式网页 虽然框架式网页把屏幕分割成几个窗口，每个框架（窗口）中放置一个普通的网页，但是编辑框架式网页时，要把整个编辑窗口当作一个网页来编辑，插入的网页元素位于哪个框架，就保存在哪个框架的网页中。框架的大小可以随意修改。 ①改变框架大小 用鼠标拖拽框架边框可随意改变框架大小。 ②删除框架 用鼠标把框架边框拖拽到父框架的边框上，可删除框架。 ③设置框架属性 设置框架属性时，必须先选中框架。选择框架方法如下： 选择菜单栏【窗口】|【框架】，打开框架面板，单击某个框架，即可选中该框架，如图7-7所示。 　　在编辑窗口某个框架内按住Alt键并单击鼠标，即可选择该框架。当一个框架被选择时，它的边框带有点线轮廓。 图7-7 框架面板 ④设置框架属性 选中框架，在属性面板上可以设置框架属性：框架名称、源文件、空白边距、滚动条、重置大小和边框属性等，如图7-8所示。 　　需要注意的是：1、框架是不可以合并的。2、在创建链接时要用到框架名称，所以我们要很清楚的知道每个框架对应的框架名。 图7-8 框架“属性”面板 4. 在框架总使用超级链接 在框架式网页中制作超级链接时，一定要设置链接的目标属性，为链接的目标文档指定显示窗口。链接目标较远（其他网站）时，一般放在