前言：
前面文韜互聯(lián)和大家對網站設計的導航欄目劃分進行了初步的探討，由于時間比較匆忙，可能談的沒有那么深入，今天和大家溝通的主題是"網站設計之詳情頁設計及代碼減肥",里面涉及到兩方面，第一是圖片設計，第二是代碼減肥，可能對于很多人來講有點麻煩，這屬于兩個范圍了，畢竟懂代碼的人，未必會設計;會設計的人，未必懂代碼。
(正文開始，請君閱讀)
網站設計，從頁面層級來講，包括首頁、列表頁以及詳情頁等;從結構上來看，就是頭部、尾部以及中間的部分。在網站制作過程中，目前區(qū)分結構的方法比較簡單，看頁面就是從上到下，從左到右;當你右鍵查看源代碼時，統(tǒng)一從上到下，就可以看到整個網站的結構和布局了。
如何為網站進行瘦身?
網站制作的前面，是網站設計與切片，當然，網站設計只是考慮邏輯與美觀，至于網站效果的實現(xiàn)則是由切片后的代碼實現(xiàn)的。如果在網站制作過程中，能為以后作進一步的考慮的話，提前規(guī)劃好網站瘦身，就可以從源代碼這里開始考慮了。
以前的網站制作，一般多以table表格為主，很少會涉及到div+css，但隨著web發(fā)展的速度，到現(xiàn)在html5都已經很時興了，table表格就逐步顯得落伍了。所以，我們記住的第一點就是網站的制作中，優(yōu)先以div+css進行布局。
大家都知道.css文件是網站的樣式文件，有些朋友喜歡一個網站調用很多樣式文件，也有一些朋友喜歡將所有的樣式放一個.css文件里。實際上，當我們使用百度網站測速工具時，系統(tǒng)會從很多層面進行分析，比如.css、.js、圖片等文件的加載速度出發(fā)，提供一個意見：將不同的.css文件放在一個.css文件里，避免資源調用的浪費。
同時，代碼的制作要規(guī)范化。該有的代碼必須有，冗余的代碼則必須清除掉，過多的標簽給頁面增加了負擔，比如一個頁面只有500KB，可能就因為有多而無用的標簽則增加了頁面的大小。再者，將冗余的注釋代碼也去掉。一眼就能看清楚的結構，就無須過多地注釋了。
再者，盡量將.js代碼放置在頁面的最下面，一般.js是頁面效果的顯示，為了提高網站的訪問速度，可以先完全加載出來后，再來顯示效果。
這里對代碼的設置不做過多的講解，比如分布式、負載均衡等，只是一個理論的概念，具體操作以后我們再細談。
圖片輪播的代碼怎么設置?
在前面的文章中，我們介紹過網站為了顯得高端大氣上檔次，有時候會為導航欄通欄顯示，圖片也會設置成大banner。在以前的圖片輪播的代碼中，一般以flash或frame框架顯示，文韜互聯(lián)在2012年接觸的一個網站，圖片輪播就是以flash顯示的。但發(fā)展至今，早已經取消了flash來顯示圖片的設置。
取消的原因是隨著互聯(lián)網技術的發(fā)展，搜索引擎依舊不認識flash要表達什么，同時瀏覽器在加載渲染頁面時，更喜歡最新的技術——HTML5。我們現(xiàn)在在設計圖片的過程中，有兩條標準需要遵循：圖片質量要好，要清晰，同時圖片要表達的主題要突出。我們看到網站的圖片時，要能接受并且明白它要表達的意思。
現(xiàn)在絕大部分網頁中，圖片的輪播都會有上一頁和下一頁的提示和操作?？梢宰屛覀冞x擇觀看不同的圖片。同時，不同的圖片，可能鏈接不同的內容，這個也是可以設置的。
詳情頁面該如何布局設置?
一般我們會把內容頁當作最后一層頁面，也就是說在這一層頁面中，就沒有比它更深一層的內容顯示了。那么，在這一層頁面中，我們有幾個地方需要考慮：
增加關鍵詞之間的的關聯(lián)性
增加頁面上下頁的關聯(lián)性
擴大用戶訪問的粘性
怎么理解增加關鍵詞之間的關聯(lián)性呢?比如當前用戶訪問的頁面的關鍵詞是A時，一個網站的內容很多，會有其他的頁面的關鍵詞也是A，假設這兩篇文章有一定的關聯(lián)，可以適當?shù)耐扑]這篇文章給用戶訪問，以此來提高用戶的訪問體驗。調用代碼有幾種，其一為增加tag標簽區(qū)域，讓用戶點擊tag標簽，可以看到凡是網站中設置了關鍵詞為A的文章都有哪些;同時，在頁面中，可以增加關鍵詞相同或相似的文章顯示，一般可以調用8篇比較合適。
怎么增加頁面上下也的關聯(lián)性呢?可以通過設置代碼的上一頁、下一頁，讓前端顯示的內容中，能調用到上一篇文章和下一篇文章;如果下一篇沒有文章了，那么自動回到當前文章所屬的欄目列表中。
在擴大用戶訪問的粘性的調用中，以上兩個操作是一種，同時，我們可以增加其他文章調用，比如一個月里點擊量最大的文章前10的文章調用、評論文章的前10調用等等。能有利于用戶獲取信息以及增加他的訪問體驗的操作，都是可以嘗試而且是有必要的。我們終是是要明白一點，搜索引擎存在的目的應該是將能滿足用戶需求的優(yōu)質內容優(yōu)先推薦給用戶的。
