第一章 基础使用

作为所见即所得的网页编辑软件,Dreamweaver2的基本使用总的来说与大多数的此类软件相似,所以如果你用过Frontpage、Pagemail等软件的话,Dreamweaver2将让你轻易上手。然而就在具体的操作中,使用者完全能够感受到软件设计者用心良苦,由于他们的努力,Dreamweaver2中所有的操作都被简化得非常方便。   

首先,让我来介绍以下Dreamweaver2的工作环境。打开Dreamweaver2后,看见的是白色的工作区和零散的一些浮动面板,其中白色的工作区即是使用者将创建的网页,而所有的浮动面板可以通过“Window”控制其是否显示。由于Dreamweaver2将新建网页文件的背景色默认为纯白色(#FFFFFF),就不会出现象那些粗心的Frontpage的用户那样,辛辛苦苦做出的网页却忘了设置背景色。在编辑网页时。在工作区中单击右键,选择“Page Properties”便可修改网页中标签包含的属性。用户可以按“F4”键,快速隐藏所有的浮动面板以获得最大的编辑区域。   

Dreamweaver2在Dreamweaver1.x的基础上做了许多改进,所以这个工作区中大有文章可做。先来看看工作区的最下方--状态栏(如果没有的话,选择“View Status Bar”命令打开),千万不能小看这一条状态栏,它能做的事情实在太多了。从左向右看,当你在网页中插入标签后,当前鼠标所指处包含的所有标签都会排列在状态栏的左边,也就是你看到“...”。这样就可以在状态栏中直接选取所要编辑的网页标签,在标签属性面板中进行编辑,这招就叫做“指哪打哪”,有创意吧。再向中间看,如果你使用的屏幕分辨率是800*600的话,状态栏的中间将显示“760*420 1k/1 sec”。这里的760*420是该网页预期的显示大小,在这排数字上试试点击,会弹出一个选单,包含了一些常用分辨率下的浏览器中网页实际显示大小。通过选择不同尺寸进行编辑,你就不用担心自己在800*600的分辨率下做的网页会在640*480中显示得残不忍睹,我想或许以后我们中文网络中类似于“请用800*600的分辨率浏览本页”之类的话能够越来越少。右边的“1k/1 sec”的意思就是现在这个HTML重1K用28.8的猫全速下拉要用1秒种,这压根就是一个网页称量器,真是想得周到。至于选用什么速度的猫以及要定义特别的窗口大小,你只需在刚才的弹出菜单中选择“Edit Size”就行了。在状态栏的最右边有六个按钮,作用和netscape中同样位置的按钮的作用相似,主要用来显示/隐藏六个浮动面板,自己摁两下就全明白是怎么回事了,这儿就不多说了。还有点想提一下,Dreamweaver2中对能够对HTML文件的〈head〉进行编辑,你只要选择“View Head content”就可以在工作区的最上方显示当前HTML文件中〈head〈/head〉之间的内容,相应的能够通过Objects浮动面板中的Head目录添加应用标签。在View命令行中还有一个重要的指令--“Frame Border”,在这儿一并讲了,打开帧边界后,你会发现在工作区四周多了一个边框,还挺坚硬的,单用鼠标拖不动它。这就是帧边界,Dreamweaver又一高明之处,当你要在一个页面中建立多个帧时,只要按住“Alt”帧,就可以随心所欲地分帧,就象吃豆腐一样简单。

  好啦,单一个工作环境就说了这么多,看来我这个简明教程实在算不上简明。到现在,你或许还不晓得怎么样在Dreamweaver2中插入图片吧(当初刚用dreamweaver时,这个问题搞得我头大三圈)。其实非常简单,选择“Window Objects”命令,就可以看到Objects面板,面板的默认项为common,一些最长用的东东。一个一个试过来,你不光可以插入图片,还能方便地建层,建表格等,用Objects可以满足一般的网页排版需要。所有的Object实际上都是一个包含javascript的HTML文件,你可以随意的添加/删除(具体的方法以后会讲到,由于我的Objects目录已经全部被个性化格式过了,所以实在记不起来common目录下到底有哪些东东了)。单击Object面板中的common就可以选用其他的Object,包括了forms系列、head系列、invisible系列等等,每个Object都可以插入相应的HTML4.0标签,而有Dreamweaver2所带的原始Object一般都有详细的help文件,如果你不晓得一个Object起什么作用的话就翻翻对应的help。   

所见即所得的网页编辑器的工作原理大致相同,一般都是在页面内插入然后调整。既然已经说了插入标签的方法,那么怎么才能进行调整呢?请选择“Window Properties”显示属性面板,让Dreamweaver2来回答这个问题。当你要对网页内的部件进行调整(这话挺拗口的,说穿了就是设置图片大小,表格间距等等许多细节工作),只要选中此部件(选中有困难时,可以在状态栏中快速选取HTML标签),标签属性面板就变成了该部件的属性设置面板了,这样的调整方法即方便又快捷。在这儿不得不说的是Dreamweaver2中崭新表格功能(实在太棒了!)在新建表格时就可以设定行数、列数、表格间距、表格空隙以及表格边的粗细。如果你要合并表格单元,只要按住“Shift”选取要合并的单元,然后在属性面板中点选合并按钮即可。类似的要分裂表格单元,只要选中该单元然后在属性面板中点选分裂按钮。也可以在表格中单击右键快速编辑表格。还有,当〈table〉标签被选中时,属性面板将指向表格的属性,这时你会发现四个网页排版中非常有用的按钮,分别是:“擦除有单元格的高度”、“擦除有单元格的高度”、“将所有单元格的宽和高转换为像素单位”和“将所有单元格的宽和高转换为百分比”。   

有了图片,又有了文字,接着就是超链了。Dreamweaver2的超链插入方式与众不同(有个性!)。你要插入超链的话,先得选定用来表示超链的文字和图片,然后在属性面板的link中键入超链地址。我想这与先打超链地址再插入图片的方法相比,在图文混排时可以省去许多不必要的HTML代码。 到这儿我想你对于用Dreamweaver2创建一个简单的网页已经有些了解了(否则我这么多话岂不是白说?)。如果你以前习惯使用基于HTML文本编辑的网页制作软件,那么Dreamweaver2同样也有合适你的开发环境。选择“Window HTML”命令就可以直接编辑HTML原代码,按“F10”在两中编辑方式中自用切换。Dreamweaver2采用了Roundtrip HTML技术。这项技术使得网页在DreamWeaver和HTML代码编辑器之间进行自由转换,HTML句法及结构不变。这样,专业设计者可以在不改变原有编辑习惯的同时,充分享受到可视化编辑带来的益处。而且Dreamweaver2应许用户定义开展的HTML编辑器,也就是说如果你的Dreamweaver2不满意,可以随时在Dreamweaver2内部调用其他HTML编辑器(我个人建议使用Hotdog Profassional 5)。