之所以本文標(biāo)題是叫初步制作，是因?yàn)槲矣X得模板的制作與修改應(yīng)該是基于大量的現(xiàn)有數(shù)據(jù)研究而得出的，但是一個(gè)網(wǎng)站上線，你必須要設(shè)計(jì)出一個(gè)初始模板才能獲取數(shù)據(jù)，而初始模板的設(shè)計(jì)也是有技巧的，若是我們模板過于糟糕，則需要我們修正數(shù)次才有可能得到最終的數(shù)據(jù)結(jié)果，這顯然對(duì)網(wǎng)站是不利的。

那么我們?nèi)绾沃谱鞒跏寄０澹?/p>

1.制作草圖。

在制作草圖時(shí)，我們要考慮以下幾個(gè)方面：

?競(jìng)爭(zhēng)對(duì)手的網(wǎng)站設(shè)計(jì)。這里所說的競(jìng)爭(zhēng)對(duì)手，是指你主關(guān)鍵詞自然排名前三的站點(diǎn)，在這里你要注意這么幾個(gè)方面：

a.對(duì)手的頁面布局。這個(gè)應(yīng)該是你在設(shè)計(jì)第一套模板時(shí)耗時(shí)長(zhǎng)的步驟，任何一個(gè)優(yōu)化站其訪問縱深和跳出率都是優(yōu)化人員格外關(guān)心的數(shù)據(jù)，既然你的前輩們?nèi)绱瞬季志W(wǎng)站，那可能有一定的道理在里面，比如其輪展的圖片的選擇、首頁調(diào)用欄目的選擇、首頁設(shè)計(jì)與其目標(biāo)關(guān)鍵詞的相關(guān)性等，找出設(shè)置它們的理由，然后根據(jù)自身情況來制定首頁布局。

b.首頁打開的速度。若對(duì)方打開很快，那你至少要和其速度持平，但倘若對(duì)方打開較慢，則你的速度必須快過他。

c.分析你用戶的實(shí)際需求與潛在需求。實(shí)際需求由何而來，來自于入站的關(guān)鍵詞，比如你用戶搜索的是“天津人流多少錢”這個(gè)詞，那么其實(shí)際需求是想知道價(jià)格，但是其潛在需求是想在天津地區(qū)做人流，則無痛、安全等諸多因素可能是影響其最終轉(zhuǎn)化的重要環(huán)節(jié)，這時(shí)候你就要依托于模板，利用不同的位置將用戶進(jìn)行細(xì)分，進(jìn)行精心的轉(zhuǎn)化。這方面，可以參考那些做得好的競(jìng)爭(zhēng)對(duì)手。

②優(yōu)化制作草圖時(shí)的細(xì)節(jié)。設(shè)計(jì)僅僅是一個(gè)方面，將設(shè)計(jì)由代碼實(shí)現(xiàn)的時(shí)候，就由很多seo因素要優(yōu)化了。

a.重要文字的css控制。一些重要文字，可以用h2或h3標(biāo)簽，不必?fù)?dān)心h1標(biāo)簽會(huì)引起不美觀，因?yàn)槟阃耆梢酝ㄟ^css來控制你文字的展現(xiàn)。但要注意，切記不可多用，太多重點(diǎn)等于沒重點(diǎn)。

b.圖片web化，縮小大小。這沒什么好說的。

c.無意義的錨文字，例如“更多”，“點(diǎn)擊了解詳情”等，改用圖片鏈。

d.細(xì)節(jié)代碼要補(bǔ)全，例如為img標(biāo)簽添加alt屬性等。

e.避免文字截?cái)?。有時(shí)候一些開源程序中調(diào)用的錨文本若是文字太長(zhǎng)，會(huì)被自動(dòng)截?cái)啵ɡ缈棄?mèng)CMS），我們要編寫css,將溢出的文字由“....”替代顯示，但是html代碼中依舊存在。

2.優(yōu)化模板速度。

說道優(yōu)化模板速度，我就需要先說一下瀏覽器的工作原理。

瀏覽器是如何工作的呢？簡(jiǎn)單來說，其工作原理很簡(jiǎn)單，用戶在瀏覽器中提供一個(gè)URL，比如“http://www.letians.cn/231.html”,則瀏覽器會(huì)將這段URL拆分為三部分。

然后將域名發(fā)給DNS解析，當(dāng)解析成功后，再將文件名發(fā)給服務(wù)器，由服務(wù)器提取文件返回給瀏覽器，瀏覽器將文件解析展示給用戶。而這里要注明一點(diǎn)，就是當(dāng)我們?cè)L問網(wǎng)站首頁的時(shí)候，瀏覽器會(huì)自動(dòng)將最后那個(gè)“/”過濾掉。

在此展開說一下，很多人問我做外鏈的時(shí)候，首頁加不加那個(gè)“/”有區(qū)別嗎，我想通過上述講解大家就應(yīng)該明白了，是有區(qū)別的，但是隨著搜素引擎的發(fā)展，我感覺影響不大，但是還是建議大家做的時(shí)候統(tǒng)一一下，要么就都加，要么就都不加。

那么瀏覽器接收到文件開始處理的時(shí)候，主要是5大組件進(jìn)行工作，這5大組件分別是：

用戶界面：我們平時(shí)看到的界面。

渲染引擎：負(fù)責(zé)解析文件源碼。

核心引擎：將渲染引擎與端口相結(jié)合的接口。

JS解析器：解析JS代碼。

數(shù)據(jù)存儲(chǔ)：存儲(chǔ)一些臨時(shí)文件，例如cookie。

這里要說一下，上述是功能性的組件，并非是瀏覽器的構(gòu)成，不同的瀏覽器內(nèi)核實(shí)現(xiàn)這些功能的方法不同。這5個(gè)部分只是對(duì)瀏覽器很膚淺、很模糊的概念性了解。

那么我們?cè)谀０逯?，要盡量如何操作呢？

a.減少請(qǐng)求路徑，凡是有一個(gè)路徑，我們的瀏覽器的就會(huì)多一次向服務(wù)器發(fā)送一次請(qǐng)求，如果在網(wǎng)頁中把多次使用的css、js等統(tǒng)一的放在的head，就需要一次請(qǐng)求。

b.減少JS代碼。JS代碼盡可能放在標(biāo)簽內(nèi)。

c.盡可能減少文件大小。

通過上述步驟，基本上初始的模板就已經(jīng)制作完成了，剩下的就是在網(wǎng)站的運(yùn)營(yíng)過程中監(jiān)控用戶的聚焦點(diǎn)以及站內(nèi)流量，來根據(jù)數(shù)據(jù)來具體的優(yōu)化用戶體驗(yàn)了。

我們專注高端建站，小程序開發(fā)、軟件系統(tǒng)定制開發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開發(fā)、各類API接口對(duì)接開發(fā)等。十余年開發(fā)經(jīng)驗(yàn)，每一個(gè)項(xiàng)目承諾做到滿意為止，多一次對(duì)比，一定讓您多一份收獲！