网页设计与制作项目实训教程 严加琼 曾金发 项目9新.pptVIP

项目9 框架网页制作 项目描述 　　　框架是网页设计中常用的页面设计方式，框架的出现大大地丰富了网页的布局手段以及页面之间的组织形式。浏览者通过框架可以很方便地在不同的页面之间跳转及操作。本项目运用框架技术制作“网文欣赏”框架网页，效果如图9-1所示。　　　 项目描述 9.2 知识储备 9.2.1 框架概述 9.2.2 框架的创建 9.2.3 框架链接 9.2 知识储备 9.2.1 框架概述 　1.框架概念 　　框架是浏览器窗口的一个区域，它可以显示与浏览器窗口其余部分中所显示内容无关的HTML文档。作用是把浏览器窗口划分为若干区域，每个区域可以分别显示不同的网页。使用框架布局网页，可以使不同页面在统一的浏览器窗口中显示，并可以使不同页面在统一的浏览器窗口中相互切换。 9.2 知识储备 　框架（Frame）：是指组成框架结构的每一个区域，每个框架实质上都是一个独立存在的HTML文档。 　框架集（Frameset）：框架集就是框架的集合，它是在一个文档内一组框架结构的HTML网页，定义了网页显示的框架数，框架大小、载入框架网页源和其他可定义的属性等。 9.2 知识储备 9.2.2 框架的创建 　1.框架的基本操作 　　(1)创建框架集 　　为了方便操作和观察，在开始插入框架之前，建议用户先设置显示框架边框，单击菜单“查看” →“可视化助理”选项→“框架边框”选项，确保该项勾选。 　　Dreamweaver CS5提供了两种创建框架集的方法：一是从预定义的框架集中选择；二是自己设计框架集。选择预定义的框架集将自动设置创建布局所需的所有框架集和框架，它是迅速创建基于框架的网页布局最简单的方法。创建预定义的框架集有两种方法。 9.2 知识储备 　　方法一：在“新建文档”对话框创建新的空框架集 ① 单击菜单“文件” → “新建”命令，弹出“新建文档”对话框，在对话框中选择“示例中的页”选项卡中的“框架页”类别，从“示例页”列表框中选择“下方固定，左侧嵌套”的框架集如图9-2所示。 9.2 知识储备 ② 单击“创建”按钮，弹出的“框架标签辅助功能属性”对话框，如图9-3所示，对话框中设置每个框架的标题，一般采用默认标题。 9.2 知识储备 ③ 单击“确定”按钮，在文档中创建了下方固定，左侧嵌套形式的框架，如图9-4所示 9.2 知识储备 　　方法二：通过菜单“插入”栏创建框架集 单击菜单“插入” →“HTML”选项 →“框架”命令，在“框架”子菜单中选择预定义的框架集。 9.2 知识储备 (2) 删除框架 　　如果某些框架多余，可以将其删除，方法是将指针指向此框架的边框，当指针形状变为双向箭头时，拖动该边框至文档窗口边框或其父框架的边框上，在删除框架时，如果该框架中包含尚未保存的文档，Dreamweaver CS5会提示用户保存该文档。 9.2 知识储备 (3) 保存框架 　　保存框架和框架集的操作比较特殊，因为每一个框架中的内容都是一个单独的文件，因此，要保存一个完整的框架页面，用户还必须保存每一个框架文件和框架集文件。 ① 保存框架文件 ② 保存框架集文件 ③ 保存全部 9.2 知识储备 (4) 选择框架 　　在设置框架属性时必须选择相应框架，选择框架与框架集的方法有两种：一是从文档窗口中选择框架或框架集；二是通过“框架”面板选择框架或框架集。 ① 在“文档”窗口中选择框架或框架集 　　在文档窗口选择一个框架后，它的边界会出现虚线。同样，选中框架集后，它的所有边界都会出现虚线。 9.2 知识储备 ② 在框架面板中选择框架或框架集 　　在“框架”面板中选择框架或框架集的具体方法如下： 　　　单击菜单“窗口” →“框架”命令或Shift+F2组合键，打开“框架”面板，在“框架”面板中单击需要选择的框架，框架的边界就会被虚线包围，如图9-5所示。 9.2 知识储备 9.2 知识储备 (5) 拆分框架集 　　创建了框架集后，用户还可以根据需要将其中某个框架拆分为几个更小的框架。将鼠标指针移至框架四周边框上，鼠标指针会变为双向箭头形状，此时按下鼠标左键向文档窗口内拖动，即可创建任意框架集。 9.2 知识储备 2. 框架和框架集属性设置 　　选择了框架或框架集后，属性面板中会显示当前框架或框架集的相关属性，用户可根据需要在其中更改所选框架或框架集的属性。 (1)设置框架属性 　　设置框架属性具体操作步骤如下： 在“框架”面板中单击框架的名称，可以在相应的“属性”面板中设置框架的相关属性，如下图9-6所示。 9.2 知识储备 (2) 设置框架集属性 　　设置框架集属性具体操作步骤如下： ① 使用快捷键Shift+F2或在菜单栏中单击菜单“窗口”→“框架”命令，调出“框架”面板。 ② 在“框架”面板