[ 網頁設計教程 ] 公用樣式模板的設計製作- 其他教程 - 骨子愛創意

教學主題: 公用樣式模板的設計製作

大家好!! 小編今天來和大家分享關於 其他教程中的網頁設計教程教學

今天的這個教學主題是: 公用樣式模板的設計製作

這教學的重點為這幾點 [ 模板,樣式,公用,進行,使用,語義,網頁,需要,可以,布局, ]

希望你可以從這幾點中領悟到修圖的精華

本文重點

這個話題是應騰訊ISD同仁之邀在WebReBuild三周年交流會上做的主題分享。由於臨場等原因有些問題當時沒有講明白，回來后按原有思路形成了一篇小論文，對其中一些問題進行了進一步闡述。

這個話題是應騰訊ISD同仁之邀在WebReBuild三周年交流會上做的主題分享。由於臨場等原因有些問題當時沒有講明白，回來后按原有思路形成了一篇小論文，對其中一些問題進行了進一步闡述。現場有位同行朋友提出了對使用表現性語義的質疑，當時沒有給出讓他滿意的答覆，因此文章中花了較多的篇幅來探討語義性有關的問題，算是對那位朋友的解答。

進入論壇參與討論: http://www.missyuan.com/viewthread.php?tid=419265

目錄

一、  公用樣式模板的“公用”的含義：       
          1.       能夠應用在不同功能的web系統上（用在哪？）       
          2.       提供給不同專業背景的人使用（給誰用？）       
二、  公用樣式模板的設計要求       
          1.       公用模板設計需要具備抽象性、代表性       
               (1).  整體規劃頁面層次邏輯       
                        1)       h1,h2,h3,h4,h5,h6 的整體規劃       
                        2)       清晰的導航菜單和麵包屑(crumb)標識       
               (2).  具有代表性的頁面布局結構
               (3).  具有代表性的頁面元素
                        1)       Logo、網頁大標題
                        2)       導航菜單
                        3)       麵包屑導航
                        4)       數據表格、文本內容       
                        5)       數據錄入表單
                        6)       各類備註、報錯、提示信息
                        7)       交互UI組件：切換標籤、下拉菜單和模態彈窗等
          2.       使用方便，易於自學       
               (1).  簡單易記的命名規則       
                        1)       結構語義性：class=”newsList”  wrapper、nav
                        2)       表現語義性：class=”textLeft”   cRed、f14px
               (2).  簡單易理解的嵌套層次
                        1)       布局最好可視化，能通過 IDE 操作，局部運用table       
                        2)       table布局的弊端：不符語義性、解析慢、重用性
          3.       設計風格統一，保持一致性
          4.       合理拆分樣式，巧妙組合運用
               (1).  樣式拆分組合的理論依據
                        1)       class=“cRed  textLeft ”
                        2)       樣式的繼承覆蓋原則，選擇器優先級算法 

一、 公用樣式模板的“公用”的含義

1. 能夠應用在不同功能的web系統上(用在哪?)

企業的web開發團隊除了開發一些在公共平台運營為公司用戶服務的web產品，也會開發一些供公司內部團隊使用的信息管理系統(IMS，Information Management System)，用以優化流程，提高辦公效率。例如企業ERP(Enterprise Resource Planning)、人事管理、工作流程管理、銷售管理、倉庫資源管理等系統。這類系統主要供內部部門使用，功能繁雜，注重信息的組織和功能的實現，對前台界面的個性化要求不高，不必要每個系統都重新設計製作界面，提供一套公用樣式模板可以有效地提高開發效率。

2. 提供給不同專業背景的人使用(給誰用?)

有一類web頁面時效性很強，需要非常快速地製作上線，例如一些新聞專題;另外有些頁面總量很大，但結構相似，例如上面提到的IMS系統的很多不同的功能模塊。這類頁面由於時間限制或者根本沒有必要由專業的重構人員來精細製作，寫好每一個頁面每一個標籤的代碼，所以也有必要提供一套使用方便的公用樣式模板，供內容編輯、或者後台開發人員直接使用。

二、 公用樣式模板的設計要求

能夠應用在多個web系統上要求

1. 公用模板設計需要具備抽象性、代表性

(1). 整體規劃頁面層次邏輯

1)h1,h2,h3,h4,h5,h6 的整體規劃

一本書的目錄部分，往往能很清晰地體現出這本書的結構層次，第一章第一節第一小節，次序井然。好的網頁也應該有清晰的層次邏輯，網頁大標題、次級標題、段落內容等，層層展開。(X)HTML網頁標記語言本身也給我們提供了標識網頁層次的標籤：h1/h2/h3/h4/h5/h6。在公用模板中要整體規劃好網頁內容的結構層次，並恰當地使用這些標籤來體現。在禁用CSS的情況下，可以從瀏覽器默認樣式方便地看到網頁的結構層次。

