新手建站入门教程帖⑦：做一个漂亮的网站就这么简单_心得技巧_网页制作_

我曾经承诺过会一直写下去，一直写到让从来没有做过网站的人看完了我的新手建站的帖子，也可以独立做一个网站为止。男人说出去的每一句话都是掷地有声的、是铿锵有力的，所以，即使没有一个人来看，我也会写完。好了，现在开始今天的内容：

        我们都知道，一个网站其实是有很多很多个网页文件构成的，这些文件彼此互相链接；而一个网页文件又是由很多很多的各种各样的代码构成的，有文字颜色代码、有链接代码、有插入图片的代码、有动画代码等；正是因为有了这些代码将图片、链接、动画等调用在了网页文件上，所以一个网页才显得很漂亮，才显得功能强大。要独立一个人从无到有的做好一个漂亮甚至功能强大的网页，需要涉及到很多东西，比如界面设计、基本的架构等。

        但是，即使不会这些，你也一样可以开始做一个漂亮的网站。就好像在学校里的时候不会写作文，语文老师一向都是说，“不会就去多看，然后模仿人家写”。做网站也是一样，既然自己无法完全做设计，那就从山寨别人的网站开始吧。在一边山寨别人的网站的同时，一边熟悉和学习一下基本的HTML代码，高手就是这么不断的“山寨”过来的。我这里说的山寨其实就是仿站，要知道仿站做好了也是一样可以赚钱的，现在有不少CMS的官网上都有很多人需要仿站；所谓仿站，就是将某一个你喜欢的网站样式保存下来，然后修改里面的内容，最后发布到自己的空间，这样就可以建立一个和那个网站界面一样的网站。今天我要给大家做演示的是我们阿里妈妈的版主baoway的网站：http://www.tb-so.cn/，之所以用他这个网站来做演示，是因为他这个网站的页面只有一个首页，工作量比较小，仿下来后可以直接用来做一个网站；同时他这个网站的内容也比较少，不是很复杂，新手动手的话也很简单。

第一步：保存对方的网页

        首先，我们进入他的网站。因为我们要做一个和他这个网站一模一样的网站，所以首先我们将他的页面保存在我们自己的电脑上。步骤是：点击IE浏览器上的“文件”、“另存为”，如下图所示：

        然后在弹出来的对话框中选择你要保存到的文件夹，同时在保存类型上选择“网页，全部（*htm，*html）”，然后点“保存”。这样就可以将这个网页上的所有内容都保存到我们自己的电脑上了，包括图片和一些JS文件等。如下图所示：

 

        保存下来之后，你会发现保存到的地方有一个网页文件和一个文件夹：

        同时现在也可以双击用浏览器打开这个网页文件，这个时候在IE浏览器上浏览，你会发现样式和他的网站上的有点不一样。别急，仔细看你就会发现其实只是少了一些背景图片而已。这是因为这些图片都是在CSS文件里调用的，所以没有办法直接下载保存到本地；而有一些可以显示的图片是直接用代码插入到网页上的，所以可以直接被保存。

第二步，修改相关文件的路径

        现在打开那个文件夹，你会发现里面有图片、CSS文件和JS文件等。其中tongji.js和tongji.gif是他网站上的统计代码的文件，对我们自己没用，可以直接删除，剩下的就都是有用的了。同时还有两个CSS文件，文件名是“style.css”和“css.css”（什么是CSS？，不了解的请点击学习）。网页文件中剩下的没有显示的背景图片，就在这些CSS文件里。我们打开这两个CSS文件，就可以在里面的代码里看到那些背景图片的路径了，然后保存下来就可以了。

        例如，打开style.css这个文件，里面有一段代码为“BACKGROUND: url(seach.gif) ”，这就表示背景图片是seach.gif。但是这只是相对路径（什么是相对路径？点击浏览），所以我们还要通过看这个CSS文件的路径来找这个图片的绝对地址。打开http://www.tb-so.cn/的首页，查看源码可以看到，style.css文件的路径是http://www.tb-so.cn/images/style.css ，于是可以确定这个背景图片seach.gif的地址就是http://www.tb-so.cn/images/seach.gif。找到了图片的地址，就可以直接将图片保存下来了，最好保存在上面保存网页的时候所产生的那个文件夹里，这样便于管理。

        注意：不同的CSS路径里面的图片路径可能不一样，所以你需要仔细检查每一个CSS文件里的路径，一行一行代码的看，然后将所以图片保存下来。我这里只列了一个例子，自己多练，多思考，遇到不懂的多搜索学习，多提问。记住：熟能生巧，这没多少技术含量。看不懂代码的，下载一个谷歌金山词霸翻译软件，一段一段的翻译，基本能明白代码的意思。

        将所有的背景图片都保存下来之后，只要路径正确，浏览就没有问题。在这里给对路径不了解的新手一个诀窍，将图片和CSS文件保存在同一个文件夹里，然后将CSS里面文件的背景图片路径一律修改成文件名就可以了，这样就是正确的路径。比如，在css.css文件里里“BACKGROUND: url(images/hd.png) ”，这段代码表示背景图片是保存在images文件夹的，只要将其修改成“BACKGROUND: url(hd.png) ”，然后将hd.png图片和css.css文件保存在同一个文件夹就可以了。

        最后，由于第一步中保存下来的网页文件和文件夹名都是中文的，什么需要将其修改才能在网站上被访问。首先将网页文件修改成index.htm，因为index.htm是默认的首页文件（什么是默认首页文件？，点击浏览），只有修改成了默认首页文件在输入网址之后才能打开我们的网站；然后再将那个存放CSS文件和图片的文件夹修改成你想要的文件夹名，这个名字可以随便修改，只要是英文字母或数字就可以，我这里将其改为css，如下图所示：

第三步，修改网页文件里的内容

        将前面的准备工作都做好了之后，就是做最后的修改网页文件里的内容了，也就是将其修改成我们自己要的内容。这里我们需要使用到Dreamweaver软件，没有的请到http://283303360.qupan.com/4935111.html下载，这是我的网盘。如果对Dreamweaver软件还不会使用的，请看Dreamweaver视频教程。

1）、修改网页的标题等信息：

        用 Dreamweaver软件打开index.htm文件，将Dreamweaver软件的界面切换到“拆分”模式，这样就可以在上部分看到代码，在下部份看到网页界面了。首先需要修改的是：