项目9 使用框架布局制作网页.

Presentation on theme: "项目9 使用框架布局制作网页."— Presentation transcript:

1 项目9 使用框架布局制作网页

2 任务1 使用框架布局制作网页 任务2 使用浮动框架制作网页 项目1 了解网站的概念 项目总结 技能巩固 ......

3 任务1 使用框架布局制作网页 任务分析 几乎所有网站都会有至少一个后台管理系统来对网站进行维护和更新。图9-1所示是假设的“每味美味”网站的后管理系统。使用该系统可以对网站信息进行增、删、改等编辑操作。 该系统使用框架布局来设计制作网页。页面中有三个网页组成，这三个网页被安放在三个框架中，而这三个框架又被集中到一个框架集中。 左侧框架中显示的是后台系统中的主菜单，单击其中的菜单项，就会在右侧较大的框架（即主编辑区）中显示相关内容，供管理员编辑处理。 ◆图9-1 用框架布局的网页

4 任务1 使用框架布局制作网页 相关知识 一．框架的概念及应用
任务1 使用框架布局制作网页 相关知识 一．框架的概念及应用 框架就是把一个浏览器窗口分成若干个子窗口，每个子窗口中显示不同的网页文件，这种子窗口称为框架（Frame）。每个框架都是浏览器窗口中的一个独立区域，在这个区域中可以显示一个单独的网页而不影响其他区域中的显示内容。多个框架同时显示在一个浏览窗口中,就组成了框架集(Frameset)。

5 任务1 使用框架布局制作网页 相关知识 二．框架的创建与删除 创建框架网页可以有以下方法： 1．使用“文件”菜单创建
任务1 使用框架布局制作网页 相关知识 二．框架的创建与删除 创建框架网页可以有以下方法： 1．使用“文件”菜单创建 单击“文件”菜单→“新建”，打开“新建文档”对话框，选择“示例 中的页”→“框架集”，再选择一个框架结构。如图9-2所示。 再单击“创建”按钮。新创建的框架网页中会弹出“框架标签辅助功能属性” 对话框，如图9-3所示。 要求为每个框架指定一个可供识别的标签（即框架的名称）。 可以使用默认的标签，也可以自行定义一组便于记忆的标签。

6 任务1 使用框架布局制作网页 相关知识 二．框架的创建与删除 ◆图9-2 “新建文档”对话框 ◆图9-3 “框架标签辅助功能属性”对话框

7 任务1 使用框架布局制作网页 相关知识 二．框架的创建与删除 2．使用“布局”工具栏创建 首先创建并打开一个空白网页文件，将光标定位
任务1 使用框架布局制作网页 相关知识 二．框架的创建与删除 2．使用“布局”工具栏创建 ◆图9-4 在“框架”下拉菜单选择框架类型 首先创建并打开一个空白网页文件，将光标定位 到网页左上角。然后单击“布局”工具中的“框架” 按钮，在下拉菜单中选择要创建的框架类型， 如图9-4所示。

8 任务1 使用框架布局制作网页 相关知识 二．框架的创建与删除 选择一种类型后，会弹出“框架标签辅助功能属性”对话框，为框架
任务1 使用框架布局制作网页 相关知识 二．框架的创建与删除 选择一种类型后，会弹出“框架标签辅助功能属性”对话框，为框架 集中的每个框架指定相应的标签后单击“确定”按钮，编辑窗口中显示该 框架布局页面。如图9-5所示。 要生成更复杂的框架样式，可以在已生成的框架集中单击某个框架， 使用“布局”面板上的“框架”按钮，选择需要的类型，即可在光标处 插入新框架，实现框架的嵌套。 要删除框架，用鼠标选中，变成双向箭头时，拖到网页编辑窗口边 缘以外即可，如图9-6中圆圈部分所示。

9 任务1 使用框架布局制作网页 相关知识 二．框架的创建与删除 ◆图9-5 新建的“框架”网页 ◆图9-6 删除框架集中的框架

10 任务1 使用框架布局制作网页 相关知识 三．框架的激活及属性设置 如果要修改框架的属性，需要先激活该框架，然后再通过“属性”面板
任务1 使用框架布局制作网页 相关知识 三．框架的激活及属性设置 如果要修改框架的属性，需要先激活该框架，然后再通过“属性”面板 设置新的属性值。激活框架的方法主要有： 1．按住Alt键的同时，用鼠标单击某框架的内部，可激活此框架。 2．在“框架”面板上单击所要选择的框架，以激活。 “框架”面板的打开可通过单击“窗口”菜单→“框架”可来实现。 “框架”面板如图9-7所示。框架被激活后就可以在下方的“属性”面 板进行相关属性的设置，如图9-8所示 。

