日期:2014-04-02  浏览次数:20792 次

  随着INTERNET的逐步盛行,上网冲浪已经成为一种很时尚的事情,在网上拥有一个属于自己的“家园”更是这些网虫们的追求。为了使自己的“家园”更有特色,吸引更多的人参观,这些网虫们可以说是煞费苦心,他们往往用JavaScript或Java在网页中实现各种特效,但直接用记事本一句一句地编写JavaScript或Java程序可不是我们这些菜鸟所能及的事情,那么有没有办法通过其他途径来实现JavaScript或Java特效呢?其实现在能够制作特效的工具很多,下面笔者就以Dreamweaver中提供的Timeline工具为例,来介绍一下如何在网页中实现JavaScript特效,我们只需简单地拖动鼠标,而生成JavaScript原代码的事就交给Dreamweaver去做吧,下面笔者就利用Timeline这个工具来具体实现一个表格一变四的特效。

  1、在Windows桌面上用鼠标依次单击“开始”/“程序”/“Macromedia Dreamweaver”命令来运行Dreamweaver程序,随后系统将会弹出Dreamweaver的主操作界面。在该界面中,我们可以用鼠标单击“Modify”菜单,并从弹出的下拉菜单中选择“Page properties”命令,然后我们将可以看到一个设置对话框。
  2、在该设置对话框中,我们可以在Background设置栏处单击下拉小三角,从弹出的颜色选项框中设置背景颜色为黑色,或者直接在Background设置栏后面的文本框中输入“#000000”,设置好以后用鼠标单击一下“Ok”按钮。
  3、接着再用鼠标单击菜单栏中的“Insert”菜单,从弹出的下拉菜单中选择“Layer”选项,随后Dreamweaver将自动新建一个层,并把该图层默认命名为Layer1,我们可以把鼠标箭头放在图层边框的对角线上并单击鼠标,然后拖动鼠标把图层的大小改成自己需要的尺寸。
  4、下面,我们把鼠标移会到“Layer1”图层中,并单击一下鼠标以便让光标定位到该图层上,随后再用鼠标单击菜单栏中的“Insert”菜单项,从弹出的快捷菜单中选择“Table”选项,然后弹出的表格设置对话框中,设置Rows=1、Cols=1,最后单击一下“Ok”按钮返回到主操作界面中去。
  5、接下来,我们用鼠标拖动表格的边框,直到插入的表格图层Layer1的尺寸大小一样。然后用鼠标右键单击表格,从弹出的快捷菜单中选择“Properties”命令,这样我们就可以激活表格属性设置面板了。在该界面中,我们把表格的背景色设置为#FFCCCC,边框颜色设置为#FFFFFF,同时在表格中输入文字“这是1号表格”,并让文字居中显示,然后再设置文字的颜色为红色。
  6、按照1号表格的制作方法,我们再分别创建另外三个图层,并且分别命名为Layer2、Layer3、Layer4,并且在Layer2图层的表格中输入文字为“这是2号表格”,在Layer3图层的表格中输入文字为“这是3号表格”,在Layer4图层的表格中输入文字为“这是4号表格”,各表格的文字属性要与1号表格的文字属性相同,也就是说每个表格中的文字颜色都设置为红色,而且文字都应放在表格的中间。
  7、紧接着,我们需要做的就是把Layer4图层移动到屏幕中心,按照这样的方法,再依次调整其它两个层的位置,使图层2遮住图层3,图层1覆盖图层2。
  8、下面,我们就正式开始使用Timeline这个工具来制作特效了。首先使用键盘上的复合键Ctrl+F9来打开Timeline设置面板,接下来再用鼠标选定图层Layer1。在Timeline面板第一层第一帧处单击鼠标右键,执行快捷键菜单中的Add Object命令;选定层Layer2,在Timeline面板第二层第一帧处单击鼠标右键,执行快捷键菜单中的Add Object命令。用同样的方法为层Layer3和层Layer4添加运动路径。最后选中Timeline面板中的Autoplay选项,使在页面下载完成后自动播放。
  9、此时,我们再用鼠标单击Timeline面板第一层最后一帧,把图层Layer1向左移动;接着再单击Timeline面板第二层最后一帧,把图层Layer2向上移动,单击Timeline面板第三层最后一帧,把图层Layer3向右移动,单击Timeline面板第四层最后一帧,把Layer4向下移动,这样做的目的就是实现表格的转换效果。
  10、好了,到了这里我们可以单击保存按钮来把自己刚才的劳动成果保存下来了,保存后的文件是一个HTML文件,我们可以在保存结束后用浏览器来浏览自己的创意效果。

  看了上面的操作步骤,是不是有点心动了!那就赶快行动起来吧,充分发挥你的创意天赋,让更多的网友能够欣赏你的作品吧!