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

《项目9使用框架布局制作网.ppt》由会员分享，可在线阅读，更多相关《项目9使用框架布局制作网.ppt（29页珍藏版）》请在三一办公上搜索。

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

2、1 用框架布局的网页,4,相关知识,一框架的概念及应用,框架就是把一个浏览器窗口分成若干个子窗口，每个子窗口中显示不同的网页文件，这种子窗口称为框架（Frame）。每个框架都是浏览器窗口中的一个独立区域，在这个区域中可以显示一个单独的网页而不影响其他区域中的显示内容。多个框架同时显示在一个浏览窗口中,就组成了框架集(Frameset)。,任务1 使用框架布局制作网页,5,相关知识,二框架的创建与删除,创建框架网页可以有以下方法：1使用“文件”菜单创建,单击“文件”菜单“新建”，打开“新建文档”对话框，选择“示例中的页”“框架集”，再选择一个框架结构。如图9-2所示。再单击“创建”按钮。新创建的

3、框架网页中会弹出“框架标签辅助功能属性”对话框，如图9-3所示。要求为每个框架指定一个可供识别的标签（即框架的名称）。可以使用默认的标签，也可以自行定义一组便于记忆的标签。,任务1 使用框架布局制作网页,6,相关知识,二框架的创建与删除,图9-2“新建文档”对话框,图9-3“框架标签辅助功能属性”对话框,任务1 使用框架布局制作网页,7,相关知识,首先创建并打开一个空白网页文件，将光标定位到网页左上角。然后单击“布局”工具中的“框架”按钮，在下拉菜单中选择要创建的框架类型，如图9-4所示。,2使用“布局”工具栏创建,二框架的创建与删除,图9-4 在“框架”下拉菜单选择框架类型,任务1 使用框架

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

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

6、框的宽度、边框的颜色、滚动条的显示方式、是否能在浏览器窗口中调整大小以及在此框架中显示的网页文件。框架行高（列宽）的值可以是具体的“像素”值，也可以是占整个框架的百分比。还有一种是“相对”值，即根据其他框架所占的行高（列宽），自动调整当前框架的行高（列宽）。,任务1 使用框架布局制作网页,12,相关知识,1点击框架集的外边缘，如图9-9圆圈部分所示。,2在框架面板中点击相应的框架。,3在激活框架的情况下，单击“标签选择器”中相应的标签。选中框架集后，“属性”面板中显示框架集的属性值。如图9-10所示。,四框架集属性的设置,给框架集设置属性前应先选中它。选中框架集的方法主要有：,任务1 使用框架

7、布局制作网页,13,相关知识,四框架集属性的设置,图9-9 单击框架集外边缘,图9-10 通过“属性”面板设置框架集的属性,框架集的属性主要有：是否显示边框、边框宽度、边框颜色以及各框架的行高、列宽值。,任务1 使用框架布局制作网页,14,四框架集属性的设置,任务实施,在使用框架布局网页前，一般是先将各框架中需要显示的网页制作好，再通过“属性”面板的“源文件”框设置各框架相应的网页文件。本教材“项目素材”文件夹中已经前先制作了部分网页文件。实施任务前先将这些文件复制到站点文件中的相应位置。,1.在Windows环境下，使用“我的电脑”，将本教材“项目素材”文件夹中“project09/task

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

9、框架，顶部框架为“topFrame”、左侧框架为“leftFrame”、右侧框架为“mainFrame”。,任务1 使用框架布局制作网页,16,一新建框架网页,任务实施,3单击“窗口”菜单“框架”，打开“框架”面板。,4在“框架”面板中点击框架集上方的外边缘，激活框架集，在属性面板中设置“行”值为“80像素”。,5在“框架”面板中点击下方框架集（即leftFrame和mainFrame所在的框架集）的边缘，激活框架集，在属性面板中设置“列”值为“200像素”。,任务1 使用框架布局制作网页,17,一新建框架网页,任务实施,6按下Alt键的同时，用鼠标单击leftFrame框架的内部，激活它。在

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

11、eftFrame框架中的第一项菜单“添加文章”，在属性面板中设置其超链接为“addfile.html”，目标为“mainframe”。如图9-12所示。,4同样的方法为leftFrame框架中的第二项菜单“修改文章”设置其超链接为“filelist.html”，目标为“mainframe”。其他超链接的设置方式与此相同。本任务仅是一个示例，不具实用性，故不再一一赘述。,二为框架链接网页,图9-12 设置超链接和目标框架,任务1 使用框架布局制作网页,返回,20,任务分析本任务在网页中添加浮动框架，并在浮动框架中嵌入当地天气预报内容，如图9-13左下方所示的效果。,任务2 使用浮动框架制作网页,

12、图9-13 页面左下方带有浮动框架的布局,21,相关知识,任务2 使用浮动框架制作网页,一浮动框架的概念,浮动框架也称内联框架，标记为，它能够比框架更灵活地实现框架的功能，在使用表格或是DIV布局的页面中，如果要小面积地使用框架来当作图像或是网页对象的容器，就可以使用浮动框架。即浮动框架可以灵活地插入到网页的任何位置。,22,相关知识,任务2 使用浮动框架制作网页,二浮动框架的创建及属性设置,在Dreamweaver CS3中，单击“布局”工具栏中的“IFRAME”按钮来插入浮动框架，在代码编辑视图中，会自动生成一对标记，在设计视图中则会出现一个灰色的正方形，如图9-14所示。属性设置要在代码

13、中去进行。,23,相关知识,任务2 使用浮动框架制作网页,二浮动框架的创建及属性设置,图9-14 页面插入浮动框架,标记的常属性有：name：浮动框架的名称 width：浮动框架的宽度（可用像素或是百分比）height：浮动框架的高度（可用像素或是百分比）frameborder：浮动框架的边框 scrolling：浮动框架的滚动条（“auto”为自动“yes”为显示“no”为不显示）src：浮动框架中显示文件地址,24,任务实施,1打开当前站点文件夹下为oa子文件夹中的leftmenu.html网页文件。,2在菜单的下方插入一个空的DIV层。设置其背景为“白色（#FFFFFF）”，方框大小为“

14、180像素”，左右边界为“自动”。,3在DIV中通过“布局”工具栏中的“IFRAME”按钮插入一个浮动框架。,任务2 使用浮动框架制作网页,25,任务实施,4切换到拆分视图，在代码中输入如下内容：,任务2 使用浮动框架制作网页,5.保存并通过editor.html网页来浏览,返回,26,返回,27,技能巩固,1参照任务1的界面布局和实际功能，利用框架结构为“茗香绿长”公司网站建立后台管理系统的操作界面，以manager.html保存。2利用浮动框架在“茗香绿长”公司主页（home.html）中的适当位置插入天气预报内容。具体的天气代码可通过“百度”搜索，关键词为“天气预报”，找到相关的免费代码来制作。图9-15所示的效果与代码仅供参考（代码来自“新浪天气预报”的免费代码，但有所改动）。,28,技能巩固,图9-15 在网页首部插入免费天气预报代码后的效果,返回,29,Thank You!,