2)清晰的導航菜單和麵包屑(crumb)標識

在做好上面合理地規劃h(n)標識的情況下，導航菜單和麵包屑導航在網頁上能更加直觀地體現網頁的層次，也是增強網頁可用性必須具備的網頁元素。

(2). 具有代表性的頁面布局結構

網頁結構布局也有一定的範式，往往包括頁頭、導航菜單、主體內容和頁腳。遵循這些最普遍的布局原則才能最大程度保證公用模板的通用性。

(3). 具有代表性的頁面元素

1)Logo、網頁大標題

Logo具有品牌標識作用。大標題最直接地告訴用戶網頁/系統的內容/用途，但不是必備的，有些網頁只有logo和副標題，因此設計時網頁大標題可以作為可選項目。

2)導航菜單

導航菜單的重要作用不再強調。需要注意的是，在設計模板菜單樣式的時候，要有標識當前項的樣式，以及需要特彆強調的進行高亮顯示的項目樣式。還要考慮多級菜單對子菜單進行下拉或者摺疊顯示的情況。設計的時候考慮周全，在需要的時候可以方便地進行拓展。

3)麵包屑導航

不多強調，相當於網頁上的GPS。

4)數據表格、文本內容

這類元素往往是網頁的主體內容，用以呈現格式化的信息。在設計製作數據表格的表頭、單元格樣式的時候，需要考慮根據不同的數據形式，樣式可能也會不同。比如較長的文本內容可能需要在單元格里左對齊，而數字類型數據，為了直觀地比較數位大小，通常需要右對齊。有時候數據內容比較多，需要分頁進行顯示，所以也有必要提供一個具有良好用戶體驗的分頁樣式。

5)數據錄入表單

用以錄入數據的表單組件：單選框、複選框、下拉框、文本框等等。可以根據需要對這類網頁原生的交互組件的默認外觀進行統一的初始化。如果對交互效果要求比較高，需要設置鼠標、鍵盤事件與表單項進行交互時的不同樣式(如 onmouseover、onclick、onfocus等)。由於IE6-對偽類選擇器(hover、focus)支持不完善，製作這些效果的時候要使用腳本進行一些兼容處理。另外，還有一些填寫表單時的注意事項等提示類信息，以及對錄入數據進行驗證出錯時的錯誤提示信息，這些信息通常會顯示在表單旁邊，驗證錯誤時還需要將出錯的表單項進行高亮顯示，這些樣式在公用模板里都需要進行設計。

6)各類備註、報錯、提示信息

包括上面提到的附加在元素旁邊顯示的表單填寫提示及驗證報錯，和一些對內容進行解釋的備註說明等，還有一些可能會以單獨模塊出現，例如用戶操作成功、失敗或者是登陸超時等提示信息。

7)交互UI組件：切換標籤、下拉菜單和模態彈窗等

除了網頁表單控件以及瀏覽器提供的消息組件(alert、confirm、prompt)，經常還需要用到一些自定義的交互組件，例如切換標籤、下拉菜單，以及考慮到易用性問題而對瀏覽器消息組件進行封裝的模態彈窗等(例如lightbox、thickbox)，可以選擇最常用組件集成到公用模板中。

能夠供不同專業背景的人員使用則要求：

2. 使用方便，易於自學

(1). 簡單易記的命名規則

1)結構語義性：class=”newsList” wrapper、nav

2)表現語義性：class=”textLeft” cRed、f14px

具有語義的內容是最容易理解記憶的。有一種記憶法就是使用一些有一定意義的聯想來增強對陌生內容的記憶。公用模板中可以使用具有簡明語義的名稱來對選擇符進行命名，這樣，非專業做重構開發的模板使用者，不必具有專業的CSS方面的知識或者是閱讀很複雜的說明文檔即可從命名上對模板中的選擇符的用法進行理解，掌握了其中的規律，就可以非常快速地自學以達到熟練運用。

Web標準的所謂的語義性，主要是指(X)THML標籤上的語義，強調要按照標籤元素最初的定義去使用他們;同時提倡要使用具有結構屬性語義的標籤，而避免使用具有表現語義的標籤。例如使用h(n)來標識各級標題，ol用來建立一個有序列表，li來標識列表項;對於small、b、i、blink、center這類含有元素視覺表現語義的標籤，則要盡量避免使用。事實上除了(X)HTML標籤名上固定的語義，還可以通過一些標籤自定義的屬性值來增強語義。例如後來出現的微格式(Microformat)，就是基於class屬性值的語義性的應用。

