网页设计与制作教程 第4版 教学课件 ppt 作者 刘瑞新第8章 框架.pptVIP

机械工业出版社同名教材 配套电子教案 创建框架页 二 框架页面链接 实训 第8章 框架 8.1.1 框架类型和框架面板 1．框架类型 Dreamweaver预定义了多种类型的框架结构。在插入面板的“布局”分类中单击“框架”按钮 ，在弹出的菜单中，用户可以选择系统预定义的框架结构，如图8-1所示。 2．框架面板 在操作框架的过程中，框架面板是非常有用的。使用框架面板可以进行选取、观察、修改框架等基本操作。因此在对框架操作时，框架面板最好一直打开。 若要打开框架面板，可以执行“窗口”→“框架”命令或按〈Shift〉+〈F2〉快捷键。 8.1 创建框架页 8.1.2 新建框架页 框架又可以叫做帧，是一种可以独立变化的、在一定情况下可以用鼠标滚动的窗口。这些窗口被组合在一起，从而使得网页不仅仅在视觉上更有吸引力，而且更加容易使用。使用框架排版的最常见的情况就是，一个框架显示包含导航控件的文档，而另一个框架显示含有内容的文档。 在Dreamweaver中有多种创建框架集的方法：用户既可以从预定义的框架集中选择并创建框架集，也可以自己设计框架集，还可以使用编写代码的方法建立框架集。 8.1 创建框架页 8.1.3 保存框架页 用户在浏览器中预览框架集前，必须保存框架集文件以及要在框架中显示的所有文档。用户既可以单独保存框架集文件和每个框架中的文档，也可以同时保存框架集文件和框架中出现的所有文档。 执行“文件”→“保存全部”命令，保存在框架集中打开的所有文档，包括框架集文件和所有带框架的文档。 8.1 创建框架页 8.2.1 设置框架属性 设置框架属性包括两部分的设置：框架集属性和框架属性。 1．设置框架集属性 使用属性面板可以查看和设置大多数框架集属性，包括框架集标题、边框以及框架大小等。 2．设置框架属性 使用属性面板可以查看和设置大多数框架属性，包括边框、边距以及是否在框架中显示滚动条等。 8.2 框架页面链接 8.2.2 设置框架页面之间的链接 在很多网页中，常在一个框架中显示一个所有网页内容的目录，而通过单击其中的某项，在另一个框架中显示相应内容。这些目录是热点文本，需要在框架之间建立超链接，并指明显示的目标文件的框架。 用户既可以使用属性面板的设置创建框架页面链接，也可以使用编写代码的方式创建框架页面链接。 1．使用属性面板的设置创建框架页面链接 2．编写代码创建框架页面链接 8.2 框架页面链接 8.2.3 案例一：制作曙光大学网站教学资源页面 【案例综述】使用框架技术制作曙光大学网站对外合作栏目的系列页面。 【案例展示】页面分为3个区域：上边是网站主题区，左边是导航区，右边是内容区。在浏览网页时，单击左边的某个文本链接，则对应的链接内容显示在右边，而上边的网站主题和左边的导航栏目仍然留在屏幕上，效果如图8-11所示。 8.2 框架页面链接 【实训综述】使用框架技术制作“爱家美食”网站菜谱大全页面。 【实训展示】页面分为3个区域：上边是网站主题区，右边是导航区，左边是内容区。在浏览网页时，单击右边的某个文本链接，则对应的链接内容显示在左边，而上边的网站主题和右边的导航栏目仍然留在屏幕上，效果如图8-25所示。 8.3 实训 1．使用框架技术制作如图8-26所示的系列页面，页面分为3个区域：上边是网站主题区，左边是导航区，右边是内容区。 2．使用框架技术制作如图8-27所示的系列页面，页面分为3个区域：上边是网站主题区，左边是导航区，右边是内容区。 3．使用框架技术制作如图8-28所示的左右结构的框架页面。 8.4 习题