使用网页三剑客制作网页.ppt

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