新的一年就要到来了，今天我们来制作一个很简单又非常有趣的动态贺卡页面送给自己的朋友们吧！我们首先用Fireworks来绘制一个可爱的新年场景，然后对绘制的图像进行切割，导出为HTML页面，再通过简单Javasript代码的调用，生成一个功能强大的贺卡页面：只要你输入好友姓名，就能够生成专门给好友的定制页面和链接。当朋友们收到你为他们送上的特殊祝福，一定会非常开心的。文章末尾提供原文件供大家下载参考。原文件下载

　　制作步骤：

　　一、静态场景绘制

　　 场景描述：一场大雪之后，堆一个胖胖的雪人。蓝蓝的天空，白白的雪地上，一个憨厚可爱的雪人给寒冷的冬天带来了许多乐趣，就连顽皮的小狗狗都被吸引过来了，围着雪人好奇的看个不停。这个场景是不是也牵动了你们童年的思绪呢？

　　 1． 我们首先在Fireworks中新建一个大小为1024×768的图像，从而能够让这个图片可以作为桌面来使用。先在脑海中构想一下蓝色的天空、白色的雪地。首先使用矩形工具为图像绘制一个背景，这里填充使用线性填充，左边的颜色滑块设置为#013366，右边的颜色滑块设置为#FFFFFF，得到如图1所示的图像。

　　

　　图1 绘制图像背景

　　 2、接下来我们就开始绘制雪人了。首先是雪人圆圆的脑袋，先绘制一个椭圆，填充设置为用白色实心填充，笔触大小为4，颜色为#858786，采用柔化圆形的方式来得到一种朦胧的效果，如图2所示。

　　

　　图2 绘制雪人的脑袋

　　 3、然后就是雪人胖胖的身子了，使用椭圆工具绘制一个椭圆然后使用部分选定工具将其锚点进行调整，就得到雪人的身子了，将头部排列位置移到最前面，便于下一步的操作。如图3所示。

　　

　　图3 绘制雪人的身子

　　 4、要将雪人的脑袋和身子连成一个整体，就要用到刀子工具，选中圆圆的脑袋，然后选择工具箱上的刀子工具，将不要的部分裁掉，如图4所示。

　　

　　图4 选择要裁掉的部分

　　 5、按Delete键就可以将多余的部分切掉，得到如图5所示的雪人完整的身子。

　　

　　图5 裁切后完整的身子

　　 6、在堆雪人的时候，我们通常会用小桶作为雪人的帽子，下面我们就为雪人添加一个可爱的小帽子。使用矩形工具绘制一个矩形，然后取消组合使用部分选定工具将其进行调整，使用实心填充，笔触和实心的颜色都设置为#FA0234，得到如图6所示的小帽子。

　　

　　图6 为雪人添加小帽子

　　 7、小桶通常都会有一个小提手，扣在雪人头上就好像是帽子的一条带子，使雪人更加可爱，下面就来添加这样一条带子。用直线工具绘制一条直线，选择无填充，笔触大小为4，颜色设置为跟小桶一样的#FA0234，选择自由变形工具，将直线调整成弯曲的形状，如图7所示。

　　

　　图7 为帽子添加一条带子

　　 8、接下来就要为雪人添加眼睛、鼻子和嘴巴了。雪人的眼睛很简单，只要绘制两个圆形，用黑色填充就可以了。绘制一个椭圆，使用部分选定工具将其进行形状上的调整，选择红色填充，就可以得到雪人的鼻子。绘制两条直线，选择自由变形工具，将直线调整成弯曲的形状，选择无填充，黑色笔触就可以得到雪人的嘴巴，如图8所示。

　　

　　图8 为雪人添加眼睛、鼻子和嘴巴

　　 9、然后我们为雪人添加上两个由树枝做成的小胳膊。仍然是用到画几条直线，选择自由变形工具，将直线调整成树枝的形状，选择无填充，笔触选择的颜色是#5F2C00，样式选择毛毡笔尖中的暗色标记，将树枝的枝条组合到一起，就形成了雪人的胳膊，如图9所示。design.yesky.com©天极软件频道设计在线原创©2001374542

　　

　　图9 为雪人添加胳膊

　　 10、接下来我们为雪人添加一个雪地投影，显示出阳光的照射。绘制一个椭圆，填充颜色设为#666666，使用部分选定工具将其锚点进行调整，并将其移到雪人的背后，就得到如图10所示的阴影。

　　

　　图10 添加雪地投影

　　 11、接下来就该绘制可爱的小狗狗了。先勾勒出小狗的轮廓，绘制一个椭圆，填充颜色设为#E6A116，画笔颜色设置为#673301，使用部分选定工具和自由变形工具将其锚点进行调整，并移到雪人的背后，雪地投影之上，如图11所示。

　　

　　图11 勾勒小狗的轮廓

　　 12、接下来我们给小狗添加耳朵和尾巴，如图12所示。

　　

　　图12 给小狗添加耳朵和尾巴

　　 13、给小狗的嘴巴和肚皮添加一些高光和阴影，使得小狗显示出立体感。这里我们可以用钢笔工具描画，或者绘制一个椭圆进行自由变形，如图13所示。

　　

　　图13 添加高光和阴影

　　 14、给小狗添加上眼睛、鼻子和嘴巴，只要几个圆形，几条直线，任意变形组合，小狗活灵活现的面部表情就出现了，如图14所示。

　　

　　图14 给小狗添加眼睛、鼻子和嘴巴

　　 15、为了增加一点顽皮的气息，我们还可以在雪人的头上，小狗的头上以及树枝上面都添加一些雪，如图15所示，是不是觉得非常可爱呀？

　　

　　图15 添加雪堆

