电子商务网站建设 第5章
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
5.2.2 典型案例——使用库制作运输 网络网页
案例目标 本案例将制作运输网 络网页，主要介绍库 项目的创建和添加等 操作，完成后的效果 如右图所示。
5.2.2 典型案例——使用库制作运输 网络网页
操作思路：
（1）管理ys站点。 （2）将网页中的图像元素创建为库项目。 （3）新建“yswl.html”文档，并以不同的方 式添加库项目。 （4）将【资源】面板中的“dt.gif”图像插入 文档。
1. 新建模板
下面给模板添加控制元素，包括可编辑区 域、可选区域、重复区域和重复表格几种， 常用的是可编辑区域。给模板添加可编辑 区域的具体操作如下：
（1）在模板中选取一个区域作为可编辑区域， 这个区域可以是表格、图像或文本等网页元 素。
1. 新建模板
（2）在插入栏【常用】选项卡中单击 按钮旁 边的 按钮，在弹出的下拉菜单中选择【可编 辑区域】命令，打开【新建可编辑区域】对 话框。 （3）在【名称】文本框中输入新建的可编辑 区域的名称，单击 按钮，选定的区域周围显 示蓝色线框，并且左上角出现可编辑区域名 称r 中 ， 库 用 来 存 储 整 个 Web站点中经常重复使用或更新的页面元 素，如图像、文本、声音、Flash动画和 表格等。
5.2 使用库
5.2.1 知识讲解 5.2.2 典型案例——使用库制作运输网 络网页
5.2.1 知识讲解
本节将介绍【库】面板，库项目的创建、 编辑及在网页中添加库项目等知识。
5.1.1 知识讲解
本节将学习模板的创建、套用模板到页、 更新站点及从模板分离文档等知识。
5.1.1 知识讲解
1. 新建模板 2. 套用模板到页 3. 更新站点 4. 从模板分离文档
1. 新建模板
新建模板的具体操作如下：
（1）编辑一页基本体现网站风格的网页。 （2）选择【文件】→【另存为模板】命令， 或单击插入栏的【常用】选项卡中 按钮 旁的下拉按钮，在弹出的下拉菜单中选择 【创建模板】命令，打开【另存模板】对 话框。
案例目标
本案例将以“lpw”站点中的“index.html” 文件为模板，应用于“left.html”文件。主要 介绍模板的创建、将模板应用到页和更新模板 等操作。案例完成的效果如下图所示。
5.1.2 典型案例——创建并应用模板
5.1.2 典型案例——创建并应用模板 操作思路：
（1）打开“index.html”文档，创建名为 “lpw.dwt”的模板，新建可编辑区域并命名 为“left”和“main”。 （2）打开“left.html”文档，将“lpw.dwt”模板 应用到当前文档中。 （3）更新模板“lpw.dwt”左侧的大表格的背景， 同时更新应用了模板的“left.html”文档。 （4）另存“left.html”文档为“lpw1.html”文档， 将“left.html”文档脱离模板，并恢复原始状 态。
4. 从模板分离文档
如果某个文档只需要使用模板的版式，而 不需要与模板有任何关联，可将该文档从 模板中分离出来，具体操作如下：
（1）打开要从模板中分离出来的文档。 （2）选择【修改】→【模板】→【从模板中 分离】命令即可。分离后的文档属于一个普 通的HTML文档，与模板不再有任何关系。
5.1.2 典型案例——创建并应用模板
1. 新建模板
（4）用同样的方法指定其他可编辑区域，完 成模板可编辑区域的设置。 （5）添加完可编辑区域后，保存模板文件。
2. 套用模板到页
可为已有的网页套用模板，套用模板到页的 具体操作如下：
（1）打开要套用模板的文档。 （2）选择【修改】→【模板】→【应用模板到 页】命令，打开【选择模板】对话框。 （3）在【模板】列表框中选择要套用的模板， 并选中【当模板改变时更新页面】复选框。如 不选中该复选框，在更新模板时当前文档不会 更新。
1. 新建模板
（3）在【另存为】文本框中输入模板文件名。 （4）单击【保存】按钮，如果当前文档中存 在图像或一些超链接，系统会打开提示对话 框，询问用户是否要更新链接。 （5）单击【是】按钮，更新文档中的超链接， 同时在站点中生成一个“Templates”文件 夹，该文件夹用于放置保存的模板文件，模 板文件以“dwt”为后缀。
5.1.2 典型案例——创建并应用模板
案例小结 本案例制作了“lpw.dwt”模板文档，并应用到 了“left.html”网页中，最后让“left.html”脱 离模板，通过本例的制作，主要介绍了模板的 创建、可编辑区域的指定、将模板应用到页、 修改模板和脱离模板等操作。 在进行批量的网页制作时，为了保持站点风格 的一致性，学会使用模板是非常有用的，这对 后期网站的维护也会很有帮助。
5.3 上机练习
5.3.1 制作模板 5.3.2 创建库项目
5.3.1 制作模板
下面练习制作模板，如下图所示，主要练习模 板的创建和可编辑区域的定义。
5.3.1 制作模板
操作思路：
打开“5\index.html”文档。 创建模板并保存。 将“简介内容”所在的表格创建为可编辑区 域，并保存该文档。
5.3.2 创建库项目
下面练习把站点中“index.html”文档中 的元素创建为库项目。 操作思路：
打开“5\index.html”文档，另存为 “index2.html”文档。 选取顶部图片所在的表格，创建为“top”库项 目。 选取左侧导航条所在的表格，创建为“left”库 项目。
2. 创建库项目
用户可以将文档<body>标签中的任意元 素创建为库项目，如文本、表格、表单、 插件、ActiveX元素、导航条或图像等。 创建库项目有两种方法：一是将现有对象 创建为库项目，二是创建空库项目。
2. 创建库项目
将现有对象创建为库项目的具体操作如下： （1）选择对象，在【库】面板中单击 按钮， 打开提示对话框。 （2）单击【确定】按钮，在项目区中就会显示创 建的库项目。 （3）修改新建库项目的名称。此时，窗口中的对 象就会变为库项目。
2. 套用模板到页
（4）单击【选定】按钮，打开【不一致的区 域名称】对话框。 （5）在对话框中部的列表框中选择一项，在 【将内容移到新区域】下拉列表中选择对应 的选项，如选择【head】选项。 （6）单击【确定】按钮，将模板应用到当前 页。
3. 更新站点
当修改了模板后，应立即更新站点中所有通过 该模板制作的网页，更新站点的具体操作如下： （1）当模板文件中非可编辑区域的元素被修改， 或可编辑区域被添加和删除后，保存模板文件 时，将打开【更新模板文件】对话框。 （2）单击【更新】按钮，用此模板生成的所有 页面都会自动更新，并打开【更新页面】对话 框，更新完成后，在【状态】列表框中会列出 更新日志。
5.1 用模板统一网站风格
利用模板文件中的锁定区域，可以控制网 站内多个网页间有共性的内容，对于个性 化的内容，则可通过可编辑区域来完成， 从而用最短的时间完成繁重的维护工作。 网站中相对固定的元素是网页背景、导航 菜单和网站标志等内容，可将这些元素设 置为锁定区域。
5.1 用模板统一网站风格
5.1.1 知识讲解 5.1.2 典型案例——创建并应用模板
第5章 模板与库
本课要点 具体要求 本课导读 上机练习
本课要点
用模板统一风格 使用库
具体要求
掌握创建模板的方法 掌握套用模板到页的方法 掌握站点文档的快速更新方法 掌握库项目的创建方法 掌握库项目的使用方法
本课导读
一个成功的网站，在网页设计上必须体现 其独特的风格，以便访问者能够留下深刻 的印象，要做到这点，需要依靠网站中所 有的网页，通常统一网站的风格就是一个 比较好的方法。要做到网站风格统一，可 以通过复制网页来实现，但需要更改风格 时就很麻烦了。而使用模板和库项目就轻 松地解决该问题。
5.2.2 典型案例——使用库制作运输 网络网页
案例小结 本例制作了“yswl.html”文档，主要介 绍了库项目的创建、库项目插入的不同方 式和通过【资源】面板插入图像对象的方 法。 在设计网站时，如果需要重复调用元素， 可以将该元素创建为库项目。修改库项目 后，应用到网页中的项目也会随之更新。
2. 创建库项目
空库项目的创建方法比较简单，在【库】面板 中直接单击 按钮，即会创建一个空库项目， 再单击 按钮，可以打开空库项目，在文档窗 口中添加内容。
3. 在网页中添加库项目
当向页面添加库项目时，将把实际内容以 及对该库项目的引用一起插入到文档中。 添加库项目到网页的具体操作如下：
（1）将鼠标光标定位在文档窗口中要添加库 项目的位置。 （2）在【库】面板中选择要插入的库项目， 单击【插入】按钮即可插入，或选中库项目， 直接拖放到文档中需要插入的位置。
3. 更新站点
（3）单击【关闭】按钮，关闭对话框，完成 站点的更新。 如果要更新站点中某个页面，可以打开要更 新的文档，选择【修改】→【模板】→【更 新当前页】命令即可。
3. 更新站点
如果要更新整个站点中未更新的所有页面， 选择【修改】→【模板】→【更新页面】命 令，在打开的【更新页面】对话框中，选择 【查看】下拉列表中的【整个站点】选项， 从右侧的下拉列表中选择站点名，然后单击 【开始】按钮进行更新。
5.2.1 知识讲解
1. 认识【库】面板 2. 创建库项目 3. 在网页中添加库项目
1. 认识【库】面板
【库】面板内嵌于【资源】面板中，按 【F11】键打开【资源】面板，如下图所示。
1. 认识【库】面板
【资源】面板中包含图像、 颜 色 、 链 接 、 Flash 、 Shockwave 、 视 频 、 脚 本、模板和库9种资源， 单击展开任何一项，在右 侧都会显示出该站点中已 存在的资源，如图所示。