电子商务网页制作09课件

1、主编：谢嵘一个网站应具有统一的风格，若对网站下包括的所有网页都重复添加相同的Logo、导航条、图像等这样效率太低，假若以前的网页都统一为红为风格的，现在要改为绿色风格，那我们是否需要一张张的去修改网页呢？这样工作量太大。Dreamweaver CS4中的模板功能为我们提供了一个方便，利用模板和库来制作网页，它将布局和内容分开，在设计好布局后将其存储为模板，在布局一样的网页中可直接用模板来创建网页，使用模板和库作后期的修改也是非常快捷方便的。 项目8 制作网页动态效果 项目导学 体验活动一：使用模板创建网页活动任务：创建一个模板，用网站中的模板来制作网页。活动指导：模板的创建和保存与普通网页有差

2、异，在制作过程中要注意。 项目8 制作网页动态效果 体验活动一：使用模板创建网页活动步骤：建一个站点，在“新建”中点选“更多”按钮。选择“空模板”选项，模板类型选择“HTML模板”，布局选择“无”最后单击“创建”按钮。 项目8 制作网页动态效果 体验活动一：使用模板创建网页活动步骤：这时会看到打开了一张空白页面，这张页面就是用于编辑网页模板的。在模板中设计出网页的整体布局，网页的头部和底部制作出来，将中间的具体内容部分空中。 项目8 制作网页动态效果 体验活动一：使用模板创建网页活动步骤：单击“文件”菜单下的“保存”按钮，在弹出的对话框中选择“确定”按钮。在“另存模板”对话框中点击“保存”按钮

3、。 项目8 制作网页动态效果 体验活动一：使用模板创建网页活动步骤：文件窗口中会看到一个后缀为“.dwt”的网页模板文件。打开其它网页，如“untitled.html”。 项目8 制作网页动态效果 体验活动一：使用模板创建网页活动步骤：点击“资源”窗口中的按钮 ，选择刚创建的网页模板，单击“应用”按钮。应用模板后便可以在该网页中看到应用模板的效果，并将其保存。可以将需要应用模板的网页都进行这样的设置。 项目8 制作网页动态效果 体验活动二：对模板网页进行修改活动任务：对模板网页中的内容进行修改，并应用到其它页面中。活动指导：模板运用到普通网页使我们感受到它的快捷方便，若想修改网页中的某一部分是

4、不是要逐一修改每张网页呢？当然不是，我们只需要对模板网页进行修改就可以了。 项目8 制作网页动态效果 体验活动二：对模板网页进行修改活动步骤：打开需要修改的模板，比如通过“页面属性”对网页中的文本的颜色及字体进行修改，再换一张图像。单击“文件”菜单下的“保存”命令会弹出“更新模板文件”对话框，单击“更新”按钮。 项目8 制作网页动态效果 体验活动二：对模板网页进行修改活动步骤：看到“更新页面”显示完成时，单击“关闭”按钮。这时所有运用了模板的网页便会自动更新。 项目8 制作网页动态效果 活动小结完成体验活动二后，填写下表 项目8 制作网页动态效果 运用模板创建网页的优势：模板网页的修改：1 打

5、开模板网页2 对其需要改进的部分作修改34体验活动三：创建库活动任务：选择一个对象来创建库。活动指导：当我们的网站中的很多网页要用到某一个文件时，可以将其创建为库，方便随时调用和批量编辑处理。库中的所有资源都称为库项目。 项目8 制作网页动态效果 体验活动三：创建库活动步骤：选中要创建库的文件，比如这里选择一个图像。单击“修改”菜单下的“库/增加对象到库”命令。 项目8 制作网页动态效果 体验活动三：创建库活动步骤：“资源”窗口库里面就可看到刚才选择的图像，库的后缀是“.lbi”。网页中显示了插入的库项目。 项目8 制作网页动态效果 体验活动四：修改库活动任务：对库项目进行修改，并应用到网页中

6、。活动指导：若想修改所有网页中的这个图像只需要在库中进行处理，那么所有使用了该库项目的网页都会自动更新。 项目8 制作网页动态效果 体验活动四：修改库活动步骤：打开“资源”窗口点击库图标选择要编辑的文件，单击右下角的“编辑”按钮。比如将图像进行裁剪。 项目8 制作网页动态效果 体验活动四：修改库活动步骤：修改完毕后进行保存，完成后单击“关闭”按钮。打开网页会看到所有运用了该库项目的网页都更新了。 项目8 制作网页动态效果 活动小结完成体验活动后，填写下表 项目8 制作网页动态效果 操作步骤创建一个库项目：1 选中要作为创建库的对象2 点选“修改”菜单下的“库/增加对象到库”命令34相关知识模板的运用：打开模板将光标定位在需要设定为可编辑区域的位置。点击“插入”菜单下的“模板对象/可编辑区域”命令，单击“确定”按钮即可。 项目8 制作网页动态效果 相关知识模板的运用：创建可编辑区域后便会显