給網(wǎng)站創(chuàng)建層疊化樣式需要注意的方方面面

時間：2022-07-07 01:18:01 | 來源：建站知識

時間：2022-07-07 01:18:01 來源：建站知識

制作網(wǎng)頁離不了CSS(層疊樣式表)，因為它是一種很好的網(wǎng)頁內(nèi)容定位方法，如果你在樣式表比較靠前的位置定義了某種全局元素的默認樣式屬性，那么這些設(shè)定屬性會被與之相關(guān)的子級元素所繼承，直到你為某些特定的元素添加了更加具體的樣式屬性。那么給給網(wǎng)站創(chuàng)建層疊化樣式需要注意哪些?

1.布局

頁面設(shè)計所使用的網(wǎng)格基本的布局情況、頁面模塊的定位規(guī)則等。你要對一些全局性的頁面元素的定位進行描述，還有相關(guān)的留白規(guī)則等。一些典型頁面的線框原型也要作為圖例出現(xiàn)在這部分內(nèi)容中。

2.文字排版

介紹網(wǎng)站所使用的文字排印方案，包括字體風(fēng)格、選取這些字體的理由等。這里還要通過一些具有代表性的具體圖示來介紹字體風(fēng)格與頁面上下文環(huán)境之間的關(guān)系。

3.圖片設(shè)定規(guī)則

包括配色方案、全局性的品牌圖片、品牌圖片的使用規(guī)則及約束等內(nèi)容。

4.導(dǎo)航調(diào)設(shè)置

全局主導(dǎo)航、二級導(dǎo)航、下拉菜單、分類詞條的文字鏈接等等，任何能夠幫助用戶在站點中進行導(dǎo)航操作的元素都可以歸納到這部分內(nèi)容中。從這里開始，我們就要逐漸進入細節(jié)層面了。導(dǎo)航元素在不同狀態(tài)下的鏈接色、背景色等屬性的定義也要在這里詳細的描述出來，使開發(fā)人員能夠一目了然。

5.HTML元素

一些典型元素的HTML標(biāo)簽使用規(guī)則，包括標(biāo)題元素(h1,h2,h3...)、有序列表、無序列表、按鈕、表單、字段集(fieldset)、表格等。這份規(guī)則清單不需要事無巨細，但要盡量使其具有較高的綜合性和代表性;必要的時候可以與前端開發(fā)人員配合完成這部份內(nèi)容。

6.媒體文件

包括圖片、音頻或視頻文件的使用情景、尺寸限制、顯示比例、緩存設(shè)置等方面的規(guī)則。

7.界面協(xié)調(diào)性畫布

將以上這些內(nèi)容匯總到一張大畫布中。所謂畫布，可以是圖片格式，當(dāng)然最好是HTML頁面的形式，因為這樣可以更加靈活的承載文案和HTML或CSS代碼方面的內(nèi)容，使前端開發(fā)人員可以直接根據(jù)頁面元素的設(shè)計規(guī)則來使用對應(yīng)的代碼片段。另外，將所有涉及到視覺風(fēng)格的內(nèi)容都放在同一張畫布中，也可以使設(shè)計師能夠很容易的對頁面元素在整體上的協(xié)調(diào)性進行檢視。

8.其他資源

這部分內(nèi)容所涉及到的對象基本都屬于細節(jié)層面了，那些無法歸入以上七個類別的、定制化程度比較高的設(shè)計元素都可以放在這里。例如，在某些特定的情況下不同模塊的呈現(xiàn)方式應(yīng)該發(fā)生怎樣的變化，側(cè)邊欄的廣告規(guī)則，搜索出錯的處理方式，評論列表的呈現(xiàn)規(guī)則，照片集的瀏覽方式等等。通常，在這一部分內(nèi)容中，我們可以摸索并歸納出一些復(fù)用性較高的設(shè)計模式。

只有將這些內(nèi)容很好的搭配，我們做出的網(wǎng)站才會給人一種耳目一新的良好感覺，同樣提高了客戶的體驗度。這對我們的網(wǎng)站是至關(guān)重要的，以上內(nèi)容希望給瀏覽者帶來一點啟發(fā)，感謝大家的瀏覽，該內(nèi)容有()提供分享。