第一章 建立站点
一、站点的建立
我们先来讲一下,做一个网站之前,我们要先建立一个站点,简单的说,就是在电脑硬盘上某个位置先新建一个文件夹,用来存放整个网站的内容。比如,我在E盘下建了一个文件夹叫做"website",然后在"website"下建了一个文件夹叫"img",专门用来存放图片的文件夹。等会我们的页面文件就放在"website"文件夹内,与"img"处于同一级目录下。(注:初学者常喜欢将文件夹及文件命名为中文的,这是一个不好的习惯。网页中的文件名一定要用英文名,包括HTM、图片文件名等。尽管你们在自己的电脑上测试是正确的,但在上传到服务器后,用中文命名的文件有可能找不到。所以做网页时要养成用英文或数字命名的习惯。)
启动Dreamweaver(后面简称为“DW”)以后,选择最上排的菜单栏“站点”--“新建站点”,请输入站点的名字,比如“website”,点击“下一步”,初学者还未用到服务器技术,可以直接点击“下一步”,(若是有,就点击“是,我想使用服务器技术”,选择一项后点“下一步”);出现“您将把文件存储在计算机机上的什么位置?”,点击黄色文件夹,在弹出的窗口中选择我们刚才建立的文件名的位置E:\website,点“选择”,这时候你会发现位置栏显示的是“E:\website\”,接着点击“下一步”,出现“您如何连接到远程服务器?”,刚开始时,我们只在本地测试,所以先点击其三角形下拉按钮,选择第一个“无”,接着点“下一步”,最后点击“完成”按钮。到此为止,站点建立完毕,在DW界面的右边,我们可以看到:(如图001)

[图001]
第二章 做网站之前的构思
一、确定主题
做网站之前,要先想好主题,我们的网站是要以什么为主导,我们先讲几个比较简单的:
(1)个人网站
个人网站一般是以介绍自己为主,包括个人基本资料、个人作品(比如说摄影、绘画)、音乐收藏、心情故事(日记)、留言本、论坛等。
这是一个大致的归类,名称的选择可以因人喜好而定。
(2)公司网站
大部分小企业的网站都会包含以下内容:公司简介、产品介绍、联系我们、意见反馈;比如再加上人才招聘、留言板等。
当然,不同类型的公司,所要求的网站内容就不相同。
(注:不同目的的网站,其分类就各不相同,关键就是你想把多少内容展示在网上让别人知道。)
二、搜索同类型网站进行比较
1、搜索引擎--百度的使用
对于初学者来讲,要做一个网站会感觉很迷茫,没关系,你可以参考别人的网站。但是,你不要说你不懂得去哪里参考哦。
向你推荐最好最强的中文搜索引擎----百度。在IE地址栏中输入www.baidu.com 按回车确定,出现(如图002)

[图002]
当前“网页”处于选中状态,就表明我们现在将要搜索的就是网页内容,在输入框中输入你想找的内容,比如“个人网站”,点击“百度搜索”,这时候就会搜索出几百万条包含“个人网站”这四个字的相关网页,你在搜索结果中点击其超链接,就可以访问别人的网站。一页内容看完后,滚动条拉下来,可以接着点击“下一页”,(如图003)

[图003]
在参考别人网站的时候,你可以了解别人的设计思路,对初学者来讲,先看一下别人做了什么内容在网页里,收集一些有用的资源,如素材图片、文章、音乐等。
2、图片的保存
在浏览别人的网页时,看到漂亮的图片,我们就可以将它保存起来,对着图片点右键,选择“另存为”,在弹出的窗口中选择保存位置,比如放到E:\website\img\(这是我们之前建立好的专业来保存图片的文件夹);
3、文字内容的保存
如果你看到一篇好的文章,如何将它保存起来呢?
方法一:点击“文件”--“另存为”,选择保存的位置,保存类型选哪个呢?(如图004点下拉菜单有多种保存类型)

[图004]
从字面上理解,我们知道:
(1)网页,全部(*.htm;*.html)-----保存下来的时候是一个网页文件和一个包含该页图片相关信息的文件夹。这种方法对于图文都需要的读者来讲,是一种比较便捷的保存方法,等看完后,再对不用的信息做删除整理。
(2)Web档案,单一文件(*.mht)----这种形式保存下来的,就像你在网上看到的效果一模一样,只有单一的一个网页文件,对于没有宽带的用户来讲,到网吧搜索了多个页面文件,将其保存成Web档案格式,回家后打开来看,就跟上网看到的效果是一样的。
(3)网页,仅HTML(*.htm;*.html)----这种保存类型图片将无法显示,文字内容可以照常显示;
(4)文本文件(*.txt)----这种保存类型就是把网页中所有的文字保存为文本文件的格式,不过有一个不好的地方就是所有的文字不会像网页上划分的布局完整的显示,你还必须自己找到自己所需的内容。
以上四个不同的保存类型,自己可以根据需要来选择。
附:4、百度搜索功能的延伸
讲到百度,除了网页搜索,其图片及mp3搜索功能也是非常强大的。在我们前面[图002]的位置,如果你想搜索图片,就先点击“图片”,然后再输入关键字,进行搜索。也可以直接访问:image.baidu.com就是进入百度图片搜索子页,输入关键字进行搜索;
想找歌曲的话,就在前面[图002]的位置,点击“MP3”,然后再输入歌曲名进行搜索,也可以直接访问:mp3.baidu.com就是进入百度歌曲搜索子页,输入关键字进行搜索;
比如我想找一首歌来做为网页的背景音乐,通常被用于网页的背景音乐选择mid格式的比较小。比如,我们来找一首“北国之春”,见[图005]

[图005]
我在搜索框中输入“北国之春”,下面的格式我选择“其它”,点“百度搜索”,搜索结果如[图006]

[图006]
我们会发现,搜索出来的mid格式的文件才51.5K,比如其它格式的文件就小得多了,(这里,补充一个常识,1M(1MB的简称)=1024K(1024KB的简称));
三、整体框架的确立
想做出一个漂亮的网站,并不是直接在DW中就能够编辑得很完美的,一个成熟的网站是前台美工与后台程序的结合。网页设计师在用DW之前,都会先用Photoshop把整个页面的设计效果图做出来,然后再分割裁剪,最后才是在DW中实现网页格式。
如果你不懂得Photoshop怎么办呢?没关系,我们会在后面的章节中教你,现在我们先从最基本的学起。
我们来看一个最普通的框架结构,如[图007]

[图007]
通常的网页都是被分为上中下三部分,中间部分分为左右两侧,左边点的分额比右边小,整个网站的主要内容就都是在right部分显示,top、left、bottom的内容可以在所有页面保持一致,固定不变。
top部分通常被分为左右两侧,左边会放一个LOGO,也就是网站的名称,右边的话,分为上下两部分,上部分放一个468*60的banner(广告横幅),下面就是放置导航栏按钮,这些按钮所体现的也就是你整个网站将要划分为哪几部分内容。