轻松打造个性求职网站(下)──淡雅的二级页面

数码时尚

  我们在2003年49期已经为大家介绍了求职网站的一些制作技巧以及一个首页效果的实例,现在我们接着讲求职网站的二级页面的制作以及一些网页设计过程中需要注意的问题(效果图见图1)。

图1

  1.右侧正文栏的制作

  首先在Photoshop中制作一个如图1右侧的显示框。制作中只需要在画布中拖出一个指定大小的矩形选区,再进行描边就是需要的样式了。右上角的书本折页效果的制作方法有许多种,简单的方法是先用矩形选框工具选取一个角,将它剪切下来,然后选择“编辑→变化→水平翻转”,再进行一次垂直翻转即可将原来向外的折角改为向内的折角了,然后将它与边框对接。

  下面再做出折线处的压痕与阴影。选择直线工具拖一条斜线出来就行了,但需要注意的是,斜线的颜色要比边框的颜色要淡一些,然后进行模糊处理才能得到最终想要的效果。

  2.左侧Flash导航栏的制作

  首先在Flash中绘制一个高与右侧显示框同样高度的矩形,宽度则根据自己的实际情况来定。

  在场景中采用动态文字输入栏目名称,如自我介绍等。然后按F8键将它转换为图形,按上面的步骤依次将所有的栏目名称都输入,先将这些图形暂时从场景中删除(注意:这样做的好处是图形的中心点与场景的中心相同,有利于以后的制作。也可以直接按“Ctrl+F8”新建一个图形在里面输入内容)。

  绘制一条水平线,宽度与边框的宽度相同。先将水平线依次显现出来,同时将栏目名称逐渐由透明变清晰,并同时从下方运动显示出来。时间轴上的设置如图2。

图2

  接着在场景中绘制一个无边的矩形框,然后按F8键将它转换为按钮,接着双击编辑这个按钮元件,将“UP”上的关键帧删除,只在HIT这一帧上加关键帧,其他帧都为空帧。将这个按钮拖入场景依次放置在你的栏目名称上方,如果你的制作过程和本教程完全一样的话,那么这个按钮就会是一块绿色的方框。

  现在制作按钮的触发效果:当鼠标移至按钮上时,前方会有一个渐变出现的箭头,同时字体上会渐变出现一块光斑,离开时则上述效果渐渐消失。

  新建一个MC,将上述效果在这个MC中做好,因为这个MC同时要负责鼠标移上和离开的效果,所以要将MC中的这两个效果明显地区分开。将MC第一帧设为空帧,并加入AS代码“stop();”。从第二帧开始制作,先做好移上的效果,然后加入AS代码“stop();”。接着制作离开的效果,制作完成后,在第二帧上加上帧标签on,在离开效果的第一帧上加上帧标签off。

  将MC拖入场景放置在按钮上方,并为它起一个实例名称“on”,在场景被选中的按钮里加入如下AS代码:

  on (rollOver) {

  tellTarget ("on") {

  gotoAndPlay("on");

  }

  }

  on (rollOut) {

  tellTarget ("on") {

  gotoAndPlay("off");

  }

  }

  on (release) {

  getURL("main.htm", "_self");

  }

  (注意:on是控制MC的一个参数,它自身有许多属性,如点击、移上、移去、释放等等,我们这里用了三个属性,分别是光标移上这个MC时播放实例名称为on的这个MC的on标签、移去时播放off标签、第三是完成点击后打开main.htm这个页面。)

  最后依次建立同样的MC,并拖入场景放置在相应的按钮上,但实例名称不可重复,并加入以上相同的代码,将“tellTarget("")”括号内的名称换成当前的MC的实例名称即可。

  3.在Dreamweaver中组装元件

  求职网站本身的特点使网站内容一般不是特别多,类型也比较单一,因此我们考虑将二级页面做成固定大小的窗口。这里有两种解决办法,一种是用Dreamweaver中自带的“打开浏览器窗口”行为,另一种是利用一款插件Chromeless Window,插件资源类网站都有。为了方便我们使用第一种方法来打开2003年49期做好的首页,选中插入的图片,选择“窗口→行为”,在打开的面板中选择“Open Browser Window”,设置URL to display为“main.htm”,width值为650,height值为400,点击“OK”后在面板上将事件响应方式改为onclick。新建一个HTML页面,如图3所示设置页面属性。

图3

  接着建一个650×400的表格,并分为两列,左侧以居中方式插入刚才做好的Flash导航栏,右侧插入443×363大小的表格,将前面做好的显示框作为背景图片,再将你的内容输入到表格中即可。

  完成后将页面保存为main.htm,然后浏览效果,当打开网站后点击首页的图片就会弹出这个页面,同时点击左侧的“自我介绍”也会转到这个页面。其他页面的制作方法类似。