第8章 网页设计制作 框架

创建框架页二 框架页面链接实训,第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所示的系列