您的位置:首页网页设计DreamWeaver → 用DREAMWAVER3.0制作网页的实例

用DREAMWAVER3.0制作网页的实例

时间:2004/11/7 2:35:00来源:本站整理作者:蓝点我要评论(0)


            
             
              
             
            

               
               

            



            相信你对 DREAMWAVER 仰慕已久,正如其名字一样, DREAMWAVER 被许多爱好者称为网页制作的"梦幻工具",如今随着 3.0 版本的推出,大家一定急于掌握这门利器,那么,现在我们就走一条学习 DREAMWAVER 的捷径:通过一个实例来演练一回。 (图一) 
  上面是一个简单的关于"友情链接"的页面(就是本站的“友情链接”栏目),看似简单,要满足网页"美观+下载快"的要求还是小有技巧的。我们当然不至于来个 800 * 600 象素的大背景图,而是采用了左下角的仕女图( 201 * 299 ,也可进一步进行无缝切割),"友情链接"四个字构成的小图,返回按钮及由几条蓝色带子构成的背景图(此图采用 4 色 gif 图像,大小不会超过 8K )。好,现在我们在此基础上看看用 DREAMWAVER 来制作该页面的过程:

页面元素定位。用层你会发现原来一切这么简单!

  建立层只需 Insert > Layer (插入>层)。或者从 Objects( 物件)面板中点 按钮,这时鼠标会变成十字形,你拖动鼠标就可插入一个层。然后对层可以通过其上的八个小控点进行拖动,放大缩小等。另外可以选择该层,在属性面板中对其进行设定。

  我们在页面上插入四个层,并在每个层中依次插入页面中用到的元素(或空着),然后大致移到合适的位置并调整层到适当的大小,如下图: (图二)

  点菜单 Modify > Layout Mode > Convert Layers to Table (修改>布局模式>层转化为表格),随后出现的对话框: (图三)

  Most Accurate 最大精确度 , Smallest: ( Collapse Empty Cells )指的是各个层的边缘因为是手动画的,可能对的不齐,比如你本想让图二右边的两个层右边线在同一垂直线上,但实际画的会有些误差。如果选中该项,那么凡位置相差 4 个象素的层都会自动对齐。 Use Transparent GIFs 将用透明 GIF 图像来填充表格最后一行。这样做可以保证表格在所有的浏览器里看起来都没有变化。也就是保证了表格定位与层定位的严格一致。如果不选该项,在不同的浏览器里可能会有少许差异。 Center on Page 表格在页面中央。否则为左对齐。 设定好后,看看结果是否符合你的设想: (图四)

  看,由层转化的表格定位很准确吧。比起自己直接插入表格再合并对齐之类的方法效率高了很多。 

1、选中整个表格,将表格背景图设为预先做好的蓝带子背景

  这里要提醒一下,如果你恰好选用了大背景图,比如适应 800 * 600 分辨率的大底图(一般要为单色或 4 色以下,以减小图形文件大小),那就不应在页面属性中将其设为背景图,而要设为相应大小的表格的背景图。否则在 1024 * 768 分辨率下效果就会大打折扣。 

2、用Behaviors工具添加动态效果

  为了使页面更浪漫些,设想加两个特殊效果:一个是鼠标放到仕女图片上时页面空白处显现出一首诗来,另一个是更常见的图片变化的效果,即鼠标放到返回按钮上时按钮颜色改变(其实是两张图片做个交换)。

  这当然是 JavaScript 的拿手好戏,但我们可不想用它编码。因为这些任务在 Dreamweaver 中很容易实现。

  先添加一个层,将该层的 Vis 属性设为 hidden (即该层一开始是看不见的)。在层中输入诗句,你不会忘记在有文本的地方用样式表吧?( F7 调出样式表窗口,将 .unnamed 的 size 定义为 9 即可)。

  打开 Behavior 工具条(按 F8 )。选中左下角的仕女图,按下 Behavior 面板中的+号,选 Show-Hide Layers 项 ,随后对话框中,出现了刚才定义的层,我们选中该层,并按下" show "按钮即可。

  第二步是使返回按钮有点儿动态效果,有两种方法可以实现,最简单的就是从 Objects( 物件 ) 面板中点按钮 ,你在对话框中直接输入要替换的两个图片路径名称就行了。为了使这个例子更具代表性,我们仍然用 Behavior 来实现。

  同样的,先选中返回按钮的第一个图片,打开 Behavior 面板,按+号选 Swap Image 项,出现对话框: (图五)

  只须点击 Browse 按钮选中准备替换的图片即可。

  Dreamweaver 有很多 JavaScript 函数 - 文档重定向、图像交换、打开窗口还有改变 layer 可视性的方式。用法与上面大同小异,你自己试试看吧。

