准确运用制作技术
以上讲了网页设计方面的内容,下面例举用Dreamweaver制作网页的一些实例。
⒈制作电子相册
相册,顾名思义就是指包含很多照片的册子。可以用传统的做法,将图片用Photoshop做成大小两种,先在主页面做一个缩略图,把小的图片放在主页面上,小图片再链接大图片的页面,不过这样工作量太大,而且很麻烦,尤其是图片几十张或者上百张时。
现在用Dreamweaver能迅速地创建自己的画册,需要注意的是,必须和Fireworks一起使用才行,因为Dreamweaver、Flash、Fireworks合在一起被称为网页制作三剑客,三者结合使用功能非常强大。
在制作网站相册之前,首先必须要准备好图像文件,并将它们放在同一个文件夹下,图像文件的格式必须是GIF格式或者JPG格式。单击主菜单“命令/创建网站相册”命令,弹出对话框,如下图所示。
在“相册标题”中输入标题,根据需要在“副标信息”和“其他信息”选项的文本框中添加补充的文字说明。“源图像文件夹”可以通过右边的“浏览”按钮进行设置,选择准备图像存放的文件夹,同样方法,单击“目标文件夹”选项右边的“浏览”按钮,选择保存网页和处理后图像的文件夹。
“缩略图大小”可以通过点击下拉列表选择,并勾选“显示文件名称”选项,在缩略图下面就会显示相应的文件名。在“列”选项的文本框中可以输入决定缩略图表格的列数,譬如“5”,而其他的参数选项一般不作调整。
最后单击“确定”按钮,开始创建网站相册,这时候系统会自动运行Fireworks软件进行图像处理,直到弹出“完成”对话框。
这时候,编辑页面中就显示相册缩略图表格,缩略图按照文件名排列,按“F12”键后就可以看到电子相册的效果了。
⒉制作时间轴动画
利用Dreamweaver的时间轴,能非常轻松创设一些简单的路径动画。
点击Dreamweaver MX中“插入/常用”标签,然后点击“描绘层”按钮,将鼠标移动到页面中,拖动画出一个选区,释放鼠标,这样就在页面中建立了一个层。在层中插入要移动的元素(可以是图片、文字),然后把层移到动画的起始位置。
通过点击“修改/时间轴/添加对象到时间轴”将层对象添加到时间轴中去。(也可以直接把选定的对象拖入时间轴检查器中)这时一个动画栏出现在时间轴上,相应的层名(Layer1)也显示在动画栏中。然后要设置动画路径,单击动画栏最后关键帧标记(注意播放头也跟着移动到该处),把页面上该层移到动画结束处,这时从动画起始位置到结束位置有一线条显示,这就是层的运动路径。
最后按下播放按钮,就可以预览页面上的动画。通过“行为”可以更加灵活控制动画的播放,还可以在层中添加GIF动画,创建更为精彩的路径动画。
⒊利用层的拖动制作拼图游戏
Dreamweaver的“行为”在制作网页时用处很大,下面就用“行为”制作一个简单的可拖动层。
首先在页面中建立一个层,选中该层,在“属性/层编号”框中输入该层的名字(Layer1),可以通过“属性”面板设定层的宽度和高度。
其次打开“行为”面板中的动作选择菜单,从中选择“拖动层”选项。打开相应的对话框,从层列表中选择层“Layer1”选项,“移动”项选择“不限制”;然后点击“高级”选项卡,在“拖曳控制点”下拉列表中选择“层内区域”选项,设定可作用区域的宽度和高度(与前面的设置要一致)。
最后定义激发动作的事件,返回“行为”面板,会发现行为列表中多了一条。在事件项下是“onClick”,动作项下是“拖动层”,这就是刚才为层“Layer1”添加的“拖动层”动作。点击“事件”项下的倒三角形按钮,在弹出的事件列表中选择“onDrag”事件即可。利用层的拖动可以制作拼图游戏,提高网页的交互功能。
⒋实现文字或图片的滚动
滚动文字(图片)的应用非常广泛,一般都是通过代码或利用插件来实现,其实巧妙利用“层+时间轴+行为”就可以来制作滚动的文本。
首先在“层面板”中选择“描绘层”,在网页内按照滚动文本的范围描绘一个层。然后选择“插入层”,在描绘层中插入一个层,在层内输入滚动文字或图片,调节好插入层的大小与位置。调出时间轴,利用时间轴创建插入层移动动画,试一下,文字或图片是不是可以滚动了?设置“行为事件”,找到播放时间轴事件,选择停止播放时间轴,将动作设定为“onmouseover”(鼠标移到时触发停止播放的动作),选择播放时间轴将动作设定为“onmouseout”(鼠标移过继续播放) ,按F12预览一下效果,是否实现文字或者图片的滚动了呢?
当然,网页制作绝对不是简单的事情,需要花费大量的时间和精力去认真设计和制作,只有精雕细琢和反复修改,才能真正让自己的网页脱颖而出。
文章:《信息技术教育》2004第11期(作者单位:江苏省丹阳市珥陵中心小学 212362) 江苏省常州市博爱小学 213003)