專題是一種內(nèi)容聚合，有共同性的文章組成的集合體，呈現(xiàn)出信息量大、令人印象深刻的特點(diǎn)，將給讀者在瀏覽這一信息時(shí)得到全方位的認(rèn)知，從而取得讀者給予信任和認(rèn)可，在讀者的認(rèn)知中建立起權(quán)威——百度百科

1、中規(guī)中矩型（變化的只是頭圖，不變的是內(nèi)容的格局），如下圖所示：

2、自由奔放型（變化的不止是頭圖，內(nèi)容呈現(xiàn)上也比較隨意），如下圖所示：

3、搭配發(fā)揮型（只有一個(gè)頭圖），如下圖所示：注：①

二、理念原則：

1、復(fù)用原則：

如上圖所示，該模塊在隨手拍四季中都會(huì)出現(xiàn)，就需要我們將此模塊封裝好保留以來(lái)。常用的模塊歸類，以便日后復(fù)用，節(jié)省以后工作量提高工作效率。

2、舍棄原則：
盡量多的應(yīng)用Css3技術(shù)，這樣做可以避免使用過多的圖片影響頁(yè)面打開速度，還能減少flash的開發(fā)，當(dāng)然這樣做的缺點(diǎn)是會(huì)造成頁(yè)面中css體積較大，低版本瀏覽器顯示效果不佳等；

如上圖所示，通過css區(qū)別對(duì)待，高版本瀏覽器顯示如左圖，低版本瀏覽器顯示如右圖。

3、時(shí)間原則：
通常需求都是一系列，比如：微攝影春夏秋冬、微小說一二三屆、年底重大節(jié)假日活動(dòng)系列；
這就要求我們有提前預(yù)判的能力，及早與需求方溝通確認(rèn)時(shí)間，盡早做好人員技術(shù)儲(chǔ)備。

三、構(gòu)建方案：

上述類型的專題，制作流程都相近，專題和產(chǎn)品是一樣的，大部分都是按塊區(qū)分，只不過專題更具視覺沖擊力，布局更隨意。
常規(guī)專題，構(gòu)建步驟通常如下：

1、規(guī)劃分類：
規(guī)劃：拿到設(shè)計(jì)稿后自上至下瀏覽一遍，瀏覽的時(shí)候就可以對(duì)這個(gè)頁(yè)面有初步的規(guī)劃，我們通常規(guī)劃成網(wǎng)格狀，如下圖所示：

分類：專題都是通過專題后臺(tái)搭建而成，后臺(tái)庫(kù)提供了一部分封裝好的模塊，所以先找出后臺(tái)已有的模塊，這些模塊直接在后臺(tái)中編輯發(fā)布即可；

如下圖所示：(公用模塊大約20多個(gè)，包括：發(fā)布器、feed、圖片列表（120、180）、加關(guān)注、焦點(diǎn)圖、視頻等）

2、模塊構(gòu)建：
公用的挑出來(lái)后，開始構(gòu)建‘非常規(guī)’模塊，特殊的模塊就是特定專題特定的內(nèi)容，這部分需要頁(yè)面工程師構(gòu)建完成；
做模塊的原則要求代碼盡量做到低耦合，高內(nèi)聚（將頁(yè)面中的元素看成相對(duì)獨(dú)立但又彼此聯(lián)系的小零件，設(shè)想這些小零件可以隨時(shí)被拖放到頁(yè)面中的任意位置而不影響其內(nèi)部元素的正常運(yùn)行）；模塊css的書寫原則要求本專題特有的標(biāo)志開頭，例如：教師節(jié)–對(duì)應(yīng)的線上域名為teacher，css就最好以t或teacher開頭，譬如.t_top{}或.teacher__top{}，這樣做為了規(guī)避css命名沖突的風(fēng)險(xiǎn)；
專題構(gòu)建時(shí)有些需要重點(diǎn)考慮（注：②），

3、測(cè)試交付：
模塊構(gòu)建好之后就開始把模塊拼合到一起，成為一個(gè)成型的頁(yè)面，后續(xù)交付編輯填內(nèi)容；做好的頁(yè)面交付給編輯進(jìn)行內(nèi)容的添加，頁(yè)面交付后要跟進(jìn)，因?yàn)椴皇撬芯庉嫸己芰私獯a，所以要提前做好風(fēng)險(xiǎn)控制，比如：注釋做好，代碼要精簡(jiǎn)。

4、上線維護(hù)：
編輯填好內(nèi)容之后進(jìn)行最后一次上線前的審核，優(yōu)化一下細(xì)節(jié)，和設(shè)計(jì)稿截屏對(duì)一下像素，沒問題即可上線推廣；

解釋：
注：①搭配發(fā)揮型快捷構(gòu)建：
很多情況下，設(shè)計(jì)師排期不能提供整稿設(shè)計(jì)圖，只能提供一個(gè)頭圖，這就要頁(yè)面構(gòu)建協(xié)助編輯快速完成一個(gè)專題的搭建，依據(jù)頭圖調(diào)頁(yè)面背景色，內(nèi)容區(qū)域的背景色，標(biāo)題背景色及標(biāo)題文字色，文字鏈接色，文字色等，通常根據(jù)以往設(shè)計(jì)師的設(shè)計(jì)理念，按照下面的顏色順序搭配不至于偏差很多：
標(biāo)題背景色>內(nèi)容區(qū)域的背景色>頁(yè)面背景色；
主鏈接色>次鏈接色>標(biāo)題文字色；
文字色（文字色通常為灰色）。

