网页制作基础

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）如果在该对话框中的“查看：”下拉列表中选择“整个站点”选项，则在其后的下拉列表中要选择更新哪个站点中使用模板生成的网页，如果在该对话框中的“查看：”下拉列表中选择“文件使用”选项

17、，则在其后的下拉列表中选择要更新哪个模板生成的网页。（3）在“更新”选项区中设置更新的对象是模板还是库。（4）选中“显示记录”复选框可显示更新页面时相关的文件信息。,第四节 使用库项目库项目是一种特殊的dreamweaver 文件，通过库项目可存储各种各样的网页元素，如图像、表格和flash等。在制作不同布局的网页时常常碰到需要重复制作的部分，如版权内容等，对于这些元素用户可将其转换为库项目放置在库中，在使用时将其调出插入到其他网页之中即可。,库项目存储在每个站点根目录下的library子目录中，库项目的扩展名为.lbi。和模板一样，如果对库中的库项目进行修改，使用库项目的网页也将发生相应的改

18、变。一、创建库项目库项目的大部分操作可在库面板中完成，选择“窗口”“资源”命令，在打开的资源面板中单击“库”按钮，可将该面板的类别切换到库类型，如图6.4.1所示。,库面板上方为预览窗口，用于预览选中的库项目的外观，该面板下方为库项目列表，用于显示库中各项目的名称。,图6.4.1 切换到库类型的资源面板,创建库项目可在该面板中创建一个新的库项目或将已有网页中的某些对象转换为库项目来实现。1创建新的库项目创建新的库项目的方法如下：（1）选择“窗口”“资源”命令，在打开的资源面板中单击“库”按钮，将该面板的类别切换到库类型。（2）单击该面板底部的“新建库项目”按钮，则得到一个库项目，其名称处于可编

19、辑状态。,（3）为创建的该库项目命名。（4）双击该库项目，在打开的库项目窗口中对其进行编辑即可。2将网页中的对象转换为库项目将网页中的已有对象转换为库项目的方法如下：（1）选中网页中需要转换为库项目的对象。（2）选择“插入”“库”“增加对象到库”命令，则该对象可自动转换为库项目并出现在资源面板中的库类型中。,（3）在资源面板中为转换的库项目命名。二、使用库项目对于创建的库项目可将其作为对象插入到网页中，其插入方法如下：（1）将鼠标光标置于网页中需要插入库项目的位置。（2）在资源面板的库类型列表中选择需要使用的库项目。（3）单击该面板底部的“插入”按钮即可。,三、更新库项目对库中的库项目进行修改

20、后，则需要对使用了库项目的所有的网页进行更新，其方法如下：（1）在资源面板中的库类型列表中选择需要修改的库项目。（2）双击该库项目，打开该库项目的编辑窗口。（3）在该窗口中对库项目进行修改。,（4）选择“文件”“保存”命令对所进行的修改进行保存，则会弹出“更新库项目”对话框，如图6.4.2所示。（5）单击该对话框中的“更新”按钮可将所做的修改应用到插入了该库项目的网页中。单击“不更新”按钮则不更新应用了该库项目的网页。,图6.4.2 “更新库项目”对话框,第五节 上机练习本节将通过制作一个模板来帮助用户掌握本章讲述的内容。（1）选择“窗口”“资源”命令，在打开的资源面板中单击“模板”按钮，将该

21、面板的类别切换到模板类型。（2）单击该面板上的“扩展”按钮，在弹出的下拉菜单中选择“新建模板”命令，则得到一个模板，将其命名为“company”。,（3）单击该面板底部的“编辑”按钮，打开该模板的编辑窗口。（4）选择“修改”“页面属性”命令，在弹出的“页面属性”对话框中的“分类”选项区中选择“外观”选项，设置背景颜色为#6b849b，文本颜色为#202b3f，字体大小为9点，具体参数设置如图6.5.1所示。,图6.5.1 “页面属性”对话框,（5）选择“插入”“表格”命令，在弹出的“表格”对话框中插入一个2行2列的表格，设置“表格宽度”为650，“边框粗细”为0，“单元格边距”为0，“单元格间

