中文DreamweaverMX案例教程作者杜金等第7章模板、命令和“资源”面板课案.pptVIP

第7章 模板、命令和“资源”面板 主要内容 “商品介绍”网页模板 “商品介绍”网页 批量更新网页 “版画世界”相册网页 利用“属性”面板定义命令 “颜色渐变文字”网页 创建“库” 通过修改库项目修改网页 利用Anfy软件制作鼠标 “商品介绍”网页模板 使用Dreamweaver制作商品介绍网页模板，其显示效果如图所示。其中，“商品介绍”和“商品图像”两个区域为可编辑区域，其他区域为不可编辑区域。 “商品介绍”网页模板 技术分析 模板就是网页的样板，它有可编辑区和不可编辑区。不可编辑区的内容是不可以改变的，通常为标题栏、网页图标、框架结构、链接文字和导航栏等。可编辑区的内容可以改变，通常为具体的文字和图像内容，例如：每日新闻、最新软件介绍、趣谈等。 通常在一个网站中有成百上千的页面，而且每个页面的布局也常常相同，尤其是同—层次的页面，只有具体文字或图像内容不同。将这样的网页定义为模板后，相同的部分都被锁定，只有一部分内容可以编辑，避免了对无需改动部分的误操作。 操作步骤 在Dreamweaver MX中单击“文件”→“新建”，弹出“新建文档”对话框。在“常规”选项卡的“类别”列表框中选择“基本页”，在右边的“基本页”列表框中选择“HTML模板”。单击“创建”按钮，新建一个“HTML模板”。 在网页单击“修改”→“页面属性”，弹出“页面属性”对话框。在对话框中将“标题”改为“商品介绍”，将“背景图像”定义为“PICTURE/20.GIF”。单击“确定”按钮，完成页面属性设置。 在页面的顶部新建一个层，在层内部输入“新世纪超市商品介绍”，设置成“黑体”、标题一、居中对齐格式。在网页左边插入一个新层，用于输入商品介绍文字。 “新建文档”对话框 使用两个层实现立体效果 接上 在“商品介绍”层的右边新建一个层，并将层的背景颜色设置成“黑色”，再建一个相同大小的层，并将背景颜色设置成“白色”。并移动到黑色层的上面，形成立体效果，用于插入商品图像。 在图像层的下面绘制一个层，在层内输入“返回”文字，并建立到“INDEX.HTM”的链接。在网页的最下面绘制一个新层，在层内输入“欢迎光临本超市，如果对商品有任何疑问，可以与服务中心联系。”和邮件地址“电子邮件地址：tingdudu@163.com”并建立邮件链接。 接上 将光标移到“商品介绍”层内，单击“插入”→“模板对象”→“可编辑区域”菜单命令，弹出“新建可编辑区域”对话框。在名称文本框中输入“商品介绍”，单击“确定”按钮，完成“新建可编辑区域”操作。利用同样的方法，在“商品图像”层内插入第二个可编辑区域，并将名称定义为“商品图像”。 （单击“文件”→“另存为模板”菜单命令，弹出“另存模板”对话框。在“另存为”文本框中输入“商品介绍”，单击“保存”按钮，完成保存模板操作。 “新建可编辑区域”对话框 “另存模板”对话框 “商品介绍”网页 利用“商品介绍”模板制作的网页在浏览器中的显示效果。 “商品介绍”网页在浏览器中的显示效果 技术分析 在利用模板创建新的网页时，只需将模板调出，在可编辑区插入内容即可。当更新网页时，只需将模板调出，在可编辑区内更换新内容即可。 在对网站进行改版时，因为网站的页面非常多，如果分别修改每一页，工作量无疑非常大，但如果使用了模板，只要修改模板，所有应用模板的页面都可以自动更新。 修改已有的HTML文件，可使之成为模板。模板可以自动保存在本地站点根目录下的Template目录内，如果没有该目录，系统可自动创建此目录。模板文件的扩展名字为.dwt 。 操作步骤 单击“文件”→“新建”菜单命令，弹出“从模板新建”对话框，单击“模板用于”栏内的站点名称，即可在“预览”栏内看到模板的缩图。 将“当模板改变时更新页面”复选框选中，表示将来模板被修改后，所有应用该模板的页面将会自动更新。单击“创建”按钮，创建用“商品介绍”模板制作的网页。 在打开的“商品介绍”模板网页中，将光标移到“商品介绍”可编辑区域中，删除“商品介绍”文字，并将事先编辑好的商品介绍文字复制到此。将光标移到“商品图像”可编辑区域中，将“商品图像”文字删除，插入“PICTURE/MIAN.GIF”图像文件，完成后的显示效果。 单击“文件”→“保存”菜单命令，将网页文档保存为“7-2.HTM”，按【F12】键，在浏览器中查看使用“商品介绍”模板制作网页的显示效果。 “从模板新建”对话框 利用“商品介绍”模板制作的网页 批量更新网页 手动更新 将页面与模板分离 输出没有模板标记的站点 将HTML标记属性设置为可编辑 更新网页中的电子邮件地址前后的显示效果 技术分析 模板可以更新，例如改变可编辑区域和不可编辑区域，改变可编辑区域的名字，更换页面的内容等。更新模板后，系统可以