网页制作教程-项目.ppt

项目八 美化网页,项目8 网页美化,【学习目标】掌握Photoshop软件工具箱的使用 掌握按钮和网页页面设计与制作 了解Flash软件制作动画的方法 了解网页的上传方法,任务8.1 制作购物网站首页,【任务说明】本项目主要制作化妆品网站首页，为了体现化妆品的天然和安全特性，Beauty化妆品购物网站采用比较安全的绿色系为主色调进行设计。通过Photoshop软件对Beauty化妆品网页进行美化设计。,【任务分析】本任务主要是对网页的整体页面、按钮进行设计，整项工作分解成以下过程：认识Photoshop软件图像管理网页按钮制作网站首页设计与制作网页切片与导出,认识Photoshop软件,Photoshop是Adobe公司旗下最为出名的一款图像处理软件，集图像扫描、编辑修改、图像制作、广告创意、图像输入与输出等功能于一体，深受广大平面设计人员和电脑美术爱好者的喜爱，也是制作网页时必不可少的网页图像处理软件之一。,图8-1 Photoshop CS4界面,图像管理,1.图像分辨率 分辨率确定了一幅图像的品质。分辨率表示最终打印的图像上每一线性英寸的像素数。2.图像格式 在Photoshop中，能够支持包括PSD、TIF、BMP、JPG、GIF、PNG等20多种格式的文件。在实际工作中，根据工作的不同要求，要使用的文件格式也不一样。常用的图像格式有以下几种。（1）.PSD（*.PSD）PSD格式是Photoshop自建的标准文件格式，它可以保存图像图层、通道及其他图像信息的惟一格式，由于PSD格式的图像包含有图层、通道、路径等较多的图像信息，虽然在保存为该格式时会对图像进行压缩以减少占用的磁盘空间，但它仍然比其他格式的图像文件要大得多。,（2）.BMP（*.BMP）BMP（Windows Bitmap）图像文件最早应用于Windows系统，是一种应用较为广泛的标准点阵图像文件格式，它支持RGB、Indexed、Color、灰度和位图色彩模式，但是不支持Alpha通道。另外，它还支持24位、8位、4位、1位的格式。这种格式特点是包含的图像信息较丰富，几乎不进行压缩，但占用磁盘空间较大。（3）.JPEG（*.JPG）JPEG的英文全称是Joint Photographic Experts Group（联合图片专家组），该格式的图像通常用于预览图像和网页制作。它是目前所有的图像格式中压缩比最高的格式。JPEG图像所占空间比已压缩的TIFF文件少一半，可用较少的磁盘空间存储质量较好的图像。JPEG格式的图像之所以能够变小，是由于它在保存的过程中丢掉了一些肉眼难以觉察的数据，所以其质量没有原来图像好，因而在制作印刷品时最好不要采用此格式保存图像。,（4）.GIF（*.GIF）GIF即图像交换格式，是CompuServe提供的一种图像格式，它使得通讯传输较为经济。它也可以使用LZW的压缩方式将文件压缩而不会占用太大的磁盘空间，这种压缩格式可以支持RGB、Indexed Color、灰度色彩模式，适用于高对比图像，可产生比JPEG格式更多的图像细节，但其应用范围有一定限制，多用于网页制作。（5）.TIFF（*.TIF）TIFF是Tagged Image File Format的缩写，即标签图像文件格式，它的出现不是专门为了某个软件而设计，而是为了方便不同的操作平台及应用程序间保存与交换图像数据信息，所以，它的应用非常广泛。它支持RGB、CMYK、Lab、Indexed Color、位图模式、灰度模式，并且在RGB、CMYK、灰度模式这3种色彩模式中还支持Alpha通道。TIFF独立于所有的操作系统和文件，大多数的扫描仪都可以输出TIFF格式的图像文件。,（6）.PNG（*.PNG）PNG格式是Netscape公司开发出来的格式，也是Fireworks的默认图像格式。可以用于网络图像，它能够保存24位的真彩色，这不同于GIF格式的图像只能保存256色。另外，它还支持透明背景和消除锯齿边缘的功能，可以在不失真的情况下压缩保存图像。PNG可知式在RGB和灰度模式下支持Alpha通道，但在索引颜色和位图模式下则不支持Alpha通道。（7）.EPS（*.EPS）EPS（Encapsulated PostScript）格式应用非常广泛，可以用于绘图或排版，是一种PostScript格式。其最大的优点是可以在排版软件中以低分辨率预览，将插入的文件进行编辑排版，而在打印时而以高分辨率输出，同时兼顾工作效率和图像输出质量。EPS支持Photoshop中的所有色彩模式，在位图模式下还可以支持透明，但不支持Alpha通道。,3.颜色模式 图像颜色模式是指图像在显示或打印时定义颜色的不同。在Photoshop CS4软件中提供了多种颜色模式：（1）位图颜色模式（2）灰度颜色模式（3）RGB颜色模式（4）CMYK颜色模式（5）Lab颜色模式（6）索引颜色模式,网页按钮制作,1.建立新文件2.制作按钮,网站首页布局与制作,1.网站页面布局2.内容添加,网页切片与导出,Photoshop具有强大的图像处理与绘制功能，主要用于创建静态图像，同时具有简单的图像切片、优化切片和将图像另存为Web页的功能，通过切片可以在图像保存为网页时，将每一个切片作为一个独立的文件进行存储。当保存的页面格式在Dreamweaver中打开时，Photoshop中生成的图片切片变成Dreamweaver表格中的各个单元格。,任务8.2 网站动态BANNER制作,【任务说明】动态的广告动画不但可以提高网页的访问量，还可以给静止的网页增加动画效果，要制作一个丰富多彩的网页，光靠文本是远远不够的。本任务是通过制作简单的文字动画，提高网页动画效果。,【任务分析】本任务将完成Beauty化妆品购物网站主页中的Banner动画制作，主要包括以下几个内容：FLASH的认识与基本操作利用FLASH制作BANNER动画网页中插入Flash动画,FLASH的认识与基本操作,Flash是Macromedia公司开发的一款集动画设计、Web网页站点开发等功能于一身的优秀软件，它具有体积小、兼容性好、直观动感、互动性强大等诸多的优点。,Flash界面简介,利用FLASH制作BANNER动画,（1）执行“文件”“新建”命令，在弹出的面板中选择“新建”“Flash文件（ActionScript3.0）”选项后，点击“确定”按钮，新建一个影片文档，在“属性”面板上设置文件大小为1040*160像素，“背景色”为白色，帧频为12fps。（2）选择“文件”“导入”“导入到库”命令，将banner背景图片导入到库，在库面板中，用鼠标将banner背景拖至场景1中，打开“对齐”面板，相对于舞台水平居中，垂直居中对齐。（3）选择“修改”“转换为元件”命令，将“图层1”中的图片bj转换为图形元件，在第150帧处插入一个普通帧，使背景图像延时显示。,利用FLASH制作BANNER动画,（4）将Logo素材图片导入到库，新建“图层2”在时间轴定位在第1帧的位置，使用鼠标将logo拖至场景1中，打开“对齐”面板，相对于舞台左端，顶端对齐。将“图层2”中的logo图片修改为“logo”图形元件。（5）在时间轴第50帧处插入一个关键帧，单击第1帧，选中元件logo，在图形属性面板中，将色彩效果样式下拉列表中，选择“Alpha”，将logo元素的Alpha值设为0%。单击第50帧，选中元件logo，在图形属性面板中，将色彩效果样式中的Alpha值设为100%，在时间轴第1帧、第50帧之间任何位置单击右键，在快捷菜单中选择“创建传统补间”。,利用FLASH制作BANNER动画,（6）新建“图层3”，在时间轴第65帧处插入关键帧，选择“文字工具”设置字体为“华文行楷”，大小为“72点”，颜色为“黑色”，如图8-31所示。将文字“时”修改为shi图形元件。（7）在“图层3”中，单击第65帧，选中元件shi，在图形属性面板中，将色彩效果中Alpha样式设为0%，在时间轴第80帧处插入关键帧，单击第80帧，选中元件shi，在图形属性面板中，将色彩效果中Alpha样式设为100%。在时间轴第65帧、第80帧之间创建传统补间。,利用FLASH制作BANNER动画,（8）新建“图层4”，在时间轴第80帧处插入关键帧，输入文字“尚”，将文字“尚”修改为shang图形元件。单击第80帧，选中元件shang，在图形属性面板中，将色彩效果中Alpha样式设为0%，在时间轴第95帧处插入关键帧，单击第95帧，选中元件shang，在图形属性面板中，将色彩效果中Alpha样式设为100%，在时间轴第80帧、第95帧之间创建传统补间。（9）新建“图层5”，在时间轴第95帧处插入关键帧，输入文字“购”将文字“购”修改为gou图形元件。单击第95帧，选中元件gou，在图形属性面板中，将色彩效果中Alpha样式设为0%，在时间轴第110帧处插入关键帧，单击第110帧，选中元件gou，在图形属性面板中，将色彩效果中Alpha样式设为100%，在时间轴第95帧、第110帧之间创建传统补间。,利用FLASH制作BANNER动画,（10）新建“图层6”，在时间轴第110帧处插入关键帧，输入文字“物”将文字“物”修改为wu图形元件。单击第110帧，选中元件wu，在图形属性面板中，将色彩效果中Alpha样式设为0%，在时间轴第125帧处插入关键帧，单击第125帧，在图形属性面板中，将色彩效果中Alpha样式设为100%，在时间轴第110帧、第125帧之间创建传统补间。（11）Flash做好后，在发布前应先清除文件内垃圾，选择“窗口”“库”命令，将库面板打开。在库面板右上角的下拉菜单里选择“选择未用项目”命令，单击“删除”按钮，flash会把所有没有用到的元件和图片删除，制作完成后，选择“文件”“保存”，按Ctrl+Enter组合键，动画就开始播放，并在保存文件的目录中产生一个.swf文件。,网页中插入Flash动画,Flash动画是网页上最流行的动画格式。在Dreamweaver CS4中，Flash动画也是最常用的多媒体插件之一，它将声音、图像和动画等内容加入到一个文件中，并能制作较好的动画效果，同时还使用了优化的算法将多媒体数据进行压缩，使文件变得很小，因此，非常适合在网上传播。将光标移至所需插入Flash动画的位置，选择“插入”“媒体”“SWF”命令，打开“选择文件”对话框。选择所需插入的Flash动画，单击“确定”按钮，即可插入到网页文档中。,任务8.3 网页域名与上传,【任务说明】网站完成后，用户需要申请域名、空间将网站落户在网上。本任务主要讲解域名选取的基本原则、注册流程、申请及网站文件上传等操作，使自己制作的网站在网络上安家落户。,【任务分析】本任务的主要目的是让自己制作的网站在网上出现，因此完成任务进行以下两方面的工作：空间和域名的申请网站文件的上传,空间和域名的申请,网站完成后想在网上落户，就需要申请域名、空间。域名是连接企业和互联网网址的纽带，是企业在网络上存在的标志。域名注册一般都是线上注册，流程为：（1）在线申请成为XX网络公司用户；（如：http:/）（2）汇款到您的帐户下；（3）查询域名是否注册；（4）填写域名资料；（5）通过购物车支付；（6）注册款自动从帐户扣除；（7）支付成功后，注册完毕。（8）空间申请完成。,网站文件的上传,假如申请了一个空间，域名为：，FTP地址为：，FTP账号：11845，设置的密码为：123456。下面通过IE浏览器实现网站文件的上传（还可以借助CUTEFTP等FTP上传软件、Dreamweaver站点的上传功能完成）。（1）打开IE浏览器，在地址栏输入：，（2）输入正确的用户名和密码后单击登录。（3）将本地WEB文件夹下的所有文件复制过去。（4）测试，打开IE浏览器，输入域名（），看是否完成操作。,相关知识,1.Flash动画属性的设置网页文档中插入Flash动画文件后，选中SWF对象，打开【属性】面板，除了前面介绍的播放和停止播放动画外，还可以设置其他属性。在SWF文件的【属性】面板中，主要参数选项的具体作用如下。【FlashID】：在左侧的未标记文本框中可以输入SWF文件的唯一ID名称。【宽】和【高】：可以在文本框中输入以像素为单位的数值，指定影片的宽度和高度。【文件】：指定SWF文件的路径。单击文件夹按钮可以浏览某一文件，也可以直接输入路径。,相关知识,【背景】：指定动画区域的背景颜色，在不播放动画时也显示此颜色。【编辑】按钮：单击该按钮，启动Flash来修改FLA文件。如果计算机上没有安装 Flash，则会禁用此选项。【类】：可用于对影片应用CSS类。【循环】：选中该复选框，可以连续播放动画。【自动播放】：选中该复选框，在加载页面时自动播放影片。【垂直边距】和【水平边距】：可以指定影片上、下、左、右空白区域大小的像素数。,相关知识,【品质】：在影片播放期间控制抗失真。高品质设置可改善影片的外观。但高品质设置的影片需要较快的处理器才能在屏幕上正确呈现。低品质设置会首先照顾到显示速度，然后才考虑外观，而高品质设置首先照顾到外观，然后才考虑显示速度。自动低品质会首先照顾到显示速度，但会在可能的情况下改善外观。自动高品质开始时会同时照顾显示速度和外观，但以后可能会根据需要牺牲外观以确保速度。【比例】：设置影片如何适合在宽度和高度文本框中设置的尺寸。默认设置为显示整个影片。,相关知识,【对齐】：设置影片在页面上的对齐方式。【Wmode】：为SWF文件设置Wmode参数以避免与DHTML元素，例如Spry构件相冲突。默认值是不透明，这样在浏览器中，DHTML元素就可以显示在SWF文件的上面。如果SWF文件包括透明度，并且希望DHTML元素显示在它们的后面，可以选择【透明】选项。选择【窗口】选项可以从代码中删除Wmode参数并允许SWF文件显示在其他DHTML元素的上面。,相关知识,2.休闲类网站设计风格（1）以产品展示为主的企业网站（2）以形象为主的企业网站（3）信息量大的企业网站（4）支持网上购物的企业网站,想一想 Photoshop软件常见的图像格式。怎样网页中插入Flash动画。域名注册的流程。网站文件上传的步骤。常见休闲类网站设计风格有哪些。,做一做利用Photoshop制作个人简历网站首页草图；切片，将草图保存为网页文件；申请空间、域名；将个人简历首页、相关文档上传；测试网站运行情况。,