泡泡网软件频道 PCPOP首页      /      软件频道     /      评测    /    正文

网页快刀!DW 8.0新功能图文实例讲解

    第一部分:Dreamweaver 8 新功能概述

    与Macromedia Studio 8中其它的制作软件一样,Dreamweaver 8也增加了许多让我们欣喜不已的新功能,比如更加先进的工作流程,重新设计的CSS工具,改良后的后台FTP,转换XML文件的工具,文档放大功能,插入Flash视频和FlashPaper,代码折叠功能等等。

  下面小编将先对Dreamweaver 8的新增功能进行简单的介绍。

    软件资料

    软件名称:Macromedia Dreamweaver     软件授权:共享

    软件大小: 60 M                      软件版本:v8.0 Final 简体中文正式版

    下载地址:http://download.pcpop.com/SoftDown_74747.html

    一、工作流程的改进

  在网站制作当中,工作流程直接关系着网页设计师的工作效率,比如将所有打开的文档放置在一个面板中,只需单击文档标签就互相切换文档。另外,我们还可以将面板的排列保存为“Workspace layout”(工作区布局),以适应不同网页的设计需要。

  除了上述功能以外,Dreamweaver 8还提供了以下的新功能:

  1.放大工具

  使用放大工具可以帮助我们更容易地对齐图像、选择较小的对象以及查看较小的文本。

 Dreamweaver 8的放大功能

    2.辅助线

  拖动页面垂直或水平方向的辅助线可以更精确地定位对象的位置。

 辅助线设置

    3.Flash视频的支持

  现在我们可以直接在Dreamweaver 8中插入Flash视频文件了,就像类似VCR一样的控制方式一样控制Flash视频文件。

 插入Flash视频

    二、扩展的CSS支持

   Dreamweaver 8在CSS方面同样也提供了更强的支持,增强了复杂样式表信息的显示。CSS面板现在完全重新设计为一个统一的面板,将Dreamweaver MX 2004的众多CSS面板集中到了一个位置。

Dreamweaver 8 新功能图文实例讲解
 
 CSS

    我们还可以使用新增的可视化设置功能来帮助我们查看复杂的CSS布局。

 
 CSS选项
 
Dreamweaver 8 新功能图文实例讲解
 
 CSS 正在

    在CSS面板中新增加入了一个摘要视图,有助于我们快速确认应用于当前选定元素的CSS属性。

    三、文件传输功能

  在使用Dreamweaver 8以前的版本向服务器传送文件时,用户不能在Dreamweaver中进行其它工作,现在好了,新版的Dreamweaver允许我们在传输文件的同时,可以进行其它工作,这样可以大大提高工作效率。

    四、支持XML/XSLT

Dreamweaver 8 新功能图文实例讲解

 定位XML源

  新的XML/XSLT创作功能简化了用于Web浏览的XML文件的格式化过程。我们可以创建XSLT文件,并完全使用CSS格式,将其转换成难于理解的XML文件,可以附加到本地文件中,也可以附近互联网的远端文件。

    五、其它新功能

  除了上述新功能之外,Dreamweaver 8其它功能做了一些改进,比如Starter Pages、插入Flash Paper、背景图像的可控性等等,在后面的介绍中我们将详细说明它们的使用方法。

第二部分:Dreamweaver 8 新功能实例讲解

  我们以制作一个网站首页文件的过程来体验Dreamweaver 8的新功能。

  一、建立站点

  启动Dreamweaver 8,执行“站点/新建站点”菜单命令,在弹出的对话框中单击“高级”选项卡,在本地信息中设置站点名称和本地根文件夹,然后设置远程信息。这些功能和Dreamweaver 2004相比基本没有太大变化,只是其中多了一个“维护同步信息”的选项,当我们制作完成网页以后,会同步更新到服务器上,这样可以确保网站上的内容总是最新的。服务器的信息一定要设置正确,否则在后面登陆更新服务器的时候会出现错误。

 
 高级选项
 

  二、设计首页

  站点建立完毕以后,就可以设计首页了。下图所示为软件的启动对话框,在创建新项目里多了XML/XSLT两个选项。

 
  关于XML,大家可能都比较熟悉了,而XSLT则是XML家族的另一种语言,它类似HTML中的CSS,但是比CSS功能要强大的多。它更偏向是一种程序语言,但没有常见程序语言复杂,甚至比js等脚本语言还简单。将XML转换为HTML,是目前XSLT最主要的功能。选择创建XSLT(整页)新项目以后,弹出对话框询问如何定位XML源,可以选择“附加我的计算机或局域网上的本地文件”或“附加互联网上的远端文件”。
 
