第13篇 使用网页三剑客制作网页.ppt

　　本章通过实例介绍综合运用网页三剑客──Photoshop、Flash和Dreamweaver来制作网页的基本方法。 * 第13章 使用网页三剑客制作网页 学习目标 掌握使用Photoshop CS3处理网页图像的方法。 掌握使用Flash CS3制作Flash动画的方法。 掌握使用Dreamweaver CS3布局网页的方法。 13.1 实例概述 　在这个实例中，将创建一个影视站点。通过这个实例的学习，可以掌握以下内容。 ? 分析网站结构，勾画网站草图。 ? 使用Photoshop CS3制作网站标志、宣传标语和导航图像。 ? 使用Flash CS3制作主页Flash动画。 ? 使用Dreamweaver CS3制作主页面。 ? 使用Dreamweaver CS3创建二级页面模板。 ? 使用模板创建二级页面。 制作的网站主页面如图所示。 13.1 实例概述 13.1 实例概述 二级页面模板如图所示。 13.2 网站策划 在实际工作中，制作网站的第1步就是要搞清楚需要在网页中发布哪些信息，如何安排网站的层次结构。这里给读者做一个范例，虽然例子比较简单，但是网站策划的原理和方法是相同的。 首先要确定网站的层次结构，可以简单划出网站的结构图。在这个实例中，将制作个人影视网站，网站的结构可以分为两级，如图所示。 13.2 网站策划 网站的第1个页面是首页，称为一级页面，它又分为“节目”、“海报”、“剧本”“演员”、“商务”和“社区”6个栏目。“节目”介绍各种类型的影视信息；“海报”介绍影视剧照信息；“剧本”介绍一些编剧通过网络提交的影视剧本信息；“演员”介绍演职员信息；“商务”介绍影视商务信息；“社区”是在线影视论坛。 在设计好网站结构以后，要对页面进行设计，要先搞清楚需要在页面上放置哪些内容。如图所示是设计的首页方案。在这个页面中，按照页眉、主体和页脚的顺序进行页面布局。页眉部分放置的是网站logo、banner和导航栏，主体部分放置的是flash宣传动画，页脚部分放置的是一些联系信息。 13.2 网站策划 “节目”等6个栏目的页面称为二级页面，它们可以采用相同的内容结构，而各自的内容不同就可以了。如图所示是设计的二级页面方案。在二级页面中，改变了导航栏的位置，由首页的页眉处移到二级页面主体部分的左侧，右侧放置各自栏目的具体内容。 13.3 定义站点 首先需要在Dreamweaver CS3中定义一个本地站点，然后根据主页栏目在站点中创建文件夹和文件。在定义一个本地站点时，必须设置存储这个站点的所有文件的位置。 13.4 制作网站首页 制作网站标志 制作宣传标语 制作导航图像 制作Flash动画 布局网站首页 13.4.1 制作网站标志 　首先使用Photoshop CS3制作网站标志。 13.4.2 制作宣传标语 下面使用Photoshop CS3制作宣传标语。 13.4.3 制作导航图像 　除了直接输入文本和导入文档内容外，也可以将其他文档中的内容复制粘贴到Dreamweaver文档中。目前，Word文档是使用最广泛的一种，因此复制粘贴Word文档内容是最常见的操作。 选择【编辑】/【选择性粘贴】命令，打开【选择性粘贴】对话框，在【粘贴为】栏中选择需要的选项。 13.4.4 制作Flash动画 　下面使用Flash CS3制作Flash宣传动画。 13.4.5 布局网站首页 　下面使用Dreamweaver CS3布局网站首页。 13.5 制作网站二级页面 制作二级页面导航图像 制作库文件 制作二级页面模板 使用模板生成二级页面 13.5.1 制作二级页面导航图像 下面使用Photoshop CS3制作二级页面导航图像。 *