11 任务1 使用框架布局制作网页 相关知识 三．框架的激活及属性设置 颜色、滚动条的显示方式、是否能在浏览器窗口中调整大小以及在此框架中
任务1 使用框架布局制作网页 相关知识 三．框架的激活及属性设置 ◆图9-7 “框架”面板 ◆图9-8 通过“属性”面板设置框架的属性 框架的属性主要有：框架的名称、是否显示边框、边框的宽度、边框的 颜色、滚动条的显示方式、是否能在浏览器窗口中调整大小以及在此框架中 显示的网页文件。 框架行高（列宽）的值可以是具体的“像素”值，也可以是占整个框架的 百分比。还有一种是“相对”值，即根据其他框架所占的行高（列宽）， 自动调整当前框架的行高（列宽）。

12 任务1 使用框架布局制作网页 相关知识 四．框架集属性的设置 给框架集设置属性前应先选中它。选中框架集的方法主要有：
任务1 使用框架布局制作网页 相关知识 四．框架集属性的设置 给框架集设置属性前应先选中它。选中框架集的方法主要有： 1．点击框架集的外边缘，如图9-9圆圈部分所示。 2．在框架面板中点击相应的框架。 3．在激活框架的情况下，单击“标签选择器”中相应的<frameset>标签。 选中框架集后，“属性”面板中显示框架集的属性值。如图9-10所示。

13 任务1 使用框架布局制作网页 相关知识 四．框架集属性的设置 框架集的属性主要有：是否显示边框、边框宽度、边框颜色
任务1 使用框架布局制作网页 相关知识 四．框架集属性的设置 ◆图9-9 单击框架集外边缘 ◆图9-10 通过“属性”面板设置框架集的属性 框架集的属性主要有：是否显示边框、边框宽度、边框颜色 以及各框架的行高、列宽值。

14 任务1 使用框架布局制作网页 任务实施 四．框架集属性的设置 在使用框架布局网页前，一般是先将各框架中需要显示的网页
任务1 使用框架布局制作网页 任务实施 四．框架集属性的设置 在使用框架布局网页前，一般是先将各框架中需要显示的网页 制作好，再通过“属性”面板的“源文件”框设置各框架相应的网页文件。 本教材“项目素材”文件夹中已经前先制作了部分网页文件。实施任务 前先将这些文件复制到站点文件中的相应位置。 1.在Windows环境下，使用“我的电脑”，将本教材“项目素材”文件夹 中“project09/task01”中的oa文件夹复制到站点文件夹mwmw中； 将“project09/task01/SpryAssets”中的两个文件复制到mwmw 中的SpryAssets文件夹中。 2．运行Dreamweaver CS3，打开站点example。

15 任务1 使用框架布局制作网页 任务实施 一．新建框架网页 1．在“文件”面板中展开站点文件夹，右击其中的子文件夹oa，
任务1 使用框架布局制作网页 任务实施 一．新建框架网页 1．在“文件”面板中展开站点文件夹，右击其中的子文件夹oa， 在快捷菜单中选择“新建文件”，输入网页文件名为“editor.html”。 2．单击“布局”工具栏中的“框架”按钮，在下拉菜单中选择“顶部 和嵌套的左侧框架”，弹出“框架标签辅助功能属性”对话框，使用 系统默认值，单击“确定”按钮。 此时网页中建立了三个框架，顶部框架为“topFrame”、左 侧框架为“leftFrame”、右侧框架为“mainFrame”。

16 任务1 使用框架布局制作网页 任务实施 一．新建框架网页 3．单击“窗口”菜单→“框架”，打开“框架”面板。
任务1 使用框架布局制作网页 任务实施 一．新建框架网页 3．单击“窗口”菜单→“框架”，打开“框架”面板。 4．在“框架”面板中点击框架集上方的外边缘，激活框架集， 在属性面板中设置“行”值为“80像素”。 5．在“框架”面板中点击下方框架集（即leftFrame和 mainFrame所在的框架集）的边缘，激活框架集， 在属性面板中设置“列”值为“200像素”。

17 任务1 使用框架布局制作网页 任务实施 一．新建框架网页 6．按下Alt键的同时，用鼠标单击leftFrame框架的内部，
任务1 使用框架布局制作网页 任务实施 一．新建框架网页 6．按下Alt键的同时，用鼠标单击leftFrame框架的内部， 激活它。在“属性”面板中设置其“滚动”为“自动”。 7．同样的方法设置mainFrame框架的“滚动”属性为“自动”。

18 任务1 使用框架布局制作网页 任务实施 二．为框架链接网页 1．按下Alt键的同时，用鼠标单击 topFrame框架的内部，激活它。在“属
任务1 使用框架布局制作网页 任务实施 二．为框架链接网页 1．按下Alt键的同时，用鼠标单击 topFrame框架的内部，激活它。在“属 性”面板中设置其“源文件”为 “editor_top.html”。 2．同样的方法设置leftFrame框架的 “源文件”属性为“leftmenu.html”、 mainFrame框架的“源文件”属性为 “welcome.html”。结果如图9-11所示。 ◆图9-11 链接网页后的框架布局

