第六章 模板与库

第六章模板、库、命令本章要点6.1模板6.1.1创建模板6.1.2编辑模板6.1.3使用模板6.2库6.3命令6.1模板用模板可以创建具有统一结构和外观的网站。在需要更改网站的整体外观时，只要对相应的模板文件稍作修改，即可对整个网站进行快速更新。使用模板创建和更新网页应用模板创建和更新网页的基本流程是：创建模板，使用模板设计网页，通过修改模板更新网页。1.创建模板从空白HTML文档开始创建模板把现有的HTML文档存为模板创建模板6.1.1创建模板创建模板一般有以下三种方法。1.从新文档创建模板(1)选择【文件】|【新建】命令，弹出【新建文档】对话框，在对话框中选择【常规】选项卡中【类别】列表框中的【模板页】选项，在【模板页】列表框中选择【HTML模板】选项。(2)单击【创建】按钮，创建一空白模板网页。(3)选择【文件】|【另存为】命令，弹出Dreamweaver8提示框。(4)单击【确定】按钮，弹出【另存为】对话框，在对话框中的【文件名】文本框中输入index，【文件类型】选择模板文件(*.dwt)，单击【保存】按钮，即可完成模板的创建。2.从资源管理器中创建模板3.从现在文档创建模板6.1.2编辑模板模板内分为可编辑区及不可编辑区，缺省是不可编辑区。不可编辑区是指引入模板的文档而言；在模板环境下（.dwt）均可编辑。可编辑区!--TemplateBeginEditablename=aaa--可编辑区的内容!--TemplateEndEditable--不可编辑区普通网页的不可编辑区在Dreamweaver代码编辑器中以灰色字体显示，不能被修改，但在其他编辑器（如记事本）中不可编辑区代码是可以修改的。6.1.2编辑模板建立可编辑区做表格，划分区域。选中一区域－“插入”面板|“常用”选项卡|“可编辑区”按钮删除可编辑区域指向可编辑区执行右键菜单“模板”|“删除模板标记”存盘可以存成*.htm或*.dwt。6.1.3使用模板1．使用模板和脱离模板使用：从“资源”面板中的“模板”类别中选中要插入的模板，直接拖动到网页中脱离：如果要修改应用了模板的文档中的不可编辑区域，须将文档和模板分离。菜单命令“修改”|“模板”|“从模板中分离”更新模板时，已分离的文档不再会随之更新！6.1.3使用模板2．用模板更新网站文档中只有不可编辑的部分才会随模板更新修改模板并执行菜单命令“文件”|“保存”【例6-1】制作“家禽生产学”网站的模板及使用该模板的两个网页，修改模板（在模板上增加一个动画）后，更新模板及使用该模板的网页。6.2库库项目可以包含文本、表格、图象、Java程序、插件、Active元素；当修改某个库项目后，整个网站包含该库项目的网页均自动更新。建立库项目：拖入“资源”面板的“库”中（起名）。若用Ctrl＋拖入，则文档中元素仍是文档元素，不是库元素，无指针。应用库项目：拖出即可。编辑库项目：双击库中目标对象—编辑库项目—存盘“文件”|“保存”—更新页面窗口。更新：“修改”|“库”|“更新当前页”或“修改”|“库”|“更新页面”库项目“属性”面板：脱离库【例6-2】在网页中插入一个图片，使其成为库项目。在库编辑环境中修改库项目后，更新网页。将网页文档窗口的库项目“引用”脱离库项目，再修改库项目，观察文档窗口相应内容有无变化。可以从文档body标签之间的任意元素创建库项目，这些元素包括文本、表格、表单、JavaApplets、插件、ActiveX元素、导航栏和图像。创建库项目具体操作步骤如下。(1)选择【文件】|【新建】命令，弹出【新建文档】对话框。(2)选择【常规】选项卡中的【类别】列表框的【基本页】选项，在【基本页】列表中选择【库项目】选项。(3)单击【创建】按钮，创建一个空白网页。(4)选择【文件】|【另存为】命令，弹出【另存为】对话框，在对话框中的【文件名】文本框中输入名称top.lbi，【保存类型】选择库文件。(5)将鼠标指针置于页面中，选择【插入】|【表格】命令，插入2行1列的表格。(6)将鼠标指针置于第1行单元格中，选择【插入】|【图像】命令，弹出【选择图像源文件】对话框，在对话框中选择相应的图像文件，单击【确定】按钮，插入图像，如图9.33所示。(7)将鼠标指针置于第2行单元格中，在【属性】面板中单击【背景】文本框后的按钮，弹出【选择图像源文件】对话框，在对话框中选择相应的背景图像，单击【确定】按钮，插入背景图像，将【高】设置为150，如图9.34所示。(8)选择【文件】|【保存】命令，即可创建库项目。1．应用Dreamweaver8内置命令创建相册–（1）打开“创建网站相册”对话框单击“命令”→“创建网站相册”菜单命令，弹出“创建网站相册”对话框，如图6-2-3所示（还没有进行相关的设置）。6.3命令–（2）“创建网站相册”对话框中的各选项的作用“相册标题”文本框：输入相册的标题，该标题是必须填入的。“副标信息”文本框：输入相册的副标题信息。“其他信息”文本框：输入相册的其他说明信息。“源图像文件夹”栏：选择源图像文件所在的文件夹（名称为英文）。“目标文件夹”栏：选择创建的相册放置的目录（名称为英文）。“缩略图大小”下拉列表框：缩略图的大小。“显示文件名称”复选框：选中它后，将会在缩略图下方显示每个图片的文件名。利用这一功能，可以将图片文件名设为对该图片的简单说明，这样，最后生成的页面就会包含图片说明了。不过该软件对中文说明的支持不是很好，最好使用英文说明。“列”文本框：输入图像的列数。默认值是5，即每行显示5张缩略图。“缩略图格式”下拉列表框：用来选择缩略图的格式。Dreamweaver8会自动产生选定格式的缩略图。“相片格式”下拉列表框：用来选择源图像显示的格式。源图像可能是各种格式的，Dreamweaver8可以将它们转化为统一的格式。“小数位数”文本框：用来输入图像缩放的百分比。“为每张相片建立导览页面”复选框：选中该复选框后，Dreamweaver8将为每个图像生成单独的导航页。TheEnd