Cha19项目指导制作宠物网站

第19章项目指导——制作宠物网站（时间：2次课，4学时）第19章项目指导——制作宠物网站以前宠物只是单指人们为了消除孤寂或出于娱乐目的而豢养的动物。现今宠物定义为，出于非经济目的而豢养的动植物，本章介绍如何制作宠物网站。第19章项目指导——制作宠物网站19.1制作网页中的图片19.2制作网页封面动画19.3制作宠物网站19.1制作网页中的图片本节将介绍如何利用PhotoshopCC制作网页中的图片，效果如图19.1所示，其具体操作步骤如下：(1)启动PhotoshopCC，按Ctrl+N组合键，在弹出的【新建】对话框中将【宽度】和【高度】分别设置为746、330像素，将【分辨率】设置为72像素/英寸，如图19.2所示。(2)设置完成后单击【确定】按钮，在工具箱中单击【圆角矩形工具】，在工具选项栏中将【工具模式】设置为【路径】，将【圆角半径】设置为10像素，绘制一个【高度】和【宽度】分别为534像素、330像素，将【X】、【Y】分别设置为2像素、0像素，如图19.3所示。图19.1网页中的图片图19.2【新建】对话框图19.3绘制圆角矩形19.1制作网页中的图片(3)绘制完成后，按Ctrl+Enter组合键，将其载入选区，在【图层】面板中单击【新建图层】按钮，新建图层，将该图层的名称设置为【白色圆角矩形】，将【背景色】设置为白色，按Ctrl+Delete组合键填充背景色，如图19.4所示。(4)填充完颜色后，按Ctr+D组合键取消选择，在【图层】面板中双击【白色圆角矩形】图层，在弹出的对话框中选择【描边】样式，将【大小】设置为5，将【位置】设置为【内部】，将【颜色】的RGB值设置为240、238、238，如图19.5所示。(5)设置完成后，单击【确定】按钮，即可为选中的图层添加图层样式，效果如图19.6所示。图19.4新建图层并填充白色图19.5设置描边参数图19.6添加图层样式后的效果19.1制作网页中的图片(6)按Ctrl+O组合键，在弹出的对话框中选择随书附带光盘中的CDROM\素材\Cha19\彩虹.jpg素材文件，如图19.7所示。(7)单击【打开】按钮，将选中的素材文件打开，如图19.8所示。(8)在工具箱中单击【移动工具】，按住鼠标将该素材拖拽至绘制圆角矩形的场景中，效果如图19.9所示。图19.7选择素材文件图19.8打开的素材文件图19.9添加素材文件19.1制作网页中的图片(9)在【图层】面板中，按Alt键在【图层1】与【白色圆角矩形】图层的分界处单击，创建剪切蒙版，效果如图19.10所示。(10)根据前面所介绍的方法将【彩虹伞.png】素材文件添加到该场景中，释放其剪贴蒙版，并调整其位置，如图19.11所示。(11)在【图层】面板中单击【新建图层】按钮，新建图层3，在工具箱中单击【椭圆选框工具】，在文档中绘制一个椭圆形，如图19.12所示。图19.10创建剪切蒙版图19.11添加素材文件并调整其位置图19.12绘制椭圆形19.1制作网页中的图片(12)绘制完成后，在菜单栏中选择【编辑】|【描边】命令，如图19.13所示。(13)在弹出的对话框中将【宽度】设置为1像素，将【颜色】设置为【黑色】，如图19.14所示。(14)设置完成后，单击【确定】按钮，对【图层3】进行复制并调整其大小和位置，调整后的效果如图19.15所示。图19.13选择【描边】命令图19.14设置描边参数图19.15复制图层并调整图形的大小及位置19.1制作网页中的图片(15)在【图层】面板中单击【新建图层】按钮，新建图层4，在工具箱中单击【钢笔工具】，在文档中绘制一个如图19.16所示的图形。(16)按Ctrl+Enter组合键，将绘制的图形载入选区，将前景色设置为黑色，按Alt+Delete组合键填充前景色，如图19.17所示。(17)按Ctrl+D组合键取消选择，使用【移动工具】调整该图形的位置，调整后的效果如图19.18所示。图19.16绘制图形图19.17填充前景色图19.18调整图形的位置19.1制作网页中的图片(18)在工具箱中单击【横排文字工具】，在文档中单击鼠标，输入文字，选中输入的文字，在【字符】面板中将字体设置为【方正粗圆简体】，将字体大小设置为36，将行距设置为33点，将【颜色】设置为【白色】，如图19.19所示。(19)在【图层】面板中选择文字图层，按住鼠标将其拖拽至【新建图层】按钮上，对其进行复制，如图19.20所示。(20)选择复制后的图层，双击该图层，在弹出的对话框中选择【渐变叠加】样式，在【渐变】选项组中单击渐变条，在弹出的对话框中将位置0处的色标的RGB值设置为41、137、204，在位置49处添加一个色标，并将其设置为白色，在位置52处添加一个色标，将其RGB值设置为255、165、193，如图19.21所示。图19.19输入文字并进行设置图19.20复制图层后的效果图19.21设置渐变颜色19.1制作网页中的图片(21)设置完成后，单击【确定】按钮，在返回至的【图层样式】对话框中单击【确定】按钮，在文档中调整文字的位置，效果如图19.22所示。(22)使用相同的方法，再在文档中输入其他文字，并对其进行相应的设置，效果如图19.23所示。(23)按Ctrl+O组合键，在弹出的对话框中选择随书附带光盘中的CDROM\素材\Cha19\泰迪.jpg，如图19.24所示。图19.22添加图层样式后的效果图19.23输入其他文字后的效果图19.24选择素材文件19.1制作网页中的图片(24)单击【打开】按钮，在工具箱中单击【魔术橡皮擦工具】，在工具选项栏中将【容差】设置为32，在素材文件的空白位置处单击，取消背景颜色，如图19.25所示。(25)选择【移动工具】，将该素材文件拖拽至网页图片的场景中，按Ctrl+T组合键变换选取，在工具选项栏中单击【保持长宽比】按钮，将【W】和【H】都设置为29，并调整其位置，如图19.26所示。(26)按Enter键确认，在工具箱中单击【模糊工具】，在文档中对泰迪进行涂抹，完成后的效果如图19.27所示。图19.25擦除背景图19.26调整素材的大小图19.27对素材进行模糊化19.1制作网页中的图片(27)使用同样的方法添加其他素材文件，并输入相应的文字，完成后的效果如图19.28所示。(28)在菜单栏中选择【文件】|【存储为】命令，如图19.29所示，在弹出的对话框中指定保存路径和文件名称。图19.28添加其他素材和文字后的效果图19.29选择【存储为】命令19.2制作网页封面动画本例来介绍一下【封面动画】的制作，该例主要是为素材图片添加传统补间，创建影片剪辑元件和按钮元件等，效果如图19.30所示。图19.30封面动画19.2.1制作加载动画在制作网页封面动画之前，首先要制作封面动画前面的加载动画，其具体操作步骤如下：(1)在菜单栏中选择【文件】|【新建】命令，弹出【新建文档】对话框，在【类型】列表框中选择【ActionScript3.0】选项，然后在右侧的设置区域中将【宽】设置为1024像素，将【高】设置为687像素，将【背景颜色】设置为#666666，如图19.31所示。(2)单击【确定】按钮，即可新建一个空白文档，在菜单栏中选择【插入】|【新建元件】命令，如图19.32所示。(3)在弹出的对话框中将【名称】设置为【加载动画】，将【类型】设置为【影片剪辑】，如图19.33所示。图19.31【新建文档】对话框图19.32选择【新建元件】命令图19.33【转换为元件】对话框19.2.1制作加载动画(4)设置完成后，单击【确定】按钮，在工具箱中单击【矩形工具】，在舞台中绘制一个【宽】和【高】分别为273、23.3，将【笔触颜色】设置为【#999999】，将填充颜色设置为无，将【笔触】设置为3，如图19.34所示。(5)确认该图形处于选中状态，按F8键，在弹出的对话框中将【名称】设置为【加载框】，将【类型】设置为【图形】，并调整其对齐方式，如图19.35所示。(6)设置完成后，单击【确定】按钮，在舞台中调整其位置，在【时间轴】面板中选择【图层1】的第100帧，右击鼠标，在弹出的快捷菜单中选择【插入帧】命令，如图19.36所示。图19.34设置矩形属性图19.35将绘制的矩形转换为元件图19.36选择【插入帧】命令19.2.1制作加载动画(7)在【时间轴】面板中单击【新建图层】按钮，新建图层2，在工具箱中单击【矩形工具】，在舞台中绘制一个【宽】和【高】分别为4、10的矩形，将【笔触颜色】设置为【无】，将【填充颜色】设置为【#999999】，如图19.37所示。(8)选择【图层2】的第100帧，按F6键插入关键帧，在【属性】面板中将【宽】设置为263，如图19.38所示。(9)选择【图层2】的第70帧，右击鼠标，在弹出的快捷菜单中选择【创建补间形状】命令，如图19.39所示。图19.37绘制矩形图19.38插入关键帧并设置图形的宽度图19.39选择【创建补间形状】命令19.2.1制作加载动画(10)在【时间轴】面板中单击【新建图层】按钮，在工具箱中单击【文本工具】，在舞台中单击鼠标，输入文字，选中输入的文字，在【属性】面板中将字体设置为【Tahoma】，将样式设置为【Bold】，将【大小】设置为44，将【颜色】设置为#999999，取消勾选【自动调整字距】复选框，在舞台中调整文字的位置，如图19.40所示。(11)返回至场景1中，在【库】面板中选择【加载动画】影片剪辑元件，按住鼠标将其拖拽至舞台中，并调整其位置，选择该元件，在【属性】面板中将【样式】设置为【高级】，并设置其参数，如图19.41所示。(12)在【时间轴】面板中选择【图层1】的第101帧，右击鼠标，在弹出的快捷菜单中选择【插入空白关键帧】命令，如图19.42所示。图19.40输入文字并进行设置图19.41调整元件位置并添加高级样式图19.42选择【插入空白关键帧】命令19.2.1制作加载动画(13)在【时间轴】面板中选择【图层1】的第101帧，在工具箱中单击【矩形工具】，在舞台中绘制一个【宽】和【高】分别为972、536，将【填充颜色】设置为【#FFCC00】，如图19.43所示。(14)选择【图层1】的第185帧，右击鼠标，在弹出的快捷菜单中选择【插入帧】命令，如图19.44所示。图19.43绘制矩形并设置其参数图19.44选择【插入帧】命令19.2.2制作按钮动画效果下面将介绍如何制作按钮动画效果，其具体操作步骤如下：(1)按Ctrl+F8组合键，在弹出的对话框中将【名称】设置为【狗狗1动画】，将【类型】设置为【影片剪辑】，如图19.45所示。(2)设置完成后，单击【确定】按钮，按Ctrl+R组合键，在弹出的对话框中选择随书附带光盘中的CDROM\素材\Cha19\狗狗1.jpg素材文件，如图19.46所示。(3)选择完成后，单击【打开】按钮，在【属性】面板中将【X】、【Y】都设置为0，将【宽】和【高】分别设置为243、134，如图19.47所示。图19.45【创建新元件】对话框图19.46选择素材文件图19.47设置图片大小和位置19.2.2制作按钮动画效果(4)确认该素材文件处于选中状态，按F8键，在弹出的对话框中将【名称】设置为【狗狗1】，将【类型】设置为【影片剪辑】，调整其对齐方式，如图19.48所示。(5)设置完成后，单击【确定】按钮，在【时间轴】面板中选择【图层1】的第3帧，按F6键插入关键帧，在【属性】面板中单击【添加滤镜】按钮，在弹出的下拉列表中选择【调整颜色】命令，如图19.49所示。(6)在【属性】面板中将【调整颜色】选项组中的【亮度】、【对比度】、【饱和度】、【色相】分别设置为30、25、0、1，如图19.50所示。图19.48【转换为元件】对话框图19.49选择【调整颜色】命令图19.50设置调整颜色的参数19.2.2制作按钮动画效果(7)继续选中该对象，在【属性】面板中单击【添加滤镜】按钮，在弹出的下拉列表中选择【发光】命令，如图19.51所示。(8)在【属性】面