《边做边学——Dreamweaver CS4 网页设计案例教程 教学课件 ppt 作者 文沛成 古望林 09》由会员分享，可在线阅读，更多相关《边做边学——Dreamweaver CS4 网页设计案例教程 教学课件 ppt 作者 文沛成 古望林 09（23页珍藏版）》请在金锄头文库上搜索。
1、本章简介： 网站是由多个整齐、规范、流畅的网页组成的。为了保持站点中网页风格的统一，需要在每个网页中制作一些相同的内容，如相同栏目下的导航条、各类图标等，因此网站制作者需要花费大量的时间和精力做重复性的工作。为了减轻网页制作者的工作量，提高他们的工作效率，将他们从大量重复性工作中解脱出来，Dreamweaver CS4提供了模板和库功能。,第9章 模板和库,课堂学习目标,“资源”控制面板 模板 库,9.1 食用菌类网页,案例分析 设计理念 操作步骤 相关工具,9.1.1 案例分析,食用菌不仅味美，而且营养丰富，是一类有机、营养、保健的绿色食品。本案例是为某食品公司设计制作的食用菌类网页，在网页
2、设计上希望能体现出公司丰富的菌类资源和自然健康的经营理念。,9.1.2 设计理念,在网页设计制作过程上，使用银灰色的背景揭示出公司诚信经营的经营特色和良好的产品品质。导航栏是使用不同色块和文字来介绍公司的主营项目和相关信息，直观准确而又灵活丰富。整个页面结构清晰，有利于客户查询和交易。,食用菌类网页效果图,9.1.3 操作步骤,1 2,3,9.1.4 相关工具,“资源”控制面板,“资源”控制面板用于管理和使用制作网站的各种元素，如图像或影片文件等。选择“窗口 资源”命令或按F11键，启用“资源”控制面板。,“资源”控制面板,2.创建模板,在Dreamweaver CS4中创建模板非常容易，如同
3、制作网页一样。当用户创建模板之后，Dreamweaver CS4自动把模板存储在站点的本地根目录下的“Templates”子文件夹中，使用文件扩展名为.dwt。如果此文件夹不存在，当存储一个新模板时，Dreamweaver CS4将自动生成此子文件夹。,创建空模板 将现有文档存为模板,3.定义和取消可编辑区域,创建模板后，网站设计者需要根据用户的需求对模板的内容进行编辑，指定哪些内容是可以编辑的，哪些内容是不可以编辑的。模板的不可编辑区域是指基于模板创建的网页中固定不变的元素，模板的可编辑模板区域是指基于模板创建的网页中用户可以编辑的区域。当创建一个模板或将一个网页另存为模板时，Dreamwe
4、aver CS4默认将所有区域标志为锁定，因此，用户要根据具体要求定义和修改模板的可编辑区域。,对已有的模板进行修改 定义可编辑区域 定义可编辑的重复区域 定义可编辑的重复表格 取消可编辑区域标记,4.创建基于模板的网页 创建基于模板的网页有两种方法，一是使用“新建”命令创建基于模板的新文档，二是应用“资源”控制面板中的模板来创建基于模板的网页。,使用新建命令创建基于模板的新文档 应用“资源”控制面板中的模板创建基于模板的网页,5.管理模板 创建模板后可以重命名模板文件、修改模板文件和删除模板文件。,重命名模板文件 修改模板文件 更新站点 删除模板文件,9.1.5 实战演练-室内设计网页,使用
5、“另存为模板”命令制作模板页。使用“可编辑区域”和“重复区域”按钮制作可编辑区域和重复可编辑区域效果。,效果图,9.2 鲜果批发网页,案例分析 设计理念 操作步骤 相关工具,9.2.1 案例分析,水果是人们的日常饮食中必不可少的食物之一，可提供人体所必需的水分、多种维生素和矿物质。本案例是为鲜果批发公司设计制作的网页，在网页设计上要布局合理，能给客户提供一个完善的信息交流平台。,9.2.2 设计理念,在网页设计制作过程中，将页面的功能进行合理的划分。上方是鲜果展示和导航栏，在展示出公司经营产品的同时，介绍网页的相关信息，方便客户浏览和观赏。下方左侧是图片展示区，右侧是对左侧信息的详细说明，通过
6、这些栏目，客户可以更准确地掌握鲜果的信息，及时购买需要的产品。,鲜果批发网页效果图,9.2.3 操作步骤,1 2,3 4,9.2.4 相关工具,1. 创建库文件,库项目可以包含文档部分中的任意元素，包括文本、表格、表单、Java Applet、插件、ActiveX元素、导航条、图像等。库项目只是一个对网页元素的引用，原始文件必须保存在指定的位置。 用户可以使用文档部分中的任意元素创建库文件，也可新建一个空白库文件。,基于选定内容创建库项目 创建空白库项目,2.向页面添加库项目,当向页面添加库项目时，将把实际内容以及对该库项目的引用一起插入到文档中，此时，无须提供原项目就可以正常显示。在页面中插
7、入库项目的具体操作步骤如下。 （1）将插入点放在文档窗口中的合适位置。 （2）选择“窗口 资源”命令，调出“资源”控制面板。单击“库”按钮 ，进入“库”面板。将库项目插入到网页中。,3.更新库文件,当修改库项目时，会更新使用该项目的所有文档。如果选择不更新，那么文档将保持与库项目的关联，可以在以后进行更新。 对库项目的更改包括重命名项目、删除库项目、重新创建已删除的库项目、修改库项目和更新库项目。,重命名库项目 删除库项目 重新创建已删除的库项目 修改库项目 更新库项目,9.2.5 实战演练-茶文化网页,使用“库”面板添加库项目。,效果图,9.3 综合演练-美女购物网页,使用模板文档制作其他网页文档效果。,效果图,9.4 综合演练-精品沙发网页,使用“库”面板添加库项目。使用库中注册的项目制作网页文档。,效果图,