根據(jù)上述理念，快速搭建出的專題如下圖所示：

注：②制作專題需要要重點(diǎn)考慮的幾個(gè)點(diǎn)：
標(biāo)題欄處理：
1）、很多標(biāo)題都是可復(fù)用的，這里要做靈活，最好能做到自適應(yīng)寬度；
2）、要確定標(biāo)題文字是否需要后續(xù)不斷修改,如果需要不斷修改要做成活字；

圖片處理：
1）、頭圖：
頭圖提倡應(yīng)用jpg格式實(shí)現(xiàn)（注：②-①），
雖然原則上圖片盡量控制大小，但因?yàn)閷ｎ}的周期和訪問量限制，再加設(shè)計(jì)師費(fèi)了大量心血精雕細(xì)琢出來(lái)的頭圖不能因?yàn)橘|(zhì)量影響美觀，通常頭圖原則是Firework導(dǎo)出品質(zhì)為80~90較佳，Photoshop導(dǎo)出品質(zhì)為70~80較佳。

通常情況下，一個(gè)像素不是特別高的圖片Photoshop70的品質(zhì)大約等于Firework85，
Photoshop80的品質(zhì)大約等于Firework90（具體還要看圖片導(dǎo)出大小而定）。

2）、背景：
內(nèi)容背景建議用純色，如果純色不能滿足建議盡量用png鋪背景；

3）、icon及button：
icon和button盡量使用css sprites技術(shù)，如此不僅可以減少圖片數(shù)量，降低請(qǐng)求書，還方便后續(xù)統(tǒng)一管理。
icon，button避免gif，為什么不用gif（注：②-②），提倡應(yīng)用png格式實(shí)現(xiàn)（注：②-③），

注：
②–①jpg特點(diǎn)：jpg優(yōu)點(diǎn)：攝影作品或?qū)憣?shí)作品支持高級(jí)壓縮，利用可變的壓縮比可以控制文件大小，支持交錯(cuò)（對(duì)于漸近式 jpg文件）。 廣泛支持Internet 標(biāo)準(zhǔn)。由于體積小，jpg在萬(wàn)維網(wǎng)中被用來(lái)儲(chǔ)存和傳輸照片的格式；jpg缺點(diǎn)：有損耗壓縮會(huì)使原始圖片數(shù)據(jù)質(zhì)量下降。 當(dāng)您編輯和重新保存 jpg文件時(shí)，jpg會(huì)混合原始圖片數(shù)據(jù)的質(zhì)量下降。這種下降是累積性的。 jpg不適用于所含顏色很少、具有大塊顏色相近的區(qū)域或亮度差異十分明顯的較簡(jiǎn)單的圖片。

②-②gif特點(diǎn)：流式讀/寫性能、逐次逼近顯示、透明性、無(wú)損壓縮等，gif特有的特點(diǎn)：在一個(gè)gif文件中可以存多幅彩色圖像，如果把存于一個(gè)文件中的多幅圖像數(shù)據(jù)逐幅讀出并顯示到屏幕上，就是一種最簡(jiǎn)單的動(dòng)畫，gif缺點(diǎn)：只能顯示256色，色彩過多會(huì)顯示效果較差。

②-③png特點(diǎn)：png保留了gif的特點(diǎn)，還有g(shù)if沒有的特點(diǎn)：支持真彩色圖像，png缺點(diǎn)：不支持動(dòng)畫，ie6不支持真彩色透明。

四、總結(jié)：

時(shí)間緊情況下，制作專題時(shí)間黃金比應(yīng)該是：
規(guī)劃分類:模塊構(gòu)建:拼頁(yè)面:測(cè)試上線
1:4:1:2
假如：預(yù)估需要8個(gè)小時(shí)完成，最好的方案是模塊分類1小時(shí)，構(gòu)建4小時(shí)，拼頁(yè)面1小時(shí)，測(cè)試2小時(shí)，前6小時(shí)完成頁(yè)面可交付編輯進(jìn)行內(nèi)容添加，在編輯添加內(nèi)容的同時(shí)測(cè)試可以同步實(shí)施。

應(yīng)用以上幾點(diǎn)，無(wú)論簡(jiǎn)潔還是復(fù)雜的專題就很容易搭建成了。
有時(shí)候理解專題會(huì)有錯(cuò)誤的理念：專題就那么回事，沒人看，應(yīng)付應(yīng)付過去了，其實(shí)不然，一個(gè)好的專題是營(yíng)銷的開始、合作資源互換的入口；
一個(gè)專題的數(shù)據(jù)實(shí)例：感恩節(jié)活動(dòng)：http://huati.weibo.com/z/thanksgiving2012/

專題囊括吃喝玩樂在一起，小專題，大樂趣，用心去建，你感覺還會(huì)相信愛的！

來(lái)源：微博UDC