第九框架模板和库剖析课件

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,Dreamweaver,课件,第九章 框架、模板和库,第九章 框架、模板和库,9.1,框架和框架集的介绍,9.2,创建框架和框架集,9.3,选择和删除框架和框架集,9.4,设置框架和框架集属性,9.5,创建模板,9.6,定义模板编辑区域,9.7,创建与应用库项目,9.8,总结,9.1,框架和框架集的介绍,框架可以将一个浏览器窗口划分为多个区域，且每个区域都可以显示不同的,HTML,文档,。其效果是在浏览网页时，网页中一部分区域（如公司,Logo,、,导航条）内容不改变，而其他区域内容在不断发生改变。一般大型的论坛会用到框架集。,9.1,框架和框架集的介绍,框架是浏览器窗口中的一个区域,，它可以显示与浏览器窗口的其余部分中所显示内容无关的,HTML,文档。,框架集是,HTML,文件，它定义一组框架的布局和属性，包括框架的数目、大小、位置以及在框架中初始显示页面的地址。,框架集文件本身不包含要在浏览器中显示的网页内容，框架集文件只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些网页的有关信息。,作用：,可以将几个独立的页面同时显示在浏览器中。,增强网页的导航功能,9.2,创建框架和框架集,9.2.1,插入预定义框架集,9.2.2,创建嵌套框架集,9.2.3,保存框架和框架集文件,9.2.1,插入预定义框架集,在,Dreamweaver,中预定义了一些框架集样式，需要使用时直接插入即可。,执行“插入”,|“HTML”|“,框架”,|“,上方及左侧嵌套”命令。,9.2.2,创建嵌套框架集,如果预定义框架集不能满足需要，还可以在它的基础上进行分割,.,修改,框架集,拆分上,(,下、左、右）框架,9.2.3 保存框架和框架集文件,保存,框架与框架集之后,才能在浏览器中浏览用框架布局的网页,。,每个框架包含一个网页，一个框架集则包含多个网页，在保存时应保存所有的框架与框架集。,保存（每个子框架、最外面框架集都要保存成网页文件）,手动,：先通过“文件,/,保存框架,”,命令依此保存子框架，再通过“文件,/,框架集另存为”命令保存框架集。,自动,：通过“文件,/,保存全部”命令，系统先保存框架集，后依此保存子框架。,保存框架,保存框架集,保存框架集中的所有网页,保存框架,框架,和,框架集的保存与一般网页文档的保存不同。,将插入点定位到要保存的框架中。,选择,文件,保存框架,菜单命令,，在打开的“另存为”对话框中像保存其他网页一样指定保存路径和文件名，然后单击“保存”按钮即可。,保存框架集,保存框架集的方法与保存框架相似，选中所需保存的框架集。,选择,文件,框架集另存为,菜单命令,，打开“另存为”对话框。,在“保存在”下拉列表框中选,择框架集的保存路径，在“文,件名”文本框中为框架集命,名。单击“保存”按钮即可保,存框架集。,保存框架集中的所有网页,选择,文件,保存全部,菜单命令,，打开“另存为”对话框，保存相关网页。,9.3,选择和删除框架和框架集,9.3.1,认识“框架”面板,9.3.2,选择,框架和框架集,9.3.1,认识“框架”面板,“框架”面板中显示所创建的框架结构，并在不同的框架区域中显示框架的名称。,当在框架网页中新建、删除框架，或修改框架的尺寸、名称等时，“框架”面板中的示意图会跟随变化。,9.3.2,选择框架和框架集,在编辑窗口中选择,在“框架”面板中选择,在编辑窗口中选择,在编辑窗口中选择框架的方法：鼠标放在某个框架处，按住,【Alt】,键，再按向上的方向键即可，如果要改选其他的框架，则继续上述操作就会不断更改被选的框架。,选择框架集时，单击框架边框即可，选取的所有框架边框呈虚线。,在“框架”面板中选择,在“框架”面板中单击框架区域中的任意位置即可选择框架,，选中的框架以粗黑框显示。,在“框架”面板中单击框架边框即可选择框架集，如果要选择整个框架集，只需单击框架最外面的边框即可。,9.4,设置框架和框架集属性,9.4.1,设置框架的属性,9.4.2,设置框架集的属性,9.4.1,设置框架的属性,利用“属性”面板可以设置框架和框架集的属性，包括框架名称、框架源文件、框架边框等。,命名选取的框架,框架源文件的保存地址,选择是否显示框架的边框,设置框架滚动条的属性,设置是否能改变框架大小,设置框架边框的颜色,设置框架内容距上下左右边框的距离,9.4.2,设置框架集的属性,该面板中各参数的含义同选中框架时的属性面板基本相同，不同的是在“行”或“列”文本框中可设置框架的行或列的宽度，在“单位”下拉列表框中可选择宽度的单位。,框架集属性,如果要将框架分隔线设置成,1,像素宽,可在框架集属性中将宽度设为,1,且指定颜色,在子框架属性中不设置边框,.,9.5,创建模板,9.5.1,模板概述,9.5.2,创建空白模板文档,9.5.3,使用“资源”面板创建模板,9.5.4,从现有网页文档创建模板,9.5.1,模板概述,使用模板功能可以创建具有相同页面布局、设计风格一致的网页。,模板分为可编辑区域和不可编辑区域两部分。不可编辑区域,包含了页面中的所有元素，构成页面的基本框架，,可编辑区域,是为了添加相应的内容而设置的，在后期维护中，可通过改变模板的不可编辑区域，快速更新整个站点中所有应用了模板的页面布局。,9.5.2,创建空白模板文档,1,）执行,“文件”,|“,新建”,命令；,2,）在弹出的对话框中选择,“空白页”,选项卡，在,“页面类型”,下拉列表框中选择,“,HTML,模板”,选项，在,“布局”,下拉列表框中选项,“无”,选项。单击,“创建”,按钮即可。,9.5.3,使用“资源”面板创建模板,1,）执行,“窗口”,|“,资源”,命令；,2,）打开“资源”模板，在该面板中,单击“模板”按钮,，即显示“模板”样式，再,点击面板右下角的“新建模板”按钮,。,“模板”按钮,“新建模板”按钮,9.5.4,从现有网页文档创建模板,1,）执行,“文件”,|“,打开”,命令，打开网页文件；,2,）再执行,“文件”,|“,另存为模板”,命令；,3,）在弹出的“,另存模板,”对话框中，在“站点”下拉列表中选择站点名，再在“,另存为,”文本框中输入模板的名称，点击“保存”按钮，再在弹出的“更新链接”对话框中，点击“是”即可。,注意,：模板文件扩展名为,.,dwt,。,9.6,定义模板编辑区域,模板的编辑区分为两种：,可编辑区,：由模板创建的文档可以编辑的区域。,锁定区,：由模板创建的文档不能编辑的区域。,注意,：新建模板，默认没有可编辑区,设置步骤：,选择一个区域，执行,“,插入,”,|,“,模板对象,”,|,“,可编辑区域,”,命令。,9.6,定义模板编辑区域,定义可编辑区注意,：,可编辑区可以用表格、单元格、层。,如果多个单元格定义为可编辑区，要分开定义。,必须指定可编辑区，否则由模板生成的网页不能修改。,可编辑区和锁定区是在模板中定义的，起作用在网页中。,在给可编辑区域命名时，不要使用特殊字符，最好也不要使用中文。,9.7,创建与应用库项目,9.7.1,库项目概述,9.7.2,创建库项目,9.7.3,插入库项目,9.7.1,库项目概述,什么是库项目,库项目是一种特殊的,Dreamweaver,文件，我们可以将当前网页中,经常要使用,的任意页面元素定义为库项目，如图像、表格、文本、声音和,Flash,影片等。,创建库项目的好处是可以在多个页面中重复使用它们，每当更改某个库项目的内容时，所有使用了该项目的页面都将同时更新。,模板从整体上控制了文档风格，库项目则从局部上维护了文档的风格。,9.7.2,创建库项目,首先在文档窗口选择需要保存为库项目的对象，然后选择“修改”,“,库”,“,增加对象到库”菜单并输入库项目名称，即可将所选对象添加到库中。,库项目列表,将库项目插入到文档,删除库项目,编辑库项目,新建库项目,预览库项目,9.7.3,插入,库项目,将库项目插入到文档中的操作非常简单，只需在“资源”面板的库窗口中将库项目拖入到文档的适当位置即可。,也可以选中库中的项目，然后单击“资源”面板底部的“插入”按钮，将库项目插入到文档中。,库项目选中状态,普通对象选中状态,9.8,总结,本章主要讲解了框架的基础知识和构成（作用、创建、结构、保存、应用等），其次介绍了模板的知识,(,作用、创建、应用），最后简要讲述了库项目的使用。,