网页制作教程-项目

《网页制作教程-项目》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、项目八美化网页项目8网页美化【学习目标】掌握Photoshop软件工具箱的使用掌握按钮和网页页面设计与制作了解Flash软件制作动画的方法了解网页的上传方法任务8.1制作购物网站首页【任务说明】本项目主要制作化妆品网站首页，为了体现化妆品的天然和安全特性，Beauty化妆品购物网站采用比较安全的绿色系为主色调进行设计。通过Photoshop软件对Beauty化妆品网页进行美化设计。【任务分析】本任务主要是对网页的整体页面、按钮进行设计，整项工作分解成以下过程：认识Photoshop软件图像管理网页按钮制

2、作网站首页设计与制作网页切片与导出认识Photoshop软件Photoshop是Adobe公司旗下最为出名的一款图像处理软件，集图像扫描、编辑修改、图像制作、广告创意、图像输入与输出等功能于一体，深受广大平面设计人员和电脑美术爱好者的喜爱，也是制作网页时必不可少的网页图像处理软件之一。图8-1PhotoshopCS4界面图像管理1.图像分辨率分辨率确定了一幅图像的品质。分辨率表示最终打印的图像上每一线性英寸的像素数。2.图像格式在Photoshop中，能够支持包括PSD、TIF、BMP、JPG、GIF、PNG等

3、20多种格式的文件。在实际工作中，根据工作的不同要求，要使用的文件格式也不一样。常用的图像格式有以下几种。（1）.PSD（*.PSD）PSD格式是Photoshop自建的标准文件格式，它可以保存图像图层、通道及其他图像信息的惟一格式，由于PSD格式的图像包含有图层、通道、路径等较多的图像信息，虽然在保存为该格式时会对图像进行压缩以减少占用的磁盘空间，但它仍然比其他格式的图像文件要大得多。（2）.BMP（*.BMP）BMP（WindowsBitmap）图像文件最早应用于Windows系统，是一种应用较为广泛的标准

4、点阵图像文件格式，它支持RGB、Indexed、Color、灰度和位图色彩模式，但是不支持Alpha通道。另外，它还支持24位、8位、4位、1位的格式。这种格式特点是包含的图像信息较丰富，几乎不进行压缩，但占用磁盘空间较大。（3）.JPEG（*.JPG）JPEG的英文全称是JointPhotographicExpertsGroup（联合图片专家组），该格式的图像通常用于预览图像和网页制作。它是目前所有的图像格式中压缩比最高的格式。JPEG图像所占空间比已压缩的TIFF文件少一半，可用较少的磁盘空间存储质量较好的

5、图像。JPEG格式的图像之所以能够变小，是由于它在保存的过程中丢掉了一些肉眼难以觉察的数据，所以其质量没有原来图像好，因而在制作印刷品时最好不要采用此格式保存图像。（4）.GIF（*.GIF）GIF即图像交换格式，是CompuServe提供的一种图像格式，它使得通讯传输较为经济。它也可以使用LZW的压缩方式将文件压缩而不会占用太大的磁盘空间，这种压缩格式可以支持RGB、IndexedColor、灰度色彩模式，适用于高对比图像，可产生比JPEG格式更多的图像细节，但其应用范围有一定限制，多用于网页制作。（5）.T

6、IFF（*.TIF）TIFF是TaggedImageFileFormat的缩写，即标签图像文件格式，它的出现不是专门为了某个软件而设计，而是为了方便不同的操作平台及应用程序间保存与交换图像数据信息，所以，它的应用非常广泛。它支持RGB、CMYK、Lab、IndexedColor、位图模式、灰度模式，并且在RGB、CMYK、灰度模式这3种色彩模式中还支持Alpha通道。TIFF独立于所有的操作系统和文件，大多数的扫描仪都可以输出TIFF格式的图像文件。（6）.PNG（*.PNG）PNG格式是Netscape公司开

7、发出来的格式，也是Fireworks的默认图像格式。可以用于网络图像，它能够保存24位的真彩色，这不同于GIF格式的图像只能保存256色。另外，它还支持透明背景和消除锯齿边缘的功能，可以在不失真的情况下压缩保存图像。PNG可知式在RGB和灰度模式下支持Alpha通道，但在索引颜色和位图模式下则不支持Alpha通道。（7）.EPS（*.EPS）EPS（EncapsulatedPostScript）格式应用非常广泛，可以用于绘图或排版，是一种PostScript格式。其最大的优点是可以在排版软件中以低分辨率预览，将

8、插入的文件进行编辑排版，而在打印时而以高分辨率输出，同时兼顾工作效率和图像输出质量。EPS支持Photoshop中的所有色彩模式，在位图模式下还可以支持透明，但不支持Alpha通道。3.颜色模式图像颜色模式是指图像在显示或打印时定义颜色的不同。在PhotoshopCS4软件中提供了多种颜色模式：（1）位图颜色模式（2）灰度颜色模式（3）RGB颜色模式（4）CMYK颜色模式（5）Lab颜