Category: CSS Layout設計規範

073 月

CSS設計規範[1]-樣式術語與CSS目錄索引

為了能夠迅速的瞭解整個css的結構，我們會在每一支css前面加上Table of Contents，並依照樣式的階層做成樹狀結構的目錄，如果底下還有分支的，就在前方加個”+”，底下沒有分支的，就在前方加個”=”，這樣可以讓整個結構更清楚，也有助於我們搜尋。以下是table of contents的例子。
  • CSS
  • Posted by admin  Posted on 07 3 月  0 Comments
  • Read More
013 月

檔案名稱規範

靜態頁面都是統一放在專案目錄底下，那要怎樣跟工程師來溝通檔案的歸類及檔名呢？所以在頁面檔名上，我們有一套命名的規則。命名規則分為四個部份：目錄名稱-主要名稱_屬性名稱(備註).副檔名。
  • Posted by admin  Posted on 01 3 月  0 Comments
  • Read More
082 月

CSS樣式架構[4] 模組套件型 (Module)

模組套件型樣式是指分頁模組樣式pager.css、表單模組樣式form.css、或該頁面有套用到什麼jQuery的效果，伴隨該 jQuery所產生的css，這些css就都放在資料夾「c」或「css」底下的「module」裡。jQuery所產生的css會以jquery開頭後面再加上該plugin的名稱，以便識別。
  • CSS, jQuery
  • Posted by admin  Posted on 08 2 月  0 Comments
  • Read More
241 月

CSS樣式架構[2] 全站共用型 (Common)：重置樣式與框架樣式

重置樣式 (reset.css)為了統一所有瀏覽器內建值，避免hack寫不完，所以每一頁一定要引入重置樣式reset.css，現在最多人使用的reset有兩套，一套是Eric Meyer的版本，一套是YUI (Yahoo UI Library) 的版本。框架樣式 (layout.css)這支css的用途是在定義網頁的架構樣式，所以一些像font、color…等與結構無關的樣式設定，應該要避免設定在這支css內。
  • CSS, Eric Meyer, YUI
  • Posted by admin  Posted on 24 1 月  0 Comments
  • Read More
241 月

CSS樣式架構[1] 共用型、模組型、頁面型

所有css都只用link的方式引入，其他的import、style embed都不使用，import的引入時間會是在所有用link方式的css之後，所以為了避免版面會在一開始的時候跑版，所以import的方法也都一律不使用，in-line style的方式則保留給JS運用。並統一集中在同一個資料夾內，資料夾名稱視專案的需求而定，不過通常不超出「c」、「css」這兩個名稱。
  • CSS
  • Posted by admin  Posted on 24 1 月  0 Comments
  • Read More
191 月

CSS Layout 的好處

常常有人會問到 CSS Layout 到底有什麼可取之處， 一樣的網頁設計工作，為何不採取相對單純許多的傳統 Table Layout 作法， 反而要選擇一個較不直覺 (其實是設計習慣問題)， 技術成份較煩雜，學習曲線較高的 CSS Layout...
  • CSS
  • Posted by admin  Posted on 19 1 月  0 Comments
  • Read More
171 月

HTML設計規範[6] 考量結構順序與佈局，提升網站SEO優化

搜尋引擎最佳化 (SEO)、可使用性 (Usability)、可訪問性 (Accessibility)，這些都是我們在做CSS Layout的目標。例如：當視覺給的版應當是文字呈現的標題，但卻是用一張圖表示時，這時候就可以用CSS的技巧 (Image Replacement) 來把文字標題替換成圖片。或者像是表單設計加上label來讓使用者更方便…等等方式。
  • HTML, SEO
  • Posted by admin  Posted on 17 1 月  0 Comments
  • Read More
Next Page
Previous Page