第8章 网页的设计综合的案例.ppt

第八章 网页设计综合案例 学习目标 熟悉Photoshop进行网页效果图设计。 熟悉FLASH进行网页动画的制作过程。 掌握在Dreamweaver软件中使用DIV+CSS技术进行页面布局。 掌握常用FTP上传工具。 了解网络推广的常用方法 / / / / / / / / / 8.1 需求分析 本案例是创建一个文具类企业网站首页，该网页创建的目的是展示企业良好的产品形象，整个网页以绿色为主色，配合灰色等其它过渡色进行搭配设计，网页主体部分采用渐变效果的动画展示产品形象，整体网页布局采用DIV+CSS实现。 / / / / / / / / / 图8-1 实例最终效果图 8.2 任务分解 该综合实例功能的实现需要基于以下4个方面的知识点： (1)使用photoshop设计网页效果图。 (2)使用Flash制作网页动画。 (3)使用DIV+CSS进行页面排版。 (4)网站发布与维护。 / / / / / / / / / Photoshop是Adobe公司推出的一款功能强大、使用广泛的平面图像处理软件。它是众多平面设计师进行平面设计，UI设计，图形、图像处理的首选软件。Photoshop CS是目前流行版本，拥有更加强大的图形图像处理功能，它可以创造出无与伦比的影像世界，是当今世界一流的图像处理和设计工具。 1. Photoshop概述 8.2.1 任务一：使用photoshop设计网页效果图 2. Photoshop在网页布局中的作用 ? (1) 布局灵活 ? (2) 修改方便 (3) 加快浏览进度 3.用Photoshop设计网页布局应注意的几个问题? (1)网页文档尺寸与分辨率 (2)颜色 (3)字体，标题 (4)布局格式 (5)图文搭配(6)科学使用参考线 4. “切片”工具是Photoshop通向DreamWeaver的桥梁 (1)必须依靠参考线 (2)Logo和Banner必切 (3)虚线和转角形状必切 (4)渐变必切 (5)大图必切 (6)特殊文字效果必切 (7)导航条必切 (8)有效存储切片 8.2.2 任务二：使用Flash制作网页动画 Flash是Macromedia公司推出的著名的矢量动画制作软件，并且也是目前最优秀、最火爆的网络交互动画制作工具，它不仅能制作精湛的动画效果，而且能配合Fireworks和Dreamweaver等网页开发软件，制作出优秀的网页画面。 (1)分辨率 所谓的分辨率指的是单位长度中，所表达像素数目。分辨率是数字影像课题中一个重要而基本的概念，分辨率的高低是衡量一张图片质量好坏的标准之一。 (2)位图与矢量图 位图是由计算机屏幕上的像素点组成，具有固定的分辨率，也就是位图按照原来的大小显示效果最好，放大或缩小图像都会影响图像的质量。 1. FLASH基本概念? / / / / / / / / / (3)图层 在大部分图像处理软件中，都引入了图层(Layer)的概念，如我们所熟知的PhotoShop、Flash等。灵活地掌握与使用图层，不但能轻松制作出种种特殊效果，还可以大大提高工作效率。可以说，对图层技术的掌握，无论是Flash，还是其他图形处理软件，都是新手进阶的必经之路。 (4)场景 在Flash动画中，场景犹如一个舞台，所有的演员与所有的情节，都在这个舞台上进行。舞台由大小、音响、灯光等条件组成，场景也有大小、色彩等的设置；跟多幕剧一样，场景也可以不止一个，多个场景集合在一起并按它们在场景面板上排列的先后顺序进行播放，最终形成一个动画。 2. FLASH网页动画原理? 电影是由一格一格的胶片按照先后顺序播放出来的，由于人眼有视觉停留现象，这一格一格的胶片按照一定速度播放出来，看起来就“动”了。在电脑动画中这一格一格的胶片，就是Flash中的“帧”。在Flash中，帧的概念贯穿了动画制作的始终。 8.2.3 任务三：使用DIV+CSS进行页面排版 1.什么是DIV+CSS DIV元素是html(超文本语言)中的一个元素，是标签，用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者