《网页设计与制作教程》(教程全集)第2章

本章要点网页素材的搜集工具软件简介网站标志的制作系列图片和动画素材的制作动画与页面动态广告的制作第2章网页素材的搜集与制作快速导读本章以销售汽车的“超越”网站为例，逐步学习搜集和制作汽车销售网站所涉及的各种不同的素材。如收集各个品牌汽车的相关基本素材，制作网站标志Logo、导航背景与按钮，使用模板处理汽车品牌标志和网站标志，制作各网页头部动态广告素材，制作gif和swf动画。2.1搜集网页素材2.1.1广泛搜集网页素材准备素材包括：网站的Logo、Banner、图片、Flash动画、各种按钮、声音文件和视频文件等。材料既可以从图书、报纸、光盘或多媒体上获取，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。需要强调的是，不论是文字素材还是图片（动画）素材，都应该注意其来源是否注明版权所有，以免违反知识产权的有关规定。2.1搜集网页素材2.1.2紧扣网站主题，搜集并制作素材广泛搜集网页素材最终要为网站主题服务，因而在建设“超越”网站时，搜集网站素材很大程度上要搜集整理本公司资料和品牌代理公司资料。2.1搜集网页素材2.1.3整理素材把搜集的原始素材分门别类存放在一个文件夹中，比如chaoyue网站根文件夹。把编辑好的各类素材文件存放在网站根文件夹中的各类子文件夹中；images子文件夹中存放不同栏目的页面都要使用的公共图片素材文件。2.1搜集网页素材2.1.4明确素材命名规范在刚开始搜集素材时，应该制定一套明确的命名规则，以最少的字母表达出最容易理解的意义。2.2工具软件简介2.2.1平面制作软件PhotoshopCS4Photoshop软件主要用于平面图像画面的制作和处理，PhotoshopCS4版是目前最流行的版本。使用Photoshop可以制作颜色丰富、表现力强的精美画面。1、关于Photoshop工作区域2、关于工具3、帮助和支持2.2工具软件简介2.2.2网页效果图设计软件fireworksCS4Fireworks软件是一款创建与优化Web图像和快速构建网站与Web界面原型的理想工具。1、关于工作区域2、属性检查器3、帮助和支持2.2工具软件简介2.2.3动画制作软件FlashCS4Flash软件主要用于网页平面动画的制作，FlashCS4版是目前最流行的版本。使用Flash可以制作变化灵活、表现生动的动画影片。1、关于工作区域2、时间轴3、帮助和支持2.2工具软件简介2.2.4在Internet上查找所需信息通过Internet连接和MicrosoftInternetExplorer，可以查找和浏览Web上的所有信息。在Web中查找信息的方法有很多，单击工具栏上的“搜索”按钮可以访问多个搜索提供商。在“搜索”框中键入单词或短语，键入go、find或?，后跟单词或词组，按Enter键之后InternetExplorer将使用提供商预置的搜索开始搜索。进入网页后，单击“编辑”菜单，然后单击“查找（在当前页）”，可以搜索指定的文本。2.2工具软件简介2.2.5屏幕捕获工具SnagIt7和中华神捕1.521、屏幕捕获工具SnagIt7是一个非常优秀的屏幕、文本和视频捕获与转换软件。可以捕获Windows屏幕、DOS屏幕；RM电影、游戏画面；对象、菜单、窗口、客户区窗口、最后一个激活的窗口或用鼠标定义的区域及延时捕获的图像。图像可被存为BMP、PCX、TIF、GIF或JPEG格式，也可以存为系列动画。2、中华神捕2.62是一款超级方便的屏幕抓图、做图以及图片浏览工具。2.3制作背景与按钮2.3.1制作金灰色渐变背景渐变色的背景在网页中十分常见，可通过使用PhotoShop来制作一款非常有代表性的网页背景图像效果。2.3制作背景与按钮2.3.2制作素材色渐变背景渐变色的背景很常见，但是颜色的选取确是个大问题，其实有一个非常简单的技巧就可以轻松获得适当的色彩，就是从图像中直接选取所需要的颜色。2.3制作背景与按钮2.3.3制作冰雪花边背景在制作特殊背景效果的时候，使用PhotoShop软件所自带的滤镜，往往可以给人意外的惊喜。下面使用PhotoShop的滤镜来制作冰雪花边的背景效果。2.3制作背景与按钮2.3.4制作首页按钮网页中的按钮是网页上使用频率最高的页面元素，当然按钮的设计也是多种多样，下面将使用PhotoShop来设计一款比较实用的按钮效果。2.3制作背景与按钮2.3.5制作主页背景图像很多网站的主页都会添加背景图像，下面将使用PhotoShop来制作一款能够平铺的背景图像效果。2.4制作网站标志2.4.1新建图像文件2.4.2处理道路素材2.4.3处理汽车素材2.4.4导入素材图像2.4.5变换道路图像2.4.6填充渐变背景2.4.7调整汽车图像2.4.8书写文字2.4.9保存文件、输出图像2.5制作系列图片和动画素材2.5.1创建模板2.5.2使用模板制作各汽车品牌标识2.5.3主页头部动画素材2.5.4养车用车头部动画素材2.5.5车型图库头部动画素材2.5.6最新车型头部动画素材2.6制作“手指动作”动画2.6.1创建动画文档2.6.2书写文本2.6.3文本阴影2.6.4书写特殊符号2.6.5制作“遮罩”图形元件2.6.6制作“左视眼”图形元件2.6.7制作“眼睛”影片剪辑元件2.6.8引用元件实例2.6.9制作各类动画2.7制作首页动画2.7.1导入背景图像2.7.2绘制路径2.7.3制作“汽车”元件2.7.4制作“车1”补间动画2.7.5制作“车2”补间动画2.7.6制作“车1”和“车2”的轨道动画2.7.7制作“车3”和“车4”的轨道动画2.8制作页面动态广告2.8.1主页头部广告动画2.8.2车型图库头部广告动画2.8.3养车用车头部广告动画2.8.4最新车讯头部广告动画2.9习题一、简答题1、你认为怎样才能有效地收集网页制作的素材？2、怎样在PhotoshopCS4中按照某一图片的大小来创建一个新文件？3、在PhotoshopCS4中，怎样打开或关闭一个面板？4、在PhotoshopCS4中，总结图像优化有哪几种途径？5、在FlashCS4中简要说明后辍为swf的文件的导出方法。6、FlashCS4元件能给动画的制作带来哪些好处？2.9习题二、操作题1、结合本章为网站创建标志的过程，自行设计一个网站标志。2、找来两张图片，把它们导入到一个新建文档，先进行图像的裁剪，接着选用文本工具，输入一些文字，然后进行图像的进一步编辑与合成。3、制作主页及其他页面中所使用的背景图像。4、在PhotoshopCS4中，用模板制作其他品牌标志。制作“品牌链接标志模板（品牌图案、中文名称和英文名称）”，并将品牌链接标志用模板制作。5、利用FlashCS4为网站制作几个不同效果的动态广告条。6、利用PhotoshopCS4为网站制作几个不同形状按钮。