Dreamweaver4神童教程——制作第一个网页
摘自赛迪网

本教程相关资源下载地址：下载链接

　　难吗？说难真地很难，网站定位，实用性与美观，普及性与特殊性之间的矛盾，永远困扰着每一位资深级网页设计者；但说它简单又真地很简单，图片，文字，等等，如果你懂得如何操作 Word ，几乎就能制作自己的网页了。

　　下面我们来制作一个如图一的网页。在本节教程内，大家不需要记住任何东西，只是跟着我们走就行了，主要目的是体会一下的"简单"。

图一

一．打开程序：
双击桌面上的 Dreamweaver ，或者在"开始"菜单中选择"程序\Macromedia Dreamweaver 4\Dreamweaver 4"，打开程序。操作过程如图二：

图二

程序打开后的操作界面如图三：

图三

图三中有很多浮动面板，现在我们先不管它们的作用与具体使用方法，为了避免影响工作，我们通过点击面板右上角的 "X" 号将所有浮动面板都关掉，最后只保留文档编辑窗口，如图四：

图四

提示：要打开哪些浮动面板，可以通过 Windows 下的相应命令实现。

二．创建网站：
程序打开了，但现在我们还不能直接进行，首先得解决网页文件的存放位置问题，也就是把这个网页文件放在上的哪个文件夹（站点）之中。
提示：如果没有进定位，完成后的效果预览就看不到，更重要的是，它可以解决由于误操作带来的麻烦。所以，随时保存文件是个不错的好习惯。保存的快捷键是：Ctrl+S

1.在操作菜单上找到 Site/New Site ，在 Site Name 中输入任意的字符（注意不要用中文），代表站点的名字，这里我们输入 School ；在 Local Root(根目录) 栏决定将刚才那个站点即文件夹放在什么地方。如图五：

图五

2.点击 Local Root 栏旁边的文件夹标志，然后在弹出的操作面板中创建一个叫 Homepage 的文件夹，在这个文件夹中将放置所有网页用到的资料。点击图五中圈出的文件夹，并给新建的文件夹命名为 Homepage （当然，你也可以为文件夹取其他名字）。结果如图六：

图六

网站创建完毕，最后结果如图七：

图七

3.图七是站点管理窗口，现在我们也不用管它，点击右上角的 "X" 关掉本窗口。然后将本网页文件保存到本站点中（File/Save），起名为 Firstpage，程序会自动为网页文件添加 .htm 的扩展名，表示此文件是一个网页，而不是其他类型的文件。
提示：以后要在同一个网站（即文件夹）中建立新网页，不再需要创建新站点，大家可以直接进入过程。

二．：
1.网页分析：
图一中，我们看到，本网页包含两个图片：
Welcome ：网页文件的欢迎词，图片可在资料文件中 Image 文件夹内找到，它的名字为 Welcome.gif 。
Girl :网页正文图片，名为：girl.jpg 。
除了图片，还有一条横向分隔线，以及网页正文。

2.具体制作：
　　添加欢迎图片：Insert/Image（插入图片）命令，然后在下载的 Image 文件夹中找到 welcome.gif 图片，选择" Select "，如图八：

图八

　　如果正在制作的网页文件没有储存，随后就会弹出如图九的窗口，提示我们文件由于没有保存，所以图片文件不能以相对地址进行保存。建议大家在开始时就先进行文件储存，否则每次插入图片时都需要进行确认，挺费事的。

图九

插入图片后效果如图十：

图十

　　按回车键，然后为网页添加横向分隔条，点击菜单上 Insert/Horizontal Rule 命令，最终效果如图十一：

图十一

　　下面是我们的网页正文，它由图片与文字构成。
先插入图片：Insert/Image，然后找到 Girl.jpg 图片，打开，如图十二：

图十二

　　接着输入文字：用在图片旁边点一下就可以直接输入文字了，跟在 Word 中的操作是一样的。但请注意，Dreamweaver 中的回车键相当于分段，行间空隙比较大；"Shift+回车键" 相当于分行，行间空隙比较小，所以这里的文字全部只是进行分行，而不要分段。如图十三：

图十三

　　但你会发现，所有文字都跑到图片下面去了，我们的目的是把文字放在图片右边。这时就需要对图片(girl.jpg)属性进行设置。
　　请找到如图十四的面板，它叫作属性面板(Properties)，是过程中经常要用到的。如果操作界面上没有此面板，可通过点击 Window/Properties 命令打开此面板。默认面板右下角有个下拉箭头，可以打开扩展属性，请点击：

图十四

先选中女孩图片，再从属性面板的定位属性中选择 Left （居左）。如图十五：

图十五

完成后效果如图十六：

图十六

　　最后一步，是将抬头最为引人注目的欢迎图片居中。选中欢迎图片，再从如图十四的属性面板的定位属性( align )中选择居中。如图十七：

图十七

最终效果如图一，这样，我们就完成了自己的第一个网页。

三．总结：
　　前面我们讲了很多，是不是头都看晕了？呵呵，其实也是设计的一部分，既然是设计就离不开图象与文字，只不过网页的内容更多一些，设计工具与传统工具相比较为特殊而矣。在制作网页时不妨先在头脑中打个草稿，哪个地方放图片，哪个地方放文字，然后用我们刚才谈到的方法做就行了。
"不积篑步，无以致千里"，上面我们做了第一个网页，虽然很简单，但大家可以体会到，并不是想像中的那么高不可攀，经过学习，我们是可以很快地掌握制作技术的。
　　基础永远是灵活运用的起点，为了制作出一流的网页，首先得将基础打牢。下面我们将进入具体的基础学习。