新手建站入门教程帖⑦：做一个漂亮的网站就这么简单
作者：佚名
字体：[ ] 来源：互联网 时间：01-31 02:26:37
我的新手建站每日一帖自从去年写了六篇之后，不知不觉已经停了好几个月了。在此向一直期待我继续写下去的朋友说声抱歉，因为这几个月工作上一直很忙，加上精神和生活上总是会发生很多事。
我曾经承诺过会一直写下去，一直写到让从来没有做过网站的人看完了我的新手建站的帖子，也可以独立做一个网站为止。男人说出去的每一句话都是掷地有声的、是铿锵有力的，所以，即使没有一个人来看，我也会写完。好了，现在开始今天的内容：
&&&&&&& 我们都知道，一个网站其实是有很多很多个网页文件构成的，这些文件彼此互相链接；而一个网页文件又是由很多很多的各种各样的代码构成的，有文字颜色代码、有链接代码、有插入图片的代码、有动画代码等；正是因为有了这些代码将图片、链接、动画等调用在了网页文件上，所以一个网页才显得很漂亮，才显得功能强大。要独立一个人从无到有的做好一个漂亮甚至功能强大的网页，需要涉及到很多东西，比如界面设计、基本的架构等。
&&&&&&& 但是，即使不会这些，你也一样可以开始做一个漂亮的网站。就好像在学校里的时候不会写作文，语文老师一向都是说，&不会就去多看，然后模仿人家写&。做网站也是一样，既然自己无法完全做设计，那就从山寨别人的网站开始吧。在一边山寨别人的网站的同时，一边熟悉和学习一下基本的HTML代码，高手就是这么不断的&山寨&过来的。我这里说的山寨其实就是仿站，要知道仿站做好了也是一样可以赚钱的，现在有不少CMS的官网上都有很多人需要仿站；所谓仿站，就是将某一个你喜欢的网站样式保存下来，然后修改里面的内容，最后发布到自己的空间，这样就可以建立一个和那个网站界面一样的网站。今天我要给大家做演示的是我们阿里妈妈的版主baoway的网站：http://www./，之所以用他这个网站来做演示，是因为他这个网站的页面只有一个首页，工作量比较小，仿下来后可以直接用来做一个网站；同时他这个网站的内容也比较少，不是很复杂，新手动手的话也很简单。
第一步：保存对方的网页
&&&&&&& 首先，我们进入他的网站。因为我们要做一个和他这个网站一模一样的网站，所以首先我们将他的页面保存在我们自己的电脑上。步骤是：点击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./的首页，查看源码可以看到，style.css文件的路径是http://www./images/style.css ，于是可以确定这个背景图片seach.gif的地址就是http://www./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软件，没有的请到/4935111.html下载，这是我的网盘。如果对Dreamweaver软件还不会使用的，请看Dreamweaver视频教程。
1）、修改网页的标题等信息：
&&&&&&& 用&Dreamweaver软件打开index.htm文件，将Dreamweaver软件的界面切换到&拆分&模式，这样就可以在上部分看到代码，在下部份看到网页界面了。首先需要修改的是：
&TITLE&掏宝网_taobao上掏宝_淘宝网2亿优质商品搜索专家！&/TITLE&&META content=掏宝网，淘宝网,淘搜索 name=keywords&&META content=掏宝网是淘宝的合作网站｜掏宝网是提供淘宝网（taobao）2亿优质商品搜索专家,淘搜索拥有搜索商品、比较商品等功能，帮助用户轻松找到低价正品，为全球用户提供2亿优质特价淘宝网商品搜索，让网民更便捷地获取购物信息找到所求商品。 name=description&
&TITLE&是网站标题，keywords是网页关键字，最后一个description是网页描述。只要将里面的文字内容修改成你自己的就可以了。然后就是修改代码里的CSS文件的路径，找到：
&LINK href=&掏宝网_taobao上掏宝_淘宝网2亿优质商品搜索专家！_files/style.css& type=text/css rel=stylesheet&&LINK href=&掏宝网_taobao上掏宝_淘宝网2亿优质商品搜索专家！_files/css.css& type=text/css rel=stylesheet&
&&&&&&& 这两段代码，将其路径修改成这两个CSS文件所存放的路径，也就是将前面的&掏宝网_taobao上掏宝_淘宝网2亿优质商品搜索专家！_files&修改成你放图片和css文件的那个文件夹名就可以，我这里修改成css。以上代码修改后如下图所示：
&&&&&&& 将以上内容修改好了之后，在Dreamweaver下面的&属性&面板处有一个&刷新&按钮，点击刷新后在下半部分就可以看到页面的样式了。接下来就可以开始修改网页的内容了。
2）、修改网页内容
&&&&&&& 网页内容包括图片、文字动画等信息。我们先以图片为例。在Dreamweaver的预览区中，无法显示的图片一般都显示为。在Dreamweaver中无法显示的图片又有两种：一种是网络图片地址，因为Dreamweaver不能像IE那样访问互联网，如果是这样的图片可以不用理会，等传到网站空间后就可以显示了；另一种是图片地址出错或不存在，这就需要修改图片的地址了，方法如下：
&&&&&&& 在Dreamweaver的预览区点击无法显示的图片，此时该图片就会被选中，同时在代码区该图片的调用代码也会自动被选中，如下图所示：
&&&&&&& 此时你可以通过修改代码来修改图片的地址，也可以通过修改上图中红框内的内容来修改图片的地址。其中&源文件&就是图片的地址，因为我的图片是保存在css文件夹的，所以我将其修改成&css/logo.gif&；下面的&链接&就是这张图片所要链向的地址，我这里不想给这张图片加链接，所以留空，你可以加上链接，如果是链向网络的绝对地址记得要使用带http://的完整地址。修改好后点击&文件&》&保存&，这样就将修改好的保存起来了，用浏览器打开这个网页文件就可以浏览到修改后的样式和内容。
&&&&&&& 文字的修改和图片修改的方法一样，同样是先在预览区选中要修改的文字，然后在代码区就可以看到这段文字的代码，在&属性&面板可以看到文字的属性（包括字体、样式、颜色、是否有链接等）。如果要修改文字的内容，就像在Word里打字一样直接输入你要的文字即可。所以，文字的修改我就不讲了，大家自己动动手举一反三的多思考思考。
&&&&&&& 这样几个步骤就可以轻而易举的将整个网站修改成自己的了，修改好保存后将所以文件（包括网页文件和图片等）上传到你的空间，这样就可以访问了。今天只是讲了怎么将别人的网站修改成自己的网站，通过这个方法你就可以自己去山寨任何一个你想要的网站了。
&&&&&&& 通过这样的方法虽然可以做到想要哪个网站的样式就要哪个网站，但是这样做的每一个网页都是全静态的，要做内容更新的话就需要去修改这些文件；还有的人需要发布文章等，那么这样简单的网站就实现不了了。那该怎么办呢？请看明天的帖子&&新手建站每日一帖⑧：轻松打造一个文章站。
大家感兴趣的内容
12345678910
最近更新的内容温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
大三开始做网页技术,多少积累了一点经验,分享出来,旨在记录我的心路历程,如果对大家有点用处,那是再好不过了。
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
重命名的时候写index.html，注意把.txt也去掉，如果没有看见.text，说明设置了隐藏扩展名，打开文件夹设置选项，把隐藏扩展名的选项去掉，不勾选
重命名以后会提示扩展名改变了，也就是.txt变成了.html，当然会警告了，点击“是”或者“确定”就行了
这时候，你就能看见一个网页文件了
用记事本打开编辑，用记事本就够了，别跟我提dreamwear，你想想用dreamwear牛还是用记事本牛，或者说用步枪打赢仗牛还是用坦克打赢仗牛。
接下来写入代码就行了，注意写代码的时候，标签要一对一对的写，这是个好习惯，什么是标签呢？就是&html& &head&这些东西。
完整代码是：
&&& &head&
&&&&&&& &title&这里就是title的位置&/title&
&&& &/head&
&&& &body&这里面是body的内容&/body&
&&这样一个网页就做好了，用浏览器打开就是这样
别以为这个网页没有用，当你想建一个网站的时候，就需要把域名解析到你的空间，怎么知道解析生效了呢，怎么知道域名访问的就是你的网站呢？把这个文件传到空间里面，访问以下，看下是不是你写的内容，有些人可能会“呵呵”冷笑两声，撇着大嘴说：“这还不简单，ping域名不就行了。”老大爷，我不是写给您看的，是给没有基础，又想做网站的朋友们看的，高手就应该低调，虽然我不是高手，我也不会到处显摆，很多没有基础的朋友想找我学做模板，我一直和他们强调的一点就是“我绝对没有贬低或是嘲笑你的意思，你确实需要打点基础”，我绝对不会撇着大嘴说：“你怎么什么都不会，还想做模板，省省吧，回去好好学学基础知识再说。”
学什么都要一步一步的来，欲速则不达，基础硬了，学什么都很快，不要看不起简单的东西，再复杂的东西也是由一个个简单的东西组成的，希望大家有所借鉴。&&
阅读(9149)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
loftPermalink:'',
id:'fks_',
blogTitle:'【网页制作基础】做一个最简单的网页 图文超级完美版教程 哦也',
blogAbstract:'
做网页，其实很简单，现在我就做一个网页给大家看看。
随便在哪个文件夹或直接在桌面右击鼠标，选择新建文本文档
重命名的时候写index.html，注意把.txt也去掉，如果没有看见.text，说明设置了隐藏扩展名，打开文件夹设置选项，把隐藏扩展名的选项去掉，不勾选
重命名以后会提示扩展名改变了，也就是.txt变成了.html，当然会警告了，点击“是”或者“确定”就行了',
blogTag:'网页,html,head,title,body',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:7,
publishTime:5,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:7,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'大三开始做网页技术,多少积累了一点经验,分享出来,旨在记录我的心路历程,如果对大家有点用处,那是再好不过了。',
hmcon:'1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}　　在过去几年里，网站设计领域发生了巨大变化。除了 RWD（响应式网页设计）和
字体的革命，现代设计的发展趋势迅速流行扁平化的配色方案，网页排版变得更加重要，重点已放在内容第一。最后，页面加载速度已成为决定你的网站成功的关键因素。
　　所有这一切都导致了整洁美观和简单易用网页设计趋势的流行。所以，经过这些年的尝试和努力后，我们已经真正进入到了简洁干净的网页设计的时代。下面选择了25个简约干净的网站，具备我们上面提到的所有因素，他们都以自己的方式来呈现美丽，你有什么感想？
您可能感兴趣的相关文章
您可能感兴趣的相关文章
本文链接：
编译来源：
阅读(...) 评论()一行代码都不用写就能完成简单的精美网页设计
这是一篇由 Chris Kellett 为大家带来的教程，只需利用Ai CC 以及Muse CC，就可以在一行代码都不写的情况下，完成简单的网页设计和发布。
不过本文仅仅简单的介绍了大体的操作流程，更多细节还需诸位仔细研究一下。
　　01. 用AI进行基本布局
工作流程的第一步是使用AI CC，进行基本的布局，并且创建基本的矢量图标。完成后，在图层面板中选择释放到图层(顺序)。这样就能将设计导出，以供PS编辑。
　　02.用PS完成设计
根据AI导出的图层，用PS进行视觉设计。
看过本文的人还看过
最新图文推荐
最新专栏文章
大家感兴趣的内容
网友热评的文章播放列表加载中...
正在载入...
分享视频：
嵌入代码：
拍下二维码，随时随地看视频
超级简单的网站制作修改教程
上 传 者：
内容介绍：
任何人都可以轻松学会建网站的视频教程，超级简单的单页网站修改制作及上传空间的教程
我来说点啥
版权所有 CopyRight
| 京网文[0号 |
| 京公网安备：
互联网药品信息服务资格证：（京）-非经营性- | 广播电视节目制作经营许可证：（京）字第403号
<img src="" width="34" height="34"/>
<img src=""/>
<li data-vid="">
<img src=""/><i data-vid="" class="ckl_plays">
<img width="132" height="99" src=""/>
在线人数：
<li data-vid="">
<img src=""/><i data-vid="" class="ckl_plays">
<img src="///img/blank.png" data-src=""/>
<img src="///img/blank.png" data-src="http://"/>
<li data-vid="" class="cfix">
src="///img/blank.png" data-src=""/>
<i data-vid="" class="ckl_plays">
<li data-vid="" class="cfix">
src="///img/blank.png" data-src=""/><i data-vid="" class="ckl_plays">
没有数据！
{upload_level_name}
粉丝 {fans_count}
{video_count}
{description}