由於id的唯一性，使用id選擇符的樣式在同一個頁面中不能重用。為了保證定義樣式的可重用性，通常需要使用類定義(class)作為選擇符。在對class屬性值進行語義化命名的時候，嚴格遵循web標準結構與表現分離準則的人可能會排斥使用表現性語義，他們認為一旦需要通過改變CSS定義來更新元素的外觀，類選擇符所含有的表現語義就會與它修改後的實際外觀不符合。例如設置左對齊並且類命名為“textLeft”的樣式，如果把CSS定義更改為右對齊，則類選擇器的命名語義與它的實際內容並不符合。首先要承認這種考慮是非常細緻的。但實際項目的開發往往非常複雜，要綜合考慮多方面需求，很難在某一方面達到理想狀態。在一個大型系統的諸多頁面中，要將所有使用到樣式的元素都用某個結構特徵來進行描述，從我的個人經驗來看這是非常傷神的一件事。這些具有細枝末節的結構語義的樣式的通用性也很成問題——有些元素只是使用了相同的樣式，比如相同的字體、顏色等，但他們代表的結構屬性卻並不相同，如果選擇器全部以結構語義來進行命名，很多外觀相同但結構語義不同的樣式就要重複定義了。例如，我們在如下兩個地方都用到了紅色字體，一個是報錯警示信息，一個是地方是股票上漲點數，如果全部用語義命名方式，就需要分別命名一個“error”和一個“strengthen”的類定義，並且都設置屬性“color:red”，這個“color:red”就在這兩個地方重複定義了。如果有一個以表現語義命名的類“cRed”並設置表現語義所對應的紅色樣式，就可以在這兩個地方同時使用“cRed”這個類了。另外還需要強調的是，我們設計製作的是“公用樣式模板”，已經是經過整體規劃高度抽象化了的具有代表性的元素樣式，應該保持已有CSS的穩固，在需求有變的情況下寧願去改變(X)HTML端的選擇器掛鈎，而不應該隨意改變CSS中已定義好的屬性。在必要的地方使用表現語義進行命名也是有一定合理性的。

所以，任何固有的規則都會有兩面性，需要我們根據實際情況去權衡利弊。在對可變需求有一定的預見性的情況下，靈活地打破規則書寫更易維護代碼這也是開發人員的一項專業素質。“遵守規範的一個重要標準，就是知道何時打破它，並大膽地打破。”不應該死守教條，這樣只會畫地為牢自築樊籬。只有擱置爭議，綜合運用，才能在項目需求、開發成本、維護成本的多方博弈中取得均衡。

(2). 簡單易理解的嵌套層次

1)布局最好可視化，能通過 IDE 操作，局部運用table

2)table布局的弊端：不符語義性、解析慢、重用性

學業啟蒙時代習字本上的方格子，辦黑板報也先用三角尺來畫格子，這些少年時的記憶都直觀地給了我們這樣的印象，規整的格子是來排版布局的最好輔助。互聯網發展初期的網頁也是用表格(table)來進行布局的，這個時期的Web設計人員直接在IDE的可視化視圖下就可以完成頁面的排版布局。隨着技術的深入發展，table布局方式的弊端也逐步暴露出來——語義性差不利於搜索引擎，整個table全部加載完才顯示出來導致瀏覽器解析緩慢，代碼不夠精簡冗餘度高等。網頁設計製作人員開始使用更專業的方式來進行網頁布局——(X)HTML來標記數據組織結構，CSS設置外觀樣式。這種新的方式克服了table布局時代的一些缺陷，也對網頁製作人員有了更高的要求，需要專業的代碼編寫知識甚至一些複雜的技巧。比如，為實現三列等高自適應的布局，有些重構人員通過運用複雜的標籤嵌套，配合一些奇異的CSS hack方式來最終實現效果。

在提供給其他專業背景人員使用的公用樣式模板中，我們也推薦使用CSS進行布局，但那些複雜的嵌套方式則是不可取的。這對於使用者來說不易理解，也難以使用。簡單易理解的嵌套層次是必要的，甚至，為了給使用者帶來方便，我們還可以對web標準進行一些折衷——鑒於table布局的直觀和在IDE可視化視圖裡可以直接進行操作，我們可以在局部範圍使用一些小的table來實現多列的布局。如下圖例：

