前言：
前面文韜互聯(lián)和大家對(duì)網(wǎng)站設(shè)計(jì)的導(dǎo)航欄目劃分進(jìn)行了初步的探討，由于時(shí)間比較匆忙渗蟹，可能談的沒有那么深入块饺，今天和大家溝通的主題是"網(wǎng)站設(shè)計(jì)之詳情頁設(shè)計(jì)及代碼減肥",里面涉及到兩方面，第一是圖片設(shè)計(jì)雌芽，第二是代碼減肥授艰，可能對(duì)于很多人來講有點(diǎn)麻煩，這屬于兩個(gè)范圍了世落，畢竟懂代碼的人淮腾，未必會(huì)設(shè)計(jì);會(huì)設(shè)計(jì)的人，未必懂代碼屉佳。
(正文開始谷朝，請(qǐng)君閱讀)
網(wǎng)站設(shè)計(jì)，從頁面層級(jí)來講武花，包括首頁圆凰、列表頁以及詳情頁等;從結(jié)構(gòu)上來看，就是頭部体箕、尾部以及中間的部分送朱。在網(wǎng)站制作過程中，目前區(qū)分結(jié)構(gòu)的方法比較簡單干旁，看頁面就是從上到下，從左到右;當(dāng)你右鍵查看源代碼時(shí)炮沐，統(tǒng)一從上到下争群，就可以看到整個(gè)網(wǎng)站的結(jié)構(gòu)和布局了。
如何為網(wǎng)站進(jìn)行瘦身?
網(wǎng)站制作的前面大年，是網(wǎng)站設(shè)計(jì)與切片换薄，當(dāng)然，網(wǎng)站設(shè)計(jì)只是考慮邏輯與美觀翔试，至于網(wǎng)站效果的實(shí)現(xiàn)則是由切片后的代碼實(shí)現(xiàn)的轻要。如果在網(wǎng)站制作過程中，能為以后作進(jìn)一步的考慮的話垦缅，提前規(guī)劃好網(wǎng)站瘦身冲泥，就可以從源代碼這里開始考慮了。
以前的網(wǎng)站制作壁涎，一般多以table表格為主凡恍，很少會(huì)涉及到div+css，但隨著web發(fā)展的速度怔球，到現(xiàn)在html5都已經(jīng)很時(shí)興了嚼酝，table表格就逐步顯得落伍了。所以竟坛，我們記住的第一點(diǎn)就是網(wǎng)站的制作中闽巩，優(yōu)先以div+css進(jìn)行布局钧舌。
大家都知道.css文件是網(wǎng)站的樣式文件，有些朋友喜歡一個(gè)網(wǎng)站調(diào)用很多樣式文件涎跨，也有一些朋友喜歡將所有的樣式放一個(gè).css文件里洼冻。實(shí)際上，當(dāng)我們使用百度網(wǎng)站測(cè)速工具時(shí)六敬，系統(tǒng)會(huì)從很多層面進(jìn)行分析碘赖，比如.css、.js外构、圖片等文件的加載速度出發(fā)普泡，提供一個(gè)意見：將不同的.css文件放在一個(gè).css文件里，避免資源調(diào)用的浪費(fèi)审编。
同時(shí)撼班，代碼的制作要規(guī)范化。該有的代碼必須有垒酬，冗余的代碼則必須清除掉砰嘁，過多的標(biāo)簽給頁面增加了負(fù)擔(dān)，比如一個(gè)頁面只有500KB勘究，可能就因?yàn)橛卸喽鵁o用的標(biāo)簽則增加了頁面的大小矮湘。再者，將冗余的注釋代碼也去掉口糕。一眼就能看清楚的結(jié)構(gòu)缅阳，就無須過多地注釋了。
再者景描，盡量將.js代碼放置在頁面的最下面十办，一般.js是頁面效果的顯示，為了提高網(wǎng)站的訪問速度超棺，可以先完全加載出來后向族，再來顯示效果。
這里對(duì)代碼的設(shè)置不做過多的講解棠绘，比如分布式件相、負(fù)載均衡等，只是一個(gè)理論的概念弄唧，具體操作以后我們?cè)偌?xì)談适肠。
圖片輪播的代碼怎么設(shè)置?
在前面的文章中，我們介紹過網(wǎng)站為了顯得高端大氣上檔次候引，有時(shí)候會(huì)為導(dǎo)航欄通欄顯示侯养，圖片也會(huì)設(shè)置成大banner。在以前的圖片輪播的代碼中澄干，一般以flash或frame框架顯示逛揩，文韜互聯(lián)在2012年接觸的一個(gè)網(wǎng)站柠傍，圖片輪播就是以flash顯示的。但發(fā)展至今辩稽，早已經(jīng)取消了flash來顯示圖片的設(shè)置惧笛。
取消的原因是隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，搜索引擎依舊不認(rèn)識(shí)flash要表達(dá)什么逞泄，同時(shí)瀏覽器在加載渲染頁面時(shí)患整，更喜歡最新的技術(shù)——HTML5。我們現(xiàn)在在設(shè)計(jì)圖片的過程中喷众，有兩條標(biāo)準(zhǔn)需要遵循：圖片質(zhì)量要好各谚，要清晰，同時(shí)圖片要表達(dá)的主題要突出到千。我們看到網(wǎng)站的圖片時(shí)昌渤，要能接受并且明白它要表達(dá)的意思。
現(xiàn)在絕大部分網(wǎng)頁中憔四，圖片的輪播都會(huì)有上一頁和下一頁的提示和操作膀息。可以讓我們選擇觀看不同的圖片了赵。同時(shí)潜支，不同的圖片，可能鏈接不同的內(nèi)容柿汛，這個(gè)也是可以設(shè)置的毁腿。
詳情頁面該如何布局設(shè)置?
一般我們會(huì)把內(nèi)容頁當(dāng)作最后一層頁面，也就是說在這一層頁面中苛茂，就沒有比它更深一層的內(nèi)容顯示了。那么鸠窗，在這一層頁面中妓羊，我們有幾個(gè)地方需要考慮：
增加關(guān)鍵詞之間的的關(guān)聯(lián)性
增加頁面上下頁的關(guān)聯(lián)性
擴(kuò)大用戶訪問的粘性
怎么理解增加關(guān)鍵詞之間的關(guān)聯(lián)性呢?比如當(dāng)前用戶訪問的頁面的關(guān)鍵詞是A時(shí)，一個(gè)網(wǎng)站的內(nèi)容很多稍计，會(huì)有其他的頁面的關(guān)鍵詞也是A躁绸，假設(shè)這兩篇文章有一定的關(guān)聯(lián)，可以適當(dāng)?shù)耐扑]這篇文章給用戶訪問臣嚣，以此來提高用戶的訪問體驗(yàn)净刮。調(diào)用代碼有幾種，其一為增加tag標(biāo)簽區(qū)域硅则，讓用戶點(diǎn)擊tag標(biāo)簽淹父，可以看到凡是網(wǎng)站中設(shè)置了關(guān)鍵詞為A的文章都有哪些;同時(shí)，在頁面中怎虫，可以增加關(guān)鍵詞相同或相似的文章顯示暑认，一般可以調(diào)用8篇比較合適困介。
怎么增加頁面上下也的關(guān)聯(lián)性呢?可以通過設(shè)置代碼的上一頁、下一頁蘸际，讓前端顯示的內(nèi)容中座哩，能調(diào)用到上一篇文章和下一篇文章;如果下一篇沒有文章了，那么自動(dòng)回到當(dāng)前文章所屬的欄目列表中粮彤。
在擴(kuò)大用戶訪問的粘性的調(diào)用中根穷，以上兩個(gè)操作是一種，同時(shí)导坟，我們可以增加其他文章調(diào)用屿良，比如一個(gè)月里點(diǎn)擊量最大的文章前10的文章調(diào)用、評(píng)論文章的前10調(diào)用等等乍迄。能有利于用戶獲取信息以及增加他的訪問體驗(yàn)的操作管引，都是可以嘗試而且是有必要的。我們終是是要明白一點(diǎn)闯两，搜索引擎存在的目的應(yīng)該是將能滿足用戶需求的優(yōu)質(zhì)內(nèi)容優(yōu)先推薦給用戶的褥伴。
