Dreamweaver3之一学就会（二） 5D精英网 机器猫 2000年 第24期 #1 造页篇 　　上次和大家探讨了怎样用Dreamweaver 制作一个网站。今天我们就来实际制作一张简单的网页（效果如^24040201a^1）。今天用到的新东东比较多，大家要加油哦。^_^ 　　在开始做这个页面之前，我们先对这个页面进行一下分析。看看这个页面用到了些什么东东。 　　●网页的标题栏有“机器猫的小窝”字样 　　●网页中的“机器猫的小窝”标题是一张Gif图片 　　●左下角的机器猫是一张Gif图片 　　●当中是一段文字，设置了文字的字体和颜色 　　●网页背景用图片制作 　　知道了这张网页的结构以后我们就可以来制作了。 　　首先启动Dreamweaver，确保你已经用站点管理器建立好了一个网站，并且打开了这个网站。如果读者对于网站的概念不清楚，可以看《电脑报》上一期（第23期）的文章。 #1 第一步：插入标题图片 　　进入页面编辑器。在对象面板中单击图片按钮。（如果对象面板看不见，可以按Ctrl＋F2打开面板）系统弹出插入图片对话框。在硬盘中找到这个图片。选中后，对话框右侧会看到这个图片的预览图。按“Select”按钮确定。 　　系统弹出一个信息框，要求插入图片后保存网页。按“OK”确定。 　　接下来的对话框提示大家，这个图片不在站点目录内，当前的站点目录是“D:\5dmedia”是否要将这个图片文件复制到站点内。还记得我们上一期反复强调的重点么？和网站相关的所有文件都必须放在站内！如果不这样做，会导致发布网页时图片“失踪”。所以，理所当然选择“是”。 　　系统弹出复制文件“Copy file as”对话框。我们为了文件管理的方便，把这个图片放在“images”目录下面。（注：这个目录是为了方便自己建立的。你也可以直接把图片放在站点根目录，或者站内任意目录中）。直接按“保存”即可。注意文件名不能用中文，否则要出现一些意想不到的情况。 　　一个标题图片就插入完毕了。接下来要让标题图片居中安放。单击图片，在属性面板中（如果面板不出现，按Ctrl＋F3打开）。选择面板中的居中按钮将图片居中。（如果面板中看不见这个按钮，是因为面板没有展开。可以按面板右下角的向下按钮展开面板）。 #1 第二步：插入机器猫图片 　　回车换一行，按照上面的步骤插入机器猫图片。这张图片要求不用居中，如果图片继承上面的格式，将会居中。可以通过属性面板中的居左按钮让其居左安放。 #1 第三步：输入文字 　　接着我们开始按照上面的样例输入文字。大家会发现文字并没有按照希望的那样排在图片周围，而是出现在图片的下方（如^24040201b^2）。这是因为没有设置图片的对齐方式。 　　单击机器猫图片，在属性面板中。Align对齐方式选择Left（图片出现在文字的左边）。图片的周围会出现一个黄色的标记。这是Dreamweaver专用的对齐符号。不会影响任何显示效果（如^24040201c^3）。 　　文字就都按照我们希望的方式和图片对齐了。下面我们来设置文字的格式。选中第一、二行文字。在属性面板中将Format字体设置成为Heading 3标题三号。并选中“B”将字体变粗（如^24040201d^4）。 　　选中第三行，在属性面板中将Format字体格式设置为Heading 2标题二号。选中“I”将字体变斜。设置“机器猫”的颜色。首先选中这三个字，在属性面板中，单击颜色盒，在弹出的颜色盒中用吸管吸取颜色即可（如^24040201e^5）。同样设置其他文字的颜色。 　　最后的三行文字我们想让它们前面带有项目符号的小圆点。单击属性面板中的“项目编号”按钮。选中的文字就带有列表符号了。 #1 第四步：设置网页的标题和背景图片 　　选择菜单Modify/Page Properties。系统弹出Page Properties页面属性对话框（如^24040201f^6）。在Title域中输入标题文字“机器猫的小窝”在Background Image处单击Browse按钮，系统弹出图片选择对话框。选中背景图片，如果图片在站外，请将其保存在站内。 　　按“OK”关闭对话框。网页的标题和背景图片设置完毕。 #1 第五步：预览网页 　　在页面编辑器中按F12预览网页效果。嗯？怎么凡是图片的地方都是一个叉呢？原因很简单，在前面插入图片的时候要求我们将网页文件存盘。选择FileàSave。网站中的第一页，也就是首页我们通常存盘取名为index.htm。重新预览，网页的效果就出现了。 　　小结：在今天的教程中我们制作了一张完整的网页。实际上只是对三大部分进行了操作。文字：可以设置文字的格式。首先选中文字，然后在属性面板中可以使用Format域设置文字的格式，还可以设置文字加粗加斜的格式和文字的颜色。列表分为有序和无序列表，今天我们使用的是无序列表即圆点项目符号。文本可以设置对齐方式，分别是左、中、右（如^24040201g^7）。 　　插入图片可以通过对象面板来实现。插入图片要注意一定要保存在网站内，这样才能保证图片的正确显示。图片也像文字一样有对齐方式。另外图片有Align对齐方式，这种对齐方式指图片和文字怎样对齐。 　　设置页面属性，我们操作了两个选项。其一设置网页的标题。这会在浏览器的标题栏中显示出来。还可以制定背景图片。网页的背景图片是一张小图片，它可在网页中重复贴，充满整个网页。 　　最后是预览，预览用于观察网页在浏览器中的实际效果。直接按F12就可以预览。如果出现图片不显示的情况，要先将网页存盘再预览。 　　OK，今天的学习就到这里了。有什么问题欢迎发E－mail给我（rudolf@21cn.com）。