网页设计-任务八框架.pptVIP

项目三 布局技术 任务八 布局技术之四—框架 技能目标 能灵活运用Dreamweaver CS3提供的框架结构定制不同的页面布局。 实现在框架结构指定区域引入外部文件。 使用内联框架iFrame制作页面指定区域的链接。 知识目标 熟练掌握框架页面的创建过程.。 掌握框架集和框架文件的区别。 掌握框架集属性和框架文件属性的设置。 掌握框架结构中文件的链接添加方法。 掌握框架结构中页面元素的添加与编辑方法。 掌握内联框架iFrame的用法。 任务八 布局技术之四—框架 3.4.1 使用框架搭建页面 3.4.2 问题探究—框架和框架集 3.4.3 知识拓展—建自定义框架和框架集 3.4.3 知识拓展—内联框架iFrame 任务八 框架 —构建任务 工作任务 针对框架的布局技术实施该任务，该框架集由四个框架组成：一个框架横放在顶部，存放站点LOGO和标题；一个较窄的框架位于左侧面，存放导航条；一个大框架占据了页面的主要部分，存放主要内容；下部的框架放置一些版权信息。为了简化制作过程，事先预制四张已制作好的页面，然后在各框架结构分别建立HTML文档链接。 任务八 框架 —构建任务 工作流程 在站点中新建四张独立页面并保存。 新建一个框架集文件。 在框架集的各框架内建立与独立页面的联系。 设置框架和框架集的属性，并调整各框架区域的大小。 注意保存框架集和框架文件的区别。 设置各框架之间的链接和显示区域。 任务八 框架 —构建任务 任务八 框架 —问题探究 框架（Frame）是一种更复杂的布局工具，很容易地把浏览器窗口划分为若干个区域，每个区域载入不同的网页文件，将它们组合构成一个完整的框架集结构，各框架中的网页通过一定的链接关系联系起来，实现彼此间的互相控制。由于框架这种文档与结构分离的功能，不仅能够非常方便地在浏览器中浏览不同的页面效果，而且各个框架之间互不干扰，因此使用框架布局可使网页的布局效率大大提高。 任务八 框架 —问题探究 框架主要包括两个部分：框架集和框架，如图所示。每一个框架显示一个独立的HTML文档，而框架集定义这组框架的布局和属性（框架的数目、大小、位置以及在每个框架中初始显示的页面的URL），在浏览器如何显示这组框架，以及在这些框架中应显示哪些文档的有关信息。 任务八 框架 —问题探究 创建框架集和框架 Dreamweaver CS3提供了15种最常见的预定义框架集格式。从欢迎窗口中的“从模板创建”选中“框架集”，或单击“新建文档/示例中的页/框架集”，都可以在弹出的对话框选择框架形式。 如果是在一个空白页内创建框架集，Dreamweaver CS3提供了13种最常见的预定义框架集格式。单击菜单栏的“插入记录/HTML/框架”命令。 在插入面板布局选项卡内，单击框架按钮的下拉按钮，就可以看到所有预设的框架集。 选择要插入的框架集后单击，打开“框架标签辅助功能属性对话框”。如果希望插入的框架集时不出现此窗口，单击下方的“更改首选参数”在弹出的“首选参数”对话框中将框架前的辅助功能属性取消即可。 任务八 框架 —问题探究 框架检视器 框架检视器为框架提供了一种最便捷的可视方法，不仅可以显示框架结构，而且便于用户编辑不同框架中的文档。执行“窗口/框架”命令，就会在右侧的面板组中显示框架检视器面板。如右图所示。 任务八 框架 —问题探究 保存框架和框架集 由于框架页面是由多个独立文档组成的，对框架的编辑事实上是对多个文档在进行编辑，因此在保存框架时需要对它们逐一进行保存。 保存全部 保存框架文件 保存框架集页面 任务八 框架 —问题探究 框架和框架集操作 拆分框架 要将一个框架拆分成几个更小的框架，单击要拆分的框架窗口，将插入点放入窗口中，然后执行“修改/框架集/”命令，选择拆分项。 删除框架 删除框架实质上是从框架集文件中删除相应的frame标记，并重新设置frameset标记的cols和rows属性。框架删除后，框架中的文档并没有发生变化。 框架没有合并功能。因为框架保存的是独立的网页文件，将两个框架文件内容合并成一个文件内容显示是不可能的。若要删除一个框架，可将光标置于要删除的框架上，待鼠标变成双向拖动框架边框至父框架的边框上或使之脱离页面。 任务八 框架 —问题探究 框架集和框架属性 框架集属性 单击文档窗口中两个框架的共用边界或单击框架集面板最外围的边界，就可以看到框架集的属性面板， 框架属性 用框架属性面板可以为框架命名、设置边界、为框架指定链接网页等操作。在设计视图下按住Alt键并单击某个框架。 任务八 框架 —问题探究 由于框