站设计与开发案例教程-电子教案-雷运发 第8章 网页设计综合案例 .pptVIP

第八章 网页设计综合案例 ;8.1 需求分析;图8-1 实例最终效果图 ;8.2 任务分解; Photoshop是Adobe公司推出的一款功能强大、使用广泛的平面图像处理软件。它是众多平面设计师进行平面设计，UI设计，图形、图像处理的首选软件。Photoshop CS是目前流行版本，拥有更加强大的图形图像处理功能，它可以创造出无与伦比的影像世界，是当今世界一流的图像处理和设计工具。;2. Photoshop在网页布局中的作用 ?;4. “切片”工具是Photoshop通向DreamWeaver的桥梁 ;8.2.2 任务二：使用Flash制作网页动画;(1)分辨率 所谓的分辨率指的是单位长度中，所表达像素数目。分辨率是数字影像课题中一个重要而基本的概念，分辨率的高低是衡量一张图片质量好坏的标准之一。 (2)位图与矢量图 位图是由计算机屏幕上的像素点组成，具有固定的分辨率，也就是位图按照原来的大小显示效果最好，放大或缩小??像都会影响图像的质量。;(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标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。;2. DIV+CSS的优势 (1)符合W3C标准。 (2)对浏览者和浏览器更具亲和力。 (3)使页面载入得更快。 (4)保持视觉的一致性。 (5)修改设计时更有效率 (6)搜索引擎更加友好;3. DIV+CSS网站设计的缺陷;8.2.4 任务四：网站发布;2.使用CuteFTP发布网站;8.3 开发流程;8.3.2实例开发步骤;2.使用Photoshop切片工具将图片转换为WEB页面 ;3.使用FLASH软件制作产品形象区动画 ;4.使用DIV+CSS布局方法对整个页面进行构建;5.使用CuteFTP软件将完成的网页上传到服务器 （1）打开CuteFTP软件，打开“文件/站点管理器”菜单，新建一站点，配置IP主机地址，FTP站点用户名称，以及FTP站点密码三项参数。;（2）点击“连接”按钮连接服务器。 （3）将鼠标拖动窗口左侧文档至右侧窗口，即完成本地网页文件及素材的上传工作，上传完成后，可访问企业网址查看网站效果。 ;8.4拓展知识 ;本章小结 本章通过创建一个企业网站首页文件的过程，读者可通过参考实践掌握网页平面效果图的设计，FLASH动画的制作，使用DIV+CSS进行页面布局，以及掌握网页的上传方法。由于篇幅限制，本章中未加入动态编程语言ASP以及数据库的知识内容，读者可参考前几章的学习对网站功能进行重新设计。最终完成一个页面美观，功能强大的企业网站。;习题;二、单项选择题;三、操作题