1、1,网页设计,Dreamweaver CS3 项目教程,2,任务八 布局技术之四框架,技能目标 能灵活运用Dreamweaver CS3提供的框架结构定制不同的页面布局。 实现在框架结构指定区域引入外部文件。 使用内联框架iFrame制作页面指定区域的链接。 知识目标 熟练掌握框架页面的创建过程.。 掌握框架集和框架文件的区别。 掌握框架集属性和框架文件属性的设置。 掌握框架结构中文件的链接添加方法。 掌握框架结构中页面元素的添加与编辑方法。 掌握内联框架iFrame的用法。,3,任务八 布局技术之四框架,3.4.1 使用框架搭建页面 3.4.2 问题探究框架和框架集 3.4.3 知识拓展建自
2、定义框架和框架集 3.4.3 知识拓展内联框架iFrame,4,任务八 框架 构建任务,工作任务针对框架的布局技术实施该任务，该框架集由四个框架组成：一个框架横放在顶部，存放站点LOGO和标题；一个较窄的框架位于左侧面，存放导航条；一个大框架占据了页面的主要部分，存放主要内容；下部的框架放置一些版权信息。为了简化制作过程，事先预制四张已制作好的页面，然后在各框架结构分别建立HTML文档链接。,5,任务八 框架 构建任务,工作流程在站点中新建四张独立页面并保存。 新建一个框架集文件。 在框架集的各框架内建立与独立页面的联系。 设置框架和框架集的属性，并调整各框架区域的大小。 注意保存框架集和框架
3、文件的区别。 设置各框架之间的链接和显示区域。,6,任务八 框架 构建任务,网页预览效果,7,任务八 框架 问题探究,框架（Frame）是一种更复杂的布局工具，很容易地把浏览器窗口划分为若干个区域，每个区域载入不同的网页文件，将它们组合构成一个完整的框架集结构，各框架中的网页通过一定的链接关系联系起来，实现彼此间的互相控制。由于框架这种文档与结构分离的功能，不仅能够非常方便地在浏览器中浏览不同的页面效果，而且各个框架之间互不干扰，因此使用框架布局可使网页的布局效率大大提高。,8,任务八 框架 问题探究,框架主要包括两个部分：框架集和框架，如图所示。每一个框架显示一个独立的HTML文档，而框架集
4、定义这组框架的布局和属性（框架的数目、大小、位置以及在每个框架中初始显示的页面的URL），在浏览器如何显示这组框架，以及在这些框架中应显示哪些文档的有关信息。,图3-54 框架集（左）和框架（右）,9,任务八 框架 问题探究,创建框架集和框架 Dreamweaver CS3提供了15种最常见的预定义框架集格式。从欢迎窗口中的“从模板创建”选中“框架集”，或单击“新建文档/示例中的页/框架集”，都可以在弹出的对话框选择框架形式。 如果是在一个空白页内创建框架集，Dreamweaver CS3提供了13种最常见的预定义框架集格式。单击菜单栏的“插入记录/HTML/框架”命令。 在插入面板布局选项卡
5、内，单击框架按钮的下拉按钮，就可以看到所有预设的框架集。 选择要插入的框架集后单击，打开“框架标签辅助功能属性对话框”。如果希望插入的框架集时不出现此窗口，单击下方的“更改首选参数”在弹出的“首选参数”对话框中将框架前的辅助功能属性取消即可。,10,任务八 框架 问题探究,框架检视器 框架检视器为框架提供了一种最便捷的可视方法，不仅可以显示框架结构，而且便于用户编辑不同框架中的文档。执行“窗口/框架”命令，就会在右侧的面板组中显示框架检视器面板。如右图所示。,图 框架集（左）和框架（右）,11,任务八 框架 问题探究,保存框架和框架集由于框架页面是由多个独立文档组成的，对框架的编辑事实上是对多
6、个文档在进行编辑，因此在保存框架时需要对它们逐一进行保存。 保存全部 保存框架文件 保存框架集页面,12,任务八 框架 问题探究,框架和框架集操作 拆分框架 要将一个框架拆分成几个更小的框架，单击要拆分的框架窗口，将插入点放入窗口中，然后执行“修改/框架集/”命令，选择拆分项。 删除框架 删除框架实质上是从框架集文件中删除相应的标记，并重新设置标记的cols和rows属性。框架删除后，框架中的文档并没有发生变化。 框架没有合并功能。因为框架保存的是独立的网页文件，将两个框架文件内容合并成一个文件内容显示是不可能的。若要删除一个框架，可将光标置于要删除的框架上，待鼠标变成双向拖动框架边框至父框架
7、的边框上或使之脱离页面。,13,任务八 框架 问题探究,框架集和框架属性 框架集属性 单击文档窗口中两个框架的共用边界或单击框架集面板最外围的边界，就可以看到框架集的属性面板， 框架属性 用框架属性面板可以为框架命名、设置边界、为框架指定链接网页等操作。在设计视图下按住Alt键并单击某个框架。,14,任务八 框架 问题探究,由于框架集页面是指向它的URL页面，而且是由页面管理的，为确保以后能正确地链接页面，给每一个框架起一个名字是很必要的。在上图所示属性对话框，在左侧的框架名称文本框中输入相应的框架名称即可。如果没有定制好的网页，可以用鼠标点击任意一个框架之后就可以像普通页面一样插入各种文本内
8、容、图片、Flash动画和背景音乐等页面元素。 为了获得更好的页面浏览效果，可将框架集和框架的边框线设置为“否”，同时将上面和左边的框架的滚动设置为“否”，右边框架的边框也设置为“否”，滚动设置为“默认”，去掉边框线和滚动条后，页面就显得比较整洁清晰了。,15,任务八 框架 知识拓展,创建自定义框架和框架集 打开一个空白文档，在创建框架集或使用框架前，单击菜单栏的“查看/可视化助理/框架边框”命令，使框架边框在“文档/设计视图”中可见。 。,16,任务八 框架 知识拓展,内联框架iFrame iFrame是Inline Frame的缩写，一般被称作内联框架或浮动框架。它是一种特殊的“嵌入式框架
9、”页面，可以自由控制窗口大小，可以配合表格随意地在网页中的任何位置插入窗口。网页设计者不需要单独增加复杂的框架集文档，直接在浏览器窗口中再创建一个窗口来显示网页，而且每个内联框架都可以独立的定义其大小，而不仅仅局限在一个浏览器窗口的大小。,17,任务八 框架 知识拓展,内联框架iFrame 在Dreamweaver CS3中没有专门提供浮动框架的可视化制作方案，因此需要在代码窗口书写源代码；或者执行插入命令后系统将自动切换到“设计/代码”视图，在代码窗口中设置浮动框架参数。,18,任务八 框架 知识拓展,iFrame自适应高度 在使用iFrame时经常会遇到所调用的页面在预览时出现滚动条或页面不能完整显示的情况，对整个页面的美观性产生较大影响，打破了页面的统一风格。此时，可以在代码视图中添加一句高度自适应的代码，此问题就可以迎刃而解了。单击iFrame调用的页面（灰色矩形部分），切换到代码视图中，在选中代码的任意位置添加高度自适应内联框架大小的代码： onload=“this.height=this.Document.body.scrollheight“。,