3、 Dreamweaver另一个令人眩目的工具:Timeline,让你的层活动起来,直观地体现一下DHTML的动态效果。

  单击 WINDOWS > Timelines (或按F9)启动时间线,如果您以前接触过 MACROMEDIA 公司的 FLASH, 就会发现 TIMELINE 的使用与在 FLASH 中的用法如出一辙。

  我们要实现的这个例子,是让一只小蝴蝶从屏幕左边飞到屏幕右边。首先我们用在前面讲述过的层来新建一个层,在层中插入小蝴蝶的图片(你可以用你的任何图片替代,不可太大), F9 打开 TIMELINES 面板,拖动层至 TIMELINES 中,松开鼠标,再用鼠标选择最后一个关键帧(我们选为第 120 帧),将层拖放至屏幕右上角,选中 AUTOPLAY 和 LOOP 项。您会看到如下图的情况: (图六)

  好了,按 F12 看看效果,蝴蝶翩翩飞!

  给没用过 FLASH 的朋友们稍微解释一下时间线的用法:表示您目前编辑的时间线,表示返回最前面的一帧,表示返回至前面的一帧,表示返回至后面的一帧, AUTOPLAY 表示当前页面在浏览器中打开后是否自动执行这个时间线, LOOP :循环执行。圆圈代表关键帧,表示发生在对象上的时间。 LAYER 1是层名,红色的小块表示当前操作的帧。 

4、给 Dreamweaver3.0 增加 Objects 控件

  Dreamweaver3.0 增加了相当多的 Objects 控件及不少的 Behaviors, 应该可以满足我们的大部分需求了,但就象 Photoshop 有无数的 plug-in 一样, Dreamweaver 也有不少的插件可供下载,所以为了举一反三,我们最后也来补充一个增加 Objects 的例子。这个例子是做出页面进入和离开时的特殊效果。

  http://www.macromedia.com/software/dreamweaver/download/extensions/ 就是一个下载插件的好地方,国内及台湾的织梦等站点也有不少可供下载的好东东。 Down 下来后用 Winzip 等软件解压至你的 Dreamweaver 所在目录:比如\ Macromedia\Dreamweaver 3\Configuration\Objects\my 目录下, 注意 : my 这个目录是新建的。然后重新启动 DW3 ,在你的 Objects 控件面板上点下箭头选择 my, 就会出现刚刚安装的插件图标,如图七 :(图七) 

  选择运行后界面如图八所示: (图八)

  选择完成以后按确定,现在我们最后看一下整个页面加载时的效果:(中间园形图形为上一页面的部分)。(如图)

  好了,这就是一个用 Dreamweaver3 来制作网页的实例,让我们共同交流使用 DW3 的经验。

相关阅读 Windows错误代码大全 Windows错误代码查询激活windows有什么用Mac QQ和Windows QQ聊天记录怎么合并 Mac QQ和Windows QQ聊天记录Windows 10自动更新怎么关闭 如何关闭Windows 10自动更新windows 10 rs4快速预览版17017下载错误问题Win10秋季创意者更新16291更新了什么 win10 16291更新内容windows10秋季创意者更新时间 windows10秋季创意者更新内容kb3150513补丁更新了什么 Windows 10补丁kb3150513是什么

文章评论
发表评论

热门文章 没有查询到任何记录。

最新文章 CSS优雅的公布栏源码高级CSS选择器的使用 将网站(主页)变成黑白DW设计网页时组织CSS的建议利用Dreamweaver合理优化网页元素布局22个Dreamweaver内置网页过渡特效简介

人气排行 如何用Dreamweaver制作电子相册下拉菜单全攻略-用Dreamweaver制作下拉菜单用Dreamweaver实现ASP数据库动态网站建设用Dreamweaver CS3制作下拉菜单如何在DW中插入Flash的参数详解Dreamweaver标签选择器的妙用巧用dreamweaver模板批量制作网页优化HTML代码加快网页速度