Dreamweaver 8 新功能图文实际示例讲解

第一部分：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

　　

[NextPage]

五、其它新功能

　　除了上述新功能之外，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

[NextPage]

 

　　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

[NextPage]

 

　　也可以直接在缩放工具后面的选框中选择合适的放大或缩小比例，另外还可以选择“复合所选”“符合全部”“符合宽度”，如图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”三个选项，分别为背景模式、框模式和外形轮廓模式显示CSS样式效果。如图26所示。

图26

[NextPage]

 

　　另外，还有一个值得我们关注的新功能――样式呈现工具栏，使用这个新功能我们可以为不同的媒体类型进行设计，比如屏幕、手持设备、打印输出设备、电视设备、投影设备等等。当我们将外部样式表附加到文档中时可以指定样式表的类型，下面是建立好的三个样式表文件，分别应用于屏幕、打印设备和电视，并已被链接到网页中。

　　在工具栏上单击鼠标右键，选中“样式呈现”选项，就会在工具栏下方出现“样式呈现”的各个按钮了，如图27中红色框内所示。

图27

　　每一个按钮都有自己不同的用途，从左到右依次为屏幕、打印、手持设备、投影设备、TTY、TV和打开/关闭CSS。单击不同的按钮，可以激活相应的媒体类型，与之相关的CSS文件就被加载。
在建立页面的时候，我们只需要建立适合所需要的媒体类型CSS文件，Dreamweaver 8将会精确显示我们设计的页面是如何在相应媒体中应该显示的效果。

　　6.代码折叠功能

　　我们再来看看新的代码折叠功能，如果你经常编写HTML代码，你可能对足足几页的代码不会陌生，让你去找代码中的某一行，翻来覆去地拖动滚动条，这的确是一项烦人的工作。在Dreamweaver 8中已经解决了这个问题，我们只需通过编辑器左边的加号和减号就可以轻易找到并控制相关的代码了。

　　打开我们制作的主页，单击“Code”按钮，切换到代码视图中，如图28所示。

图28

　　在代码视图中拖动鼠标选中一段代码，代码的左侧会出现两个减号把这段代码包含到一起，如图29所示。

图29

　　单击“折叠整个标签”按钮，会将此段代码折叠到一起，（按住Alt键的同时单击此按钮，可以折叠外部标签），如图30所示。

图30

　　同样地，如果选中代码的同时，单击“折叠所选”按钮，也可以将代码折叠，我们用到这个按钮的时候比较多（按住Alt键的同时单击此按钮，可以折叠外部所选）。

　　在折叠代码以后，如果想要展开被折叠的代码，可以单击“展开全部”按钮，这样就会将所有折叠到一起的代码展开，如图31所示。

图31

　　关于代码的折叠和展开，还有一个更简便的方法，就是在选中代码以后，直接单击代码段前的减号就可以折叠代码，单击加号则可以展开代码，怎么样，这个功能对经常写代码的朋友来说是不是很得心应手啊！

　　7.后台文件传输

　　在以前版本的Dreamweaver中，相信使用它的Ftp传输工具的人并不多，因为它实在是太浪费时间了。如果你要上传文件到服务器中，就只能眼巴巴地看着它上传文件，你却不能使用Dreamweaver来设计其它文件，所以，很多朋友都选择了使用其它专业的Ftp上传工具来更新自己的网站。

　　我曾经把Dreamweaver的Ftp上传视为可有可无的功能，直到Dreamweaver8的出现，才改变了我的看法。前段日子，网站服务器似乎受了攻击，使用CuteFtp工具无法登陆服务器，万般无奈之下想试试Dreamweaver8的Ftp上传功能，设置好服务器的上传地址，主机目录，登陆名和密码以后，单击连接到远端主机按钮，竟然提示连接成功，真是让人感到惊喜，如图32所示。

图32

　　单击图32中右侧的“展开以显示本地和远端站点”按钮，切换到站点视图中，如图33所示。

图33

[NextPage]

 

　　在窗口的左侧是远端站点文件，也就是网站服务器的文件，右侧就是本地站点文件了。选择要上传的文件，然后单击右键，选择“上传”，此时系统会提示是否上传相关文件，如图34所示。如果你在网页修改过程中改动了与本网页有关的内容，并且需要同时更新的话，可以单击“是”按钮，Dreamweaver 8会自动搜寻与上传文件相关的一切内容，比如图片、Flash、其它网页等等，然后上传到远端站点中。

图34

　　在上传文件的同时，你完全可以不去理会后台文件的上传，继续在Dreamweaver中做其它工作，这样可以节约很多时间。

　　另外，在制作好了一个网页的时候，可以选择直接保存到远程服务器，只需要执行“文件/保存到远程服务器”菜单命令即可，前提是你必须正确设置了网址的Ftp信息。系统会弹出“保存文件”对话框，如图35所示。单击“保存”按钮，将文件直接保存到服务器的相应目录中就完成了文件的上传。

图35

　　8.关于时间轴

　　关于时间轴，相对于Dreamweaver2004来说，似乎应该算是一个新功能，但是它实际上早就存在于2004版本以前中了，只是在2004中Macromedia突然去掉了此功能，新版的时间轴和以前的相比也有了一些新的改变。习惯了使用2004的朋友可能会觉得这个功能比较陌生，我们就在这里简单介绍一下它的使用方法，并制作一个简单的时间轴动画。

　　新建一个网页文件，绘制一个层，然后在层中插入一幅图片，并在层上单击鼠标右键，选择“添加到时间轴”选项，如图36所示。

图36

　　如果你的系统没有打开时间轴面板，可以执行“窗口/时间轴”菜单命令，打开时间轴面板，如图37所示。

图37

　　将层添加到时间轴以后，会自动在层中显示一段蓝色的矩形块。拖动矩形块前后的两个白色圆点，可以改变时间轴的长度，也可以直接在图38中所示的红色框中输入帧的数值，Fps为帧频速率。

图38

　　选中图层，然后执行“修改/时间轴/录制层路径”菜单命令，系统会自动记录下我们拖动层时的运动轨迹。好了，现在选中时间轴中的后面一个关键帧，在页面中拖动层，系统会记录下层的运动轨迹，并在时间轴中适时添加关键帧，如图39所示。

图39

　　如果选中“自动播放”和“循环”选项，在打开网页时会自动播放时间轴动画。保存文件，然后按下F12键预览一下效果吧！

综述：

　　通过对Dreamweaver8的新功能的了解，相信你会有理由去升级自己的Dreamweaver，因为在设计网页的过程中它确实给我们带来了极大的便利，实现了新的飞跃，无论是功能还是性能都获得了重大的改进，使我们不仅能为网络和移动设备创建及发布更具表现力、更引人注目的内容，而且效率更高，所用的时间更少。