Dreamweaver3完全教程(2)
全套教程打包下载
第一章 认识Dreamweaver 3的工作环境
Dreamweaver是Macromedia公司推出的主页编辑工具。它是一个所见即所得网页编辑器,支持最新的DHTML和CSS标准。它采用了多种先进技术,能够快速高效地创建极具表现力和动感效果的网页,使网页创作过程变得简单无比。值得称道的是,Dreamweaver不仅提供了强大的网页编辑功能,而且提供了完善的站点管理机制,可以说,它是一个集网页创作和站点管理两大利器于一身的超重量级的创作工具。
从Dreamweaver 2开始,它就已经成为专业网页创作者事实上的标准工具,而随着最新的Dreamweaver 3的出现,必将极大提高国内网页创作者的综合水平,掀起一股网页创作的****。本章主要介绍Dreamweaver
3的工作环境,以引导用户快速了解Dreamweaver强大无比的创作能力。
1.1 概述
微软的FrontPage 2000号称最好的所见即所得的网页编辑器,然而一旦您使用过Dreamweaver,几乎可以肯定,您一定会将FrontPage抛诸脑后。利用FrontPage创作网页,不但要对付各种各样烦琐和难懂的对话框,而且在页面的控制方面也实在差强人意。不仅如此,FrontPage还会生成多如牛毛的垃圾代码,其庞大的体积和单调的功能特性远远不成比例。在实际创作过程中,我们更多感受到的是FrontPage像洪水一样地难于控制,而很难将精力集中于网页创作本身。一个高明的网页创作者,不仅希望能够创建出美观的页面,而且希望生产最精简和高效的HTML源代码,在对网页源代码进行精确地控制方面,FrontPage几乎无能为力。因此,对于网页创作者来说,使用"记事本"程序直接撰写网页代码,似乎显得更为方便。
但这些都已经过去了,Macromedia公司的Dreamweaver的出现,使用户发现,创作网页原来可以这样轻松。Dreamweaver提供了强大的设计工具,在不用书写一行代码的情况下,就能够快速创建各种极具动态HTML特性的网页,例如动画和分层等;利用Dreamweaver的目标浏览器检查特性,可以创建兼容性极好的网页,以适用于各种平台和各种浏览器;利用Dreamweaver的Roundtrip
HTML技术,用户可以精确控制Dreamweaver生产的网页源代码,例如,在可视编辑器中进行编辑时,可以在HTML检视器中同步地看到Dreamweaver到底为您生成了什么样的源代码,从而杜绝了盲人摸象的弊病。在编辑由其他网页创作工具所生成的网页时,Dreamweaver会尊重其他工具所生成的原代码,不会任意修改它,当然,如果需要,Dreamweaver也仍然可以帮助您"净化"其他工具所生成的垃圾代码。
Dreamweaver是完全可定制的,您可以创建自己的对象和命令,修改菜单和快捷键,甚至可以通过自己书写JavaScript代码来为Dreamweaver创建新的行为和属性面板,以增强Dreamweaver本身的能力。
1.2 Dreamweaver 3的新特性
Dreamweaver 3是Macromedia公司最新产品,同Dreamweaver 2相比,它进行了多项改进,例如增强了HTML编辑特性,改善了站点管理机制,指定了更紧凑和高效的工作流程,在添加一些特殊元素,诸如特殊字符、导航条和图像映像等时更为便捷,并且允许您充分定制Dreamweaver和扩展Dreamweaver。
下面就让我们看一看最新的Dreamweaver 3相较Dreamweaver 2提供了哪些新特性。 1.2.1 编辑HTML
在对HTML的编辑控制方面,Dreamweaver可以称得上是不遗余力。
快速标记编辑器(Quick Tag Editor)
利用快速标记编辑器,在编辑网页的过程中,用户可以在任意时刻任意位置直接修改对应生成的源代码,实现某些可视化操作下不能实现的特性,只要首先选中要修改的部位,然后按下Ctrl+T组合键,就会打开一个编辑窗口,以便于进行源代码的编辑。
HTML样式(Style)
在Dreamweaver 3中增强了对HTML样式的管理,允许您在网页中通过使用可以被多种浏览器共同支持的标准HTML标记(例如和标记)来创建样式,而不像以往那样仅仅只能使用层叠样式单(CSS)来创建样式,这样生成的网页兼容性更好。
增强的HTML源代码检视器(HTML Source inspector)
在Dreamweaver 3中,源代码检视器的功能得到了增强,现在它可以为每条源代码显示行号,便于定位;可以像其他字处理程序那样通过在空白边缘上单击来选择完整的行;也可以对选中的HTML源代码部分进行拖放;并且还也可以将HTML源代码检视器停靠到其他的浮动面板上,形成选项卡的形式。
增强的第三方标记模式所谓第三方标记,指的是由其他工具所生成的HTML源代码标记,例如Microsoft Active Server
Pages(ASP)和ColdFusion标记。在Dreamweaver 3中,允许您指定要忽略那些由第三方标记类型所生成的内容。同时,Dreamweaver还提供了新的重写选项,以便于您控制是否允许对某些特定内容字符进行重写。
修复Netscape浏览器重设大小的错误在Netscape浏览器中,如果重设浏览器的大小,会导致CSS层产生错误。在Dreamweaver
3中,允许您设置是否要自动添加一段JavaScript代码,以修复该错误,这样您所编辑的网页在Netscape浏览器中就可以被正确浏览。
1.2.2 站点管理
Dreamweaver 3不仅可以编辑网页,而且可以进行站点管理,它允许将站点管理同网页创作结合起来,高效快捷地构建网站。
在Dreamweaver 3中,对站点管理方面进行了如下一些改进。
同步文件Dreamweaver 3允许您快速地保持您本地站点和服务器上站点之间文件版本的同步,以确保在本地站点和服务器站点上的文件都是最新的版本。您也可以通过该特性来从站点中删除一些无用的废弃文件。
更容易的文件核查和检验通常一个大型的网站会将维护工作分摊给多个维护人员来完成,在网站的维护过程中,合理分配文件的管理权限是非常重要的,否则,如果一个文件同时备被多个维护人员操作修改,则会导致不可预料的错误。在Dreamweaver
3中,通过所谓的Check In和Check Out操作来实现对文件操作权限的控制。Check Out等同于将文件锁定,只允许自己对之进行修改,其他的维护人员不能对它进行操作,而Check
In等同于释放对文件的锁定,这样其他的维护人员就可以对该文件进行操作。
在Dreamweaver 3中,允许您在文档窗口中直接获取文件、放置文件、Check In和Check Out文件,而不用每次都切换到站点管理窗口中。
在放置文件之前存储文件在Dreamweaver 3中,当将一个尚未存储的网页放置到远端的服务器上时,系统会提示您要先将网页存盘,这样使文件更为安全。
编辑Flash动画文件中的链接在Dreamweaver 3中,可以对Flash动画文件中的链接进行编辑。在站点地图中会显示Flash文件中所有的链接,利用链接检查特性可以对这些链接进行检查,以查看其中是否有错误。
1.2.3 创建、编辑对象和页面元素
在Dreamweaver 3中,对对象和页面元素的创建和编辑能力进行了很多改进。
字符对象在编辑网页的过程中,很多特殊符号,例如版权符号(?)和商标符号(?)的输入一直是让人很头痛的事情,因为要输入这些符号,必须输入相应的代码。譬如对于版权符号,对应的代码是©,记住众多符号对应的代码是很难做到的。在Dreamweaver
3中,提供了一组特殊字符对象,从对象面板上就可以很容易地将它们插入到网页中,用户再也不用死记硬背这些符号的代码了。
框架对象框架在网页创作中是最为常见的类型。在Dreamweaver 3中对框架制作功能进行了增强,允许您快捷方便地创建预定义的框架集。
其他对象在Dreamweaver中允许您很快速便捷地往文档中添加诸如导航条(Navigation Bars)、跳转菜单(Jump
Menus)、e-mail链接、日期和其他新型的媒体对象(如Flash 4动画、Shockwave 7动画以及其他常规对象等)。
内联图像映像利用图像映像,可以实现在一幅图像中创建链接。在Dreamweaver 3中,允许您不离开文档窗口,直接对图像映像进行操作,例如添加热区、重设热区大小、改变链接目标,以及增删行为(Behaviors)等。
1.2.4 工作流程的改善
Dreamweaver 3改进了原先的工作方式,提供了许多更新更可靠的方法,帮助网站的建立。
设计附注(Design Notes)
当站点中的文件变得越来越多时,准确了解文件中的内容和文件的含义变得非常重要,在Dreamweaver 3中允许您往文件上附加附注信息,以便对文件进行跟踪和管理。同时,利用这些附着于文件上的附注信息,还可以起到同网站其他维护人员进行信息交流的作用。
Fireworks是Macromedia公司的又一Internet创作利器,主要用于创建高质量、低尺寸或动态的图像。由于都是一个公司的产品,因而它同Dreamweaver有着非常紧密的集成关系。在Dreamweaver
3中,您甚至可以将设计附注添加到由Fireworks所创建的图像中,然后在Dreamweaver中对之进行编辑。
导入和净化Word生成的网页许多人目前正使用Microsoft Word来生成HTML文件,特别是在Word 2000发布之后,使用它作为网页生成工具的人越来越多。在Dreamweaver
3中,允许您直接导入由Microsoft Word所生成的HTML文件,并对之进行编辑。
使用过Word进行网页创作的人都知道,Word会在网页文件中添加大量的垃圾代码和无用的标签信息,利用Dreamweaver
3的净化特性,能够帮助您从Word生成的HTML文件中剔除那些无关紧要的XML代码和样式、删除无用的标记、修复无效的HTML代码,并对这些代码重新进行格式化,使之符合自己的需求。
历史面板(History palette)
历史面板可以说是Dreamweaver 3中最为重要的工具之一,使用历史面板能够跟踪您所进行的每一步动作。您可以随时撤销操作,恢复到原先的工作中,这样再也不用担心操作失误了,当然,也可以取消撤销操作,继续原先的编辑过程。
历史面板的作用不仅如此,它不仅可以用来撤销和恢复操作步骤,也可以实现对某段操作步骤序列的重复进行。它甚至可以将操作步骤复制到剪贴板上,然后在其他的文档上进行粘贴,以应用这些操作步骤。您还可以将这些步骤作为命令存储起来,它们会自动出现在"Commands"(命令)菜单中。
重复在网页编辑中,有时候希望重复某些操作,例如重复制作大量的相同文本或表格,Dreamweaver 3提供了重复操作特性,允许您快捷有效地重复进行相应操作。
导入表格数据许多原始数据通常保存在一些特定的文档,例如工作表文件或数据库中,如果希望在网页中使用这些数据,通常需要进行额外的处理。在Dreamweaver
3中,允许您自动创建包含外界数据的表格,这些数据可以从一些特定类型的文档,例如Microsoft Excel或Microsoft
Access所生成的分隔符形式的文档中读取。
插入Fireworks HTML在Dreamweaver
3中,可以从由Macromedia Fireworks所生成的图像中导入HTML源代码和图像。您可以从Dreamweaver
3中启动Fireworks并编辑源PNG图像。
启动和编辑媒体Dreamweaver只是一个网页编辑器,如果希望编辑其他类型的文件,例如图像或多媒体文件,则需要使用其他的工具。在站点窗口中,双击任何图像或媒体文件,就可以启动相应的外部编辑器,对这些图像或媒体文件进行编辑,您再也不用从"幽深"的"开始"菜单中启动外部编辑器了。
1.2.5 定制和扩展Dreamweaver
Dreamweaver 3是完全可定制的,您可以按照自己的需要,将之定制为自己喜欢的样子。
可定制的菜单和快捷键Dreamweaver原始的菜单和快捷键不一定符合您的需要,您可以对菜单和快捷键进行编辑、定制或扩展,使之更方便进行操作。
更强的灵活性在Dreamweaver 3中提供了300个新的应用程序编程接口(API)函数,允许您创建自己的JavaScript,以对Dreamweaver进行扩展,例如可以定制自己的浮动面板和属性面板等。