Dreamweaver4神童教程之一

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

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有