COOL ?

实例36 COOL 站

本例制作虚拟世界，如图36-1所示。

本例运用后，当鼠标移动到画布中文字区域时，就会显示出与文字区域中文字相对应的介绍。

本例主要运用热区等知识制作完成。

图36-1 最终效果图

一、首先建立一个文件夹，为其重命名为“实例36”，把光盘中的“实例36”中的“36.jpg”图片拷入。

二、启动Photoshop 7.0，制作文件效果。

1．执行“文件” →“打开”命令，打开“打开”面板，在搜索处找到“实

例36”，单击“36.jpg”文件，按打开。

2．在导航器面板中设置比例为“80%”，如图36-2所示。

3．单击文件工具按钮，在上边的选择面板中，如图36-3所示，单击后面的设置文本颜色，打开拾色器面板，设置颜色值如图36-4所示，并按好。

4．在画布中写入“首页”，如图36-5所示。

5．单击移动工具按钮，按〈Ctrl〉+〈T〉,效果如图36-6所示，对文字的大小进行调整，当出现如图36-7所示时，对文字的角度进行调整，效果如图

图36-4

图36-2

图36-3

2

Dreamweaver MX 时尚创作百例

36-8所示。

6．单击移动工具按钮，会出现“要应用变幻吗？”，选择“应用”。 7．执行“滤镜”→“素描”→“基底凸现”，会出现“此文字图层必须删格化后才能继续。其文本不能再编辑。是否栅格化文字？”，选择“好”。

8．“基底凸现”面板被打开，光照方向选择“项”，细节选择“11”，平滑度选择“3”，按“好”，效果如图36-9所示。

9．按步骤3～8所示方法在画布中写入“最新动态”和“留言板”，如图36-10所示。

10．单击文本工具，在选择面板中设置如图36-11所示，在画布中写入“COOL 站”，如图36-12所示。

11．单击选择面板中的创建变形文字按钮，会出现“无法完成您的请示，因为文字图层使用了仿粗体样式。要移去属性并继续吗？”，选择“好”。

12．“变形文字”面板被打开，在样式里选择“上弧”，并按“好”，效果如图36-13所示。

13．执行“滤镜”→“素描”→“基底凸现”，会出现“此文字图层必须删格化后才能继续。其文本不能再编辑。是否栅格化文字？”，选择“好”。

14．“基底凸现”面板被打开，光照方向选择“项”，细节选择“12”，平滑度选择“3”，按“好”，效果如图36-14所示。

15．执行“文件”→“存储”命令，保存在“实例36”，为其命名为“bg”，选择“格式”为“JPEG”，单击保存。

三、打开Dreamweaver MX，制作页面效果。

16．执行“文件”→“另存为”命

图36-5

图36-6 图36-7

图36-8

图36-9

图36-10

图36-11

第一篇 Dreamweaver MX初步

3

令，打开“保存为”面板，保存在“实

例36”中，在“文件名”处填入“COOL站”，在“保存类型”处选择“HTML 文档”，并按保存。

17．执行“修改”→“页面属性”，设置背景为“#000000”。

18．单击“常用”面板中的图象按钮，打开选择图象源面板，在搜寻处选择“实例36”，单击里面的“bg.jpg”图片，并按确认。

19．单击图片后，单击属性面板中的多边形热点工具按钮，把图片中的首页圈住，设置为热区，如图36-15所示。

20．单击“布局”面板中的标准视图按钮。

21．单击“常用”面面板中的描绘层按钮， 在画布中如图36-16所示位置，拖出一个层来，并在层中写入“想了解当前最新最酷的网站都有哪些吗？点击这里一定不会让您失望的”，选中层中的文字，在属性面板中设置颜色为“FFFFFF”，如图36-17所示。

22．单击层，在属性面板中设置显示为“hidden”，如图36-18所示。

23．单击属性面板中的多边形热点工具，为“最新动态”和“留言板”，设置热区。

24．分别在刚才拖出层的位置再用描绘层按钮，拖出2个图层。

25．分别在这2个图层中写入“要想知道当前网站的最新动态，您一定不要错过这里哟!”和“如果您对我们的网站有什么建议的话，请不要吝惜，一定要告诉我们哟!”，文字的设置也如图36-17所示。

26． 这2个层的设置如步骤22所示。27．单击“行为”面板，单击里面

图36-12

图36-13

图36-14

图36-15

图36-16

4

Dreamweaver MX 时尚创作百例

图36-17

图36-18

的按钮，在弹出的菜单中选择“显示

─隐藏层”，打开显示─隐藏层面板，如图36-19所示。

28．单击层“Layer1”，单击下边的“显示”，按确定。弹出如图36-20所示面板，单击面板中的“onClick”，在右边弹出的一个下接箭头，单击他，在弹出的菜单中选择“onMouseMove”，效果如图36-21所示。

29．单击按钮，在弹出的菜单中选择“显示─隐藏层”，在显示─隐藏层面板中单击层“Layer1”，单击下边的“隐藏”，按确定，单击面板中的“onClick”，在右边弹出的一个下接箭头，单击他，在弹出的菜单中选择 “onMouseOut”，效果如图36-22所示。

30．单击按钮，在弹出的菜单中选择“显示─隐藏层”，显示─隐藏层面板，单击层“Layer2”，单击下边的“显示”，按确定，单击面板中的“onClick”，在右边弹出的一个下接箭头，单击他，在弹出的菜单中选择“onMouseMove”。

31．单击按钮，在弹出的菜单中选择“显示─隐藏层”，显示─隐藏层面板，单击层“Layer2”，单击下边的“隐藏”，按确定，单击面板中的“onClick”，在右边弹出的一个下接箭头，单击他，在弹出的菜单中选择“onMouseOut”。

32．单击按钮，在弹出的菜单中选择“显示─隐藏层”，显示─隐藏层面板，单击层“Layer3”，单击下边的“显示”，按确定，单击面板中的“onClick”，在右边弹出的一个下接箭头，单击他，在弹出的菜单中选择“onMouseMove”。

图36-19

图36-20

图36-21

图36-22

第一篇 Dreamweaver MX初步

5

按钮，在弹出的菜单中

选择“显示─隐藏层”，显示─隐藏层面板，单击层“Layer3”，单击下边的“隐藏”，按确定，单击面板中的“onClick”，在右边弹出的一个下接箭头，单击他，在弹出的菜单中选择“onMouseOut”。

34．执行“文件”→“保存”命令，本例制作完成，按〈F12〉可预览一下您的成果。

33．单击