Dreamweaver CS3 网页制作技能进化手册ch8

2050830模板其实是一个文档，可以将其作为创建其他文档的基础；熟练地应用模板，可以轻松快速地制作出多个样式相同、内容不同的网页。模板具有关联性，在对模板文件进行修改并保存后，对所有应用了该模板的网页文档进行更新，即可很方便地一次性完成对一系列网页的修改操作。“库”是可以在多个网页中重复使用的网页对象。同模板相同，只要对库项目进行修改，即可将所有使用了该库项目的网页更新。Lesson.............在创建模板的时候，可以指定模板文档中哪些部分是可编辑区域（可以在应用该模板的文档中进行再编辑，以加入新的内容），哪些部分是锁定区域（不能在应用该模板的文档中进行再编辑）。在新建文档中应用模板后，在可编辑区域内进行相应的编辑，最后保存为需要的网页文档即可。Chapter8\Lesson30\index.html：★★：20：实例效果08206DreamweaverCS3本实例模板中的制作和应用，主要通过“文件”面板来完成。通过本实例，可以学习和掌握在Dreamweaver中创建与应用模板的基本方法。本实例的编辑过程，主要包括以下操作环节。（1）使用DreamweaverCS3打开一个制作好的网页，执行“文件→另存为模板”命令，将网页保存为模板文件。（2）在DreamweaverCS3中通过执行“插入→模板对象→可编辑区域”命令，在模板文件中创建可编辑区域。（3）新建一个网页文件，在“资源”面板中选择要应用的模板，然后单击面板上的“应用”按钮，在新建的网页中应用选择的模板。（4）执行“文件→保存”命令保存文件，按下“F12”键在浏览器中预览效果。本实例使用DreamweaverCS3来创建一个模板，然后在其中设置可编辑区域，并通过“资源”面板，将制作好的模板应用到一个新的网页中。30.3.101DreamweaverCS3Chapter8\Lesson30“start.html”。打开源文件02“→”，“”。打开“另存为模板”对话框20708“另存为模板”对话框中各项参数的功能介绍如下。站点：选择保存模板的站点名称，在其下拉列表中可以选择要保存模板的站点。现存在模板：在列表框中显示“站点”中已经存在的模板。描述：对要保存的模板进行描述。另存为：设置模板的保存名称。03，“”，“”，“”，DreamweaverCS3，。更新链接并保存为模板04“→”，“”，。查看模板文件DreamweaverCS3会自动将模板文件保存在站点的目录下的“Templates”文件夹中，其扩展名为“.dwt”；如果站点下没有“Templates”文件夹，在保存模板文件时会自动创建该文件夹。30.3.2新创建的模板网页中，所有区域都默认为锁定区域，所以要在模板中定义一些可编辑区域，否则，在文档中应用了模板后，将无法进行编辑。208DreamweaverCS305“”，“→→”，“”。“新建可编辑区域”对话框如果在文档中难以准确地选中要选择的表格，可以将光标插入到表格内的任意一个单元格中，然后在DreamweaverCS3的状态栏上选择最右边的table标签，即可轻易地选中表格。选择表格06“”“news”，“”，。设置可编辑区域07“”，“→→”，“”。设置可编辑区域2090808“”“downloads”，“”，。设置可编辑区域09。“→”，。创建可编辑区域30.3.3在DreamweaverCS3中创建好模板后，就可以在网页中应用设置好的模板了。在应用了模板的网页中，可以在可编辑区域中进行文档的编辑修改操作，但是，在先前模板中设置为锁定区域的部分是不能编辑的。应用模板的操作步骤如下。01，“→”，“”。打开“资源”面板在“资源”面板中各项参数的功能介绍如下。图像：单击该按钮，在“资源”面板中显示当前站点的图像资源。210DreamweaverCS3颜色：单击该按钮，在“资源”面板中显示当前站点网页中所使用的颜色。URLS：单击该按钮，在“资源”面板中显示当前站点所有的链接地址。Flash：单击该按钮，在“资源”面板中显示当前站点的Flash影片资源。Shockwave：单击该按钮，在“资源”面板中显示“Shockwave”影片资源。影片：单击该按钮，在“资源”面板中显示所有的影片资源。脚本：单击该按钮，在“资源”面板中显示所有的脚本资源。模板：单击该按钮，在“资源”面板中显示所有的模板资源。库按钮：单击该按钮，在“资源”面板中显示所有的库项目。02“”“”，“moban”。进入“模板”分类在“模板”分类中各项参数的功能介绍如下。模板预览栏：在该栏中显示选中的模板内容，可以对选中的模板进行预览。模板栏：在该栏中显示站点中所有的模板文件。应用：选中模板文件后，单击该按钮即可在文档中应用模板。刷新站点列表：刷新站点中的模板文件。新建模板：单击该按钮后，在模板栏中直接新建一个空白模板文件。新建空白模板编辑：对选中的模板进行编辑。删除：删除选中的模板文件。03“”“moban”，“”，。21108应用选择的模板04，，，。完成网页的制作05“→”，“F12”。预览网页效果Lesson.............31212DreamweaverCS3网页中的文本、图像、表格、表单等对象都可以创建为库项目。但对于链接项目，例如图像，在创建项目时，库将只存储其引用，即只存储一个链接路径，而不会将其源文件存储到库文件夹中。因此，库项目中包括的图像原始文件必须保存在指定的位置，而不能随意移动。Chapter8\Lesson31\index.html：★★：15：“”实例效果本实例中库项目的创建和应用，主要通过“文件”面板来完成。通过本实例，可以学习和掌握在Dreamweaver中创建和应用库项目的基本方法。本实例的编辑过程，主要包括以下操作环节。（1）在DreamweaverCS3中打开一个制作完成的网页文件，选择要创建为库项目的内容，通过执行“修改→库→增加对象到库”命令将其创建为库项目。（2）在“文件”面板中选择要应用的库项目，单击“应用”按钮应用库项目。（3）将库项目分离出来，为分离出来的内容添加行为，然后重新保存为库项目。（4）重新将添加了行为的内容添加为库项目。（5）执行“文件→保存”命令保存文件，按下“F12”键在浏览器中预览效果。“库”是可以在多个网页中重复使用的网页对象。同模板相同，只要对库项目进行修改后，可以对所有使用了该库项目的网页进行内容更新。31.3.101DreamweaverCS3Chapter8\Lesson31“start.html”，。2130802，“→→”，。“→”，“”，“”“”，，。打开“start.html”文件打开“资源”面板每个库项目文件都会保存在站点根目录的“Library”文件夹中，其扩展名为“.Lib”。将页面中的元素创建为库项目时，不能将元素中的CSS样式一齐添加到库项目中，因为库项目只包含〈body〉标签内的元素，而CSS样式则在〈head〉标签内也插入了代码，所以CSS样式无法应用到库中。03，“→→”，。创建库项目31.3.2需要在文档中插入库项目时，对该项目的引用和实际内容都将一起插入到文档中。在页面中插入一个库项目的具体操作步骤如下。214DreamweaverCS301DreamweaverCS3Chapter8\Lesson31“start_1.html”。02，“”，“”，Untitled3，“”，。选择库项目在DreamweaverCS3中，还可以在“资源”面板中选择“库”按钮，然后在“库”分类中将库项目直接拖动到页面中，一样可以完成库项目的插入。03，“Untitled4”，“”，。插入库项目31.3.3因为“行为”是由一些JavaScript代码组成，而库项目只能包含body标签中的元素，所以在编辑库项目时，“行为”面板是无法使用的。要在库项目中加入行为，就只能通过其他办法来完成，其操作步骤如下。2150801“”，“”，。，“”，“”，。插入库项目02，“”，，“URL”，，。新建一个行为03“”，，“”，。删除库项目04，“→→”，“”，。216DreamweaverCS3选择“增加对象到库”命令05“→”，“F12”。预览网页效果