19 任务1 使用框架布局制作网页 任务实施 二．为框架链接网页 3．为菜单设置超链接。选中leftFrame框
任务1 使用框架布局制作网页 任务实施 二．为框架链接网页 3．为菜单设置超链接。选中leftFrame框 架中的第一项菜单“添加文章”，在属性面板 中设置其超链接为“addfile.html”， 目标为“mainframe”。如图9-12所示。 ◆图9-12 设置超链接和目标框架 4．同样的方法为leftFrame框架中的第二项菜单“修改文章”设置其超链 接为“filelist.html”，目标为“mainframe”。其他超链接的设置方式 与此相同。本任务仅是一个示例，不具实用性，故不再一一赘述。 返回

20 任务2 使用浮动框架制作网页 任务分析 本任务在网页中添加浮动框架，并在浮动框架中嵌入当地天气预报内容，如图9-13左下方所示的效果。
任务2 使用浮动框架制作网页 任务分析 本任务在网页中添加浮动框架，并在浮动框架中嵌入当地天气预报内容，如图9-13左下方所示的效果。 ◆图9-13 页面左下方带有浮动框架的布局

21 任务2 使用浮动框架制作网页 相关知识 一．浮动框架的概念 浮动框架也称内联框架，标记为<iframe>，它能够比框架
任务2 使用浮动框架制作网页 相关知识 一．浮动框架的概念 浮动框架也称内联框架，标记为<iframe>，它能够比框架 更灵活地实现框架的功能，在使用表格或是DIV布局的页面 中，如果要小面积地使用框架来当作图像或是网页对象的容 器，就可以使用浮动框架。即浮动框架可以灵活地插入到网 页的任何位置。

22 任务2 使用浮动框架制作网页 相关知识 二．浮动框架的创建及属性设置 在Dreamweaver CS3中，单击“布局”工具栏中的
任务2 使用浮动框架制作网页 相关知识 二．浮动框架的创建及属性设置 在Dreamweaver CS3中，单击“布局”工具栏中的 “IFRAME”按钮来插入浮动框架，在代码编辑视图中， 会自动生成一对<iframe></iframe>标记，在设 计视图中则会出现一个灰色的正方形，如图9-14所示。 属性设置要在代码中去进行。

23 任务2 使用浮动框架制作网页 相关知识 二．浮动框架的创建及属性设置 <iframe>标记的常属性有： name：浮动框架的名称
任务2 使用浮动框架制作网页 相关知识 二．浮动框架的创建及属性设置 <iframe>标记的常属性有： name：浮动框架的名称 width：浮动框架的宽度 （ 可用像素或是百分比） height：浮动框架的高度 （可用像素或是百分比） frameborder：浮动框架的边框 scrolling：浮动框架的滚动条 （“auto”为自动 “yes”为显示 “no”为不显示） src：浮动框架中显示文件地址 ◆图9-14 页面插入浮动框架

24 任务2 使用浮动框架制作网页 任务实施 2．在菜单的下方插入一个空的DIV层。设置其背景为“白色
任务2 使用浮动框架制作网页 任务实施 1．打开当前站点文件夹下为oa子文件夹中的leftmenu.html网页文件。 2．在菜单的下方插入一个空的DIV层。设置其背景为“白色 （#FFFFFF）”，方框大小为“180像素”，左右边界为“自动”。 3．在DIV中通过“布局”工具栏中的“IFRAME”按钮插入一个浮动框架。

25 任务2 使用浮动框架制作网页 任务实施 4．切换到拆分视图，在代码中输入如下内容：
任务2 使用浮动框架制作网页 任务实施 4．切换到拆分视图，在代码中输入如下内容： <iframe id="tianqi8_wetherinfo" name="tianqi8_wetherinfo" src=" code/freeweather15.htm?id=&fcolor=&imgurl=tb/tbm/tb1&bimg=&bcolor=&fsize=" frameBorder=1 width=180 height=105 align=center marginwidth=0 marginheight=0 hspace=0 vspace=0 scrolling=no allowtransparency=true></iframe> 5.保存并通过editor.html网页来浏览 返回

26 本项目通过两个任务的学习，了解了框架 布局网页的方法，框架布局操作简便，结构清 晰，可以轻松实现超链接显示。而使用浮动框 架则可以在网页的任意位置实现局部框架的功 能。
总 结 返回

27 技能巩固 1．参照任务1的界面布局和实际功能，利用框架结构为“茗香绿长”公司网站建立后台管理系统的操作界面，以manager.html保存。 2．利用浮动框架在“茗香绿长”公司主页（home.html）中的适当位置插入天气预报内容。具体的天气代码可通过“百度”搜索，关键词为“天气预报”，找到相关的免费代码来制作。图9-15所示的效果与代码仅供参考（代码来自“新浪天气预报”的免费代码，但有所改动）。

28 技能巩固 图9-15 在网页首部插入免费天气预报代码后的效果
<IFRAME id="tianqi8_wetherinfo" name = "tianqi8_wetherinfo" src =" id= & fcolor= & imgurl= & bimg= & bcolor= & fsize=12" frameBorder=0 width=400 height=16 ALIGN=left MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=10 VSPACE=0 SCROLLING=NO allowtransparency=true> </IFRAME> 图9-15 在网页首部插入免费天气预报代码后的效果 返回

29 Thank You !