新的网站,在设计之初都要考虑的布局的重要性。不管是首页布局、栏目页布局(列表页布局)还是内页布局,这些都要考虑到,合理的网站布局能给网站带来一定的优势。所以,只要网站布局合理了,就能在相同的条件下,比对手有很大的优势。
网站的内页布局,主要看是网站是如何定位的。因为一个内页,正文占去了70%版块以上,所以剩下的那些版块要合理的布局好,就需要动动脑子。
内页布局简单的方法就是只头部、栏目及显示文章,这是简单的布局方法。说的不好听呢就是就是网站设计者在什么都不懂的情况下设计的,这样的布局,会把网站给“布死”,这样的网站有不少。
网站内页布局合理的方法,也就是难的方法:
一、内页的头部
1、网站的内页顶部应该都一样,而且要独立写出来,然后采取调用的方法,这样就精简了网站的代码,给网站减肥,对网站有很大的好处。我们的建站口号是:速度能快一秒是一秒,代码能少一行是一行!
二、网站的内页导航
1、网站的内页导航有两个部分,一个是栏目导航,大家都知道,主要是通过这个导航去别的栏目,浏览别的栏目的内容,增加网站的pv,从而提高网站的权重。
2、就是面包屑导航,这个面包屑导航是比较重要的一个环节,他对搜索引擎的蜘蛛友好,同时对于用户的体验也非常的好,他能显示用户的当前位置,不至于让用户在网站迷失方向。
三、网站内页链接的布局
1、网站内页链接的布局这个是整个内页布局的关键,做的好,你的网站就做活了,做的不好,就印证了"方法不对、努力白费"这句话了。
2、链接布局,主要是放在正文的右边,和正文的下面,这样是最利于用户体验,原因有二:①、用户如果通过链接点进这篇文章,看见文章不合他(她)的胃口,你在正文的右边有链接的话,可能就留住了用户,减少了用户的流逝,增加了网站的pv。②、如果用户对这篇文章感兴趣,在看完过后,浏览到文章的最底部,同样用户可以通过这样的链接进去别的页面,用户不用回到文章的顶部再去其他的页面,节省了用户的时间,同时也增加了网站的pv,减少了调处率。
3、那还有一点就是上一页和下一页的布局。
好了,说了这么多,主要的问题就是这么几点,归根到底还是要注重用户体验,只有做到了用户体验的页面布局,网站才有用户,才有权重,才有排名,有了这些,还怕没有盈利吗!
建设网站内页如何合理布局
百度网站优化中css文件的作用
百度百科是这样为css定义的"CSS(Cascading Style Sheet,可译为“层叠样式表”或“级联样式表”)是一组格式设置规则,用于控制Web页面的外观。通过使用CSS样式设置页面的格式,可将页面的内容与表现形式分离。页面内容存放在HTML文档中,而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分,通常为文件头部分。将内容与表现形式分离,不仅可使维护站点的外观更加容易,而且还可以使HTML文档代码更加简练,缩短浏览器的加载时间。"
现在几乎所有的人都知道css+div才是一个可靠的网站模型,因此css的重要性也是不言而喻的,但是css在网站优化当中担当着什么样的作用呢?搜索引擎能不能正确的识别到css文件呢?
首先最明显的就要数雅虎了,通过网站日志我们可以发现雅虎每次来的时候都会顺便去访问一下那个页面对应的css文件,连着css文件和html页面一起取走,想必在雅虎看来css文件本身就属于网站的一部分,既然取走了那么分析肯定是不可避免的,因此我们可以肯定的说雅虎是很重视css文件的,那么百度和谷歌呢?分析网站日志的时候很少看到他们取走css的时候,但是你不能说百度和谷歌就不关心css文件,因为我的主页上有几个使用css,做的隐藏域,因为这些隐藏域是因为用户体验而设置的而不是作弊,所以没什么可担心的,不论是谷歌还是百度都能正确的识别到,但是现在显示上就不同了,在谷歌的快照当中那部分隐藏的内容被隐藏了起来,虽然在用户交互过程中可以显示出来,但是明显谷歌不吃那一套,百度也是一样的情况,同样是把css设置隐藏的部分隐藏了起来,这样的话相对于js文件,css还是比较受到搜索引擎重视的。
虽然css默认的功能应该是很难出现关键字的,但是关键字使用注释的形式出现在css文件当中还是可以的,虽然目前还不清楚这样做对网站优化有多大的作用但是使用这种技术总是没什么坏处的,当然在这里同样不能过度使用,一旦被认定为堆砌的话那么就得不偿失了。
网站建设之网页设计
成为站长是许多人梦寐以求的事情,因为当站长可以轻松的赚钱,这应该是大多数人的理想,当然也有只想当当论坛超级管理员出出风头,显显威风的。不管为了什么,最重要的是建站之后要有流量才有钱赚,论坛有人气你才能显威风。那就涉及到网站的推广了,网页的设计是推广前的重中之重,也是留住人气的重要体现,所以学习网站网页设计技术是建站的根本。
现在许多的网站都是直接下载网上现成的模板,或者下载下来后简单改改,然后用开源的内容管理系统建站。熟练的很快就能建好一个网站。先不说网站的内容是否原创,这样的网站发布到网上后,首先搜索引擎肯定能分辨出网站结构的相似性。即使内容不一样,但是网站的结构就给搜索引擎留下了一个很不好的初次印象,所以网站模板的原创也是判断网站权重的一项指标。
不过不学习网站网页设计也可以花人民币找人设计网站,但像我这样的没钱没资本的人要建网站就得靠自己的力量了。我学习html和div+css一年多了,接下来谈谈我学习过程的一些经验。
网站的前台设计其实很好学,只需要记一些标签就可以了,但是象我这样的英语水平很差的人,当初记那几个英文字母也是费了很大的功夫,我是看了一遍又一遍才记住的。我建议大家不用死记,只要学习过程中多练习就自然记住了,我是当初因为没电脑练习,只能看书记了,学习效率是低了点,不过最终我还是学会了。
自己建的第一个网站的模板就是自己写的,虽然那时编网页的基础知识都记住了,但是由于没练习过多少次,写代码过程中遇到了很多困难。首先就是网站的效果图设计,我一个理科计算机专业的实在没什么美感,也不知道怎么设计会更好看。最后参照新浪女性频道的模板结构,进行了很多的创新而完成的我都第一个网站模板。
浏览器兼容是网站前台设计最麻烦的事情,至少要测试IE6,IE7和火狐浏览器,这三种是目前使用人数最多的浏览器了,至于IE8可以在网页头部加一行代码就可以让它以IE7的模式渲染网页,我设计时还考虑了opera这个浏览器,也有一定的使用量。这方面学起来确实有点麻烦,问题多多。但是教程也有很多,我们可以慢慢学,一点一点积累。推荐大家写网页时使用IETester这个软件,它集成了IE5.5到IE9的内核(IE9要在win7下才有),用这个软件一边测试一边写代码才不至于最后由于不兼容而改来改去。
只有多练习才能更好的学习知识,我学习过程中总是学点这个又学点那个,以至于学习过程中总是忘了这个又忘那个。所以希望大家学习不能间断,不然像我一样学好几遍才学会,很费时间。把一个网站从无到有的做出来,然后再推广开来,这是成为站长的必须素质,也许你不用每一步都精,但是你必须每一步都会。
网站建设中的网页标准之争
在网站开发过程中,你会听到词语“标准”很多次。我的意思是,很多次。Internet Explorer因为不支持标准而广为诟病,Opera自称是唯一的一个真正努力地完全实现标准的浏览器,而全世界的开发人员又相互责备没有遵循标准。可笑的是,大部分人根本不理解什么是标准或者它们是怎么变成这样的。
让我们以互联网上的头号神话来说起:W3C创造了标准。这完全是错误的。W3C宣称的目标是创造标准,但是它不能够在实际上创造它们。为什么呢?因为,很简单,标准是大多数人决定要做的事情。因此,网页标准是大部分浏览器厂商决定要追随的。W3C可以推荐应该怎么做,但是它没有权利强制实施。如果W3C真的可以创造标准,那么我们也不会仍然在等待相关的浏览器支持XHTML了,它在1999年就完成了。W3C没有能力强制浏览器厂商做任何事情;每个人都能决定自己想做什么。甚至参与到W3C的浏览器厂商都不遵循某些规范(全部的浏览器厂商都这样)。
所以如果我和我的同伴这个周末聚到一起然后想出了一个很酷的JavaScript特性,那么我们就和W3C一样了。如果我们确定可以让Mozilla、Apple、Microsoft和Opera实现这个特性,那么我们就已经创建了一个新的标准了——和W3C一样。没有一个官方的标志或印章可以让一些东西成为标准,它只是由两个或更多浏览器来实现的。
W3C在创建标准上曾经很传统的不好。它们真正擅长的是文档化和标准化已经在浏览器中实现的东西。这样导致了HTML 4 和DOM 1的创建大部分是基于在IE 4中的创新。是的,同学们,微软在创建这些标准方面是比其它任何浏览器都更有影响力的,因为它们不断前进和创新而等不及有人告诉它们已经好了。
事实上,微软的很多创新都已经成为它们自己的标准,比如innerHTML 属性,XMLHttpRequest 对象,通过designMode的富文本编辑。没有浏览器敢不支持这些;这使它们成为了标准。W3C现在正在走一些流程将它们引入到HTML 5 规范 和XMLHttpRequest规范中。
责骂微软不支持标准似乎变得很流行,但是人们可以说,如果世界上最流行的浏览器不去实现某些东西,它就不会真正的成为标准。保守估计Internet Explorer在全球有80%左右的市场份额(2008年)。也就是说只有20%的互联网用户在使用“兼容标准”的浏览器。当只有市场上20%的用户使用它,它会是一个标准吗?仔细考虑一下吧。
真相是微软只是跟随了互联网中最顽固的企业的领导者:网景(Netscape)。网景是第一个说“我们要做我们想做的”的,然后引入了<blink>标签。历史表明在浏览器厂商开始创新的时候,网络也跟着进步了。微软不是唯一这样做的。Mozilla也实现了不标准的特性,比如XSLTProcessor;Safari 实现了<canvas> 标签;Opera 实现了<event-source> 标签和window.opera 对象。然而没有人抱怨它们做出了自己的东西和创新……只有微软是个坏小子。为什么这样?
正如Alex Russell多次指出的,创新并不在W3C的手中。真正的创新,可以带动互联网发展的创新,需要来自于浏览器厂商。让自由的市场来决定浏览器中最有用的特性然后让W3C去规范它吧。那才是真正的标准。等到伟大的HTML 5规范在2022完成了,不会推动网络向前发展。得让像Alex一样聪明的家伙开发浏览器才行(推动web进步)。
浅谈DIV+CSS网页制作心得
DIV+CSS是目前互联网网页制作最热门的方法,但对于完全手写代码,许多网页设计师都望而止步。
其实DIV+CSS是很简单的一种布局方式,甚至比任何一种编程语言都要简单(虽然它不能算是编程语言)。
首先你要知道,当你开始学习DIV+CSS的时候,你要把以前所有用DW画布局表格的思维方法忘的一干二净(如果你以前是用TABLE布局的话),然而这项技术更适合刚接触网页制作的人。
然后你要知道,DIV+CSS是高成本开发,速度当然是没有你画TABLE来的快,但是好处更多,相信如果你能看到这里,你一定对DIV+CSS的好处也有一定的了解了。
最后你还得知道,你所用的工具,你可能认为dreamweaver很好,没错,它的确不错,但你要认识到,当你熟练使用了这门技术,你就可以在任何文本编辑器中编写网页,甚至在记事本中,而dreamweaver只是充当一个文本编辑器的角色,而你所有的工作基本都在代码视图中完成,在这里我推荐adobe最新的dreamweaver cs4。当然如果CS5出现了我也会去试用它。
切入正题,其实DIV+CSS正确的说法应该是XHTML+CSS,说成DIV的原因只是让它能更明确地和TABLE布局方法区分开来,并不是说一个页面里没有TABLE,而是在什么地方使用TABLE,你要认识到TABLE是表格,是存放数据用的,而不是用来布局的。
接下来是布局思维方式,可能大家在接触DIV+CSS的时候无从下手,我现在向大家推荐最著名的盒子模型,我也是看了这个模型后一下子就开窍了。
你可能会说,好多英文看不懂,不过我告诉你,很抱歉那三个英文你必须记住,而且是最重要的三个,你可以把这么个盒子看成一个DIV,而所有标签都带有这三个属性。
正如你所见到的这个是一个方块,而网页呢,是由这么多大大小小的方块组成的,可能以下实例会更明确的让你了解这个盒子。
我在这里借用了新浪博客的盒子来说明下,大家可能发现了,其实边框border往往就只有1px的宽度,谁叫它是边框呢。而外补丁margin呢,它代表了DIV(盒子)和DIV(盒子)之间的距离,而内补丁padding则是大盒子(DIV)和里面的盒子(DIV)的距离(盒子(DIV)里面可以放盒子(DIV)哦)。
接下来我们模仿这个盒子做个简单的模型 将以下内容拷贝至记事本中,后缀名改为html即可。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=http://www.lzrc365.com/index.html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>盒子模型演示</title>
<style type="text/css">
*{
margin:0;
padding:0;
font-size:12px;
}
a{
color:#5E4830;
}
.Box{
width:205px;
border:1px solid #DFD3BD;
margin:10px;
}
.Box .title{
font-weight:bold;
height:22px;
line-height:22px;
background-color:#FDECCE;
border:1px solid #fff;
padding:0px 0px 0px 10px;
color:#665F54;
}
.Box .content{
color:#5E4830;
padding:7px 10px;
}
.Box .content li{
line-height:1.5em;
}
</style>
</head>
<body>
<div class="Box">
<div class="title">分类</div>
<ul class="content">
<li><a href="#">技术笔记</a>(1)</li>
<li><a href="#">网摘</a>(0)</li>
<li><a href="#">原创文学</a>(1)</li>
</ul>
</div>
<div class="Box">
<div class="title">访客</div>
<ul class="content">
<li>暂无访客</li>
<li><a href="#">登录</a>后您的头像出现在这里。</li>
</ul>
</div>
</body>
</html>
Div+css网页布局方式对SEO的影响有哪些
为什么要选择div+css的网站布局方式,看完下面容你就会很详细的了解到他的作用。在SEO搜索引擎优化中有一项很重要的内容是“网站内部结构的优化”,主要就是通过对网站的链接、结构、标签、排版等各方面的优化,使搜索引擎更容易抓取网站的内容,并且让网站的各个网页在等搜索引擎中获得较高的评分,从而获得较好的排名。Div+css的网页布局方式对SEO的影响主要有以下几个方面:
一、精简代码让蜘珠爬得更舒服
使用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道。
代码精简所带来的直接好处有两点:一是提高Spider爬行效率,能在最短的时间内爬完整个页面,这样对收录质量有一定好处;二是由于能高效的爬行,就会受到Spider欢迎,这样对收录数量有很大好处。
二、解决表格嵌套让蜘珠触角无数不大
很多“网站如何推广”的文章中称,搜索引擎一般不抓取三层以c的官方证实。我的几项实验结果没有完全出来,但根据目前掌握的情况来看,Spider爬行Table布局的页面,遇到多层表格嵌套时,会跳过嵌套的内容或直接放弃整个页面。
使用Table布局,为了达到一定的视觉效果,不得不套用多个表格。如果嵌套的表格中是核心内容,Spider爬行时跳过了这一段没有抓取到页面的核心,这个页面就成了相似页面。网站中过多的相似页面会影响排名及域名信任度。
而DIV+CSS布局基本上不会存在这样的问题,从技术角度来说,XHTML在控制样式时也不需要过多的嵌套。
这虽然没有得到确认,但还是建议使用Table布局的朋友们,在设计时尽可能的不要使用多层表格嵌套,SEOer们在文章中说明了这一点,相信他们也不是没有依据。
三、提高速度让让蜘珠做上时光车
DIV+CSS布局较Table布局减少了页面代码,加载速度得到很大的提高,这在Spider爬行时是非常有利的。过多的页面代码可能造成爬行超时,Spider就会认为这个页面无法访问,影响收录及权重。
另一方面,真正的SEOer不只是为了追求收录、排名,快速的响应速度是提高用户体验度的基础,这对整个搜索引擎优化及营销都是非常有利的。
四、对搜索引擎的排名
基于XTHML标准的DIV+CSS布局,一般在设计完成后会尽可能的完善到能通过W3C验证。截止目前没有搜索引擎表示排名规则会倾向于符合W3C标准的网站或页面,但事实证明使用XTHML架构的网站排名状况一般都不错。这一点或许会有争议,但从本人的观点来看,非常有益。
我想,这样的情况可能不是排名规则,最大的可能还是spider爬行网站时,出现以上差异导致收录质量的不同。
为什么要运用Div Css进行网页设计?
为什么要运用Div Css进行网页设计,用Div Css设计有什么好处呢?面对目前Div CSS布局日益成为新站建立的首选,大家不禁产生以上疑问!
CSS是Cascading style Sheets的简称,中文译作“层叠样式表单”,在主页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。网上冲浪无论你用Internet Explorer还是Netscape Navigator,几乎随时都在与CSS打交道,在网上没有使用过CSS的网页可能不好找。不管你用什么工具软件制作网页,都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼,同样内容的网页,有的人做出来有几十KB,而高手做出来只有十几KB。
概括来讲使用CSS+DIV构架主要有以下三大好处:
1、对搜索引擎亲和力
一般来说,table构架描述的页面,样式结构和内容信息大小比可能达到1:1甚至更高,而CSS+DIV构架的页面。虽然在客户端看来下载一个复杂的CSS也要占用差不多的带宽,然而搜索引擎可以很方便的绕过这个css,而直接抓去div中的内容。这便是div的优势所在。搜索引擎不会在意一个页面的设计或者构成,搜索引擎不可能“欣赏”设计漂亮新颖的页面,也不会去“排斥”颜色搭配丑陋的页面。它们只是默默地拿到它们需要的内容就离开。如果一个页面中涵盖了大量的table来描述构架,试想搜索引擎要花多大的代价才可以拿到真正有用的信息呢?因此,DIV+CSS结构清晰,容易被搜索引擎搜索到,天生优化了seo。
2、表现和内容分离,便于站点重构页面
内容和样式的分离导致我们在重构页面布局(更换皮肤)的时候,只用针对每一个div元素重新定义其具体位置、样式就行了。而在原来的table基础上进行改版,几乎必须改变所有的内容注入渠道,实在是太过于麻烦。这个应用最经典的例子就是各大blog程序了。就如现在我用的LBS系统,以及流行的PJBLOG、php下面的WP、MT,都是采用div+css构架。
3、便于Web项目开发分工协作
以往的Web开发程序员和页面设计者结合必须相当紧密。由于DIV+CSS构架的表现和内容分离的特性,程序员和页面设计者只要通过一定页面元素的约定,便可进行各自擅长的程序控制和页面展示部分的开发,大大提高了开发效率。
CSS设计中应养成一些良好习惯
养成良好的CSS书写习惯无疑会大大提高网页开发速度,减少BUG出现的概率,以下一些编写CSS中需要注意的部分,大家可以参考一下,在书写CSS时涉及到相关部分时,希望能有所帮助。
1、是否重设了默认的样式?
某些属性如margin、padding等,不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。
2、检查HTML元素是否有拼写错误、是否忘记结束标记
即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。
3、检查CSS是否正确
检查一下有无拼写错误、是否忘记结尾的} 等。可以利用CleanCSS来检查CSS的拼写错误。CleanCSS本是为CSS减肥的工具,但也能检查出拼写错误。
4、确定错误发生的位置
如果错误影响了整体布局,则可以逐个删除div块,直到删除某个div块后显示恢复正常,即可确定错误发生的位置。当然,在测试前请注意原来代码的备份。
5、利用border属性确定出错元素的布局特性
使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界,错误原因即水落石出。
6、float元素的父元素不能指定clear属性
MacIE下如果对float的元素的父元素使用clear属性,周围的float元素布局就会混乱。这是MacIE的著名的bug,倘若不知道就会走弯路。
7、float元素务必指定width属性
很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何,一定要为其指定width属性。
8、float元素谨慎指定margin和padding等属性
IE在显示指定了margin和padding的float元素时有bug。因此谨慎对float元素指定margin和padding属性。也可以使用hack方法为IE指定特别的值。关于此知识52CSS.com有详细介绍。
9、float元素的宽度之和要小于100%
如果float元素的宽度之和正好是100%,某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。
10、是否忘记了写DTD
如果无论怎样调整不同浏览器显示结果还是不一样,那么可以检查一下页面开头是不是忘了写DTD。
11、页面编写完成后记得在不同IE版本下和一些常用的浏览器如FireFox中进行确认
CSS中white-space属性介绍
white-space属性是用来处理控制空白显示的,比如换行等在浏览器中的显示方式。
先来介绍一下white-space属性可以取哪写值:
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。
下面是一个nowrap取值下p标签中文本的显示实例:
[CSS在线]-示例代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS在线-示例</title>
<style type="text/css">
p{white-space: nowrap}
</style>
</head>
<body>
<p>
CSS在线nowrap。
CSS在线nowrap。
CSS在线nowrap。
CSS在线nowrap。
CSS在线nowrap。
CSS在线CSS在线
CSS在线nowrap。
CSS在线
CSS在线
CSS在线
CSS在线</p>
</body>
</html>
使用div+css模板三天打造人气QQ站
做站长快一年了,准确的讲应该只能算是准站长。之前做的的是一个网页设计类的站,当时选做这个主题站的原因是本身工作就是程序设计方面,做了那个站之后才发现,做站和开发网站有着本质的区别,有许多需要学习的知识和技能,比如定位关键字,网站推广等。做那个站却让我对做站长产生了了极大的兴趣,也触发了我做一个人气QQ站的想法。
做这个QQ站前后花了大概三天时间,准确的讲应该三天不到,因为白天还要工作,都是晚上和中午抽空去弄的,下面介绍下我是如何使用div+css模板打造我的QQ站的过程:
选择网站主题,确定网站目标关键字
以前做站虽然知道有关键字这么一说,但是没有深刻的理解,对关键字的效果也没有概念。一个网站的关键字基本上可以确定了流量的最大上限,因此选择网站主题和关键字一定要选有人气的,不愿做将军的兵永远不是好兵,做站也一样。
我的目标关键字是QQ网名,QQ站的人气势众所周知的。当然我选择关键字也要有一定的策略,目前我的主打得关键字是QQ情侣网名和QQ网名大全,打算等网站发展到一定阶段再向QQ网名过渡。这也是目前比较流行的做法,没办法现在做站的人太多了,竞争也太激烈了,每个关键字都已经有好多人在做了。
选择合适的div+css模板
因为QQ网名是文字类为主的站,因此我选了款以文字为主的div+css模板。现在有很多div+css的免费模板资源,你只要去百度和google搜一下div+css模板就可以找到许多,一般都提供图片预览或者在线DEMO浏览,因此选择起来还是很方便的。
我是在我自己之前的那个网页设计类的网站上找的模板,因此也没费太多工夫。考虑到QQ站是娱乐休闲类,就选了一款带多款css切换的模板,打算以后加上皮肤切换的功能,可以给人一些新鲜感。
选div+css模板需要考虑以下两个因素:
1.选择适合自己网站主题风格的模板
如果是文字类的站就不要选那种全部是图片组成的模板,相反如果是图片站当然不要选那种整个模板都没几个图的模板。一般来讲,好的模板网站都会给出模板的用途和分类,比如博客模板,企业模板等。另外颜色和风格也要符合自己网站特点,这个就要看站长个人的口味和判断了。
2.选模板最好要选那种带内页和导航页模板
因为许多模板只是提供主页的模板,因此如果你不具备一定的网页div+css设计能力的话,即使模板再好看你也最好不要去用,否则首页做出来了,内页却需要花费大量精力去自己设计,而且很容易和主页风格出入很大,效果就大打折扣了。
选择合适的CMS系统
我用的是织梦CMS系统,也是目前比较流行的CMS系统之一,是PHP语言的,还有一些像帝国CMS等也都不错。另外比较简单的asp有无忧cms(只适合简单的网站结构,没有专题,友情链接等功能模块,第三方的插件也几乎没有,使用前一定要考虑清楚)。选好CMS系统后一定要仔细看官方的使用说明和帮助,即使需要消耗一定的时间也要仔细看,省得以后绕弯路。
修改div+css模板打造QQ站
选好模板和cms系统后,接下来就是将织梦的模板标签加入到所选择的div+css模板中去。这一步非常消耗时间和精力,一定要有耐性,而且要多测试效果,特别是记得要在IE不同版本和FF中预览,看看是否都能正确显示。
将织梦标签添加到模板中最重要的是要学会参考使用织梦中默认模板templates/default中模板标签,这样可以节省很多时间。
下面举一个套用菜单标签的例子来说明一下如果套用织梦标签到自己的模板中去:
在织梦的默认模板中导航菜单的标签是存放在templets\default路径下的head.htm中,代码如下:
[CSS在线]-示例代码<div class="nav mt1">
<div class="w960 center">
<ul>
<li><a href='{dede:global.cfg_cmsurl/}/'>主页</a></li>
{dede:channel type='top' currentstyle="<li class='thisclass'><a href='~typelink~'>~typename~</a> </li>"}
<li><a href='[field:typeurl/]'>[field:typename/]</a></li>{/dede:channel}
</ul>
</div>
</div>