《网页制作基础5PPT》由会员分享，可在线阅读，更多相关《网页制作基础5PPT（76页珍藏版）》请在金锄头文库上搜索。
1、第六章 使用模板和库项目,第一节 创建模板 第二节 设置模板 第三节 应用模板 第四节 使用库项目 第五节 上机练习 本章小结 习题六,第一节 创建模板一个网站中的页面往往具有相同的结构和统一风格，为了提高工作效率，在Dreamweaver中提供了模板和库。模板由可编辑区域和不可编辑区域两部分组成：不可编辑区域的内容通常不可以改变，它一般是网页标题、导航条和框架结构等；可编辑区域的内容是可以更改的，它一般是网页中经常需要更新的部分，如每日新闻、最新列表等。,对模板的操作基本都可以在资源面板中完成，选择“窗口”“资源”命令，打开资源面板，如图6.1.1所示。,图6.1.1 资源面板,该面板包括4
2、个部分，现分别介绍如下：（1）该面板的上半部分是模板预览窗口，用来显示选定模板的内容。（2）该面板的下半部分是模板列表框，用来显示该站点内模板文件的名称、大小等相关信息。（3）该面板左侧是类别列表，有图像、颜色、超链接、Flash、Shockwave、影片、脚本、模板和库9种类别，单击对应的按钮可切换其类别。,（4）该面板顶部的单选按钮用于选择该面板左侧的不同类型的文件是出现在站点中，还是在“我的收藏”文件夹中。一、模板的创建模板的创建可通过直接创建或将网页另存为模板两种方法来实现。1直接创建模板（1）选择“窗口”“资源”命令，打开资源面板。,（2）单击资源面板中的“模板”按钮，将该面板的类别
3、切换到模板类型，如图6.1.2所示。,图6.1.2 资源面板,（3）单击该面板上的“扩展”按钮，在弹出的下拉菜单中选择“新建模板”命令，则新建一个模板文件，其名称为可编辑状态。（4）在该面板中为该模板文件命名。（5）单击该面板底部的“编辑”按钮，可打开该模板。2将网页另存为模板（1）打开需要将其设置为模板的网页。,（2）删除网页中需要更改内容的区域，保留固定不变的区域。（3）为该网页设置可编辑区域。（4）选择“文件”“另存为模板”命令，弹出“另存模板”对话框，如图6.1.3所示。设置可编辑区域是为网页分配可以更改的区域，其设置方法将在以后的学习中进行讲解。（5）在该对话框中进行参数设置，并为该
4、模板命名。（6）单击“保存”按钮即可。,二、创建嵌套模板在网页设计中为了更加精确地布置页面，往往会使用嵌套模板，嵌套模板是通过另存为一个基本模板来实现的。（1）选择“窗口”“资源”命令，在打开的资源面板中单击“模板”按钮，将该面板的类别切换到模板类型。（2）在该面板中选中需要插入嵌套模板的模板，单击该面板中的“扩展”按钮，在弹出的下拉菜单中选择“从模板新建”命令，得到一个从该模板创建的网页。,（3）选择“插入”“模板对象”“创建嵌套模板”命令，弹出“另存模板”对话框，如图6.1.4所示。,图6.1.3 “另存模板”对话框 图6.1.4 “另存模板”对话框,（4）在该对话框中的“另存为：”文本框
5、中输入嵌套模板的名称，单击“保存”按钮可将新建的网页自动转换为模板。（5）将鼠标光标置于该模板中需要插入嵌套模板的可编辑区域内。（6）在该区域插入可编辑区域等其他的内容。（7）选择“文件”“保存”命令，将设置的内容保存。注意：模板文件的后缀名是.dwt的文件。,第二节 设置模板对于创建好的模板，还需要对其进行设置，该操作包括在模板中设置可编辑区域、可编辑标签属性和重复区域等。一、设置可编辑区域模板由可编辑区域和不可编辑区域两部分组成，直接创建的模板所建立的网页是不可以进行编辑的，要利用模板创建网页必须在模板中设置可编辑区域。设置可编辑区域包括创建可编辑区域和删除可编辑区域两部分内容。,1创建可
6、编辑区域在网页中创建可编辑区域可分为两种情况：一种是在页面中插入一个空的可编辑区域；另一种是将页面中已有的部分内容转换为可编辑区域。（1）插入空的可编辑区域的方法如下：1）将鼠标光标置于页面中需要插入可编辑区域的位置。,2）选择“插入”“模板对象”“可编辑区域”命令，在弹出的“新建可编辑区域”对话框中为插入的区域命名，单击“确定”按钮即可，如图6.2.1所示。,图6.2.1 “新建可编辑区域”对话框,（2）将页面中已有的一部分内容转换为可编辑区域的方法如下：1）在页面中选择要设置为可编辑区域的内容。2）选择“插入”“模板对象”“可编辑区域”命令，在弹出的“新建可编辑区域”对话框中为插入的区域命
7、名，单击“确定”按钮即可。,注意：定义了可编辑区域的对象后，在该对象插入可编辑区域的位置将出现一个蓝色的标签，标签上显示的文字是该区域的名称，单击标签可选中该区域。2删除可编辑区域删除可编辑区域的方法如下：（1）将鼠标光标置于需要删除的可编辑区域内。（2）选择“修改”“模板”“删除模板标记”命令，则光标所在的可编辑区域将被删除。,二、设置可编辑标签属性设置可编辑标签属性是指将网页一些标签的属性设置为可编辑状态，从而在使用模板的时候，可对这些属性进行修改，如将网页背景图像设置为可编辑状态，这样由模板创建的网页，其背景图像也可以替换。设置可编辑标签属性包括创建可编辑标签属性和使可编辑标签属性不可编
8、辑两部分内容。,1创建可编辑标签的属性创建可编辑标签属性的方法如下：（1）打开需要设置标签的模板。（2）在文档编辑窗口的状态栏中单击需要创建可编辑属性的标签。（3）选择“修改”“模板”“令属性可编辑”命令，弹出“可编辑标签属性”对话框，如图6.2.2所示。,图6.2.2 “可编辑标签属性”对话框,（4）在该对话框中的“属性：”下拉列表中选择要编辑的属性，如果要编辑的属性不在该下拉列表中，可单击其后的“添加”按钮将其添加进入。（5）选中“令属性可编辑”复选框，则其下的各个选项为可编辑状态。（6）在“标签”文本框中为该属性命名，命名的规则与框架命名规则相同。（7）在“类型”下拉列表中选择编辑该属性
9、的值的类型，它有以下5种类型：,1）文本：选择此项，可让用户为属性输入文本值。例如，使用带有align属性的文本，就可以将该属性的值设置为左对齐、右对齐或居中对齐。2）URL：选择该选项，可允许设置网页中插入元素的链接。例如，修改页面中插入图像的文件路径。3）颜色：选择该选项，可使用颜色面板选择颜色，例如，允许设置网页、表格等对象的颜色。,4）真/假：选择该选项，可设置对象是否可用。5）数字：选择该选项，可让模板的使用者输入数值以更新属性，如更改图像的高度或宽度值。（8）在“默认”文本框中设置由模板生成网页的默认值。2使可编辑标签属性不可编辑对于设置为可编辑属性的标签，如果不再需要还可以再将其
10、设置为不可编辑状态，其方法如下：,（1）在文档窗口的状态栏中选中要设置为不可编辑状态的标签。（2）选择“修改”“模板”“令属性可编辑”命令，弹出“可编辑标签属性”对话框，在该对话框中的“属性”下拉列表中选择要设置为不可编辑状态的属性。（3）将该对话框中的“令属性可编辑”复选框设置为未选中状态即可。三、设置重复区域重复区域是指在文档内可重复添加的区域，其创建方法如下：,（1）打开需要创建重复区域的模板，在文档窗口中选中需要插入重复区域的对象。（2）选择“插入”“模板对象”“重复区域”命令，则文档中将出现一个淡蓝色的标签，标签上显示的是重复区域的名称，如图6.2.3所示。（3）将鼠标光标置于插入的
11、重复区域标签内，选择“插入”“模板对象”“可编辑区域”命令，在重复区域内创建可编辑区域，如图6.2.4所示。,图6.2.3 插入重复区域 图6.2.4 插入可编辑区域,（4）选择“窗口”“资源”命令，在打开的资源面板中单击“模板”按钮，将该面板的类别切换到模板类型。（5）在该面板中选择插入了重复区域的模板，单击该面板上的“扩展”按钮，在弹出的下拉菜单中选择“从模板新建”命令，得到一个从该模板创建的网页。（6）在模板创建的网页的重复区域标签旁边则出现按钮，如图6.2.5所示。,（7）单击重复区域标签旁的按钮，可添加重复的内容，如图6.2.6所示。单击按钮可删除重复区域添加的内容。单击和按钮可移动
12、重复区域添加的内容的位置。,图6.2.5 在普通网页中查看重复区域 图6.2.6 添加重复的内容,（8）在插入了重复区域的模板中单击重复区域的标签，选择“修改”“模板”“删除模板标记”命令可删除该重复区域。注意：重复区域不是可编辑区域，若要使重复区域的内容可编辑，则必须在重复区域内插入可编辑区域。四、设置重复表格设置重复表格就是设置一个可以随意重复使用的行，其创建步骤如下：（1）打开需要插入重复表格的模板。,（2）将鼠标光标置于需要插入重复行的位置上，选择“插入”“模板对象”“重复表格”命令，弹出“插入重复表格”对话框，如图6.2.7所示。,图6.2.7 “插入重复表格”对话框,（3）在该对话
13、框中对表格的行数、列数、表格宽度、边框粗细、单元格边距和单元格间距进行设置。（4）在“起始行”和“结束行”文本框中设置插入的重复行中可编辑区域的起止位置，在“起始行”文本框中设置为包括在重复区域内的第一行，在“结束行”文本框中设置包括在重复区域内的最后一行。（5）在“区域名称”的文本框中输入插入重复表格中重复区域的名称，单击“确定”按钮，则在该模板中插入一个重复表格，如图6.2.8所示。,（6）在打开的资源面板中选择模板类型，单击该面板上的“扩展”按钮，在弹出的下拉菜单中选择“从模板新建”命令，得到一个从该模板创建的网页。（7）在该网页中添加表格重复的行。,图6.2.8 插入重复表格,第三节
14、应用模板创建的模板最终还是要应用在网页中，应用模板制作网页可分为两种情况：一种是由模板开始新建网页；另一种是为已有的网页套用模板。利用模板制作网页最大的好处就是对模板进行修改后，可通过更新，使应用了该模板的页面都发生相应的变化。,一、由模板新建网页利用模板制作网页的方法如下：（1）选择“窗口”“资源”命令，打开资源面板。（2）在打开的资源面板中单击“模板”按钮，将该面板的类别切换到模板类型。（3）在该面板中选择要应用的模板。,（4）用鼠标右键单击该面板中选中的模板，在弹出的快捷菜单中选择“从模板新建”命令，则可得到一个由模板生成的网页，在该网页中只能对可编辑区域进行编辑。二、为已有的网页套用模
15、板为已有的网页套用模板的方法如下：（1）打开要应用模板的网页。,（2）选择“修改”“模板”“应用模板到页”命令，弹出“选择模板”对话框，如图6.3.1所示。,图6.3.1 “选择模板”对话框,（3）在“站点”下拉列表中选择要使用的模板所在的站点。（4）在“模板”列表框中选择要使用的模板。（5）单击“选定”按钮，弹出“不一致的区域名称”对话框，如图6.3.2所示。,图6.3.2 “不一致的区域名称”对话框,（6）在该对话框中的“将内容移到区域：”下拉列表中选择将该网页的内容插入到要应用的模板的哪个可编辑区域。（7）单击“确定”按钮则该网页就应用了已有的模板。注意：如果觉得该网页应用的模板不合适，
16、可选择“编辑”“撤消应用模板”命令对其进行删除。需要对模板中的不可编辑区域进行编辑，可选择“修改”“模板”“从模板中分离”命令，将该网页与模板进行分离，使之成为普通网页。,三、更新应用模板的网页对模板进行修改之后，接下来就需要对所有应用了该模板的网页进行更新，其方法如下：（1）对模板修改完成之后，选择“修改”“模板”“更新页面”命令，弹出“更新页面”对话框，如图6.3.3所示。,图6.3.3 “更新页面”对话框,（2）如果在该对话框中的“查看：”下拉列表中选择“整个站点”选项，则在其后的下拉列表中要选择更新哪个站点中使用模板生成的网页，如果在该对话框中的“查看：”下拉列表中选择“文件使用”选项，则在其后的下拉列表中选择要更新哪个模板生成的网页。（3）在“更新”选项区中设置更新的对象是模板还是库。（4）选中“显示记录”复选框可显示更新页面时相关的文件信息。,第四节 使用库项目库项目是一种特殊的Dreamweaver 文件，通过库项目可存储各种各样的网页元素，如图像、表格和Flash等。在制作不同布局的网页时常常碰到需要重复制作的部分，如版权内容等，对于这些元素用户
