dreamweaver制作第一个网页.docx

1、dreamweaver制作第一个网页制作第一个网页网页制作难吗？说难真地很难，网站定位，实用性与美观，普及性与特殊性之间的矛盾，永远困扰着每一位资深级网页设计者；但说它简单又真地很简单，图片，文字，等等，如果你懂得如何操作 Word ，几乎就能制作自己的网页了。下面我们来制作一个如图一的网页。在本节教程内，大家不需要记住任何东西，只是跟着我们走就行了，主要目的是体会一下网页制作的“简单”。图一一 打开程序：双击桌面上的 Dreamweaver 图标，或者在“开始”菜单中选择“程序Macromedia Dreamweaver 4Dreamweaver 4”，打开程序。操作过程如图二：图二程序打开

2、后的操作界面如图三：图三图三中有很多浮动面板，现在我们先不管它们的作用与具体使用方法，为了避免影响工作，我们通过点击面板右上角的 “X” 号将所有浮动面板都关掉，最后只保留文档编辑窗口，如图四：图四提示：要打开哪些浮动面板，可以通过 Windows 下的相应命令实现。二 创建网站：程序打开了，但现在我们还不能直接进行网页制作，首先得解决网页文件的存放位置问题，也就是把这个网页文件放在硬盘上的哪个文件夹（站点）之中。提示：如果没有进定位，网页制作完成后的效果预览就看不到，更重要的是，它可以解决由于误操作带来的麻烦。所以，随时保存文件是个不错的好习惯。保存的快捷键是：Ctrl+S1.在操作菜单上找

3、到 Site/New Site ，在 Site Name 中输入任意的字符（注意不要用中文），代表站点的名字，这里我们输入 School ；在 Local Root(根目录) 栏决定将刚才那个站点即文件夹放在什么地方。如图五：图五2.点击 Local Root 栏旁边的文件夹标志，然后在弹出的操作面板中创建一个叫 Homepage 的文件夹，在这个文件夹中将放置所有网页用到的资料。点击图五中圈出的文件夹图标，并给新建的文件夹命名为 Homepage （当然，你也可以为文件夹取其他名字）。结果如图六：图六网站创建完毕，最后结果如图七：图七3.图七是站点管理窗口，现在我们也不用管它，点击右上角的

4、“X” 关掉本窗口。然后将本网页文件保存到本站点中（File/Save），起名为 Firstpage，程序会自动为网页文件添加 .htm 的扩展名，表示此文件是一个网页，而不是其他类型的文件。提示：以后要在同一个网站（即文件夹）中建立新网页，不再需要创建新站点，大家可以直接进入网页制作过程。三 网页制作：1. 网页分析：图一中，我们看到，本网页包含两个图片：Welcome ：网页文件的欢迎词，图片可在资料文件中 Image 文件夹内找到，它的名字为 Welcome.gif 。Girl :网页正文图片，名为：girl.jpg 。除了图片，还有一条横向分隔线，以及网页正文。2. 具体制作：添加欢迎

5、图片：Insert/Image（插入图片）命令，然后在下载的 Image 文件夹中找到 welcome.gif 图片，选择“ Select ”，如图八：图八如果正在制作的网页文件没有储存，随后就会弹出如图九的窗口，提示我们文件由于没有保存，所以图片文件不能以相对地址进行保存。建议大家在网页制作开始时就先进行文件储存，否则每次插入图片时都需要进行确认，挺费事的。图九插入图片后效果如图十：图十按回车键，然后为网页添加横向分隔条，点击菜单上 Insert/Horizontal Rule 命令，最终效果如图十一：图十一下面是我们的网页正文，它由图片与文字构成。先插入图片：Insert/Image，然后

6、找到 Girl.jpg 图片，打开，如图十二：图十二接着输入文字：用鼠标在图片旁边点一下就可以直接输入文字了，跟在 Word 中的操作是一样的。但请注意，Dreamweaver 中的回车键相当于分段，行间空隙比较大；“Shift+回车键” 相当于分行，行间空隙比较小，所以这里的文字全部只是进行分行，而不要分段。如图十三：图十三但你会发现，所有文字都跑到图片下面去了，我们的目的是把文字放在图片右边。这时就需要对图片(girl.jpg)属性进行设置。请找到如图十四的面板，它叫作属性面板(Properties)，是网页制作过程中经常要用到的。如果操作界面上没有此面板，可通过点击 Window/Pro

7、perties 命令打开此面板。默认面板右下角有个下拉箭头，可以打开扩展属性，请点击：图十四先选中女孩图片，再从属性面板的定位属性中选择 Left （居左）。如图十五：图十五完成后效果如图十六：图十六最后一步，是将抬头最为引人注目的欢迎图片居中。选中欢迎图片，再从如图十四的属性面板的定位属性( align )中选择居中。如图十七：图十七最终效果如图一，这样，我们就完成了自己的第一个网页。四 总结：前面我们讲了很多，是不是头都看晕了？呵呵，其实网页制作也是设计的一部分，既然是设计就离不开图象与文字，只不过网页的内容更多一些，设计工具与传统工具相比较为特殊而矣。在制作网页时不妨先在头脑中打个草稿，哪个地方放图片，哪个地方放文字，然后用我们刚才谈到的方法做就行了。“不积篑步，无以致千里”，上面我们做了第一个网页，虽然很简单，但大家可以体会到，网页制作并不是想像中的那么高不可攀，经过学习，我们是可以很快地掌握制作技术的。基础永远是灵活运用的起点，为了制作出一流的网页，首先得将基础打牢。下面我们将进入具体的基础学习。