dreamweaver制作第一个网页.docx

dreamweaver制作第一个网页.docx

《dreamweaver制作第一个网页.docx》由会员分享，可在线阅读，更多相关《dreamweaver制作第一个网页.docx（8页珍藏版）》请在冰豆网上搜索。

dreamweaver制作第一个网页

制作第一个网页

网页制作难吗？

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

下面我们来制作一个如图一的网页。

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

图一

一．打开程序：

双击桌面上的Dreamweaver图标，或者在“开始”菜单中选择“程序\MacromediaDreamweaver4\Dreamweaver4”，打开程序。

操作过程如图二：

图二

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

图三

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

图四

提示：

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

二．创建网站：

程序打开了，但现在我们还不能直接进行网页制作，首先得解决网页文件的存放位置问题，也就是把这个网页文件放在硬盘上的哪个文件夹（站点）之中。

提示：

如果没有进定位，网页制作完成后的效果预览就看不到，更重要的是，它可以解决由于误操作带来的麻烦。

所以，随时保存文件是个不错的好习惯。

保存的快捷键是：

Ctrl+S

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

如图五：

图五

2.点击LocalRoot栏旁边的文件夹标志，然后在弹出的操作面板中创建一个叫Homepage的文件夹，在这个文件夹中将放置所有网页用到的资料。

点击图五中圈出的文件夹图标，并给新建的文件夹命名为Homepage（当然，你也可以为文件夹取其他名字）。

结果如图六：

图六

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

图七

3.图七是站点管理窗口，现在我们也不用管它，点击右上角的“X”关掉本窗口。

然后将本网页文件保存到本站点中（File/Save），起名为Firstpage，程序会自动为网页文件添加.htm的扩展名，表示此文件是一个网页，而不是其他类型的文件。

提示：

以后要在同一个网站（即文件夹）中建立新网页，不再需要创建新站点，大家可以直接进入网页制作过程。

三．网页制作：

1.网页分析：

图一中，我们看到，本网页包含两个图片：

Welcome：

网页文件的欢迎词，图片可在资料文件中Image文件夹内找到，它的名字为Welcome.gif。

Girl:

网页正文图片，名为：

girl.jpg。

除了图片，还有一条横向分隔线，以及网页正文。

2.具体制作：

添加欢迎图片：

Insert/Image（插入图片）命令，然后在下载的Image文件夹中找到welcome.gif图片，选择“Select”，如图八：

图八

如果正在制作的网页文件没有储存，随后就会弹出如图九的窗口，提示我们文件由于没有保存，所以图片文件不能以相对地址进行保存。

建议大家在网页制作开始时就先进行文件储存，否则每次插入图片时都需要进行确认，挺费事的。

图九

插入图片后效果如图十：

图十

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

图十一

下面是我们的网页正文，它由图片与文字构成。

先插入图片：

Insert/Image，然后找到Girl.jpg图片，打开，如图十二：

图十二

接着输入文字：

用鼠标在图片旁边点一下就可以直接输入文字了，跟在Word中的操作是一样的。

但请注意，Dreamweaver中的回车键相当于分段，行间空隙比较大；“Shift+回车键”相当于分行，行间空隙比较小，所以这里的文字全部只是进行分行，而不要分段。

如图十三：

图十三

但你会发现，所有文字都跑到图片下面去了，我们的目的是把文字放在图片右边。

这时就需要对图片（girl.jpg）属性进行设置。

请找到如图十四的面板，它叫作属性面板（Properties），是网页制作过程中经常要用到的。

如果操作界面上没有此面板，可通过点击Window/Properties命令打开此面板。

默认面板右下角有个下拉箭头，可以打开扩展属性，请点击：

图十四

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

如图十五：

图十五

完成后效果如图十六：

图十六

最后一步，是将抬头最为引人注目的欢迎图片居中。

选中欢迎图片，再从如图十四的属性面板的定位属性（align）中选择居中。

如图十七：

图十七

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

四．总结：

前面我们讲了很多，是不是头都看晕了？

呵呵，其实网页制作也是设计的一部分，既然是设计就离不开图象与文字，只不过网页的内容更多一些，设计工具与传统工具相比较为特殊而矣。

在制作网页时不妨先在头脑中打个草稿，哪个地方放图片，哪个地方放文字，然后用我们刚才谈到的方法做就行了。

“不积篑步，无以致千里”，上面我们做了第一个网页，虽然很简单，但大家可以体会到，网页制作并不是想像中的那么高不可攀，经过学习，我们是可以很快地掌握制作技术的。

基础永远是灵活运用的起点，为了制作出一流的网页，首先得将基础打牢。

下面我们将进入具体的基础学习。