第 4 章网页素材准备

第4章网页素材准备

本章学习目标 (1) 理解制作网站所需的素材的类型和要求； (2) 能利用素材制作软件(Photoshop、GIF、Flash)制作需要的网页素材。

本章知识结构 网页素材基础知识 4.1关于网页素材图形图像素材准备 4.2制作网页中的图像 Flash动画素材准备 4.3制作网页中的动画 Flash动画素材准备 4.4制作FLASH网页素材 Flash视频准备

本章案例 • 主要介绍如何设计、实现和管理网页中的各类素材，即图形图像素材，动画素材，Flash动画，Flash视频 • 本章中有如下案例： 1．网站LOGO的设计制作 2．横幅“字效”动画 3．Flash相册与按钮导航条 4．Flash视频获取

4.1 关于网页素材——文本 • 文本文本是网页上的最基本的素材，也是最广泛的素材。文本的特点是简洁、易懂，能直接反映主题内容，在网上传输速度快，而且网页中可以对文本进行大小，颜色，字体，排列等格式进行设置，同样能达到赏心悦目的效果。 • 文本获得途径字处理软件（以文件的形式）；网页开发环境中的文字工具。 • 文本文件的格式 txt、doc、rtf和wri等。

4.1关于网页素材——图像 • 图像图像是网页上的另一个最基本的素材。图像这种素材相对于文字而言更加真实、直观，丰富多彩，在网页上也更具吸引力，能给人更强的视觉感受。 • 图像获得途径图形图像处理软件（以文件的形式）；网页开发环境中的图形图像工具；扫描仪、摄像机、数码照相机捕捉图像；网上共享和免费图像等。 • 图像格式 BMP、JPEG、GIF、TIFF、PCX、PCD和WMF等，它们之间能通过图像处理软件相互转换。

4.1关于网页素材——动画 • 动画动画已成为网页制作的一个重要组成部分，动画可引起用户对重要信息的注意；可显示某种动态过程；还可实现自动放映幻灯片等多种特殊效果。网页中的动画可以使网页更具动感，更能吸引浏览者。 • 动画获得途径利用动画软件制作；从素材库或网络上搜索。 • 图像格式网页上的动画一般有GIF格式和Flash动画。

4.1关于网页素材——音频 • 音频一个网页中如果有合适音频的话，会增加网站的粘合度和互动性，给网页带来活力，但考虑到声音文件一般较大，在网络上传输需要对声音文件进行压缩处理。 • 音频获得途径利用声卡从麦克风中采集声音，搜索网络上提供的声音文件和用专门的软件抓取CD或VCD、DVD中的声音等途径可获得声音文件。 • 音频格式 WAV 、MID(MIDI)和MP3等，可以利用软件进行格式转换

4.1关于网页素材——视频 • 视频随着网络带宽的增加，视频网站也如雨后春笋纷纷冒出，视频显示在网页中也越来越多。视频文件格式也是多样的，就目前而言，最常用的就是FLV视频，已经成为当前视频文件的主流格式。 • 视频获得途径用数码摄像机录制、从素材库下载或购买、先用视频压缩卡采集再用视频编辑软件处理、从VCD和DVD中直接截取。 • 视频格式 AVI、FLV、MPG、MOV、DAT、ASF、WMV、RM和FLV视频等

4.2 网页中的图像制作 • 准备工作——认识Photoshop CS3 • 功能简述 • 工作界面

4.2制作网页中的图像 • 案例实践—— 制作网站LOGO

4.2制作网页中的图像 • 案例—— 制作网站LOGO • 经过了以下步骤： • 准备素材 • 启动Photoshop，新建文档 • 绘制椭圆 • 绘制黄色双边星形 • 输入文字 • 输入线条 • 增加图层样式，为文字设置投影

4.2制作网页中的图像 • 案例扩展——制作导航栏按钮图像

4.2制作网页中的图像 • 技巧总结 • Layer（图层） • 工具箱中的工具 • 文字图层 • 图层样式

4.3 制作网页中的动画 • 准备工作——认识Ulead GIF Animator • Ulead GIF Animator的功能简述 • Ulead GIF Animator的工作界面

4.3 制作网页中的动画 • 案例——校园网站的横幅

