广东工业大学继续教育学院毕业论文(设计) 第四章:开发网站的软件工具的介绍及特性
4.1 Macromedia Dreamweaver开发工具的特点
Macromedia Dreamweaver是一个用于可视化设计与管理网页和网站的专业级HTML编辑器。Dreamweaver都能让我们很快上手并且能提供有用的工具来增加我们的网页设计经验。 Dreamweaver包含很多编码工具和特性:一个HTML、CSS和JavaScript参考,一个JavaScript调试器和代码编辑器(代码视图和代码检查器)。可以使用代码编辑器直接在Dreamweaver中编辑JavaScript、XML和其他文本文档。Macromedia往返HTML技术可以使得在导入HTML文档时不需重新格式化代码——当然在需要的时候,也可以让Dreamweaver清理和重新格式化HTML。
Macromedia Dreamweaver中的可视化编辑功能可以让我们为页面快速添加设计和功能,而不用写一行代码。可以查看所有的站点元素或资源,并且可以直接将它们从一个易用面板中拖动到文档。可以程序化的开发流程:在Macromedia Fireworks中创建和编辑图象,然后直接将它们导入到Dreamweaver,或直接创建的Flash对象添加到Dreamweaver中。
Macromedia Dreamweaver是可以完全自定义的。可以使用Dreamweaver创建自己的对象和命令、修改快捷键,甚至可以书写JavaScript代码,从而用自己创建的新行为、属性检查器和站点报告来扩展Dreamweaver的功能。
4.1.1 Dreamweaver MX新特性
Dreamweaver MX新特性包括加强了HTML编辑,使其更容易设计页面;加强了站点和资源管理功能;可以创建自己的Flash对象;流线型的工作流程;加强团队协作,以及允许定制和扩展Dreamweaver。
(1) 改进的代码编辑: Dreamweaver工具条允许管理查看页面的方式——
设计视图,代码视图,或者两者的结合。工具条对一些常用特性提供便利的操作方式,如「在浏览器中预览」和「设计备注」。
(2) 代码视图 : 提供了一种在Dreamweaver「文档」窗口中直接查看HTML
源代码的新方式。可以在Dreamweaver「代码」视图中编辑非HTML文档,如JavaScript文件和XML文件。
(3) 集成代码编辑器: Dreamweaver现在拥有了集成的,专业级的代码编辑
器——「代码」视图和「代码」检查器。可以设置自动换行,代码识别,实时语法分色显示和更多可在「选项」菜单中获得的功能。
35
广东工业大学继续教育学院毕业论文(设计) (4) 参考面板 : 是一个对HTML,JavaScript和CSS提供快速帮助的工具。
对于正在「代码」视图(或「代码」检查器)中使用的指定标签它可以提供相关信息。
(5) 代码导航弹出式菜单 :允许在页面中选择JavaScript函数的代码。通过
使用此菜单,可以在「代码」视图中迅速的浏览JavaScript代码。
(6) 更容易的页面设计:可以通过绘制一些框(表格或单元格),然后向其
中添加内容,这样可以迅速设计Web页。
(7) 改进的模板 :在一个模板文件中可以更容易地辨别出可编辑区域。现
在的模板将会在一个小标签上显示可编辑区域的名称及其矩形的外边界。
(8) CSS样式表 :当创建一个新的样式的时候就可以定义CSS样式表。也
可以很方便地点击「CSS样式」面板上的一个按钮,将一个现存CSS样式表关联进去。
(9) 加强集成 : Flash按钮和Flash文本 现在已经内置到Dreamweaver。
可以在一套预先定义好的Flash按钮中进行选择,然后将它们插入到文档中。
(10)窗口管理: 功能现在得到了增强:所有的窗口都贴靠在自己的位置上。
当新打开一个窗口时,Dreamweaver将自动避免其覆盖现有的可视面板。面板 现在有了一个新的Macromedia的样子,且在所有的Web发布产品中表现一致。所有的面板均有图标和文本,这样可以方便地辩识它们。在Windows和Macintosh中面板均使用系统的颜色和字体,并有统一的拖动和靠齐属性。
36
广东工业大学继续教育学院毕业论文(设计)
4.1.2 Dreamweaver MX的开发界面如图4.1所示:
图4.1 Dreamweaver MX的开发界面图
4.2 Macromedia Flash MX开发工具的特点
Macromedia Flash 是著名的网络多媒体制作工具。 它主要用于制作或播放矢量图形和动画素材。它在矢量图形的编辑上功能十分强大,还可以处理声音,是制作Web 动画的有力工具。
Macromedia Flash 是基于矢量图形的动画编辑软件,它编辑的主要对象是矢量图形。也可对转换为矢量图形的位图进行编辑。它的动画的基础是依靠关键帧,在关键帧之间是领先变形和移动位置等技术来自动形成过渡帧来补充动画。在拓列时是以时间轴为基础的。在Macromedia Flash的动画制作中,还可以对各种事件,如鼠标事件
37
广东工业大学继续教育学院毕业论文(设计) 等,制作出交互式的动画。并且可以基本上不用写代码。Macromedia Flash MX制作的动画需要Netscape4.0 或IE 4.0以上的版本支持。
Macromedia Flash MX是制作网页的三大有力工具之一。IE5浏览器支持Flash,浏览者不用插件就可直接浏览 Flash制作的动画。它采用了与众不同的核心技术。在以往的网页动画制作软件中,一般要将整个文件都下载完后,才可以播放动画,由于下载时间较长,浏览者往往等不耐烦,因此效果不太好。但Flash 采用的流控制技术,可一边下载,一边播放。并且设计者可自己决定流的大小,因此,制作的动态网页在下载时基本看不出时间上的延迟。
在Macromedia Flash MX中,大量的图形是矢量图形,因此,用Flash制作的图形在放大与缩小的操作中没有失真,并且用它制作的动画文件所占的体积较小,这些都是Flash 特有的优点。
4.2.1 Macromedia Flash MX的新特性
Flash MX 在Flash5 版本的基础上增加了许多内容。以下是一些方面:
1)增强了颜色的控制。主要体现在调色板、填充操作和线条样式等方面。
为绘制精美的图形提供了丰富的手段。
2)在选择外形和填充区域对象上更准确和容易了。
3)在网格、标尺上提供了更多的方法,可以很容易将电影对齐在背景上。 4)钢笔工具的绘画能力得到加强。可以绘制出像在FreeHand 和Fireworks
中一样精确的和满意的图形。 5)可以为作品导入MP3音乐文件。
6)新增了许多的范例,可以通过学习Flash5提供的范例较快的制作出
Flash电影。
7)可以设置个性化的快捷键。
8)所有的控制面板都在外观上统一,统一风格的界面更容易学习。
4.3 Macromedia Firework 开发工具的特点
Macromedia Fireworks 是一个强大的网页图形设计工具,你可以使用它创建和 编辑位图、矢量图形,以非常轻松的做出各种网页设计中常见的效果,比如翻转图象,下拉菜单等,设计完成以后,如果你要在网页设计中使用,你可以将它输 出为html文件,还能输出为可以在photoshop,illustrator和flash等软件中编辑的格式。作为一
38
广东工业大学继续教育学院毕业论文(设计) 个图象 处理软件,Fireworks 能够自由地导入各种图象(如 Macintosh 的 PICT、FreeHand, Illustrator,CorelDraw8 的矢量文件、Photoshop 文件、GIF、JPEGBMP、 TIFF),甚至是 ASCII 的文本文件,而 且 Fireworks 可以辨认矢量文件中的绝大部分标记以及Photoshop 文 件的层。而作为一款为网络设计而开发的图象处理软件,Fireworks 能够自 动切图、生成鼠标动态感应的 Javascript 等等,而且 Fireworks 具有 十分强大的动画功能和一个几乎完美的网络图象生成器(Export功 能)。
Macromedia Fireworks 可以进行矢量模式与位图模式的编辑,在默认状态下,fireworks 在打开时是 处于位图模式下,你所绘制的图形是作为矢量对象来处理的。当你在编辑它们时,你会看到你是在修改构成矢量图形的路径。
4.3.1 Macromedia Fireworks的新特性
(1) Macromedia通用用户界面(Macromedia user interface)
统一、熟悉的用户界面能帮助设计师轻松的工作在Flash,Dreamweaver,UltraDev和Fireworks之间,不论你使用哪一款Macromedia的产品,你会看到一样的图标、工具、工具条以及其他任何可能的对象。 Macromedia通用用户界面可以让你自定义快捷方式,或者将你在其他软件中使用的快捷方式带进来。
每个文件窗口最下面都有一条迷你启动条,可以让你快速启动常用的操作面版。
(2) 与Dreamweaver的兼容(Dreamweaver compatibility)
Fireworks和Dreamweaver比以前任何时候都能更好的在一起工作了! 当你在Dreamwaever里需要修改图片时,只要点击属性面版上的Edit按钮就会自动启动Fireworks编辑,当编辑完成后,无须存盘直接按Done就可以完成对图片的修改。
(3) 拖放行为(Drag-and-drop behaviors)
当你在创建翻转图和复杂交互行为的时候只需要将发动行为的热区/切割拖放到发生行为的热区/切割上就可以了,这时候Fireworks会弹出一个窗口询问你变化的方式。使用拖放创建的行为和使用行为面版添加的行为效果是一样的,但是拖放要方便、直观的多。
(4) 创建弹出式菜单(Pop-up menus)
弹出式菜单可以让初次来到你网站的访问者快速了解你网站的目录架构并容易得找到想找的内容,但是以前创建类似的弹出式菜单并不容易。在Fireworks4.0中,你可以用导向式的方法轻松的创建出这种效果,并赋予多种样式(Style)。
(5) 遮罩、层面版和帧面版增强(Masking, Layers panel, and Frames panel
39