22、距”为0，具体设置如图6.5.2所示。,图6.5.2 “表格”对话框,（6）确定该表格为选中状态，在其属性面板中设置其对齐方式为居中对齐。（7）选中该表格的第二行，单击其属性栏中的“合并所选单元格”按钮，将该行所有单元格合并，如图6.5.3所示。,图6.5.3 合并单元格,（8）将鼠标光标置于该表格第一行的第一个单元格内，选择“插入”“图像”命令，在弹出的“选择图像源文件”对话框中选择插入的图像，如图6.5.4所示。,图6.5.4 插入图像,（9）将鼠标光标置于该表格第一行的第二个单元格内，在其属性面板中设置该单元格在水平方向和垂直方向上的对齐方式为居中对齐，并设置其背景颜色为#cccccc，

23、如图6.5.5所示。,图6.5.5 单元格属性面板,（10）确定鼠标光标的位置不变，选择“插入”“表格”命令，在弹出的“表格”对话框中插入一个5行1列的表格，设置“表格宽度”为76，“边框粗细”为0，“单元格边距”为0，“单元格间距”为0，具体设置如图6.5.6所示。,图6.5.6 “表格”对话框,（11）在步骤（10）中插入的表格中输入文字，如图6.5.7所示。,图6.5.7 输入文字,（12）将鼠标光标置于该表格第二行的单元格内，在其属性面板中设置其背景颜色为#cccccc。（13）确定鼠标光标的位置不变，选择“插入”“表格”命令，在弹出的“表格”对话框中插入一个1行8列的表格，设置“表格

24、宽度”为650，“边框粗细”为1，“单元格边距”为2，“单元格间距”为0，具体设置如图6.5.8所示。,图6.5.8 “表格”对话框,（14）在步骤（13）中插入的表格中输入文字，并设置该文字的大小为10点，单击属性面板中的“粗体”按钮，设置其为粗体样式，该文字的字体为“arial, helvetica, sans-serif”，如图6.5.9所示。,图6.5.9 输入文字并对其进行设置,（15）选中步骤（13）中插入的表格的所有单元格，在其属性面板中设置文字在水平方向上的对齐方式为居中对齐。（16）将鼠标光标置于步骤（5）中插入的表格外，选择“插入”“表格”命令，在弹出的“表格”对话框中插入

25、一个4行2列的表格，设置“表格宽度”为650，“边框粗细”为0，“单元格边距”为2，“单元格间距”为0，具体设置如图6.5.10所示。,图6.5.10 “表格”对话框,（17）确定该表格为选中状态，设置该表格的对齐方式为居中对齐，选中除第一行以外所有的行，在其属性面板中设置其背景颜色为白色，如图6.5.11所示。,图6.5.11 设置表格的对齐方式和单元格背景颜色,（18）合并第二行和第四行的单元格，如图6.5.12所示。,图6.5.12 合并单元格,（19）在第二行和第三行的第一个单元格中输入文字，如图6.5.13所示。（20）将鼠标光标置于第三行的第二个单元格内，选择“插入”“图像”命令，

26、在弹出的“选择图像源文件”对话框中选择需要插入的图像，为该单元格插入图像。（21）选中插入的该图像，在其属性面板中设置其对齐方式为右对齐，效果如图6.5.14所示。,图6.5.13 输入文字 图6.5.14 设置图像的对齐方式,（22）选中该表格的第三行中第一个单元格的文字，在其属性面板中的“格式”下拉列表中选择“标题1”选项，在“垂直”下拉列表中选择“底部”选项，其效果如图6.5.15所示。（23）将鼠标光标置于步骤（16）中插入表格的最后一行，选择“插入”“表格”命令，在弹出的“表格”对话框中插入一个1行1列的表格，设置“表格宽度”为500，“边框粗细”为0，“单元格边距”为2，“单元格间

27、距”为0，具体设置如图6.5.16所示。,图6.5.15 设置文字的格式图6.5.16 “表格”对话框,（24）确定插入的表格为选中状态，设置其对齐方式为居中对齐，其背景颜色为#cccccc。（25）在步骤（24）中插入的表格中输入文字，如图6.5.17所示。,图6.5.17 输入文字,（26）在打开的资源面板中单击“库”按钮，可将该面板的类别切换到库类型。（27）单击该面板底部的“新建库项目”按钮，则得到一个新的库项目，为该库项目命名为“版权信息”。（28）双击该库项目，打开其编辑窗口。,（29）在其库项目编辑窗口中进行设置，效果如图6.5.18所示。,图6.5.18 编辑库项目,（30）返回到模板编辑窗口，将鼠标光标置于步骤（16）中插入的表格外，选择“插入”“表格”命令，在弹出的“表格”对话框中插入一个1行1列的表格，