边做边学——Dreamweaver CS3网页设计案例教程教学课件 作者 官辛华 09.ppt

《边做边学——Dreamweaver CS3网页设计案例教程教学课件 作者 官辛华 09.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、本章简介：每个网站都是由多个整齐、规范、流畅的网页组成的。为了保持站点中网页风格的统一，需要在每个网页中制作一些相同的内容，如相同栏目下的导航条、各类图标等。利用DreamweaverCS3提供的模板和库功能，可实现上述操作。第9章　模板和库课堂学习目标“资源”控制面板模板库9.1家居资讯网页案例分析设计理念操作步骤相关工具9.1.1案例分析家居资讯网是反映家居市场发展趋势、行业动态及供求关系的专业资讯网页，主要面向房地产开发商、装饰企业和材料经销商、物业管理等行业，成为连接用户与企业的纽带。在网页设计时要体现出家居资讯的丰富内容和独特品位。9.1.2设计理念

2、在网页设计、制作过程上，背景采用灰色系色彩，使页面体现出成熟稳重之感。导航栏放置在页面的右上角，方便客户浏览。中间是网页的核心信息，包括房产信息、家居展示图等。整个页面结构清晰，有利于客户查询和交易。家居资讯网页效果图9.1.3操作步骤1239.1.4相关工具“资源”控制面板“资源”控制面板用于管理和使用制作网站的各种元素，如图像或影片文件等。选择“窗口>资源”命令或按键，启用“资源”控制面板。“资源”控制面板2.创建模板在DreamweaverCS3中创建模板非常容易，如同制作网页一样。当用户创建模板之后，DreamweaverCS3自动把模板存储

3、在站点的本地根目录下的“Templates”子文件夹中，使用文件扩展名为.dwt。如果此文件夹不存在，当存储一个新模板时，DreamweaverCS3将自动生成此子文件夹。创建空模板将现有文档存为模板3.定义和取消可编辑区域创建模板后，网站设计者需要根据用户的需求对模板的内容进行编辑，指定哪些内容是可以编辑的，哪些内容是不可以编辑的。模板的不可编辑区域是指基于模板创建的网页中固定不变的元素，模板的可编辑模板区域是指基于模板创建的网页中用户可以编辑的区域。当创建一个模板或将一个网页另存为模板时，DreamweaverCS3默认将所有区域标志为锁定，因此，用户要根

4、据具体要求定义和修改模板的可编辑区域。对已有的模板进行修改定义可编辑区域定义可编辑的重复区域定义可编辑的重复表格取消可编辑区域标记4.创建基于模板的网页创建基于模板的网页有两种方法，一是使用“新建”命令创建基于模板的新文档，二是应用“资源”控制面板中的模板来创建基于模板的网页。使用新建命令创建基于模板的新文档应用“资源”控制面板中的模板创建基于模板的网页5.管理模板创建模板后可以重命名模板文件、修改模板文件和删除模板文件。重命名模板文件修改模板文件更新站点删除模板文件9.1.5实战演练-数码配件网页使用“模板”按钮创建模板页，使用“可编辑区域”按钮和“重复区域

5、”按钮制作可编辑区域和重复区域效果。效果图9.2健康瑜伽网页案例分析设计理念操作步骤相关工具9.2.1案例分析瑜伽运用了一个古老而易于掌握的方法来提高人们生理、心理、情感和精神方面的能力，是一种达到身体、心灵与精神和谐统一的运动形式。本例是为瑜珈休闲健身俱乐部设计制作的网页，本俱乐部主要针对的客户是热衷于健身、减肥、减压，改变亚健康状态的人群。网页设计上希望能体现出瑜伽运动的健康与活力。9.2.2设计理念在网页设计、制作过程中，整个页面以清新的绿色为基调，表现出恬静、舒爽的氛围。清晰明确的导航栏设计，体现出瑜伽这项古老运动的现代气息，令浏览者的视觉和身心感受到

6、健康自然的安定。半透明的圆形与正在练习瑜伽的卡通人物的摆放，体现出在练习瑜珈时的优美空间与环境。右侧的内容区域对瑜珈的分类进行了详细介绍。整个页面的设计充分体现出了瑜伽运动在心灵与精神上的和谐统一。健康瑜珈网页效果图9.2.3操作步骤12349.2.4相关工具1.创建库文件库项目可以包含文档部分中的任意元素，包括文本、表格、表单、JavaApplet、插件、ActiveX元素、导航条、图像等。库项目只是一个对网页元素的引用，原始文件必须保存在指定的位置。用户可以使用文档部分中的任意元素创建库文件，也可新建一个空白库文件。“类型”分类主要

7、是定义网页中文字的字体、字号、颜色等。基于选定内容创建库项目创建空白库项目2.向页面添加库项目当向页面添加库项目时，将把实际内容以及对该库项目的引用一起插入到文档中。此时，无需提供原项目就可以正常显示。在页面中插入库项目的具体操作步骤如下。（1）将插入点放在文档窗口中的合适位置。（2）选择“窗口>资源”命令，启用“资源”控制面板。单击“库”按钮，进入“库”面板。将库项目插入到网页中。3.更新库文件当修改库项目时，会更新使用该项目的所有文档。如果选择不更新，那么文档将保持与库项目的关联，可以在以后进行更新。对库项目的更改包括重命名项目、删除库项目、重新创建已删除

8、的库项目、修改库项目和更新库项目。重命