项目单元框架应用设计.ppt
《项目单元框架应用设计.ppt》由会员分享,可在线阅读,更多相关《项目单元框架应用设计.ppt(34页珍藏版)》请在三一办公上搜索。
1、第十二项目单元 框架应用设计,项目12 框架应用设计,教学重点:掌握框架的设计方法,框架创建、框架属性设置、在框架中实现超级链接 教学难点:在框架中如何实现超级链接,教学目标:专业能力:掌握框架的设计方法,框架创建、框架属性设置、在框架中实现超级链接 社会能力:独立思考、紧跟课堂教学培养服从意识方法能力:通过分析网页布局培养自学分析能力教学内容:,任务1 设计一个框架页,案例导入:,案例分析:,1、在dw8中打开页面2、框架应用效果,主要步骤:,1、设计框架集中其他各页2、在框架中设置超级链接3、保存框架文件,相关知识点:,单个框架是指在网页上定义的一个区域,框架的作用就是把浏览器的窗口划分为
2、若干个区域,每个区域可以分别显示不同的网页。框架由两个主要部分框架集和单个框架组成。框架集就是框架的集合。框架集的作用就是把浏览器窗口划分为若干个区域,每个区域可以显示不同的网页。框架集定义了一页网页显示的框架数、框架的大小、载入框架的网页源和其他可定义的属性等等。,框架和框架集的概念,图1显示了框架和框架集之间的关系。图中,一个框架集中包含了三个框架。,图1 框架和框架集的关系,如果某个页面被划分为两个框架集,那么它实际上包含的是三个独立的文件:一个框架集文件和两个框架内容文件。框架内容文件就是显示在页面框架中的内容。框架通常被用来定义页面的导航区和内容区域。,创建框架 在一个空白文档的基础
3、上构建框架,有如下两种方法。1.第一种方法:新建一个页面,选择菜单“查看”“可视化助理”“框架边框”命令,如图2所示,则文档四周出现边框,用鼠标点击边框之后可以看见虚线框,如图3所示,说明新建的页面中已经附带了框架。,图2 创建框架集,图3 出现边框,用鼠标拖拽边框,松开鼠标之后就可以把窗口一分为二,这样就把页面分为两个框架。例如拖拽左右边框可以把窗口分为左右两个部分,而拖拽上下边框可以把窗口分为上下两个部分。,另外,也可以拖拽窗口的四个角,这样可以直接把窗口分为四个区域。如图4所示。当窗口分割为几个框架之后,每个框架都可以作为独立的网页进行编辑,也可以直接把某个已经存在的页面导入到该框架中。
4、,原始表格,水平分割文档,水平垂直分割文档,图4 用拖曳的方法创建框架集,垂直分割文档,框架允许嵌套,比如要创建图5所示的框架,可以先通过上述的方法水平一分为二,但是接着不能直接拖拽边框,否则会得到图4中水平垂直分割文档所示的框架。,图5 创建嵌套框架,如果边框拖拽错了,只要用鼠标把需要删除的边框拖到父框架的边框上或拖离页面即可删除。如图6所示。,图6 删除框架,2.第二种方法:单击需要分割框架的窗口,将光标放置到窗口中。如果已经存在框架,则需要单击某个框架窗格,将光标放入该窗口内。打开“修改”菜单,选择“框架页”,打开相应的子菜单。如图7所示。选择相应的分割框架命令,拆分如图8所示的框架。,
5、图7 拆分框架,图8 原始框架,拆分左框架:将文档窗口拆分为左右两个框架。当前文档窗口中的内容被放置在左边框架内,如图9所示。,图9 拆分左框架,拆分右框架:将文档窗口拆分为左右两个框架。当前文档窗口中的内容被放置在右边框架内,如图10所示。,图10 拆分右框架,拆分上框架:将文档窗口拆分为上下两个框架,当前文档窗口中的内容被放置在上面框架内,如图11所示。,图11 拆分上框架,拆分下框架:将文档窗口拆分为上下两个框架。当前文档窗口中的内容被放置在下面框架内,如图12所示。重复上述操作,继续拆分窗口,即可创建嵌套框架。,图12 拆分下框架,创建预定义框架集 Dreamweaver预定义了多种框
6、架集形式。使用预定义框架集,可以快速简便地创建框架。选择菜单“窗口”“插入”,在插入面板上选择“框架”标签,切换到框架插入面板。预定义框架集图标的蓝色区域代表当前的框架,如图13所示。插入面板中提供了13种框架模板,主要分为垂直框架、水平框架和嵌套的框架集三种。,图13 框架插入面板,1.垂直框架 垂直框架网页模板提供了一种左右分栏的页面模式目录:页面左方创建一个目录框架,右面为主要框架。目录框架中的超链接目标指向主要框架,在目录框架中打开超链接会改变主要框架中的显示内容。如图14所示。垂直拆分:创建独立的左部和右部两个框架,相当于两个独立的页面。,图14 垂直框架,2.水平框架水平框架网页是
7、按照上下来布局的,依次为:标题、页脚、上下的层次结构。标题:第一个模板是“标题”框架模板。页面的上方创建了一个导航标题框架,下面创建了一个主框架。标题框架中的超链接的目标框架是主框架,打开标题框架中的超链接会改变主框架中的内容。如图15所示。,图15 水平框架(标题),页脚:第二个模板是“页脚”框架页面模板。页面的上方创建了一个主要框架,下面创建了一个页脚框架。页脚框架中的链接的目标框架是主框架,打开页脚框架中的超链接会改变主框架中的内容。如图16所示。,图16 水平框架(页脚),上下的层次结构:创建三个自顶向下的信息层次结构。顶部和底部的框架是常规的超链接,链接的目标框架是中间的框架,打开顶
8、部和底部框架中的超链接会改变主框架中的内容。如图16所示。,创建NOFRAMES,图17 编辑非框架内容,1、如果浏览器不支持框架,则不显示框架集和框架文档内2、选择菜单“修改”“框架页”“编辑无框架内容”命令,则文档窗口即变成一个普通的文档窗口,可以在其中编辑无框架信息,如图17所示。3、再次选择菜单“修改”“框架页”“编辑无框架内容”命令,则返回到原先的框架集文档窗口中。,在Dreamweaver中,可以单独保存某个框架文档、框架集文档,也可以将整个框架集(包括框架集文档本身以及其中的各个框架文档)保存。当在文档窗口中构建框架时,Dreamweaver会为新生成的框架文档以及框架集文档临时
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 项目 单元 框架 应用 设计

链接地址:https://www.31ppt.com/p-5889726.html