当你在网上冲浪时，会欣赏到很多制作精美的网站，在羡慕的同时，你想亲手制作网页吗？你想让自己制作的网页功能更强大吗？好，那
我们就一起学习Dreamweaver吧，这可是制作主页的好工具呀！
你可能会说，我既不懂HTML，也没进行过程序设计，能学会吗？告诉你，一点儿都没问题，Dreamweaver是可视化的网页制作工具，很容易
上手，可以让你轻松地制作出自己的网页。
慢着慢着，先告诉我什么是可视化？可视化的意思就是你在Dreamweaver中制作成什么样，在浏览器中就能看到什么样，也就是常说的“所
见即所得”。
那还等什么，快跟我学吧！
1、第一次新鲜接触
（1）什么是Dreamweaver
工欲善其事，必先利其器。Dreamweaver在多媒体方面颇有建树的Macromedia公司推出的可视化网页制作工具，它与Flash、Fireworks合在
一起被称为网页制作三剑客，这三个软件相辅相承，是制作网页的最佳选择。其中，Dreamweaver主要用来制作网页文件，制作出来的网页兼容
性比较好，制作效率也很高，Flash用来制作精美的网页动画，而Fireworks用来处理网页中的图形。
Dreamweaver启动画面
Dreamweave字面意思为“梦幻编织”，这一软件有着不断变化的丰富内涵和经久不衰的设计思维，它能充分展现你的创意，实现你的想法
，锻炼你的能力，使你成为真正的网页设计大师。
好吧，未来的网页设计大师们，让我们一起在Dreamweaver的空间驰骋，在网上编织我们的梦想吧！
（2）软件界面介绍
现在我们启动DreamWeaver，来见识一下它的面貌。
在安装Dreamweaver 3之后，它会自动在Windows的“开始”菜单中创建程序组，打开“开始”菜单，选择“程序 ->Macromedia
Dreamweaver 3 ->Dreamweaver 3”命令，便可启动Dreamweaver。软件启动后，会新建一个空白的HTML文档等候编辑。
启动Dreamweaver 3
我们看一下它的界面。上面是标题栏，显示出被编辑页面的标题，在括号内显示出文档所在目录及文件名，如果有星号出现则表示页面中
没保存的改动。标题栏下面是菜单，里面列有软件的功能列表，这与其它软件没什么两样。中间这一大块空白地方是编辑区，我们就在这里制
作网页。
Dreamweaver界面介绍
窗口最下面由三部分组成，从左向右分别为标签选择器（tag selector）、页面信息和快速启动栏。最左面的是标签选择器，可以用来显
示光标所在位置或所选对象的层次结构，在页面中选定某个对象后，标签选择器中会将选择的标签加粗显示，比如我们选中一个图形，则<img>
字样会被加粗。标签选择器的用途很大，以后我们会经常使用。
标签选择器 图4 显示和控制窗口的大小
底栏中间是一些页面信息，第一项800×600，用于显示和控制文档窗口的大小，单击旁边的小箭头，可以从列表中选择窗口的尺寸。
第二项7K/2sec，用于显示和估计文档的大小及下载这个页面所需时间，包括所有与其相链接的图片及Shockware电影。
底栏最右侧的一排按钮叫迷你发射器（Mini-Launcher），其实就是打开常用窗口快捷工具栏，比如Site（站点管理器）、Library（库管
理）、CSS Styles（样式编辑器）、Html Source（源代码编辑器）等窗口。
迷你发射器和“Launcher”面板
假设我们要调出HTML源代码编辑器，可以在发射器上点最后一个按钮，也可以按下F10键。 按下Shift+F4，可以看到迷你发射器放大的样
子，叫做“Launcher”面板，点击这里弹出相应的窗口，我们以后会经常用到。
DreamWeaver窗口中还有多个面板，这些浮动面板中有一些常用功能的快捷方式，和PhotoShop很象，不要被这些面板吓倒，真正用起来还
是很方便的。
这是对象面板（即Object面板），如果页面上看不到，可以按下Ctrl+F2键将其调出。这个面板里集成了“Insert”主菜单中的命令，用于
在网页中插入图形、表格等内容。现在看到的是“普通面板”，单击面板上部“Common”旁的小三角，弹出一个菜单，可以切换到其它对象面
板中，比如选择“Frames”，就切换到框架面板中，里面提供了创建框架的快捷按钮。
对象面板及面板间的切换
这些图标都很直观，相信你一眼就能看出来它是做什么的。如果不知道某个按钮的功能，可以将光标停在此按钮上，这时就会出现提示信
息，显示其功能。
这是属性面板（Properties），如果页面上看不到，可以按下Ctrl+F3键将其调出。属性面板主要用来设定元素的属性。这个面板比较灵活
，变化也很多，它随着我们选择对象的不同而不同。比如我们选择了一幅图片，那么属性面板上将出现图片的相应属性，如果我们选择的是表
格，它相应的会变化成表格的相应属性。
收缩时的属性面板
属性面板中有一个向下的小三角图标，单击后将出现更多的扩展属性。再次单击小三角图标，将关闭扩展属性，恢复到最初状态。
扩展后的属性面板
好了，DreamWeaver的界面就介绍到这里，是不是听糊涂了？没关系，你只要先有个印象就行了，具体用法我们在下面的教程中讲到。
千里之行，始于足下。下面我们开始Dreamweaver之旅，相信这是一次有趣、有益的旅行。
（1）定义一个本地站点
在开始用Dreamweaver制作网页时，首先要定义一个本地站点。作为一个网站，里面有很多网页文件、图片，甚至Flash动画等，如果不进
行管理归档，分散在硬盘的各个地方就无法方便地进行网页发布。定义本地站点，就是在硬盘上建立一个目录，将所有的网页和相关的文件都
放在里面，以便进行网页的制作和管理。
单击“Site”菜单下的“New Site”命令，弹出“Site Definition”（定义站点）对话框。在“Category”列表中的第一项“Local Info
”被选中，用来定义一些本地信息。
在“Site Name”框中输入站点的名字“myweb”，单击“Local Root”输入框右侧的文件夹图标，弹出选择本地文件夹对话框，我们点“
新建文件夹”按钮，在D盘根目录下建立一个名为myweb的文件夹，并选择它，单击“保存”按钮，“Local Root”输入框中显示“D：\myweb\
”,这个文件夹将作为我们的站点文件夹，以后所有的网页文件都放在这个文件夹下，相当于先选块地方以便盖房子。
定义一个本地站点
选中“Refresh Local File List Automatically”，表示自动刷新本地文件列表，以便在向网站中复制文件的时候，网站文件列表会自动
刷新。
选中“Use Cache to Speed Link Updates”，表示为站点生成一个高速缓冲存（Cache）文件，它可以自动跟踪网站内的文件链接情况。
当文件移动、重命名或删除时，可以自动修改所有相关链接。
单击“OK”按钮，会弹出一个对话框，单击“Create”，弹出“Define Sites”对话框，窗口中列出了我们刚刚创建的名为“myweb”的站
点。单击“Done”按钮，定义的站点就生效了。
定义站点过程中的对话框
观察一下新建的站点，发现它有点儿象资源管理器，右侧显示网站内的所有文件，并且以D：\myweb为根目录。关闭弹出的Site窗口。
站点管理器
（2）添加网页文字
好，下面我们开始制作网页的正文。现在光标处在正文编辑区，和记事本一样，我们输入文字“笨象先行”。敲一下回车，光标定位在下
一段中，输入一些主页说明文字。
在编辑区内输入文字
对了，千万别忘了保存文件哟！按下Ctrl+S键，在“Save As”对话框中输入文件的名字“index”，表示这是一个主文件，单击“保存”
按钮。
及时保存网页
按下F5键，弹出“Site”窗口，可以看到在D：\myweb\目录下生成了一个名为index.htm文件。
接下来我们对文字进行简单地排版。先设置标题文字的格式，将光标定位在第一段，然后按Ctrl+F3调出“属性面板”，点“居中”按钮，
将文字设为居中对齐。选中本段文字，点Size下拉列表框，选择字号为6，设置文字颜色为深红，并将文字加粗。
设置文字及段落属性
接下来在正文文字前加两个空格。这时你会发现按下空格键没有用，这是因为在Dreamweaver中只认全角空格，我们可以启动输入法，按下
Shift+空格键，使其处于全角状态，再敲两下空格键。
全角半角转换
同样，我们将正文文字设置为自己喜欢的格式，比如灰色4号字，这下页面看起来好些了吧。
设置好的文字效果
（3）插入图形
一个页面光有文本是无法吸引人的，下面我们插入一幅图片，使页面更加生动，图文并茂。
为了保持良好的制作习惯，我们在D：\myweb下建立一个名为“img”的文件夹，将主页中需要的图片都放在这个文件夹下。
站点管理器
我们可以用PhotoShop、Fireworks等图形工具处理好一些图片，将图片放在img文件夹下，为提高主页下载速度，可将图片存为gif或jpg格
式。
将光标定位在正文段落中，单击“Object 面板”中的“Insert Image”按钮，在弹出的对话框中选定图片，点“Select”按钮，图片被插
入到文档中。
此时图片将段落挤开了，我们可以对其对齐方式进行设置。图片处于选中状态时，属性面板中显示的是图片属性，单击“Align”下拉列表
框，选择“Right”，看，图和文字混排了。
插入图形 图4 设置图片右对齐
是不是觉得图和文字排得太挤了，那好，我们给图片和文字间加点距离。在“属性面板”中的“H Space”框中输入10，敲下回车，图的左
右各出现10个像素的间距。同样，我们可以在“V Space”框中也输入适当的数值，使图的上下也与文字有一定的间距。
设置图片与文字间距
有的上网者为了加快页面下载速度，会设置不让图片显示，这时我们可以给图形加个说明文字。
设置图片与文字间距
在属性面板中的“ALT”框中输入“我的形象”，这样在用户浏览器不支持图形时，在这个图片的位置会出现所加的注释；如果浏览器支持
图片，将鼠标停在这个图片上一小会儿，也会出现这行说明文字。
多为上网者考虑，要养成给图形加ALT的好习惯。
（4）加超级链接
简单的主文件完成后，我们可以依次将其他页面，比如我的爱好、我的收藏等页面建好。这样我们就可以通过超级链接将各个页面连接起
来。
我们选中段落中的“我的爱好”四个字，单击“属性面板”中“link”列表框右侧的文件夹图标，选择已经做好的“mylike.htm”文件，
再单击“Select”，文字的超链接就加完了。
选择链接文件
在页面上点一下，取消文字选中状态，这时看到加链接文字变为蓝色，并且带下划线。将光标定位在链接文字中，在属性面板上可以看到
其链接文件，单击“Target”列表框，选择“_blank”，链接页面就会在一个新窗口中打开。
属性面板上做文字链接
做了这么久，你一定想知道页面在浏览器中的效果吧！按下F12，系统会启动主浏览器进行页面预览，系统默认的主浏览器是Internet
Explore。看，这就是页面预览效果，点一下刚做好的链接，就跳转mylike.htm页面了。
点击可看到浏览效果
不仅文字可以做超链接，图片也可以。我们可以为刚插入的图片做一个超链接，选中图片，在属性面板中，也有“Link”项，如果知道文
件名，可以直接在“Link”文本框中输入，我们输入“introduce.htm”（假设这是一个自我介绍的页面），“Target”属性也设为“_blank”
，用图形做链接时，其Border值一般都设为0。
用图片做链接
进入浏览器后，只要单击这个图形，就会跳转到相应的页面。
点击可看到浏览效果
（5）标题和页边距设置
再看一下我们做好的页面，你是否觉得少些什么？噢，原来页面还没有标题，背景也显单调。下面我们就来添加标题和背景图片。
按下Ctrl+J键，弹出“Page Properties”对话框。Title文本框中用来添加标题，当用户浏览页面时，页面标题可以帮助了解页面中的内
容。我们在框中输入“欢迎到笨象的家做客”。接下来单击“Background Image”框右侧的“Browse”按钮，从弹出的对话框中选择我们事先
做好的背景图，回到页面属性框中。
设置页面的标题和背景
单击“OK”，可以看到页面有了背景。按下F12，可以看到在浏览器中，刚才输入的标题显示在标题栏中，页面背景也不错。
点击可看到浏览效果
从浏览效果中我们可以看到，页面顶部与浏览器工具栏紧挨着，显得很挤，我们可以给页面设置边距。
现次按下Ctrl+J键，可以看到页面属性对话框中可以设置页边距。
Top Margin表示页面距顶边距离；
Left Margin表示页面距左边距离；
Margin Height表示边距高度；
Margin Width表示边距宽度。
设置页边距
我们将Top Margin设为20，Left Margin设为10，单击“Apply”按钮，可以看到页面上面不那么挤了，关闭设置对话框。
进入浏览器，可以看到新的页面效果。
点击可看到浏览效果
最后我们再保存一下页面，一个简单的个人主页就完成了。怎么样，很容易吧！