《中文Dreamweaver MX案例教程 教学课件 ppt 作者 杜金 等 第7章 模板、命令和“资源”面板》由会员分享，可在线阅读，更多相关《中文Dreamweaver MX案例教程 教学课件 ppt 作者 杜金 等 第7章 模板、命令和“资源”面板（68页珍藏版）》请在金锄头文库上搜索。
1、第7章,模板、命令和“资源”面板,第2页,主要内容,“商品介绍”网页模板 “商品介绍”网页 批量更新网页 “版画世界”相册网页 利用“属性”面板定义命令 “颜色渐变文字”网页 创建“库” 通过修改库项目修改网页 利用Anfy软件制作鼠标,第3页,“商品介绍”网页模板,使用Dreamweaver制作商品介绍网页模板，其显示效果如图所示。其中，“商品介绍”和“商品图像”两个区域为可编辑区域，其他区域为不可编辑区域。,第4页,“商品介绍”网页模板,第5页,技术分析,模板就是网页的样板，它有可编辑区和不可编辑区。不可编辑区的内容是不可以改变的，通常为标题栏、网页图标、框架结构、链接文字和导航栏等。可编
2、辑区的内容可以改变，通常为具体的文字和图像内容，例如：每日新闻、最新软件介绍、趣谈等。 通常在一个网站中有成百上千的页面，而且每个页面的布局也常常相同，尤其是同层次的页面，只有具体文字或图像内容不同。将这样的网页定义为模板后，相同的部分都被锁定，只有一部分内容可以编辑，避免了对无需改动部分的误操作。,第6页,操作步骤,在Dreamweaver MX中单击“文件”“新建”，弹出“新建文档”对话框。在“常规”选项卡的“类别”列表框中选择“基本页”，在右边的“基本页”列表框中选择“HTML模板”。单击“创建”按钮，新建一个“HTML模板”。 在网页单击“修改”“页面属性”，弹出“页面属性”对话框。在
3、对话框中将“标题”改为“商品介绍”，将“背景图像”定义为“PICTURE/20.GIF”。单击“确定”按钮，完成页面属性设置。 在页面的顶部新建一个层，在层内部输入“新世纪超市商品介绍”，设置成“黑体”、标题一、居中对齐格式。在网页左边插入一个新层，用于输入商品介绍文字。,第7页,“新建文档”对话框,第8页,使用两个层实现立体效果,第9页,接上,在“商品介绍”层的右边新建一个层，并将层的背景颜色设置成“黑色”，再建一个相同大小的层，并将背景颜色设置成“白色”。并移动到黑色层的上面，形成立体效果，用于插入商品图像。 在图像层的下面绘制一个层，在层内输入“返回”文字，并建立到“INDEX.HTM”
4、的链接。 在网页的最下面绘制一个新层，在层内输入“欢迎光临本超市，如果对商品有任何疑问，可以与服务中心联系。”和邮件地址“电子邮件地址：”并建立邮件链接。,第10页,接上,将光标移到“商品介绍”层内，单击“插入”“模板对象”“可编辑区域”菜单命令，弹出“新建可编辑区域”对话框。在名称文本框中输入“商品介绍”，单击“确定”按钮，完成“新建可编辑区域”操作。 利用同样的方法，在“商品图像”层内插入第二个可编辑区域，并将名称定义为“商品图像”。 （单击“文件”“另存为模板”菜单命令，弹出“另存模板”对话框。在“另存为”文本框中输入“商品介绍”，单击“保存”按钮，完成保存模板操作。,第11页,“新建可
5、编辑区域”对话框,第12页,“另存模板”对话框,第13页,“商品介绍”网页,利用“商品介绍”模板制作的网页在浏览器中的显示效果。,第14页,“商品介绍”网页在浏览器中的显示效果,第15页,技术分析,在利用模板创建新的网页时，只需将模板调出，在可编辑区插入内容即可。当更新网页时，只需将模板调出，在可编辑区内更换新内容即可。 在对网站进行改版时，因为网站的页面非常多，如果分别修改每一页，工作量无疑非常大，但如果使用了模板，只要修改模板，所有应用模板的页面都可以自动更新。 修改已有的HTML文件，可使之成为模板。模板可以自动保存在本地站点根目录下的Template目录内，如果没有该目录，系统可自动创
6、建此目录。模板文件的扩展名字为.dwt 。,第16页,操作步骤,单击“文件”“新建”菜单命令，弹出“从模板新建”对话框，单击“模板用于”栏内的站点名称，即可在“预览”栏内看到模板的缩图。 将“当模板改变时更新页面”复选框选中，表示将来模板被修改后，所有应用该模板的页面将会自动更新。单击“创建”按钮，创建用“商品介绍”模板制作的网页。 在打开的“商品介绍”模板网页中，将光标移到“商品介绍”可编辑区域中，删除“商品介绍”文字，并将事先编辑好的商品介绍文字复制到此。将光标移到“商品图像”可编辑区域中，将“商品图像”文字删除，插入“PICTURE/MIAN.GIF”图像文件，完成后的显示效果。 单击“
7、文件”“保存”菜单命令，将网页文档保存为“7-2.HTM”，按【F12】键，在浏览器中查看使用“商品介绍”模板制作网页的显示效果。,第17页,“从模板新建”对话框,第18页,利用“商品介绍”模板制作的网页,第19页,批量更新网页,手动更新 将页面与模板分离 输出没有模板标记的站点 将HTML标记属性设置为可编辑,第20页,更新网页中的电子邮件地址前后的显示效果,第21页,技术分析,模板可以更新，例如改变可编辑区域和不可编辑区域，改变可编辑区域的名字，更换页面的内容等。更新模板后，系统可以将由该模板生成的页面自动更新。当然也可以不自动更新，以后由用户手动更新。,第22页,操作步骤,打开使用“商品
8、介绍”模板制作的“7-2.HTM”网页文档。单击“修改”“模板”“打开附加模板”菜单命令，调出“商品介绍.dwt”模板文档。 将网页底部的“电子邮件地址：”选中，将属性栏的“地址”修改为“mailto:”，将网页中的“”文字修改为。 单击“文件”“保存”菜单命令，弹出“更新模板文件”对话框，在列表框中将列出修改模板后需要更新的所有文档名称。单击“确定”按钮，弹出“更新页面”对话框并自动对所有套用“商品介绍”模板的网页进行更新。 在“更新页面”对话框中单击“关闭”按钮，完成批量更新网页操作，打开“7-2.HTM”网页文档，按【F12】键查看更新后的网页在浏览器中的显示效果,第23页,“版画世界”
9、相册网页,“创建网站相册”对话框中各选项含义 设置配色方案 利用Fireworks优化图像 清除HTML无效标记,第24页,实例效果,创建站点相册后，主页在浏览器中的显示效果如图所示，浏览页面在浏览器中的显示效果如图所示。在主页中单击图像后，链接到相应的浏览页面，显示出该图像的原始图，图像名称以及到“上一个”、“首页”和“下一个”的链接。,第25页,“版画世界”网页的主页,第26页,“版画世界”网页的浏览页面,第27页,技术分析,有许多网站是以图像为主要内容。这些网站上往往先显示图像的缩略图，浏览者如果感兴趣的话，单击缩略图就可以浏览原图了。当一个网站的图像非常多时，如果要分别制作每个页面，工
10、作量是很大的。创建相册命令可以自动创建这样的一系列页面，使网页制作变得非常简单。,第28页,操作步骤,新建一个网页文档，单击“命令”“创建网站相册”菜单命令，弹出“创建网站相册”对话框。 在相册标题文本框中输入“版画世界”，在副标信息文本框中输入“带你进入版画的大千世界”。 在“源图像文件夹”文本框后面单击“浏览”按钮，弹出“请选择一个文件夹”对话框。在对话框中选择“版画”目录下的GIF文件夹，单击“选择”按钮，完成“选择文件夹”操作，在“源图像文件夹”文本框中显示出文件夹地址。利用同样方法设置一个“目标文件夹”。,第29页,“创建网站相册”对话框,第30页,“请选择一个文件夹”对话框,第31
11、页,接上,单击“确定”按钮完成设置，Dreamweaver MX即自动启动Fireworks MX，并自动对指定的源文件夹内图像进行处理，在指定的目标文件夹中生成缩略图、原图和相应的网页等，也就生成了相应的相册。 将“版画世界”文字设置成居中对齐。单击“文件”“保存”菜单命令，将网页文档保存后，按【F12】键，在浏览器中查看“版画世界”网页的显示效果。,第32页,利用“属性”面板定义命令,利用“属性”面板定义命令后，在“编辑命令列表”对话框中将出现一个新的命令。其中“标题一”命令为新建立的命令。,第33页,“编辑命令列表”对话框,第34页,技术分析,“历史记录”面板记录了用户的每一步操作。利用
12、该面板可以撤消一些操作。例如：需要返回第1步操作后的效果时，只需将“历史记录”面板左侧的指针拖曳至第2步即可。 利用“历史记录”面板重复步骤只能应用于同一个文件内的对象，如果要应用到其他文件，则可以将这些步骤保存为命令，在其他文件中执行“命令”菜单中的相应命令，调用这些步骤。,第35页,操作步骤,新建一个网页文档。在文档内部输入“命令”文本，将“动作”文本选中后，在属性栏中将格式设置成“标题一”，字体设置成“黑体”，颜色设置成“蓝色”。将光标移到“动作”文本后面，在属性栏中将对齐方式设置成“居中对齐”。 单击“窗口”“其他”“历史纪录”菜单选项，调出“历史纪录”面板。按住【Ctrl】键，单击选
13、中“历史记录”面板中的从“文件格式”到“文件对齐方式”几条需要定义为命令的纪录。,第36页,接上,在“历史记录”面板中单击“将选定的步骤保存为命令”按钮 ，弹出“保存为命令”对话框。在“命令名称”文本框中输入“标题一”，单击“确定”按钮，完成定义命令操作。 单击“命令”“编辑命令列表”菜单命令，弹出“编辑命令列表”对话框，查看保存的命令。 如果要删除自定义命令，则在“编辑命令列表”对话框中选中要删除的命令，再单击“删除”按钮，即可删除选中的命令。利用该对话框也可以对自定义的命令进行重新命名。,第37页,“历史纪录”面板,第38页,“保存为命令”对话框,第39页,“颜色渐变文字”网页,“颜色渐变
14、文字”网页是利用“资源”面板制作的渐变颜色文字网页，它在浏览器中的显示效果，网页中的文字颜色按照一定规律进行渐变显示。,第40页,渐变颜色文字的显示效果,第41页,技术分析,“资源”面板是用来保存和管理当前站点或收藏夹中网页资源的面板。资源包括存储在站点中的各种对象（也叫元素），例如：图像、影片、模板、Flash文件等。必须首先定义一个本地站点，然后才能在“资源”面板中查看资源。单击“窗口”“资源”菜单命令，可调出“资源”面板，如图所示。,第42页,“资源”面板,第43页,操作步骤,新建一个网页文档，使用居中格式输入需要显示的文字，这里是。回车后在下一行输入同样的文字，并依次输入另外5行。 单
15、击“窗口”“资源”菜单命令，调出“资源”面板。在“资源”面板的左边选择“颜色”按钮 ，调出“颜色”标签。 将第一行文字选中，在“颜色”标签中选中#ffffff颜色，单击“应用”按钮 ，或者使用拖曳的方法将颜色应用到文本上。 利用同样的方法，将以下的文本逐行设置成“颜色”标签中#ffffff颜色向上的黄色渐变颜色及浅绿色到蓝色的渐变颜色。,第44页,“资源”面板中的“颜色”标签,第45页,接上,单击“文件”“保存”菜单命令，将网页文档保存为“7-6.HTM”，按【F12】键，在浏览器中查看利用“资源”面板制作简便颜色文字网页的显示效果。,第46页,创建“库”,“库”面板中各选项的作用 库项目在页
16、面内创建引用 库项目引用的属性栏,第47页,创建“库”后的显示效果,第48页,技术分析,库（Library）在“资源”面板内，它存储有库部件，库项目就是一些对象的集合，这些库项目是网站各网页经常要使用的内容。在创建网页时，只需将库中的库项目插入网页即可。 将页面中的对象（可以是文字、图像表格、表单等）放入库中，即在库中形成一个库项目。可以利用库中的库项目在网页文档中创建对象，该对象叫引用。,第49页,操作步骤,单击“资源”面板左边的“库”按钮 ，调出“库”标签。用鼠标将页面中的对象（不能是不可编辑区域中的对象）拖曳到库管理器下边的列表框内，可以在“资源”面板上显示对象的内容。 单击选中“资源”面板中对象的名字，再单击对象的名字，接着就可以更改对象的名字。用这种方法也可更改模板等元素的名字。 如果只想在库中创建一个库项目，而不想
