项目单元框架应用设计.pptVIP

第十二项目单元框架应用设计教学重点：掌握框架的设计方法，框架创建、框架属性设置、在框架中实现超级链接1教学难点：在框架中如何实现超级链接2教学目标：3专业能力：掌握框架的设计方法，框架创建、框架属性设置、在框架中实现超级链接4社会能力：独立思考、紧跟课堂教学培养服从意识5方法能力：通过分析网页布局培养自学分析能力6教学内容：7项目12框架应用设计任务1设计一个框架页案例导入：相关知识点：主要步骤：在dw8中打开页面框架应用效果设计框架集中其他各页在框架中设置超级链接保存框架文件案例分析：单个框架是指在网页上定义的一个区域，框架的作用就是把浏览器的窗口划分为若干个区域，每个区域可以分别显示不同的网页。框架由两个主要部分—框架集和单个框架组成。框架集就是框架的集合。框架集的作用就是把浏览器窗口划分为若干个区域，每个区域可以显示不同的网页。框架集定义了一页网页显示的框架数、框架的大小、载入框架的网页源和其他可定义的属性等等。框架和框架集的概念0102图1框架和框架集的关系图1显示了框架和框架集之间的关系。图中，一个框架集中包含了三个框架。一个框架集文件和两个框架内容文件。框架通常被用来定义页面的导航区和内容区域。框架内容文件就是显示在页面框架中的内容。010203如果某个页面被划分为两个框架集，那么它实际上包含的是三个独立的文件：创建框架在一个空白文档的基础上构建框架，有如下两种方法。第一种方法：新建一个页面，选择菜单“查看”→“可视化助理”→“框架边框”命令，如图2所示，则文档四周出现边框，用鼠标点击边框之后可以看见虚线框，如图3所示，说明新建的页面中已经附带了框架。图2创建框架集图3出现边框用鼠标拖拽边框，松开鼠标之后就可以把窗口一分为二，这样就把页面分为两个框架。01例如拖拽左右边框可以把窗口分为左右两个部分，而拖拽上下边框可以把窗口分为上下两个部分。02另外，也可以拖拽窗口的四个角，这样可以直接把窗口分为四个区域。如图4所示。03当窗口分割为几个框架之后，每个框架都可以作为独立的网页进行编辑，也可以直接把某个已经存在的页面导入到该框架中。04原始表格水平分割文档水平垂直分割文档图4用拖曳的方法创建框架集垂直分割文档图5创建嵌套框架框架允许嵌套，比如要创建图5所示的框架，可以先通过上述的方法水平一分为二，但是接着不能直接拖拽边框，否则会得到图4中水平垂直分割文档所示的框架。图6删除框架如果边框拖拽错了，只要用鼠标把需要删除的边框拖到父框架的边框上或拖离页面即可删除。如图6所示。2.第二种方法：单击需要分割框架的窗口，将光标放置到窗口中。如果已经存在框架，则需要单击某个框架窗格，将光标放入该窗口内。打开“修改”菜单，选择“框架页”，打开相应的子菜单。如图7所示。选择相应的分割框架命令，拆分如图8所示的框架。图7拆分框架图8原始框架图9拆分左框架拆分左框架：将文档窗口拆分为左右两个框架。当前文档窗口中的内容被放置在左边框架内，如图9所示。”图10拆分右框架拆分右框架：将文档窗口拆分为左右两个框架。当前文档窗口中的内容被放置在右边框架内，如图10所示。图11拆分上框架拆分上框架：将文档窗口拆分为上下两个框架，当前文档窗口中的内容被放置在上面框架内，如图11所示。图12拆分下框架拆分下框架：将文档窗口拆分为上下两个框架。当前文档窗口中的内容被放置在下面框架内，如图12所示。1重复上述操作，继续拆分窗口，即可创建嵌套框架。2创建预定义框架集Dreamweaver预定义了多种框架集形式。使用预定义框架集，可以快速简便地创建框架。选择菜单“窗口”→“插入”，在插入面板上选择“框架”标签，切换到框架插入面板。预定义框架集图标的蓝色区域代表当前的框架，如图13所示。插入面板中提供了13种框架模板，主要分为垂直框架、水平框架和嵌套的框架集三种。图13框架插入面板1.垂直框架垂直框架网页模板提供了一种左右分栏的页面模式目录：页面左方创建一个目录框架，右面为主要框架。目录框架中的超链接目标指向主要框架，在目录框架中打开超链接会改变主要框架中的显示内容。如图14所示。垂直拆分：创建独立的左部和右部两个框架，相当于两个独立的页面。图14垂直框架2.水平框架水平框架网页是按照上下来布局的，依次为：标题、页脚、上下的层次结构。标题：第一个模板是“标题”框架模板。页面的上方创建了一个导航标题框架，下面创建了一个主框架。标题框架中的超链接的目标框架是主框架，打开标