二、制作显示输入名字的定制祝福页面
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所示。
图18 选取部分图像
20．按住Ctrl＋X剪切选取的区域，然后新建一个文档，此时新建文档的大小自动设置为剪切区域的大小，不过我们这里可以将其设置为稍大一些，设置大小为760×500，然后粘贴图像，如图19所示。最后将其导出为yuandan.jpg文件。
图19 粘贴剪切的图像
21．接着，我们就在Dreamweaver中制作贺卡了，新建一个heka.htm文件，绘制两个表格，上面用于插入我们绘制的图像，下面用于添加一些文字，如图20所示。
图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所示。为了取得雪花纷飞的效果。
图23插入Flash的图层
25．这样我们的页面就制作好了，我们可是使用F12快捷键在浏览器中浏览一下效果，是不是非常有动感啊，这里默认的祝福人的名称是XXX，如图24所示。不过需要我们注意的是：由于这里JS程序是针对网站目录的，因而在本地情况下，输入人名是不能调用的，需要我们传到网页空间上才可以。
图24 预览贺卡
26．最后，我们将贺卡页面、图片、JS和swf文件都传到网页空间的某一个目录下，这样我们的JS程序就能够起作用了，随便在下面的文本区域中输入一个祝福对象的名字，就会出现一个如图25所示的提示对话框。
图25 提示对话框
27．点击确定按钮，这样送给好友的贺卡就制作好了，如图25所示。这样复制地址栏的地址给好友发过去就可以送给她元旦祝福了，如图26所示。
图26 元旦祝福贺卡
小结：本例中，我们使用Fireworks绘制了一个雪人和小狗的冬日温馨场景，其中主要用到了Fireworks的钢笔工具、椭圆工具以及通过这些工具所绘制的路径后的各种命令，如组合、自由变形、增加锚点等。虽然都是很简单也很基本的操作，却同样可以创作出富有生活气息的作品。创作来源于生活，希望读者朋友们多多体味生活中的乐趣，那么创作的灵感就会源源不断。最后，为了实现贺卡功能，我们主要利用了一个JS文件来调用用户输入的参数，从而实现输入后马上能够针对输入文字生成祝福人名的超强功能的祝福页面。无论你有多少好友，只要输入他们的名字就可以生成各个不同的祝福页面，只要将网址发给他们他们就能够收到一个写着他们名字的祝福贺卡，是不是非常开心呢？新的一年就要到来了，赶快给朋友们送上新年的祝福吧！点击这里下载源文件
收藏：