整體框架布局採用CSS控制，在局部的小模塊里，使用table(圖中紅色部分所示，實際運用中邊框不可見)來實現多列的布局，其他地方，web標準推薦使用什麼就採用什麼標籤。這樣，一定程度保持了語義性(實際上，頁面語義性標籤對於搜索引擎的引導作用會越來越小，隨着搜索引擎越來越智能化，分詞技術、數據挖掘技術的進一步發展，搜索引擎完全可以脫離頁面標記而直接從文本內容來分析頁面。語義化更大的作用將會體現在方便數據共享(例如RSS、微格式等)和利於代碼維護。個人觀點，接受有風險，參考須謹慎)，分散的小表格克服了瀏覽器對於大的table解析緩慢的弊端，這些僅供實現多列布局的table也不會影響代碼重用而造成代碼冗餘。

對於一些網頁元素，根據其特點揚長避短靈活地運用，才能最大程度地裨益我們的項目。

設計開發人員的專業水準

3. 設計風格統一，保持一致性

設計師主導着網頁的視覺風格，他們充分發揮聰明才智使用戶界面好用又好看。但任何創造性的工作，也都需要遵循一定的範式。書法家潑墨揮毫筆走龍蛇，看似漫不經心，實則章法井然法度森然，鈐印題款都有講究;音樂家作曲，靈感噴涌如滔滔江水綿綿不絕，音符的組織卻必須符合韻律節拍;詩人情感迸發，花間一壺酒，筆下三千言，但好的詩作往往也需要講求平仄格律。設計師在設計模板樣式的時候，也要有一定規範。對於字體、字號，常用顏色，以及模塊的邊框、間距等，要有整體規劃，保持一致性，同一元素在不同頁面的風格保持統一。只有這樣，負責代碼編寫的重構人員才能對元素樣式進行抽象化，提煉出可以重用的部分編寫高效代碼。這些規範一定是設計師與重構開發人員在長期的交流探討中逐步完善的，有一定跨專業的知識對於兩者的合作將大有益處——請永遠記住，你不是一個人在戰鬥。

4. 合理拆分樣式，巧妙組合運用

網頁模板的設計風格確定了，剩下就要靠頁面工程師來把設計圖稿實現成精良的網頁了。考量網頁重構品質的各項指標之中，包括瀏覽器兼容性、代碼的易擴展和可重用性。要做好這些，必須對抽象出來的頁面元素樣式進行合理拆分，區分哪些樣式可以作為全局公用，哪些需局部定義，並運用樣式的繼承覆蓋原則進行優化。

(1). 樣式拆分組合的理論依據

class=“cRed textLeft ”class屬性可以賦值為多個類選擇器名稱，中間用空格分隔，這多個類定義的樣式可以同時作用於標籤元素。依據這一特性，可以在CSS里定義時對樣式進行拆分打散，在(X)HTML里調用樣式類時再將其組合使用。例如，有些常用的字號和顏色可以單獨進行全局定義，在具體模塊的類“newsList”中定義其他除字體和顏色之外的樣式屬性，用class調用樣式的時候再組合多個選擇器進行賦值 class=“newsList f14px cRed”。這樣，顏色和字號屬性在全局範圍內就可以多次使用，提高了樣式的復用率，鬆散耦合的樣式也更利於擴展。而且，同一屬性進行最少次數的定義，一定程度也優化了CSS性能。

樣式的繼承覆蓋原則，選擇器優先級算法在對樣式進行全局公用或局部特殊定義時，考慮最多的是樣式的繼承覆蓋原則。對於最普遍的樣式進行全局定義，在需要個性化定義的地方再對全局樣式進行覆蓋，可以很大地提高CSS效率。這正是辯證唯物主義關於矛盾普遍性和特殊性關係的典型實踐。例如，為改善CSS的瀏覽器兼容性而定義的reset文件作為全局樣式，將元素在各個瀏覽器中表現不同的默認樣式進行了初始化，在頁面的具體模塊中需要個性定製元素樣式的地方再對初始化的樣式進行覆蓋。要有效地利用繼承和覆蓋原則，關於選擇器優先級的算法必須熟練掌握。id選擇器、類選擇器、標籤選擇器以及行內樣式的優先級權重是不一樣的，特別是這些選擇器進行組合運用的時候。

本文從公用樣式模板的設計製作為例，詳解了一個項目從實際需求到技術要求的分析過程，以需求為主導，不放棄專業追求的理念貫徹其中，未涉及具體的技術實現細節，旨在提供一種思考問題的思路，希望能給大家提供借鑒。

看完小編分享的教學之後 是不是對網頁設計教程中的其他教程教學更熟悉了呢?

希望我們所介紹的 公用樣式模板的設計製作 這教學會喜歡

文章標題: 骨子愛創意- 公用樣式模板的設計製作–轉載請註明來源處

本教學分類為網頁設計教程中的 其他教程相關教學

文章相關關鍵字為: 模板,樣式,公用,進行,使用,語義,網頁,需要,可以,布局,

本文永久連結 :公用樣式模板的設計製作

本文轉載自 :VIA