Dreamweaver 8 新功能图文实例讲解
 
  在Dreamweaver 8中还提供了一个新的创建范例集“Starter Pages”,我们可以从中选择自己需要设计的风格类型。
 
 
 Starter Pages

  1.辅助线的使用

  我们选择基本页的HTML文档,单击创建按钮,进入空白文档的编辑页面。首先你会发现在文档周围默认有标尺出现,在Dreamweaver 2004中虽然也有标尺功能,但是在使用的过程中实际用途并不大,现在结合Dreamweaver 8新提供的辅助线可以更方便地确定网页元素的位置或大小了。

 
 辅助线
 
  执行“查看/辅助线”菜单命令,你会看到如下图所示的辅助线控制菜单。
 
Dreamweaver 8 新功能图文实例讲解
 
  确定已经勾选了“显示辅助线”选项,然后在文档的标尺上纵向或横向拖动鼠标就会显示出默认的绿色辅助线。当然你还可以选择菜单中的“640×480,默认”等选项,以生成适合相应页面大小的辅助线。
 
 
  将鼠标指针移动到辅助线分割的方格中,然后按“Ctrl”键,可以显示此方格的高度和宽度。
 
 
  如果要锁定辅助线,可以执行“查看/辅助线/锁定辅助线”菜单命令。如果选中“靠齐辅助线”选项,在网页中插入元素时,会自动贴近辅助线。如果选中“辅助线靠近元素”,则拖动辅助线时会自动贴近网页中的元素。要删除一条辅助线,可以拖动它到网页的顶部或左侧就会自动消失;而要删除所有辅助线,可以执行“查看/辅助线/清除辅助线”菜单命令。

Dreamweaver 8 新功能图文实例讲解

 辅助线选项
 
    执行“查看/辅助线/编辑辅助线”菜单命令,弹出“辅助线”对话框。我们可以在这里设置辅助线的颜色,距离的颜色等等属性。
 
    2.背景设置的新功能

  我们再来看看设置文档背景带来了哪些新改变?执行“修改/页面属性”(快捷键Ctrl+J)菜单命令,弹出“页面属性”对话框,在“外观”分类中会发现背景图像的下方多了一个重复选项,可以选择不重复、重复、横向重复、纵向重复。

Dreamweaver 8 新功能图文实例讲解
 
  单击“背景图像”后的浏览按钮,找到一幅图片作为网页的背景,然后来看看四种不同选项所带来的不同背景图像。首先选择“不重复”选项,它的含义是背景图片不重复显示,只显示图像的原始大小,而且只显示一次。在以前版本中,只要设置了网页背景图像,它就会平铺显示在网页中,现在我们对背景图像的可控性更强了。
 
 
    如果选中“重复”选项,则会在横向和纵向重复显示背景图像,就和以前的老版本中一样。
 
 
    如果选中“横向重复”选项,则会在横向重复显示背景图像。
 
 
    如果选中“纵向重复”选项,则会在纵向重复显示背景图像。
 
 
 
    设置标题文字,然后选择一种合适的图片作为背景图像。
 
    3.放大功能的使用

  插入一个符合要求的表格,然后分别在单元格中插入在图像处理软件处理好的相应图像。

 
 正常显示
 
    在下方的工具栏上有三个按钮,分别为箭头选择工具、抓手移动工具和缩放工具。使用缩放工具可以让我们更方便地对齐图像、选择较小的对象以及查看较小的文本。
 
 
 放大显示
 
Dreamweaver 8 新功能图文实例讲解
 
 显示比例可调节
 
    也可以直接在缩放工具后面的选框中选择合适的放大或缩小比例,另外还可以选择“复合所选”“符合全部”“符合宽度”。

    4.Flash视频的支持

  在Dreamweaver8中提供了对Flash视频的支持,我们可以直接插入Flash视频文件。继续在刚才的文件中操作,执行“插入/媒体/Flash Video”菜单命令,弹出“Insert Flash Video”对话框。

 
 插入Flash视频
 
    在Video Type中可以选择Progressive Download Video(下载视频)或者Streaming Video(流媒体格式视频)两种选项。如果选择第一个选项,可以直接在URL地址栏里输入视频文件的地址;如果选择了流媒体格式的视频文件,则需要输入Server URL地址,以rtmp://格式开头,并且在Sream name中输入流媒体的文件名。
 
 
    在Skin选项中选择播放器的外观形状,在Width中输入宽度大小,在Height中输入高度大小,如果选中“限制高宽比”选项,则会锁定宽度和高度的比例。如果选中“自动播放”选项,打开网页时会直接播放视频文件。选中“自动重新播放”选项则允许重复播放视频。
 
 
 
 Flash视频属性
 
    在网页中插入Flash视频后,我们仍能继续修改视频文件的这些属性,只需单击该视频文件,就会在属性面板中出现相应的选项。
 
  5.扩展的CSS支持

  在网页中插入视频文件以后,我们再在它的下方输入一段文字来体验一下Dreamweaver8 的CSS支持给我们带来了哪些新变化?使用文本工具输入一段文字,然后打开CSS面板。

