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

1、中規中矩型（變化的只是頭圖，不變的是內容的格局），如下圖所示：

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

3、搭配發揮型（只有一個頭圖），如下圖所示：注：①

二、理念原則：

1、復用原則：

如上圖所示，該模塊在隨手拍四季中都會出現，就需要我們將此模塊封裝好保留以來。常用的模塊歸類，以便日后復用，節省以后工作量提高工作效率。

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

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

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

三、構建方案：

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

1、規劃分類：
規劃：拿到設計稿后自上至下瀏覽一遍，瀏覽的時候就可以對這個頁面有初步的規劃，我們通常規劃成網格狀，如下圖所示：

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

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

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

3、測試交付：
模塊構建好之后就開始把模塊拼合到一起，成為一個成型的頁面，后續交付編輯填內容；做好的頁面交付給編輯進行內容的添加，頁面交付后要跟進，因為不是所有編輯都很了解代碼，所以要提前做好風險控制，比如：注釋做好，代碼要精簡。

4、上線維護：
編輯填好內容之后進行最后一次上線前的審核，優化一下細節，和設計稿截屏對一下像素，沒問題即可上線推廣；

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

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

注：②制作專題需要要重點考慮的幾個點：
標題欄處理：
1）、很多標題都是可復用的，這里要做靈活，最好能做到自適應寬度；
2）、要確定標題文字是否需要后續不斷修改,如果需要不斷修改要做成活字；

圖片處理：
1）、頭圖：
頭圖提倡應用jpg格式實現（注：②-①），
雖然原則上圖片盡量控制大小，但因為專題的周期和訪問量限制，再加設計師費了大量心血精雕細琢出來的頭圖不能因為質量影響美觀，通常頭圖原則是Firework導出品質為80~90較佳，Photoshop導出品質為70~80較佳。

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

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

3）、icon及button：
icon和button盡量使用css sprites技術，如此不僅可以減少圖片數量，降低請求書，還方便后續統一管理。
icon，button避免gif，為什么不用gif（注：②-②），提倡應用png格式實現（注：②-③），

注：
②–①jpg特點：jpg優點：攝影作品或寫實作品支持高級壓縮，利用可變的壓縮比可以控制文件大小，支持交錯（對于漸近式 jpg文件）。 廣泛支持Internet 標準。由于體積小，jpg在萬維網中被用來儲存和傳輸照片的格式；jpg缺點：有損耗壓縮會使原始圖片數據質量下降。 當您編輯和重新保存 jpg文件時，jpg會混合原始圖片數據的質量下降。這種下降是累積性的。 jpg不適用于所含顏色很少、具有大塊顏色相近的區域或亮度差異十分明顯的較簡單的圖片。

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

②-③png特點：png保留了gif的特點，還有gif沒有的特點：支持真彩色圖像，png缺點：不支持動畫，ie6不支持真彩色透明。

四、總結：

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

應用以上幾點，無論簡潔還是復雜的專題就很容易搭建成了。
有時候理解專題會有錯誤的理念：專題就那么回事，沒人看，應付應付過去了，其實不然，一個好的專題是營銷的開始、合作資源互換的入口；
一個專題的數據實例：感恩節活動：http://huati.weibo.com/z/thanksgiving2012/

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

來源：微博UDC