響應(yīng)式網(wǎng)頁設(shè)計 事實上已經(jīng)是一個的標(biāo)準(zhǔn)。很多人仍然以為網(wǎng)頁設(shè)計是平面設(shè)計師的工作，仍然停留在千禧年代初那個 Dreamwaver 盛行的年代。今天網(wǎng)站網(wǎng)頁設(shè)計的要求是：

· 快。不單是網(wǎng)站載入速度要快，更新內(nèi)容亦要快。這不僅僅是關(guān)乎用戶體驗。 亦關(guān)乎網(wǎng)站排名。

· 網(wǎng)頁制作要使用方便，更新內(nèi)容不用依賴其他人或特殊工具。

· 響應(yīng)式網(wǎng)頁設(shè)計適合移動設(shè)備。今天更多的人使用移動設(shè)備而不是臺式計算機(jī)來瀏覽網(wǎng)站。

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

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

· SEO?優(yōu)化結(jié)構(gòu)， 并支持最新 CSS 3 和 HTML 5 技術(shù)。

· 可以添加插件 Plug-ins 擴(kuò)展功能配合業(yè)務(wù)流程。

· 穩(wěn)定可抗黑客入侵。

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

什么是度身訂造？

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

坊間所謂響應(yīng)式網(wǎng)頁設(shè)計其實是什么？

響應(yīng)式網(wǎng)頁設(shè)計 RWD 包括以下特性：

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

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

· 采用媒體查詢 Media Queries 語法查詢設(shè)備顯示的特性，最常見的是瀏覽器的寬度，進(jìn)而使用不同的CSS風(fēng)格規(guī)則。

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

標(biāo)準(zhǔn)化的缺點(diǎn)是多了一些限制。標(biāo)準(zhǔn)化的做法適合絕大部份用戶。但確實未必附合有一些大企業(yè)的嚴(yán)格要求。

什么是網(wǎng)頁模板？

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

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

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

網(wǎng)站流程設(shè)計

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

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

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

頁面編輯 – Visual Editor

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

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

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

本文標(biāo)題：響應(yīng)式網(wǎng)頁設(shè)計中的量身定制和網(wǎng)頁模板
標(biāo)題網(wǎng)址：http://www.rwnh.cn/news31/101831.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、網(wǎng)站策劃、用戶體驗、品牌網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計公司、網(wǎng)站設(shè)計公司

廣告

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