使用div+css模板三天打造人氣QQ站

時(shí)間：2022-07-21 09:45:01 | 來源：建站知識(shí)

時(shí)間：2022-07-21 09:45:01 來源：建站知識(shí)

做站長(zhǎng)快一年了，準(zhǔn)確的講應(yīng)該只能算是準(zhǔn)站長(zhǎng)。之前做的的是一個(gè)網(wǎng)頁(yè)設(shè)計(jì)類的站，當(dāng)時(shí)選做這個(gè)主題站的原因是本身工作就是程序設(shè)計(jì)方面，做了那個(gè)站之后才發(fā)現(xiàn)，做站和開發(fā)網(wǎng)站有著本質(zhì)的區(qū)別，有許多需要學(xué)習(xí)的知識(shí)和技能，比如定位關(guān)鍵字，網(wǎng)站推廣等。做那個(gè)站卻讓我對(duì)做站長(zhǎng)產(chǎn)生了了極大的興趣，也觸發(fā)了我做一個(gè)人氣QQ站的想法。

做這個(gè)QQ站前后花了大概三天時(shí)間，準(zhǔn)確的講應(yīng)該三天不到，因?yàn)榘滋爝€要工作，都是晚上和中午抽空去弄的，下面介紹下我是如何使用div+css模板打造我的QQ站的過程:

選擇網(wǎng)站主題，確定網(wǎng)站目標(biāo)關(guān)鍵字

以前做站雖然知道有關(guān)鍵字這么一說，但是沒有深刻的理解，對(duì)關(guān)鍵字的效果也沒有概念。一個(gè)網(wǎng)站的關(guān)鍵字基本上可以確定了流量的最大上限，因此選擇網(wǎng)站主題和關(guān)鍵字一定要選有人氣的，不愿做將軍的兵永遠(yuǎn)不是好兵，做站也一樣。

我的目標(biāo)關(guān)鍵字是QQ網(wǎng)名，QQ站的人氣勢(shì)眾所周知的。當(dāng)然我選擇關(guān)鍵字也要有一定的策略，目前我的主打得關(guān)鍵字是QQ情侶網(wǎng)名和QQ網(wǎng)名大全，打算等網(wǎng)站發(fā)展到一定階段再向QQ網(wǎng)名過渡。這也是目前比較流行的做法，沒辦法現(xiàn)在做站的人太多了，競(jìng)爭(zhēng)也太激烈了，每個(gè)關(guān)鍵字都已經(jīng)有好多人在做了。

選擇合適的div+css模板

因?yàn)镼Q網(wǎng)名是文字類為主的站，因此我選了款以文字為主的div+css模板?，F(xiàn)在有很多div+css的免費(fèi)模板資源，你只要去百度和google搜一下div+css模板就可以找到許多，一般都提供圖片預(yù)覽或者在線DEMO瀏覽，因此選擇起來還是很方便的。

我是在我自己之前的那個(gè)網(wǎng)頁(yè)設(shè)計(jì)類的網(wǎng)站上找的模板，因此也沒費(fèi)太多工夫。考慮到QQ站是娛樂休閑類，就選了一款帶多款css切換的模板，打算以后加上皮膚切換的功能，可以給人一些新鮮感。

選div+css模板需要考慮以下兩個(gè)因素：

1.選擇適合自己網(wǎng)站主題風(fēng)格的模板

如果是文字類的站就不要選那種全部是圖片組成的模板，相反如果是圖片站當(dāng)然不要選那種整個(gè)模板都沒幾個(gè)圖的模板。一般來講，好的模板網(wǎng)站都會(huì)給出模板的用途和分類，比如博客模板，企業(yè)模板等。另外顏色和風(fēng)格也要符合自己網(wǎng)站特點(diǎn)，這個(gè)就要看站長(zhǎng)個(gè)人的口味和判斷了。

2.選模板最好要選那種帶內(nèi)頁(yè)和導(dǎo)航頁(yè)模板

因?yàn)樵S多模板只是提供主頁(yè)的模板，因此如果你不具備一定的網(wǎng)頁(yè)div+css設(shè)計(jì)能力的話，即使模板再好看你也最好不要去用，否則首頁(yè)做出來了，內(nèi)頁(yè)卻需要花費(fèi)大量精力去自己設(shè)計(jì)，而且很容易和主頁(yè)風(fēng)格出入很大，效果就大打折扣了。

選擇合適的CMS系統(tǒng)

我用的是織夢(mèng)CMS系統(tǒng)，也是目前比較流行的CMS系統(tǒng)之一,是PHP語言的，還有一些像帝國(guó)CMS等也都不錯(cuò)。另外比較簡(jiǎn)單的asp有無憂cms(只適合簡(jiǎn)單的網(wǎng)站結(jié)構(gòu)，沒有專題，友情鏈接等功能模塊，第三方的插件也幾乎沒有，使用前一定要考慮清楚)。選好CMS系統(tǒng)后一定要仔細(xì)看官方的使用說明和幫助，即使需要消耗一定的時(shí)間也要仔細(xì)看，省得以后繞彎路。

