第29章制作企业站点(免费阅读).pptVIP

第29章 如何制作企业站点 企业站点的实例主要分为3个部分：制作站点效果图、制作站点使用的Flash动画和制作Web格式的网页。下面进行详细讲解。 29.1 制作站点效果图 站点效果图的制作较为复杂，要使用几十或者上百个图层，所以要将页面分成几个部分，在各个部分中使用文件夹规划页面内容。分部制作可以使效果图的制作更加有条理。本实例分为制作背景、制作Logo和导航、制作页面内容、制作底部内容等几个部分，具体内容如下所示。 29.1.1 制作背景 本实例中制作的背景，主要使用各种素材，同时使用各种滤镜、蒙版等功能，制作出相应的页面效果，具体操作如下所示。 29.1.2 制作Logo和导航 一般需要制作站点的公司都有自己的公司图标，在制作时，要适当地使用背景，突出Logo的效果。本实例中的导航部分，需要在Flash中制作，所以要制作出分类选择和未选择两种状态，具体操作如下所示。 29.1.2 制作Logo和导航 1．制作Logo 29.1.2 制作Logo和导航 2．制作导航 29.1.3 制作页面内容 页面内容部分是整个页面的主体部分，主要分为3个部分：产品分类、Flash部分和公司介绍，具体操作如下所示。 1．制作产品分类部分 29.1.3 制作页面内容 2．制作Flash部分 29.1.3 制作页面内容 3．制作右侧部分 29.1.3 制作页面内容 4．制作更多部分 29.1.4 制作底部内容 页面内容部分相对比较简单，主要分为两个部分：底部信息部分、快速通道部分，其具体操作如下所示。 29.2 制作Flash动画 Flash动画部分比较简单，主要的内容是公司产品特色的介绍，以及公司产品的展示，它包括两个部分；一部分为Loading部分，另一部分为主体动画部分，具体内容如下所示。 29.2.1 制作Loading部分 本实例的Loading部分，使用图层遮罩和动作，逐渐显示反色后的标志图像，其中标志和反色的标志在Photoshop中制作，具体操作如下所示。 29.2.2 制作动画内容 动画部分主要通过控制元件实例的颜色属性，制作逐渐显示和隐藏产品，以及产品文本的动画，具体操作如下所示。 29.2.2 制作动画内容 1．产品1的动画 29.2.2 制作动画内容 2．产品2的动画 产品2的动画和产品1的动画部分基本相同，其区别在于产品2的显示动画和文本动画与产品1略有区别。具体步骤如下所示。 29.2.2 制作动画内容 3．产品3的动画 产品3的的显示和消失的方法和产品1的动画部分完全相同，其区别在于文本动画与产品1略有区别，具体步骤如下所示。 29.2.2 制作动画内容 4．标志的动画 在完成3个产品动画之后，制作公司标志显示的动画。具体步骤如下所示。 29.3 制作Web页面 使用Dreamweaver将效果图和Flash文件制作成网页格式的页面，主要分为切图、规划站点、制作页面头部、制作页面主体部分和制作页面底部几个部分，具体内容如下所示。 29.3.1 切图 切图是指将效果图切分成各个部分，主要的目的是制作页面中使用的背景和修饰图片。切图的过程可以在Photoshop中进行（也可以在其他的软件中进行，例如Fireworks等），具体操作如下所示。 29.3.2 规划站点 为了使站点的各种图像文件、媒体文件、样式文件、脚本文件等更加容易管理，在制作具体的页面之前，首先要规划好站点，具体操作如下所示。 选择磁盘的某个位置新建文件夹，作为站点的根文件夹。站点的所有文件，都包含在站点根文件夹中。 在站点根文件夹中新建文件夹，命名为images，用来保存站点中使用的修饰图片。 29.3.3 制作页面头部 规划好站点相关的文件夹和文件后，就可以开始制作具体页面了。首先是制作页面头部，其中包括站点的建立、制作各种表格等，具体操作如下所示。 29.3.4 制作页面主体部分 完成顶部之后，就可以制作页面主体部分了，页面主体部分分为左右背景、左侧产品分类、Flash动画、右侧公司简介等几个部分，具体操作如下所示。 29.3.5 制作页面底部 页面底部的制作比较简单，主要使用在表格中插入图片、背景图片，添加文本内容的方法制作，具体操作如下所示。 29.4 专家总结 在制作网页的时候，整个页面的布局、风格、构思等内容，都要在制作网页效果图这个步骤中完成（这部分通过Photoshop完成）。制作页面中的动画内容，可以使页面的显示效果更加多样化，同时能够在有限的空间中传达更多的信息（这部分通过Photoshop完成）。通过效果图和动画的制作，基本完成了页面的设计部分。剩下的内容是将动画和效果图，制作成可发布的格式（这部分通过Dreamweaver完成）。这三部分内容，都是为最终的显示页面服务。