《网页设计与制作项目实训教程 教学课件 ppt 作者 严加琼 曾金发 项目9》由会员分享，可在线阅读，更多相关《网页设计与制作项目实训教程 教学课件 ppt 作者 严加琼 曾金发 项目9（30页珍藏版）》请在金锄头文库上搜索。
1、项目9 框架网页制作,项目描述,知识储备,实践向导,能力拓展,退 出,项目小结,项目描述,框架是网页设计中常用的页面设计方式，框架的出现大大地丰富了网页的布局手段以及页面之间的组织形式。浏览者通过框架可以很方便地在不同的页面之间跳转及操作。本项目运用框架技术制作“网文欣赏”框架网页，效果如图9-1所示。,项目描述,图9-1 “网文欣赏” 页面效果图,9.2 知识储备,9.2.1 框架概述 9.2.2 框架的创建 9.2.3 框架链接,9.2 知识储备,9.2.1 框架概述 1.框架概念 框架是浏览器窗口的一个区域，它可以显示与浏览器窗口其余部分中所显示内容无关的HTML文档。作用
2、是把浏览器窗口划分为若干区域，每个区域可以分别显示不同的网页。使用框架布局网页，可以使不同页面在统一的浏览器窗口中显示，并可以使不同页面在统一的浏览器窗口中相互切换。,9.2 知识储备,框架（Frame）：是指组成框架结构的每一个区域，每个框架实质上都是一个独立存在的HTML文档。 框架集（Frameset）：框架集就是框架的集合，它是在一个文档内一组框架结构的HTML网页，定义了网页显示的框架数，框架大小、载入框架网页源和其他可定义的属性等。,9.2 知识储备,9.2.2 框架的创建 1.框架的基本操作 (1)创建框架集 为了方便操作和观察，在开始插入框架之前，建议用户先设置显示框架边框，单
3、击菜单“查看” “可视化助理”选项“框架边框”选项，确保该项勾选。 Dreamweaver CS5提供了两种创建框架集的方法：一是从预定义的框架集中选择；二是自己设计框架集。选择预定义的框架集将自动设置创建布局所需的所有框架集和框架，它是迅速创建基于框架的网页布局最简单的方法。创建预定义的框架集有两种方法。,9.2 知识储备,方法一：在“新建文档”对话框创建新的空框架集 单击菜单“文件” “新建”命令，弹出“新建文档”对话框，在对话框中选择“示例中的页”选项卡中的“框架页”类别，从“示例页”列表框中选择“下方固定，左侧嵌套”的框架集如图9-2所示。,图9-2 “新建文档”对话框,9.2 知识储
4、备, 单击“创建”按钮，弹出的“框架标签辅助功能属性”对话框，如图9-3所示，对话框中设置每个框架的标题，一般采用默认标题。,图9-3 框架标签辅助功能属性对话框,9.2 知识储备, 单击“确定”按钮，在文档中创建了下方固定，左侧嵌套形式的框架，如图9-4所示,图9-4 创建空预定义框架集,9.2 知识储备,方法二：通过菜单“插入”栏创建框架集 单击菜单“插入” “HTML”选项 “框架”命令，在“框架”子菜单中选择预定义的框架集。,9.2 知识储备,(2) 删除框架 如果某些框架多余，可以将其删除，方法是将指针指向此框架的边框，当指针形状变为双向箭头时，拖动该边框至文档窗口边框或其父框架的边
5、框上，在删除框架时，如果该框架中包含尚未保存的文档，Dreamweaver CS5会提示用户保存该文档。,9.2 知识储备,(3) 保存框架 保存框架和框架集的操作比较特殊，因为每一个框架中的内容都是一个单独的文件，因此，要保存一个完整的框架页面，用户还必须保存每一个框架文件和框架集文件。 保存框架文件 保存框架集文件 保存全部,9.2 知识储备,(4) 选择框架 在设置框架属性时必须选择相应框架，选择框架与框架集的方法有两种：一是从文档窗口中选择框架或框架集；二是通过“框架”面板选择框架或框架集。 在“文档”窗口中选择框架或框架集 在文档窗口选择一个框架后，它的边界会出现虚线。同样，选中框架
6、集后，它的所有边界都会出现虚线。,9.2 知识储备, 在框架面板中选择框架或框架集 在“框架”面板中选择框架或框架集的具体方法如下： 单击菜单“窗口” “框架”命令或Shift+F2组合键，打开“框架”面板，在“框架”面板中单击需要选择的框架，框架的边界就会被虚线包围，如图9-5所示。,9.2 知识储备,图9-5 选择框架,9.2 知识储备,(5) 拆分框架集 创建了框架集后，用户还可以根据需要将其中某个框架拆分为几个更小的框架。将鼠标指针移至框架四周边框上，鼠标指针会变为双向箭头形状，此时按下鼠标左键向文档窗口内拖动，即可创建任意框架集。,9.2 知识储备,2. 框架和框架集属性设置 选择了
7、框架或框架集后，属性面板中会显示当前框架或框架集的相关属性，用户可根据需要在其中更改所选框架或框架集的属性。 (1)设置框架属性 设置框架属性具体操作步骤如下： 在“框架”面板中单击框架的名称，可以在相应的“属性”面板中设置框架的相关属性，如下图9-6所示。,图9-6 框架属性面板,9.2 知识储备,(2) 设置框架集属性 设置框架集属性具体操作步骤如下： 使用快捷键Shift+F2或在菜单栏中单击菜单“窗口”“框架”命令，调出“框架”面板。 在“框架”面板中单击最外一层边框，在“属性”面板中设置框架集的属性，如图9-7所示。,图9-7 框架集属性面板,9.2 知识储备,9.2.3 框架链接
8、要在一个框架中通过超级链接在另一个框架中打开文档，必须设置链接目标。要设置目标框架，首先在设计视图中选择要作为超链接的文本或对象，然后在属性面板中的“链接”文本框中指定要链接的文件，并在“目标”下拉列表框中选择链接的文档应在其中显示的框架或窗口。默认情况下，“目标”下拉列表框中有4个选项：_blank、_parent_、self、_top。,9.2 知识储备,如果当前框架文件中还含有rightFrame、bottomFrame、mainFrame、leftFrame和topFrame等框架，则在“目标”下拉列表框中还会显示rightFrame、bottomFrame、mainFrame、lef
9、tFrame和topFrame5个选项，方便用户选择链接目标。,9.3 实践向导,任务9-1 创建“网文欣赏”框架网页，效果如图9-1所示。 具体操作步骤如下： 1.创建框架页 （1）启动Dreamweaver CS5,单击菜单“文件” “新建”命令，弹出“新建文档”对话框，在对话框中选择“示例中的页”选项卡中的“框架页”类别，从框架集中选择“上方固定，左侧嵌套”类型。,9.3 实践向导,（2）单击“创建”按钮，此时在文档编辑窗口创建 了一个上方固定，左侧嵌套的框架集。 2.保存框架页 （1）单击菜单“文件” “保存全部”命令，打开“另存为”对话框，指定文件名为“9-1.html”
10、，然后单击“保存”按钮将其保存在站点根目录下。 （2）在顶部框架中单击，单击菜单“文件” “保存框架”命令，打开“另存为”对话框，设置文件名为“top.html”。 （3）参照上一步，将左侧框架保存为“left.html”,右侧框架保存为“right.html”。,9.3 实践向导,3.设置框架页面 （1）选择菜单“插入” “表格”命令，弹出“表格”对话框，插入一个1行1列的表格，设置边框粗细为0像素，单击“确定”按钮。然后在“属性”面板中设置其对齐方式为“居中对齐”。 （2）将光标置于表格中，单击菜单“插入” “图像”命令，在表格中插入图像，然后单击顶部框架的边框，在“属性”面板中设置框架“
11、行”的值，与图像高度相同。,9.3 实践向导,（3）将光标置于在左框架内，并设置页面各边距为0，单击菜单“插入” “表格”命令，弹出“表格”对话框，插入一个7行1列的表格，设置表格宽度为200像素，边框粗细为1像素，单元格间距为4像素。选中框架集，在框架集“属性”面板中设置左侧框架“列”的值为200像素 。 （4）在单元格内分别输入文本，并设置其高度为30像素，背景颜色为“#cc6600”，水平、垂直对齐方式为居中。,9.3 实践向导,（5）单击菜单“窗口” “框架”选项，打开“框架”面板，选中leftFrame后，在“属性”面板中选择“不能调整大小”复选框，并设置显示边框和滚动条，然后设置边
12、界宽度、高度均为0像素。 （6）将光标置于右框架内，输入文本内容。 （7）打开“框架”面板，单击框架集，在“属性”面板中设置边框为“是”，设置其边框宽度为“2”。单击topFrame，设置边框为“是”，边框颜色为“#FF9900”。 （8）选中左框架导航栏中的“亲情文章”文本，在“链接”文本框中输入链接的网页“qinqing.html”，在“目标”下拉列表框中选择链接打开的目标位置为“mainframe”，即主框架。,9.3 实践向导,（9）选择“文件” “保存全部”命令，保存所有文件。按【F12】预览效果，如图所示。,9.4 能力拓展,创建一个完整的框架网页。插入一个上方固定，下方固定的框架，在topFrame、mainFrame、bottomFrame中分别插入网页元素，效果如图9-16所示。,图9-16“中秋佳节”框架网页效果图,9.5 项目小结,本项目主要介绍了创建和使用框架与框架集的知识，包括框架和框架集的基本知识、创建框架与框架集的方法、选择框架与框架集的方法、框架与框架集的属性设置，以及编辑框架页面等内容。,
