##
我看到一些文学艺术网站和技巧专业网站的网页，他们的菜单
、图片、文字都用了一种透视投影技术，菜单上的字象是立体的，
那些绿叶和花草，也更加逼真了，感到很美观，使网页生色不少。
问：在网页中透视投影菜单是怎么做的？
答：实现动态透视投影菜单，一般使用2 种方法，一种是用
Javascript脚本来实现，一种是在同一位置切换网页来实现。
这两种方法各有其特点。
但两种方法，都是用两张图片交替显示的效果。
一张是投影字图片，一张是不同颜色的嵌入式图片。
先说说图片的制作。
以制作"文学园地"的2 幅切换图形为例，在汉化photoshop 7.0
中，制作步骤如下，如用其它软件，大同小异。
一、制作投影字图形：
1.新建一个文件。
2.新建一个图层。
3.设定图层样式。
图层->图层样式->投影
只修改2 项： 不透明度 75% 改为 50%
距离 5 改为 4象数
其余用默认值： 混合模式： 正片叠底
角度 120 度
大小 5象数
图层挖空投影：选中
4.用文字工具写"文学园地"4 个字。
字体设置为： 隶书，大小18，风格：明晰。
文字颜色：33,154,180 即 #219AB4
5.显示的投影文字正常后，保存为 .psd 文件。
6.保存为 .gif文件。
二、制作嵌入字图形：
1.新建一个文件。
2.新建一个图层。
3.读入画好的框文件samp1.psd(在压缩包内)，或自己画一个园
角长条形框，上部描深一些。
4.新建一个图层。
5.用文字工具写"文学园地"4 个字。
字体设置为： 隶书，大小18，风格：明晰。
文字颜色：47,36,156 即 #2F249C
6.用套索工具把这几个字圈起来。
7.用移动工具移到读入的按钮框内。
5.显示的嵌入文字正常后，保存为 .psd 文件。
6.保存为 .gif文件。
问：读入的框文件samp1.psd 后，可以写字，但写出的字是黄
色带投影，怎么设定都改不掉，怎么办？
答：新建一个图层，再写字就可以了。
问：做出的字在一张大图上，怎么裁成小图？
答：用看图软件，如IrfanView 调出图形，用鼠标拉出所需长
方形，显示 120 X 25，用编辑->crop裁出。
问：想把字体放大一点，10%或20%，怎么办？
答：用看图软件，如IrfanView 调出图形，用它的resize功能
改大改小都可以，但改大后，字体可能不如原来清晰，用它的sharpen
功能做一下就可以了。
三、用Javascript脚本语言实现动态菜单的方法。
1.在head区内，加入调用ch1.js 语句。
<DIV align=center>
<SCRIPT language=javascript src="./css/ch1.js"></SCRIPT>
</DIV>
2.在body区内，加入反应鼠标对按钮动作的语句。
<tr>
<td width="100" bgcolor="#ffffff"><p align="left"><a
href="./jjht.htm" onmouseover="img_act('button00')"
onmouseout="img_inact('button00')"><img
src="./img/bot01.gif" name="button00" alt="经济话题"
border="0" WIDTH="130" HEIGHT="25"></a></td>
</tr>
<tr>
<td width="100" bgcolor="#ffffff"><p align="left"><a
href="./bcsl.htm" onmouseover="img_act('button01')"
onmouseout="img_inact('button01')"><img
src="./img/bot02.gif" name="button01" alt="编程实例"
border="0" WIDTH="130" HEIGHT="25"></a></td>
</tr>
3.在ch1.js 中，调用按钮图形的语句。(只列出前2 个按钮)
j=document.images;
if (j)
{
button00=new Image(); button00.src="./img/bot01.gif";
button001=new Image(); button001.src="./img/bot01_2.gif";
button01=new Image(); button01.src="./img/bot02.gif";
button011=new Image(); button011.src="./img/bot02_2.gif";
}
function img_act(p)
{if (j) {on = eval (p + "1.src");
document[p].src = on;}
}
function img_inact(p)
{if (j) {off = eval (p + ".src");
document[p].src = off;
}
}
详见：投影菜单实例index2.htm
下载：菜单实例下载wy03042.zip 92 KB
参阅：《Photoshop6.0的绘画技巧》电脑爱好者合订本2001上-125
《DreamWeaver常见问题回答》 载于网页设计 作者：阿捷
河石/编 2003.3.25
相关链接：
《在HTML中折叠式菜单是怎么做的？》
《熠熠生辉的链接是怎么做的？》
|