修改div+css模板打造QQ站

選好模板和cms系統(tǒng)后，接下來就是將織夢(mèng)的模板標(biāo)簽加入到所選擇的div+css模板中去。這一步非常消耗時(shí)間和精力，一定要有耐性，而且要多測(cè)試效果，特別是記得要在IE不同版本和FF中預(yù)覽，看看是否都能正確顯示。

將織夢(mèng)標(biāo)簽添加到模板中最重要的是要學(xué)會(huì)參考使用織夢(mèng)中默認(rèn)模板templates/default中模板標(biāo)簽，這樣可以節(jié)省很多時(shí)間。

下面舉一個(gè)套用菜單標(biāo)簽的例子來說明一下如果套用織夢(mèng)標(biāo)簽到自己的模板中去：

在織夢(mèng)的默認(rèn)模板中導(dǎo)航菜單的標(biāo)簽是存放在templets/default路徑下的head.htm中，代碼如下：

        <div class="nav mt1">
          <div class="w960 center">
            <ul>
              <li><a href='{dede:global.cfg_cmsurl/}/'>主頁(yè)</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>

       其中有用的部分是：
{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}

       我選擇模板中的導(dǎo)航菜單部分是這樣的:
       <div id=menu class="pro_line2">
       <ul class="select">
       <li><a href='/'><b>首頁(yè)</b></a></li>
       <li><a href='#'><b>demo1</b></a></li>
       <li><a href='#'><b>demo2</b></a></li>
       <li><a href='#'><b>demo3</b></a></li>
       <li><a href='#'><b>demo4</b></a></li>
       <li><a href='#'><b>demo5</b></a></li>
       <li><a href='#'><b>demo6</b></a></li>
       <li><a href='#'><b>demo7</b></a></li>
       </ul>
       </div>

       對(duì)比一下是不是有點(diǎn)類似,我需要做的是:
       1.去掉重復(fù)的菜單項(xiàng)目demo2,demo3,demo4,demo5,demo6,demo7,只保留demo1作為菜單項(xiàng)的模板

       2.把{dede:channel type='top' currentstyle="<li class='thisclass'><a href='~typelink~'>~typename~</a> </li>"}...{/dede:channel}套用到demo1的前后,然后把'#','demo1'換成相應(yīng)的織夢(mèng)標(biāo)簽[field:typeurl/],[field:typename/]，結(jié)果如下：
       <div id=menu class="pro_line2">
       <ul class="select">
       <li><a href='/'><b>QQ網(wǎng)名大全</b></a></li>
       {dede:channel type='top' currentstyle="<li class='thisclass'><a href='~typelink~'>~typename~</a></li>"}
       <li><a href='[field:typeurl/]'><b>[field:typename/]</b></a></li>
       {/dede:channel}
        </ul>
        </div>

        3.currentstyle="<li class='thisclass'><a href='~typelink~'>~typename~</a></li>"是用來設(shè)置當(dāng)前已選擇的導(dǎo)航分類菜單風(fēng)格,我的模板沒有設(shè)置因此去掉。最后結(jié)果如下：
       <div id=menu class="pro_line2">
       <ul class="select">
       <li><a href='/'><b>QQ網(wǎng)名大全</b></a></li>
       {dede:channel type='top'}
       <li><a href='[field:typeurl/]'><b>[field:typename/]</b></a></li>
       {/dede:channel}
        </ul>
        </div>

按此方法將模板中的重復(fù)內(nèi)容部分全部替換成相應(yīng)的dede的標(biāo)簽，大體工作就完成了。從上面的例子，可見如果要用織夢(mèng)cms實(shí)現(xiàn)自己風(fēng)格的網(wǎng)站，熟悉織夢(mèng)標(biāo)簽是必須的。

這里需要提醒的是：網(wǎng)站的內(nèi)容分類數(shù)量和分類文字最大長(zhǎng)度最好和模板的一致，否則很容易引起網(wǎng)站排版混亂，要費(fèi)一定力氣去做調(diào)整，如果對(duì)css不熟悉的話，想達(dá)到好的效果就比較難。

最后就是要設(shè)計(jì)一個(gè)自己網(wǎng)站的LOGO

我的辦法很簡(jiǎn)單到Google搜索中選擇搜索QQ圖片，出來一堆QQ主題的圖片，選一個(gè)自己喜歡的，然后PS上自己網(wǎng)站的標(biāo)志性圖片和文字就OK了。

就這樣三天搞定了偶的QQ網(wǎng)名站，有空歡迎大家來做客。