網站專題人建人愛 怎樣才能較快實現一個專題稿

仲介交易 HTTP://www.aliyun.com/zixun/aggregation/6858.html">SEO診斷 淘寶客 雲主機 技術大廳

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

專題通常都是要求時效性的，所以做專題首先講究速度，那麼我們怎樣才能較快的實現一個專題稿呢?下面讓我們具體的聊聊。

一、 專題類型：

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優點：1980.html">攝影作品或寫實作品支援高級壓縮，利用可變的壓縮比可以控制檔案大小，支援交錯(對於漸近式 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原創博文，轉載請注明出處，歡迎訂閱 )