当前位置:首页 > 新闻动态 > 网站文章

新手建站入门教程帖⑦:做一个漂亮的网站就这么简单

来源: 浏览:139 时间:2023-08-21

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

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

        但是,即使不会这些,你也一样可以开始做一个漂亮的网站。就好像在学校里的时候不会写作文,语文老师一向都是说,“不会就去多看,然后模仿人家写”。做网站也是一样,既然自己无法完全做设计,那就从山寨别人的网站开始吧。在一边山寨别人的网站的同时,一边熟悉和学习一下基本的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软件的界面切换到“拆分”模式,这样就可以在上部分看到代码,在下部份看到网页界面了。首先需要修改的是:

掏宝网_taobao上掏宝_淘宝网2亿优质商品搜索专家!

是网站标题,keywords是网页关键字,最后一个description是网页描述。只要将里面的文字内容修改成你自己的就可以了。然后就是修改代码里的CSS文件的路径,找到:</p> <p><LINK href="掏宝网_taobao上掏宝_淘宝网2亿优质商品搜索专家!_files/style.css" type=text/css rel=stylesheet><br/><LINK href="掏宝网_taobao上掏宝_淘宝网2亿优质商品搜索专家!_files/css.css" type=text/css rel=stylesheet></p> <p>        这两段代码,将其路径修改成这两个CSS文件所存放的路径,也就是将前面的“掏宝网_taobao上掏宝_淘宝网2亿优质商品搜索专家!_files”修改成你放图片和css文件的那个文件夹名就可以,我这里修改成css。以上代码修改后如下图所示:</p> <p>        将以上内容修改好了之后,在Dreamweaver下面的“属性”面板处有一个“刷新”按钮,点击刷新后在下半部分就可以看到页面的样式了。接下来就可以开始修改网页的内容了。</p> <p><strong>2)、修改网页内容</strong></p> <p>        网页内容包括图片、文字动画等信息。我们先以图片为例。在Dreamweaver的预览区中,无法显示的图片一般都显示为。在Dreamweaver中无法显示的图片又有两种:一种是网络图片地址,因为Dreamweaver不能像IE那样访问互联网,如果是这样的图片可以不用理会,等传到网站空间后就可以显示了;另一种是图片地址出错或不存在,这就需要修改图片的地址了,方法如下:</p> <p>        在Dreamweaver的预览区点击无法显示的图片,此时该图片就会被选中,同时在代码区该图片的调用代码也会自动被选中,如下图所示:</p> <p> </p> <p>        此时你可以通过修改代码来修改图片的地址,也可以通过修改上图中红框内的内容来修改图片的地址。其中“源文件”就是图片的地址,因为我的图片是保存在css文件夹的,所以我将其修改成“css/logo.gif”;下面的“链接”就是这张图片所要链向的地址,我这里不想给这张图片加链接,所以留空,你可以加上链接,如果是链向网络的绝对地址记得要使用带http://的完整地址。修改好后点击“文件”》“保存”,这样就将修改好的保存起来了,用浏览器打开这个网页文件就可以浏览到修改后的样式和内容。</p> <p>        文字的修改和图片修改的方法一样,同样是先在预览区选中要修改的文字,然后在代码区就可以看到这段文字的代码,在“属性”面板可以看到文字的属性(包括字体、样式、颜色、是否有链接等)。如果要修改文字的内容,就像在Word里打字一样直接输入你要的文字即可。所以,文字的修改我就不讲了,大家自己动动手举一反三的多思考思考。</p> <p>        这样几个步骤就可以轻而易举的将整个网站修改成自己的了,修改好保存后将所以文件(包括网页文件和图片等)上传到你的空间,这样就可以访问了。今天只是讲了怎么将别人的网站修改成自己的网站,通过这个方法你就可以自己去山寨任何一个你想要的网站了。</p> <p>        通过这样的方法虽然可以做到想要哪个网站的样式就要哪个网站,但是这样做的每一个网页都是全静态的,要做内容更新的话就需要去修改这些文件;还有的人需要发布文章等,那么这样简单的网站就实现不了了。那该怎么办呢?请看明天的帖子——新手建站每日一帖⑧:轻松打造一个文章站。</p> </div> <div class="pagIng"> <a href="/anyouwz/19721.html">创建网站需要用什么软件</a> <a href="/anyouwz/19723.html">贵州网站建设专业就业前景</a></div> </div> </div> </div> <script type="text/javascript"> $(function(){ $(".zSubnav li").hover(function(){ $(this).stop().animate({top:"-10"},300) },function(){ $(this).stop().animate({top:"0"},300) }) }); $('.fonts a').click(function (){ $('.fonts a').removeClass('active'); $(this).addClass('active'); switch( $(this).index() ){ case 0: $('.detailCont').css({fontSize:14}); return false; case 1: $('.detailCont').css({fontSize:15}); return false; case 2: $('.detailCont').css({fontSize:16}); return false; } }); </script> <!-- 底部 --> <div class="zFooter"> <div class="wrap1200 clearfix"> <div class="cont fl"> <h3>地址 · <span>ADDRESS</span></h3> <p>地址:建邺区新城科技园嘉陵江东街18号2层</p> <p>邮箱:309474043@qq.Com</p> <a class="fukuan tr" href="/anyoucase/">点击查看更多案例</a> </div> <div class="tel fl"> <h3>联系 · <span>CALL TEL</span></h3> <p class="p1">400-8793-956</p> <p class="p2">售后专线:025-65016872</p> <p>业务QQ:309474043    售后QQ:1850555641</p> </div> <div class="code fr"><img src="/img/wx.jpg"></div> <div class="clearfix"></div> <div class="box" style="line-height: 25px;"> <div class="hot fl" style="width: 40%;height: auto;"> <a href="http://www.anyouy.cn/" title="南京网站建设">南京网站建设</a><em>|</em><a href="http://www.anyouy.cn/" title="南京小程序开发">南京小程序开发</a><em>|</em><a href="http://www.anyouy.cn/" title="南京网站开发">南京网站开发</a> </div> <div> <p class="copy">©南京安优网络科技有限公司 版权所有   <a href="https://beian.miit.gov.cn" target="_blank">苏ICP备12071769号-4</a>  <a href="/sitemap">网站地图</a></p> </div> </div> <div class="clearfix"></div> <div class="links"> <span>友情链接:</span> <em>|</em> <a href="http://www.ayxcx.cn/" title="南京小程序开发">南京小程序开发</a> | </div> </div> </div> <script src="/img/wow.min.js"></script> <script>$(function(){new WOW().init();})</script> <script type="text/javascript"> //导航 $(window).scroll(function(){ if($(window).scrollTop()>=100){ $(".zHeader").addClass("on"); }else{ $(".zHeader").removeClass("on"); } }) //签约 jQuery(".zSigning").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:"leftLoop",autoPlay:true,vis:4,scroll:4}); //访问统计 window.onload = function() { $.ajax({url:"/Api/Hitstall/index",}); } </script> <div class="tqfloat"> <ul> <li class="hidden style1"><a class="tit" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=309474043&site=qq&menu=yes">业务咨询</a></li> <li class="hidden style1"><a class="tit" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=309474043&site=qq&menu=yes">技术支持</a></li> <li class="hidden style2"><p>联系电话</p><div class="tel">4008-793-956</div></li> <li class="hidden style1"><a class="tit" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=309474043&site=qq&menu=yes">投诉留言</a></li> <li class="hidden gotop"><a class="tit" href="javascript:;"></a></li> </ul> </div> <script type="text/javascript"> $(function(){ $(".tqfloat li.style2").hover(function(){ var _this = $(this); _this.removeClass("hidden").stop().animate({left : - 184}, 400) }, function(){ var _this = $(this); _this.stop().animate({left : 0}, 400, function(){ _this.addClass("hidden") }) }) $(".tqfloat li.style1").hover(function(){ $(this).removeClass("hidden").stop().animate({marginLeft : - 10}, 400) }, function(){ var _this = $(this); _this.stop().animate({marginLeft : 0}, 400, function(){ _this.addClass("hidden") }) }) $(".gotop").click(function(){ $("html,body").stop().animate({scrollTop: "0"},600) }) $(".subnav li").hover(function(){ $(this).stop().animate({top:"-10"},300) },function(){ $(this).stop().animate({top:"0"},300) }) }); </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?1c94697d8167ffaf76dd51252f3ad1a7"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <div class="jszx" style="display:none"> <div class="jxin"><img src="/img/xt_bg.jpg" alt="" /></div> <div class="jszxdd"> <h1>零风险合作体验</h1> <p>侧重以结果为服务导向,不满意退还所有费用,最大限度降低客户的合作风险<br>安优网络从不青睐于向客户虚夸我们的能力<br>如果量身定制的作品让您满意我们相信合作的基础会更加夯实。</p> <p><a href="tel:400-8793-956">400-8793-956</a></p> <span><a href="http://wpa.qq.com/msgrd?v=3&uin=309474043&site=qq&menu=yes" target="_blank">在线咨询</a></span><span><a href="javascript:vido(0)" class="jszx1">稍后再说</a></span> </div> </div> <script language="javascript"> setTimeout(function (){$(".jszx").show()},3000)//表示1000毫秒后执行第一次显示层 $(function(){ $(".jszx3,.jszx1").click(function(){ $(".jszx").hide();//点击关闭层 //每3000毫秒执行一次显示当前层 $(this).stop().fadeTo(955000, 1, function(){ $(".jszx").show(); }); }); }); </script> </body> </html>