电子商务网页制作 作者 谢嵘 09

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

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

3、：使用模板创建网页,活动步骤： 单击“文件”菜单下的“保存”按钮，在弹出的对话框中选择“确定”按钮。 在“另存模板”对话框中点击“保存”按钮。,项目8 制作网页动态效果,体验活动一：使用模板创建网页,活动步骤： 文件窗口中会看到一个后缀为“.dwt”的网页模板文件。 打开其它网页，如“untitled.html”。,项目8 制作网页动态效果,体验活动一：使用模板创建网页,活动步骤： 点击“资源”窗口中的按钮 ，选择刚创建的网页模板，单击“应用”按钮。 应用模板后便可以在该网页中看到应用模板的效果，并将其保存。可以将需要应用模板的网页都进行这样的设置。,项目8 制作网页动态效果,体验活动二：对模

4、板网页进行修改,活动任务： 对模板网页中的内容进行修改，并应用到其它页面中。 活动指导： 模板运用到普通网页使我们感受到它的快捷方便，若想修改网页中的某一部分是不是要逐一修改每张网页呢？当然不是，我们只需要对模板网页进行修改就可以了。,项目8 制作网页动态效果,体验活动二：对模板网页进行修改,活动步骤： 打开需要修改的模板，比如通过“页面属性”对网页中的文本的颜色及字体进行修改，再换一张图像。 单击“文件”菜单下的“保存”命令会弹出“更新模板文件”对话框，单击“更新”按钮。,项目8 制作网页动态效果,体验活动二：对模板网页进行修改,活动步骤： 看到“更新页面”显示完成时，单击“关闭”按钮。这时

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

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