您好,欢迎来到素彩网!

用DREAMWAVER3.0打造网页的实例

来源:sc115.com | 490 次浏览 | 2011-06-29

标签: Dreamweaver 用DREAMWAVER3.0制作网页的实例 Dreamweaver综合教程

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

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

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

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

  点菜单Modify>LayoutMode>ConvertLayerstoTable(修改>布局模式>层转化为表格),随后出现的对话框:(图三)

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

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

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

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

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

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

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

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

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

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

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

  只须点击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:循环执行。圆圈代表关键帧,表示发生在对象上的时间。LAYER1是层名,红色的小块表示当前操作的帧。

4、给Dreamweaver3.0增加Objects控件

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

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

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

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

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

搜索: Dreamweaver 用DREAMWAVER3.0制作网页的实例 Dreamweaver综合教程 

最热-Dreamweaver综合教程

轻松解决DW4的问题

Dreamweaver 4快速使用教程

Micromedia Dreamweaver UltraDev 安装及使用教程(二)

DW中如何使用Library

Dreamweaver技巧:朦胧就是美

Macromedia Dreamweaver 安装及使用教程(三)

用Dreamweaver测试主页

Micromedia Dreamweaver UltraDev 安装及使用教程(一)

UltraDev4.0使用中一些常见

DreamWeaver表格妙用-线框打造详解(三)

关于“层”定位的问题的解答

Dreamweaver3.0疑难解答(下)

Dreamweaver处理word文档有妙招

素材
多种冰激凌和蛋糕PNG图标多种冰激凌和蛋糕PNG图标
精美蔬菜高清图片4精美蔬菜高清图片4
精美蔬菜高清图片2精美蔬菜高清图片2
精美蔬菜高清图片3精美蔬菜高清图片3
精美蔬菜高清图片1精美蔬菜高清图片1
景观效果图素材景观效果图素材
景观效果图素材景观效果图素材
手机高清图片手机高清图片
景观效果图素材景观效果图素材