　　 16、最后让我们给图片添加上漫天飞舞的雪花，更增添上一份浪漫的情调。如图16所示。

　　

　　图16 添加漫天雪花

　　 17、这样一副富有冬天色彩的雪人和小狗就做好了，将图片导出看一下效果，如图17所示。这里为了将来的贺卡制作，我们将图像导出宽度设置为760，以方便800×600的屏幕分辨率，如果读者用于做桌面就直接导出为1024×768即可，就不用在导出预览中设置大小了。

　　

　　图17 导出后的图片

　　二、制作显示输入名字的定制祝福页面

　　 18．图是制作好了，下面我们的工作就是要将其制作成为一个能够输入好友姓名就可以送上祝福的HTML页面，这里我们调用一个Javascript程序，将其放置在页面的同级目录下，具体代码如下所示：

　　 var lusername=location.search.split("=")[1];

　　 if(!lusername){lusername="XXX";}

　　 else{lusername=unescape(lusername);}

　　 function check(obj){if (obj.stra.value.length>8)

　　 {alert('太长');

　　 return false;}

　　 if (obj.stra.value.length==0)

　　 {alert('还没填姓名呀');

　　 return false;}

　　 var url ="http://"+location.host+location.pathname+"?stra="+escape(obj.stra.value);

　　 window.clipboardData.setData("Text",url);

　　 alert('网址已生成并替您复制好了，快发给您的朋友吧！');

　　 window.location.replace(url);

　　 return false;}

　　 将这个代码存储为一个JS文件。其中默认的祝福名称是XXX，当用户输入名称的时候就会调用输入的名称。

　　 19．我们做贺卡的图片未必要有桌面那么大小，而且边缘也最好不要那么棱角分明，这里就需要羽化一下边缘，打开导出的JPG图像，然后选择工具箱上的选框工具，设置其属性面板的边缘为羽化，羽化大小为30，绘制一个选框选取我们需要作为贺卡的图像部分，如图18所示。design.yesky.com©天极软件频道设计在线原创©200754542

　　

　　图18 选取部分图像

　　 20．按住Ctrl＋X剪切选取的区域，然后新建一个文档，此时新建文档的大小自动设置为剪切区域的大小，不过我们这里可以将其设置为稍大一些，设置大小为760×500，然后粘贴图像，如图19所示。最后将其导出为yuandan.jpg文件。

　　

　　图19 粘贴剪切的图像

　　 21．接着，我们就在Dreamweaver中制作贺卡了，新建一个heka.htm文件，绘制两个表格，上面用于插入我们绘制的图像，下面用于添加一些文字，如图20所示。design.yesky.com©天极软件频道设计在线原创©2001327582

　　

　　图20 插入图片和文字

　　 22．这个HTML首先使用<script src='sd.js'></script>调用外部的sd.js文件。对于上面的文本区域的开头红色冒号区域我们使用<script>document.write(lusername)</script>命令来调用输入的名称，如图21中的拆分模式下所示。

　　

　　图21 名称调用代码

　　 23．下面再插入一个层，也是用于祝福者姓名的调用，我们将其放置的雪人的肚子位置，如图22所示。其中层的代码如下所示：

　　 <div id="Layer2" style="position:absolute; width:118px; height:138px; z-index:2; left: 525px; top: 314px;">

　　 <div align="center"><font color="#000000" size="4"><strong><br>

　　 祝

　　 <br></strong><br>

　　 <strong>

　　 <font color="#ff0000"><script>document.write(lusername)</script></font></strong>

　　 <br>

　　 <br>

　　 <strong>元旦快乐</strong></font></div>

　　 </div>

　　

　　图22 新建祝福人名的层

　　 24．最后我们在页面的同级目录下还放置一个名为snow.swf的雪花效果的Flash文件，在页面中再新建一个层，然后插入这个swf文件，如图23所示。为了取得雪花纷飞的效果。design.yesky.com©天极软件频道设计在线原创©2001324752

　　

　　图23插入Flash的图层

　　 25．这样我们的页面就制作好了，我们可是使用F12快捷键在浏览器中浏览一下效果，是不是非常有动感啊，这里默认的祝福人的名称是XXX，如图24所示。不过需要我们注意的是：由于这里JS程序是针对网站目录的，因而在本地情况下，输入人名是不能调用的，需要我们传到网页空间上才可以。

　　

　　图24 预览贺卡

　　 26．最后，我们将贺卡页面、图片、JS和swf文件都传到网页空间的某一个目录下，这样我们的JS程序就能够起作用了，随便在下面的文本区域中输入一个祝福对象的名字，就会出现一个如图25所示的提示对话框。

　　

　　图25 提示对话框

　　 27．点击确定按钮，这样送给好友的贺卡就制作好了，如图25所示。这样复制地址栏的地址给好友发过去就可以送给她元旦祝福了，如图26所示。

　　

　　图26 元旦祝福贺卡

　　 小结：本例中，我们使用Fireworks绘制了一个雪人和小狗的冬日温馨场景，其中主要用到了Fireworks的钢笔工具、椭圆工具以及通过这些工具所绘制的路径后的各种命令，如组合、自由变形、增加锚点等。虽然都是很简单也很基本的操作，却同样可以创作出富有生活气息的作品。创作来源于生活，希望读者朋友们多多体味生活中的乐趣，那么创作的灵感就会源源不断。最后，为了实现贺卡功能，我们主要利用了一个JS文件来调用用户输入的参数，从而实现输入后马上能够针对输入文字生成祝福人名的超强功能的祝福页面。无论你有多少好友，只要输入他们的名字就可以生成各个不同的祝福页面，只要将网址发给他们他们就能够收到一个写着他们名字的祝福贺卡，是不是非常开心呢？新的一年就要到来了，赶快给朋友们送上新年的祝福吧！原文件下载