Dreamweaver 8 新功能图文实例讲解
 
    新的CSS面板完全设计成了一个统一的面板,我们在此面板中可以快速确认样式、编辑样式、查看应用于页面元素的样式。

  单击“添加属性”,可以直接输入样式属性,比如我输入Color,然后在后面的颜色选择器中选择一种颜色就可以了。当然其它CSS属性也可以直接在这里输入,这比起以前要反复修改网页代码真是方便了不少。

Dreamweaver 8 新功能图文实例讲解
 
    单击CSS面板中的Current按钮,可以显示当前所选中内容的CSS摘要,而与所选内容无关的CSS会以删除线的形式出现。这个功能对我们快速确认应用于当前选定元素的CSS属性十分有帮助,在列表中可以方便地查看哪种样式中的哪质粜员挥τ玫降鼻把≈械脑亍P碌腃SS控制面板可以使我们从复杂的多种CSS样式中解脱出来,从而轻松完成一个网页的内容格式化。
 
    好了,我们再来看看在可视化助理方面提供了对CSS的新支持。执行“查看/可视化助理”菜单命令,你会发现多了“CSS Layout Backgrounds”、“CSS Layout Box Model”、“CSS Layout Outlines”三个选项,分别为背景模式、框模式和外形轮廓模式显示CSS样式效果。
   
 
    另外,还有一个值得我们关注的新功能――样式呈现工具栏,使用这个新功能我们可以为不同的媒体类型进行设计,比如屏幕、手持设备、打印输出设备、电视设备、投影设备等等。当我们将外部样式表附加到文档中时可以指定样式表的类型,下面是建立好的三个样式表文件,分别应用于屏幕、打印设备和电视,并已被链接到网页中。

    在工具栏上单击鼠标右键,选中“样式呈现”选项,就会在工具栏下方出现“样式呈现”的各个按钮了。

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

    6.代码折叠功能

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

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

 
 正常显示
 
    在代码视图中拖动鼠标选中一段代码,代码的左侧会出现两个减号把这段代码包含到一起。
 
 
 随意选中任意代码
 
    单击“折叠整个标签”按钮,会将此段代码折叠到一起,(按住Alt键的同时单击此按钮,可以折叠外部标签)。
 
Dreamweaver 8 新功能图文实例讲解
 
 折叠显示
 
    同样地,如果选中代码的同时,单击“折叠所选”按钮,也可以将代码折叠,我们用到这个按钮的时候比较多(按住Alt键的同时单击此按钮,可以折叠外部所选)。

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

Dreamweaver 8 新功能图文实例讲解
 
 展开显示
 
    关于代码的折叠和展开,还有一个更简便的方法,就是在选中代码以后,直接单击代码段前的减号就可以折叠代码,单击加号则可以展开代码,怎么样,这个功能对经常写代码的朋友来说是不是很得心应手啊!

  7.后台文件传输

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

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

Dreamweaver 8 新功能图文实例讲解
 
    单击上图中右侧的“展开以显示本地和远端站点”按钮,切换到站点视图中。
 

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

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

Dreamweaver 8 新功能图文实例讲解
 

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

  8.关于时间轴

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

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

Dreamweaver 8 新功能图文实例讲解
 
    如果你的系统没有打开时间轴面板,可以执行“窗口/时间轴”菜单命令,打开时间轴面板。
 
Dreamweaver 8 新功能图文实例讲解
 
    将层添加到时间轴以后,会自动在层中显示一段蓝色的矩形块。拖动矩形块前后的两个白色圆点,可以改变时间轴的长度,也可以直接输入帧的数值,Fps为帧频速率。
 
 
    选中图层,然后执行“修改/时间轴/录制层路径”菜单命令,系统会自动记录下我们拖动层时的运动轨迹。好了,现在选中时间轴中的后面一个关键帧,在页面中拖动层,系统会记录下层的运动轨迹,并在时间轴中适时添加关键帧。
 
 
    如果选中“自动播放”和“循环”选项,在打开网页时会自动播放时间轴动画。保存文件,然后按下F12键预览一下效果吧!

    综述:

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

0人已赞

关注我们

泡泡网

手机扫码关注