Dreamweaver4神童教程之一

来源：互联网作者：中国IDC吧更新日期：2008-09-30 点击：

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 命令打开此面板。默认面板右下角有个下拉箭头，可以打开扩展属性，请点击：

图十四