4.3 制作网页中的动画 • 案例实现过程 • 准备素材 • 建立动画背景文件 • 输入文字并添加阴影效果 • 拆分文字，实现“打字”动画 • 保存为GIF动画

4.3 制作网页中的动画 • 案例扩展——优化GIF动画网络动画需要压缩处理，以获得较小的文件，Ulead GIF Animator提供了优化视图，从中能实现对动画文件的压缩和颜色优化处理。

4.3 制作网页中的动画 • 技巧总结 • “动画向导”功能可以非常快速地完成GIF动画制作 • 横幅动画的制作 • Ulead GIF Animater动画的制作步骤

4.4 制作Flash网页素材 • 准备工作——认识Flash CS3 • 功能简述 • Flash CS3的特点、基本环境

4.4 制作Flash网页素材 • 案例——制作FLASH相册

4.4 制作Flash网页素材 • 案例实现过程 • 准备素材 • 新建Flash文档，并设置文档属性 • 制作图形元件 • 制作影片剪辑元件 • 设置影片剪辑元件中的渐显动画效果 • 制作按钮元件 • 制作交互菜单面板 • 制作场景 • 编写交互脚本 • 添加照片上的当前标记色块

4.4 制作Flash网页素材 • 案例扩展——利用照片幻灯片模板快速制作动画 • 执行【文件】|【新建】命令，打开【从模板新建】对话框。 • 执行【文件】|【导入】|【导入到库】命令，打开【导入到库】对话框，选择需要显示的图像，将图像导入到【库】面板。 • 选中 picture layer图层的第1帧，按Delete键将舞台上的图像删除，从【库】面板中拖曳一张图像到舞台上，在【属性】面板中设置宽、高。 • 按照上述方法分别处理picture layer图层的第2帧、第3帧和第4帧，执行【控制】|【测试影片】命令，测试动画效果。 • 增加图像 • 在模板中的captions层中给每张图像加标题

4.4 制作Flash网页素材 • 案例——制作FLASH导航菜单 (a) 导航菜单栏效果1 (b) 导航菜单栏效果2

4.4 制作Flash网页素材 • 案例实现步骤——制作Flash导航菜单画面 • 新建Flash文档 • 制作图形元件 • 制作影片剪辑元件 • 制作影片剪辑元件中的遮罩动画 • 制作按钮元件 • 制作其他导航按钮 • 制作场景 • 导入声音

4.4 制作Flash网页素材 • 案例扩展——Flash导航按钮链接 • 选中场景中的“按钮1”元件，按F9键，打开【动作-按钮】面板，增加语句。 on(release){ getURL("http://www.pku.edu.cn","_blank"); } • _blank表示指定一个新窗口，将特定http://www.pku.edu.cn的文档加载到窗口中。

4.4 制作Flash网页素材 • 转换Flash视频文件FLV • FLV是Flash Video的简称，是由Macromedia公司开发的一种流式视频格式，其特点是文件小，加载速度快，并有效解决了在Flash导入视频后生成的SWF文件庞大的缺点。 • 在Flash MX以上的版本中都可以生成FLV格式的视频。利用CS3套件提供的Flash CS3 Video Encoder工具可以实现其他视频文件格式到FLV格式的转换。 • Flash CS3 Video Encoder支持的转换视频格式有AVI、WMV、MPEG、ASF、MOV等常见视频格式。

4.4 制作Flash网页素材 • 转换Flash视频文件FLV 的步骤 • 安装Adobe Design Premium CS3，在安装选项中选择Adobe Flash Video Encoder组件 • 启动Flash Video Encoder 。 • 单击【增加】按钮，出现【打开】对话框，选择需要转换的视频文件。 • 如想对视频进行设置，再单击主窗口中的【设置】按钮，打开【Flash视频编码设置】对话框。在【编码配置文件】选项卡中进行FLV视频品质设置。 • 单击【开始队列】按钮，程序开始视频转换，随着进度条结束，即可生成FLV文件。

4.4 制作Flash网页素材 • 技巧总结 • FLASH有自己独有的一些概念，如帧和图层 • 图形是FLASH动画的最基本的组成元素 • 元件是构成FLASH动画对象的单位 • 制作Flash动画的方法有多种 • 要制作交互动画，需要在动画中添加动作脚本 • 声音是对Flash动画的修饰

第 4 章 网页素材准备