Close

Not a member yet? Register now and get started.

lock and key

Sign in to your account.

Account Login

Forgot your password?

Web前端開發設計概要說明

網頁元素可分成三大部份:結構 ()、樣式 ()、行為 (JavaScript)。前端開發的理想目標,就是要盡量將這三個部份各自分離獨立。透過CSS Layout的設計理念,可以將樣式從結構中抽離出來,透過非侵入式Unobtrusive JavaScript的設計準則,還有jQuery的輔助,可以將行為從結構及樣式中獨立出來。而其中CSS Layout可以說是實現分離語義結構、外觀樣式、表現行為,並進而達成Web模組化設計的基石。

網頁元素(css.html.JS)

Web前端技術的設計原則為,在運用CSS Layout及JavaScript時,要保持無侵入性的設計概念 (Unobtrusive JavaScript),並採用漸進增強 (Progressive Enhancement)、平穩退化 (Graceful Degradation) 的設計準則。在把JS關閉的狀況下,網頁不能有任何的跑版或錯誤。在把CSS關閉的狀況下,頁面仍然可以呈現正確而精簡的語義結構。再更好的狀況是,還要預留可以運作的退路,優雅地處理降級的問題。並能考量及掌握搜尋引擎最佳化 (SEO)、可使用性 (Usability)、可訪問性 (Accessibility)、親和力、無障礙…等進階設計議題。 而採用CSS Layout相較於一般Table Layout的好處在哪裡呢?

  1. 簡化HTML結構 (50%)。
  2. 分離HTML結構及CSS樣式。
  3. 有更大的彈性去整合JavaScript技術 (結構、樣式、行為)。
  4. 提高代碼的利用效率。
  5. 更強大的外觀呈現控制能力。
  6. 集中樣式管理,有助於全站保持視覺的一致性。
  7. 改善網站的可訪問性Accessibility (親和力、無障礙、不同設備兼容)。
  8. 改善網站的可使用性Usability (友善列印)。
  9. 加快頁面的下載速度。
  10. 節省頻寬費用。
  11. 更利於搜尋引擎最佳化SEO。
  12. 更利於網站後期的更新及維護 (效率、代價)。
  13. 使用W3C所推動的Web標準。
  14. 更確保能夠相容於現代及未來的各式瀏覽器。
  15. 提昇專業技能及職場競爭力 (門檻、降低失業風險)。

參考資料:

Leave a Reply

*