电子商务网页制作教学课件ppt作者谢嵘09课件.pptVIP

主编：谢嵘 项目导学 一个网站应具有统一的风格，若对网站下包括的所有网页都重复添加相同的Logo、导航条、图像等这样效率太低，假若以前的网页都统一为红为风格的，现在要改为绿色风格，那我们是否需要一张张的去修改网页呢？这样工作量太大。Dreamweaver CS4中的模板功能为我们提供了一个方便，利用模板和库来制作网页，它将布局和内容分开，在设计好布局后将其存储为模板，在布局一样的网页中可直接用模板来创建网页，使用模板和库作后期的修改也是非常快捷方便的。 体验活动一：使用模板创建网页 活动任务： 创建一个模板，用网站中的模板来制作网页。 活动指导： 模板的创建和保存与普通网页有差异，在制作过程中要注意。 体验活动一：使用模板创建网页 活动步骤： 建一个站点，在“新建”中点选“更多”按钮。 选择“空模板”选项，模板类型选择“HTML模板”，布局选择“无”最后单击“创建”按钮。 体验活动一：使用模板创建网页 活动步骤： 这时会看到打开了一张空白页面，这张页面就是用于编辑网页模板的。 在模板中设计出网页的整体布局，网页的头部和底部制作出来，将中间的具体内容部分空中。 体验活动一：使用模板创建网页 活动步骤： 单击“文件”菜单下的“保存”按钮，在弹出的对话框中选择“确定”按钮。 在“另存模板”对话框中点击“保存”按钮。 体验活动一：使用模板创建网页 活动步骤： 文件窗口中会看到一个后缀为“.dwt”的网页模板文件。 打开其它网页，如“untitled.html”。 体验活动一：使用模板创建网页 活动步骤： 点击“资源”窗口中的按钮 ，选择刚创建的网页模板，单击“应用”按钮。 应用模板后便可以在该网页中看到应用模板的效果，并将其保存。可以将需要应用模板的网页都进行这样的设置。 体验活动二：对模板网页进行修改 活动任务： 对模板网页中的内容进行修改，并应用到其它页面中。 活动指导： 模板运用到普通网页使我们感受到它的快捷方便，若想修改网页中的某一部分是不是要逐一修改每张网页呢？当然不是，我们只需要对模板网页进行修改就可以了。 体验活动二：对模板网页进行修改 活动步骤： 打开需要修改的模板，比如通过“页面属性”对网页中的文本的颜色及字体进行修改，再换一张图像。 单击“文件”菜单下的“保存”命令会弹出“更新模板文件”对话框，单击“更新”按钮。 体验活动二：对模板网页进行修改 活动步骤： 看到“更新页面”显示完成时，单击“关闭”按钮。这时所有运用了模板的网页便会自动更新。 活动小结 完成体验活动二后，填写下表 体验活动三：创建库 活动任务： 选择一个对象来创建库。 活动指导： 当我们的网站中的很多网页要用到某一个文件时，可以将其创建为库，方便随时调用和批量编辑处理。库中的所有资源都称为库项目。 体验活动三：创建库 活动步骤： 选中要创建库的文件，比如这里选择一个图像。 单击“修改”菜单下的“库/增加对象到库”命令。 体验活动三：创建库 活动步骤： “资源”窗口库里面就可看到刚才选择的图像，库的后缀是“.lbi”。 网页中显示了插入的库项目。 体验活动四：修改库 活动任务： 对库项目进行修改，并应用到网页中。 活动指导： 若想修改所有网页中的这个图像只需要在库中进行处理，那么所有使用了该库项目的网页都会自动更新。 体验活动四：修改库 活动步骤： 打开“资源”窗口点击库图标选择要编辑的文件，单击右下角的“编辑”按钮。 比如将图像进行裁剪。 体验活动四：修改库 活动步骤： 修改完毕后进行保存，完成后单击“关闭”按钮。打开网页会看到所有运用了该库项目的网页都更新了。 活动小结 完成体验活动后，填写下表 相关知识 模板的运用： 打开模板将光标定位在需要设定为可编辑区域的位置。 点击“插入”菜单下的“模板对象/可编辑区域”命令，单击“确定”按钮即可。 相关知识 模板的运用： 创建可编辑区域后便会显示在指定位置，“EditRegion”表示可编辑区域，它的大小会随着编辑内容的增加而变化。 打开运用了模板的网页，当鼠标点击可编辑区域时会看到光标，未设定的位置是不能编辑的。 项目8 制作网页动态效果　　 Page ? * Page ? * Page ? * Page ? * Page ? * Page ? * 项目8 制作网页动态效果