(教学课件)chapter9利用框架设计与制作网页

1、第9章利用框架设计与制作网页制作“技术”页面深圳职业技术学院 计算机基础教学部学习目标了解框架的基本概念；掌握创建框架结构的方法；掌握编辑框架页面的方法；掌握框架页面导航的链接方法；掌握设置框架和框架集属性的方法；了解iframe框架的使用方法。网页设计与制作实用教程（第3版）2深圳职业技术学院计算机基础教研室实训项目深圳慧衡科技有限公司需要设计一个二级页面“网站设计与开发技术”（简称“技术”），详细介绍“Drupal网站管理系统”、“Magento电子商务平台”、“Open Atrium社交网络平台”和“ShopEx网上商店系统”等相关内容。要求页面具有明显的分区结构和灵活的导航作用。网页设

2、计与制作实用教程（第3版）3深圳职业技术学院计算机基础教研室设计思路：（1）页面元素：网站banner、网站导航条、技术栏目分类、对技术介绍的一些文字元素、宣传图像等。（2）版面布局：采取常用的“厂”字形结构，顶部区域用于装载网站的banner和导航条；左侧区域用于装载技术分类栏目列表；占据页面最大空间的右侧区域，用于装载主体内容。（3）配色方案：由于本页面为二级页面，从设计角度上来说，最好和整体网站风格保持一致，因此色彩搭配仍然以蓝白色为基调。项目分析深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）4设计目标网页设计与制作实用教程（第3版）5深圳职业技术学院计算机基础教研室预

3、备知识1网页中框架的概念框架实际上是由框架（frame）和框架集（frameset）两部分组成。一个框架（frame）就是一个区域，可以显示与其他区域内容无关的网页文件。框架集是多个框架的集合，是一个特殊的HTML文件，用于存储框架的容器；它定义几个框架的布局和属性，包括框架的数目、大小和位置等信息。2框架的优缺点网页设计与制作实用教程（第3版）6深圳职业技术学院计算机基础教研室制作流程任务1：利用框架布局页面任务4：设置框架中的链接目标任务5：修饰框架集网页外观任务2：保存框架网页任务3：编辑框架页面元素网页设计与制作实用教程（第3版）7深圳职业技术学院计算机基础教研室任务1 利用框架布局页

4、面网页设计与制作实用教程（第3版）8深圳职业技术学院计算机基础教研室插入预定义的“上方及左侧嵌套”类型的框架集。任务2 保存框架网页网页设计与制作实用教程（第3版）9深圳职业技术学院计算机基础教研室分别保存框架集网页和各个框架中的网页文件任务3 编辑框架页面元素网页设计与制作实用教程（第3版）10深圳职业技术学院计算机基础教研室直接在顶端和左侧区域（框架）中分别插入相应的页面内容。在右侧区域（框架）中插入页面内容。任务4 设置框架中的链接目标网页设计与制作实用教程（第3版）11深圳职业技术学院计算机基础教研室为左侧各导航标题创建超级链接，要求当单击某个标题时，在右侧主体框架中显示对应标题的网页

5、内容。为左侧栏目标题“慧衡首页”创建超级链接，要求当单击标题“慧衡首页”时，关闭所有框架网页，打开“index.html”慧衡首页。任务5 修饰框架集网页外观网页设计与制作实用教程（第3版）12深圳职业技术学院计算机基础教研室1设置框架属性根据需要对各框架属性进行设置。2设置框架集属性精确调整框架大小，使顶端框架的行高为99像素、左侧框架的列宽为212像素。为“technology.html”框架集网页设置文档标题“网站设计和开发技术”。项目总结利用框架设计与制作网页利用框架布局页面保存框架网页保存框架集网页保存框架网页编辑框架页面元素设置框架中的链接目标修饰框架集网页外观设置框架集属性设置框

6、架属性深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）13课后练习配套实训利用配套实训文件夹下提供的素材文件，根据所学的框架及前面的知识，自主设计与制作一个关于杭州西湖的网页，要求如下：选择一种合适框架集，将页面top.html、left.html、main.html分别装载在相应的框架中。其中至少有一个框架用于定义页面的导航区域，有一个框架用于定义页面的内容区域。利用导航区域灵活选择兴趣栏目，利用内容区域同步显示所选栏目的内容（网页文件main.html、sudi.html、quyuan.html）。为框架集网页设置网页标题。使用CSS样式适当美化页面。网页设计与制作实用教程