电子商务网页制作09课件.ppt

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

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

3、。项目项目8 8 制作网页动态效果制作网页动态效果 体验活动一：体验活动一：使用模板创建网页使用模板创建网页活动步骤：5.单击“文件”菜单下的“保存”按钮，在弹出的对话框中选择“确定”按钮。6.在“另存模板”对话框中点击“保存”按钮。项目项目8 8 制作网页动态效果制作网页动态效果 体验活动一：体验活动一：使用模板创建网页使用模板创建网页活动步骤：7.文件窗口中会看到一个后缀为“.dwt”的网页模板文件。8.打开其它网页，如“untitled.html”。项目项目8 8 制作网页动态效果制作网页动态效果 体验活动一：体验活动一：使用模板创建网页使用模板创建网页活动步骤：9.点击“资源”窗口中的

4、按钮 ，选择刚创建的网页模板，单击“应用”按钮。10.应用模板后便可以在该网页中看到应用模板的效果，并将其保存。可以将需要应用模板的网页都进行这样的设置。项目项目8 8 制作网页动态效果制作网页动态效果 体验活动二：体验活动二：对模板网页进行修改对模板网页进行修改活动任务：对模板网页中的内容进行修改，并应用到其它页面中。活动指导：模板运用到普通网页使我们感受到它的快捷方便，若想修改网页中的某一部分是不是要逐一修改每张网页呢？当然不是，我们只需要对模板网页进行修改就可以了。项目项目8 8 制作网页动态效果制作网页动态效果 体验活动二：体验活动二：对模板网页进行修改对模板网页进行修改活动步骤：1.

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

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

7、中显示了插入的库项目。项目项目8 8 制作网页动态效果制作网页动态效果 体验活动四：体验活动四：修改库修改库活动任务：对库项目进行修改，并应用到网页中。活动指导：若想修改所有网页中的这个图像只需要在库中进行处理，那么所有使用了该库项目的网页都会自动更新。项目项目8 8 制作网页动态效果制作网页动态效果 体验活动四：体验活动四：修改库修改库活动步骤：1.打开“资源”窗口点击库图标选择要编辑的文件，单击右下角的“编辑”按钮。2.比如将图像进行裁剪。项目项目8 8 制作网页动态效果制作网页动态效果 体验活动四：体验活动四：修改库修改库活动步骤：3.修改完毕后进行保存，完成后单击“关闭”按钮。打开网页

8、会看到所有运用了该库项目的网页都更新了。项目项目8 8 制作网页动态效果制作网页动态效果 活动小结活动小结完成体验活动后，填写下表 项目项目8 8 制作网页动态效果制作网页动态效果 操作步骤操作步骤创建一个库项目：1 选中要作为创建库的对象2 点选“修改”菜单下的“库/增加对象到库”命令34相关知识相关知识模板的运用：1.打开模板将光标定位在需要设定为可编辑区域的位置。2.点击“插入”菜单下的“模板对象/可编辑区域”命令，单击“确定”按钮即可。项目项目8 8 制作网页动态效果制作网页动态效果 相关知识相关知识模板的运用：3.创建可编辑区域后便会显示在指定位置，“EditRegion”表示可编辑区域，它的大小会随着编辑内容的增加而变化。4.打开运用了模板的网页，当鼠标点击可编辑区域时会看到光标，未设定的位置是不能编辑的。项目项目8 8 制作网页动态效果制作网页动态效果