響應式網頁設計 事實上已經是一個的標準。很多人仍然以為網頁設計是平面設計師的工作，仍然停留在千禧年代初那個 Dreamwaver 盛行的年代。今天網站網頁設計的要求是：

· 快。不單是網站載入速度要快，更新內容亦要快。這不僅僅是關乎用戶體驗。 亦關乎網站排名。

· 網頁制作要使用方便，更新內容不用依賴其他人或特殊工具。

· 響應式網頁設計適合移動設備。今天更多的人使用移動設備而不是臺式計算機來瀏覽網站。

· 兼容不同瀏覽器 (Chrome, Firefox, Internet Explorer, Safari)。

· 整合不同渠道 (Facebook, Instagram, Tweeter …) 作網上推廣。

· SEO?優化結構， 并支持最新 CSS 3 和 HTML 5 技術。

· 可以添加插件 Plug-ins 擴展功能配合業務流程。

· 穩定可抗黑客入侵。

以上加起來都不是一個二個甚致三四個專家可以獨力完成的事情。而是要利用集體智慧，開放源碼的方式經過好幾年的努力才能令其完備，很像 Android 系統，有人牽頭但并無權利。

什么是度身訂造？

度身訂造必需經過幾個階段。第一階段就是分析客戶需求 User Requirements 生成一份功能規格 Functional Specification. 中間至少不免要一兩會面商談。功能規格是作為報價用的。在香港一般不能向潛在客戶收取準備功能規格的費用。當雙方同意功能規格并簽訂合同，第二階段就是從功能規格再細致描述為可執行的系統規格 System Specification, 規范例如外觀，互動效果等等，中間又要多次會面討論。系統做出來后又要進行測試驗收 (這里正規的做法是需要推弄出一個測試計劃 Test plan)，少不免又要幾次會面。你我都知道 IT 人工在那個水平，所以就算非常非常簡單的度身訂造網站亦要十萬八萬元，而這未必不是一般中小企可以負擔。就算可以負擔，亦未必有人力資源可以管理這樣的項目。解決方案提供商隨便拋幾個專業名詞或用一些技術細節耍你，你也無可奈何？只可以選擇接受付錢買貴嘢或項目爛尾。

坊間所謂響應式網頁設計其實是什么？

響應式網頁設計 RWD 包括以下特性：

· 采用流體網格 fluid grid 要求頁面元素大小以百分比的相對單位，而不是像像素或點的絕對單位。

· 要求圖像以相對單位來確定大小，而不是像像素或點的絕對單位，以防止它們顯示在其包含的元素之外。例如：在HTML 中，style 是 width=”100%” 而不是 width=”650px”

· 采用媒體查詢 Media Queries 語法查詢設備顯示的特性，最常見的是瀏覽器的寬度，進而使用不同的CSS風格規則。

大部分網頁設計都是基于開于源碼 Open Source 的系統（如：Wordpress，Joomla）上稍為修改。解決方案提供商喜歡對外行客戶說成度身訂造設計，原因是可以抬高價錢。過去十年網站設計之所以普及是由于采用開放技術和將很多設計細節標準化，標準化就可以采用部件完成，因此能夠降低成本。例如：網站頁面始終包含共同頁眉和頁腳，側邊欄等等。公司徽標在左側或右側或居中等等：

標準化的缺點是多了一些限制。標準化的做法適合絕大部份用戶。但確實未必附合有一些大企業的嚴格要求。

什么是網頁模板？

幾年前網頁模板比較粗糙，只可以改動顏色，字體，頁眉頁腳等等。今天由于需求愈來愈多，市場不斷增長，網頁模板除了處理外觀外，亦不斷增加和整合其他功能（如：聯系表格，論壇），更多彈性令一般設計外觀無需透過程序改動完成。

由于網頁模板是以授權形式發售，購買者愈多，開發者愈有利，所以網頁模板開發商會不斷增加功能，升級模板版本，解決兼容性問題，確保模板的質素。如果網站是由小開發商度身訂做，很難想象網站交貨以后還會進行升級維護，因為下一個客戶的要求很可能不一樣，重用的機會很小。

專業模板采用最新技術，例如 HTML 5 和 CSS 3. 專業模板一般提供界面讓用戶變更外觀，例如調較顏式，字體大小等等。有一些較細致的地方，模板沒有提供預設界面調較時，你可以通過自定義 CSS 來處理。例如：網站中文字體。中文字體由于體積大不能以 webfont 形式發布。所以網站使用中文字體會設定為常用系統（例如：Windows, Android 等等）字體。需要利用自定義 CSS 設定：

網站流程設計

另一種網站設計是關乎流程設計，常見流程往往需要加入其他插件來擴展功能，例如：在課程內容頁內容中間插入一張報名表格，瀏覽者需要填寫一些資料再按 “提交” 張表格發送給網站管理員。

這中間牽涉一些表格程序的羅輯處理，一般的造法是加入插件 (聯絡表格）或模板提供短代碼 shortcode, 例如：

當網頁被訪問時短代碼被譯出成為完整代碼支援所代表的功能。只有當要求的流程或功能是非特別無法以現有插件完成時才考慮自己開發。

頁面編輯 – Visual Editor

以前 CMS 頁面編輯是利用類似 Word 的編輯器，一般文字，圖片，超鏈接等等的處理沒有太大問題。但當應用在響應式布局 Responsive Layout 以配合移動設備如手機和平板計算機，較復雜的內容需要配合 Cascade StyleSheet (CSS) 的 class 才能達致響應式效果。

舉例：一個三列表格在移動設備下只能縮小，但太小就看不清楚內容。但如果采用 column 來定義，當板面闊度太窄，第二第三列可以自動調整滑到下一行。但 column 不是標準 HTML 語法，雖然模板以 CSS 形式配合，這時你只可以切換到 HTML code view 模式加入短代碼并設定 class. 就算懂 HTML 代碼的人，編輯時亦很費時失事。

高階模板的解決方案是加入 Visual Editor, 讓用戶以切積木形式加入內容，然后再定義每條積木的內容。積木之間的相對位置可以透過拖放 drag and drop 來調位。編輯員無需懂 html 代碼或短代碼。就算普通用戶無需設計亦可以造出精美頁面。

本文標題：響應式網頁設計中的量身定制和網頁模板
標題網址：http://m.newbst.com/news31/101831.html

成都網站建設公司_創新互聯，為您提供Google、網站策劃、用戶體驗、品牌網站建設、網頁設計公司、網站設計公司

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