第一部分:Dreamweaver 8 新功能概述
和Macromedia Studio 8套件中其它软件一样,Dreamweaver 8也增加了许多让我们欣喜不已的新功能,比如更加先进的工作流程,重新设计的CSS工具,改良后的后台FTP,转换XML文件的工具,文档放大功能,插入Flash视频和FlashPaper,代码折叠功能等等。
今天我们先对Dreamweaver 8的新功能进行简单的介绍。
点击这里下载Dreamweaver 8 (59.7MB)
一、工作流程的改进
工作流程的改进可以提高网页设计师的工作效率,比如将所有打开的文档放置在一个面板中,只需单击文档标签就互相切换文档。另外,我们还可以将面板的排列保存为“Workspace layout”(工作区布局),以适应不同网页的设计需要。
除了上述功能以外,Dreamweaver 8还提供了以下的新功能:
1.放大工具
使用放大工具可以帮助我们更容易地对齐图像、选择较小的对象以及查看较小的文本,如图1所示。
图1
2.辅助线
拖动页面垂直或水平方向的辅助线可以更精确地定位对象的位置,如图2所示。
图2
3.Flash视频的支持
现在我们可以直接在Dreamweaver8中插入Flash视频文件了,就像类似VCR一样的控制方式一样控制Flash视频文件,如图3所示。
图3
二、扩展的CSS支持
Dreamweaver 8在CSS方面同样也提供了更强的支持,增强了复杂样式表信息的显示。CSS面板现在完全重新设计为一个统一的面板,将Dreamweaver MX 2004的众多CSS面板集中到了一个位置,如图4所示。
图4
我们还可以使用新增的可视化设置功能来帮助我们查看复杂的CSS布局,如图5所示。
图5
在CSS面板中新增加入了一个摘要视图,有助于我们快速确认应用于当前选定元素的CSS属性,如图6所示。
图6
三、文件传输功能
在使用Dreamweaver 8以前的版本向服务器传送文件时,用户不能在Dreamweaver中进行其它工作,现在好了,新版的Dreamweaver允许我们在传输文件的同时,可以进行其它工作,这样可以大大提高工作效率。文件的传送界面如图7所示。
图7
四、支持XML/XSLT
新的XML/XSLT创作功能简化了用于Web浏览的XML文件的格式化过程。我们可以创建XSLT文件,并完全使用CSS格式,将其转换成难于理解的XML文件,可以附加到本地文件中,也可以附近互联网的远端文件,如图8所示。
图8
五、其它新功能
除了上述新功能之外,Dreamweaver 8其它功能做了一些改进,比如Starter Pages、插入Flash Paper、背景图像的可控性等等,在后面的介绍中我们将详细说明它们的使用方法。
第二部分:Dreamweaver 8 新功能实例讲解
我们以制作一个网站首页文件的过程来体验Dreamweaver8的新功能。
一、建立站点
启动Dreamweaver 8,执行“站点/新建站点”菜单命令,在弹出的对话框中单击“高级”选项卡,在本地信息中设置站点名称和本地根文件夹,然后设置远程信息,如图1所示。这些功能和Dreamweaver 2004相比基本没有太大变化,只是其中多了一个“维护同步信息”的选项,当我们制作完成网页以后,会同步更新到服务器上,这样可以确保网站上的内容总是最新的。服务器的信息一定要设置正确,否则在后面登陆更新服务器的时候会出现错误。
图1
二、设计首页
站点建立完毕以后,就可以设计首页了。如图2所示为软件的启动对话框,在创建新项目里多了XML/XSLT两个选项。
图2
关于XML,大家可能都比较熟悉了,而XSLT则是XML家族的另一种语言,它类似HTML中的CSS,但是比CSS功能要强大的多。它更偏向是一种程序语言,但没有常见程序语言复杂,甚至比js等脚本语言还简单。将XML转换为HTML,是目前XSLT最主要的功能。选择创建XSLT(整页)新项目以后,弹出对话框询问如何定位XML源,可以选择“附加我的计算机或局域网上的本地文件”或“附加互联网上的远端文件”,如图3所示。
图3
在Dreamweaver8中还提供了一个新的创建范例集“Starter Pages”,我们可以从中选择自己需要设计的风格类型,如图4所示。
图4
1.辅助线的使用
我们选择基本页的HTML文档,单击创建按钮,进入空白文档的编辑页面,如图5所示。首先你会发现在文档周围默认有标尺出现,在Dreamweaver 2004中虽然也有标尺功能,但是在使用的过程中实际用途并不大,现在结合Dreamweaver8新提供的辅助线(图中绿线所示)可以更方便地确定网页元素的位置或大小了。
图5
执行“查看/辅助线”菜单命令,你会看到如图6所示的辅助线控制菜单。
图6
确定已经勾选了“显示辅助线”选项,然后在文档的标尺上纵向或横向拖动鼠标就会显示出默认的绿色辅助线。当然你还可以选择菜单中的“640×480,默认”等选项,以生成适合相应页面大小的辅助线,如图7所示。
图7
将鼠标指针移动到辅助线分割的方格中,然后按“Ctrl”键,可以显示此方格的高度和宽度,如图8所示。
图8
如果要锁定辅助线,可以执行“查看/辅助线/锁定辅助线”菜单命令。如果选中“靠齐辅助线”选项,在网页中插入元素时,会自动贴近辅助线。如果选中“辅助线靠近元素”,则拖动辅助线时会自动贴近网页中的元素。要删除一条辅助线,可以拖动它到网页的顶部或左侧就会自动消失;而要删除所有辅助线,可以执行“查看/辅助线/清除辅助线”菜单命令。
执行“查看/辅助线/编辑辅助线”菜单命令,弹出“辅助线”对话框,如图9所示。我们可以在这里设置辅助线的颜色,距离的颜色等等属性。
图9
2.背景设置的新功能
我们再来看看设置文档背景带来了哪些新改变?执行“修改/页面属性”(快捷键Ctrl+J)菜单命令,弹出“页面属性”对话框,在“外观”分类中会发现背景图像的下方多了一个Repeat选项,可以选择no-repeat、repeat、repeat-x、repeat-y,如图10所示。
图10
单击“背景图像”后的浏览按钮,找到一幅图片作为网页的背景,然后来看看四种不同选项所带来的不同背景图像。首先选择“no-repeat”选项,它的含义是背景图片不重复显示,只显示图像的原始大小,而且只显示一次,如图11所示。在以前版本中,只要设置了网页背景图像,它就会平铺显示在网页中,现在我们对背景图像的可控性更强了。
图11
如果选中“repeat”选项,则会在x和y方向重复显示背景图像,就和以前的老版本中一样,如图12所示。
图12
如果选中“repeat-x”选项,则会在x轴方向重复显示背景图像,如图13所示。
图13
如果选中“repeat-y”选项,则会在y轴方向重复显示背景图像,如图14所示。
图14
设置标题文字,然后选择一种合适的图片作为背景图像,如图15所示。
图15
3.放大功能的使用
插入一个符合要求的表格,然后分别在单元格中插入在图像处理软件处理好的相应图像,如图16所示。
图16
在下方的工具栏上有三个按钮,分别为箭头选择工具、抓手移动工具和缩放工具。使用缩放工具可以让我们更方便地对齐图像、选择较小的对象以及查看较小的文本,如图17所示。
图17
也可以直接在缩放工具后面的选框中选择合适的放大或缩小比例,另外还可以选择“复合所选”“符合全部”“符合宽度”,如图18所示。
图18
4.Flash视频的支持
在Dreamweaver8中提供了对Flash视频的支持,我们可以直接插入Flash视频文件。继续在刚才的文件中操作,执行“插入/媒体/Flash Video”菜单命令,弹出“Insert Flash Video”对话框,如图19所示。
图19
在Video Type中可以选择Progressive Download Video(下载视频)或者Streaming Video(流媒体格式视频)两种选项。如果选择第一个选项,可以直接在URL地址栏里输入视频文件的地址;如果选择了流媒体格式的视频文件,则需要输入Server URL地址,以rtmp://格式开头,并且在Sream name中输入流媒体的文件名,如图20所示。
图20
在Skin选项中选择播放器的外观形状,在Width中输入宽度大小,在Height中输入高度大小,如果选中“Constrain”选项,则会锁定宽度和高度的比例。如果选中“Auto play”选项,打开网页时会直接播放视频文件。选中“Auto rewind”选项则允许重复播放视频。如图21所示。
图21
在网页中插入Flash视频后,我们仍能继续修改视频文件的这些属性,只需单击该视频文件,就会在属性面板中出现相应的选项,如图22所示。
图22
5.扩展的CSS支持
在网页中插入视频文件以后,我们再在它的下方输入一段文字来体验一下Dreamweaver8 的CSS支持给我们带来了哪些新变化?使用文本工具输入一段文字,然后打开CSS面板,如图23所示。
图23
新的CSS面板完全设计成了一个统一的面板,我们在此面板中可以快速确认样式、编辑样式、查看应用于页面元素的样式。
单击“添加属性”,可以直接输入样式属性,比如我输入Color,然后在后面的颜色选择器中选择一种颜色就可以了,如图24所示。当然其它CSS属性也可以直接在这里输入,这比起以前要反复修改网页代码真是方便了不少。
图24
单击CSS面板中的Current按钮,可以显示当前所选中内容的CSS摘要,而与所选内容无关的CSS会以删除线的形式出现,如图25所示。这个功能对我们快速确认应用于当前选定元素的CSS属性十分有帮助,在列表中可以方便地查看哪种样式中的哪种属性被应用到当前选中的元素。新的CSS控制面板可以使我们从复杂的多种CSS样式中解脱出来,从而轻松完成一个网页的内容格式化。
图25
好了,我们再来看看在可视化助理方面提供了对CSS的新支持。执行“查看/可视化助理”菜单命令,你会发现多了“CSS Layout Backgrounds”、“CSS Layout Box Model”、“CSS Layout Outlines”三个选项,分别为背景模