你是否曾在閱讀網頁時，對於網頁設計的美感感到驚奇？
你是否曾好奇這些美麗的頁面是怎麼被產出的？
你是否曾拉動瀏覽器視窗，發現網頁會隨寬度變化出不同樣式風格？
什麼是 HTML/CSS 呢？
網頁設計在進入工程的範疇時，通常最常聽到的名詞就是 HTML/CSS！其實它們兩者在技術上都代表著不同的電腦語言工具，用來分別處理「網頁呈現」上的不同事情；它們也同時代表著電腦中不同的檔案類型，而電腦或手機的瀏覽器則是透過網路，下載並讀取 HTML 與 CSS 的檔案後，經過背後一系列複雜運算、讀取後，才會產生出我們眼前這一頁頁優雅的網站內容喔（如圖一）！
圖一：瀏覽器產出頁面的過程
HTML
接下來我們就來介紹什麼是 HTML！
圖二：HTML 的程式片段示意。
HTML 又被稱為 超文本標記語言，主要是利用各種被公定的標記來定義文本內容的架構，使得文本可以從純文字，轉變成具有結構意義的檔案，進而使瀏覽器可以在讀取 HTML 檔案的時候，將文字內容以有層次的結構呈現在畫面上。
而這邊提到的結構意義雖然感覺很抽象，其實只要把它們想成是一般文章的標題、段落、表單、表格、圖片等等的內容結構就好唷！瀏覽器也需要知道這些文章內容的結構定義，來繪製出呈現在瀏覽器裡的頁面！這就需要透過 HTML ，來讓瀏覽器了解並解讀我們人類所寫的文章內容。
CSS
那既然有了結構，為啥我們還需要 CSS ?
讓我們來設想一下：假設今天你是一位作文小老師，現在剛下課，國文老師要求你下課要收回全班學生在這一節作文課所撰寫的作文！在這一張張收回的作文內容中，你看到了如 HTML 中的標題、段落，但卻又能夠在這一張張作文中感受到它們的不同，為啥！？
因為你發現，有人用黑筆、有人用藍筆、有人字寫得大、有人寫得小，有人作文紙弄得皺皺的、有人卻平整乾淨。這些其實都充分表現了「樣式」與「風格」的特性！在瀏覽網頁時，網頁中的設計風格樣式的概念也跟這些作文紙的風格如出一徹！
在前端工程師實作網頁的過程中，也會針對設計師的風格設計進行對應的樣式風格撰寫，這時候前端工程師就會拿出撰寫樣式語言的壓箱寶 – CSS。
圖三：CSS 的程式片段示意。
CSS 又被稱為階層樣式表，瀏覽器呈現 HTML 內容後，CSS 就能夠賦予這些內容獨特的樣式！ 瀏覽器便是在讀取 CSS 檔後，搖身一變！成為不折不扣的畫家，將頁面上文字段落加上字的間距、加入美美的字體、改變典雅的顏色、更換優美的背景色等等說不完的美感實現！
而在 HTML / CSS 中，我們也能夠為每個內容結構段落進行命名，來區分不同內容的類別。如下圖圖四中，可以看見在 HTML 與 CSS 中都有對應的元素命名如：.my-header、.my-content，而 HTML/CSS 便是透過這些類別的命名產生文本與樣式之間的連結，瀏覽器進而能透過這樣的關聯建立，來賦予這些 HTML 內容獨特的 CSS 樣式！呈現出最終的頁面風格出來：）
圖四：HTML/CSS 在瀏覽器處理後，會產生具有內容與樣式頁面，上圖下半區為頁面的結果呈現（點擊 這裡 到 Codepen 上瀏覽）。
CSS 教學語法入門：認識階層樣式表與Box model 介紹
等等，說那麼多技術，那 HTML/CSS 到底跟哪個職位有關啊？
所以，什麼是前端網頁設計？
「沒錯～ 歡迎進入網頁前端工程師的結界！！」
旁白：「前端工程師其實很簡單，就是在『工程師』三個字前面加上『前端』兩個字，就可以結束這回合…」（大誤）
在前端工程師眼中的網頁「設計」，其實跟一般的平面設計師、網頁設計師所認知的「設計」不太一樣，前端工程師不會像一般設計師一樣埋首在繪圖軟體裡的圖層中揮灑視覺才華，而是會埋頭在各位可能曾經聽過的 HTML/CSS 電腦語言之深海幽谷中漫遊取材，並且「將設計師們設計出的網頁畫面『實現』到瀏覽器的頁面上」。
沒錯！這就是前端工程師的宗旨。而「前端」兩個字，主要就是要表達在工程開發的面向上比較貼近終端使用者介面的開發、處理而得名，所以前端工程師的工作其實可以說是既理性又感性的結合：透過 HTML/CSS 語言理性地將設計實現於網頁畫面上，並且感性地詮釋與臨摹設計師的美感理念！
前端工程網頁設計該了解的三大面向
前端工程的養成之路上，主要有三個面向值得好好把握：
- 文本內容與 HTML 標籤的關聯建立
- 掌握 CSS 切版學習的概念架構
- 介面動態掌握
掌握切版學習的概念架構
學習 CSS 對於初學者來說，有時會深覺缺乏方向與架構，通常都只能從片面性的小切版練習中，去體會各種屬性之間的樣式在畫面上的作用呈現，並且自己也需要花時間，再去從這些瑣碎的小練習中學到的屬性中，去理解其他屬性值的設定所造成的不同畫面效果，可以說是偏向探索式地去挖深與探究。
雖然有這樣的初學困擾，但其實在 CSS 樣式語言的學習上是有脈絡可循的唷！學習架構的脈絡本質其實就在於嘗試建立架構的過程，前端在開發樣式的脈絡，或甚至是對於程式的撰寫架構上，很多時候會導入類似「降維打擊」的概念，其中最重要的就是要將複雜的目標進行適度的拆分後並一一攻破！
當前端工程師接到一個頁面的需求設計稿時，通常會開啟「血輪眼」模式！將頁面中的各種區塊以類別、層級、功能性進行適度的降維拆分，以一般的頁面為例，它的拆分結果可能如下：
從上述的架構中，其實就能夠推導出一些頁面在樣式上的層級脈絡：
從上面這樣的脈絡轉換，你或許就能稍微體會如何「由大而小、由外而內」地來針對頁面進行降維打擊的效果，也因此可以更有架構地藉由這樣的脈絡來學習 CSS 的各種屬性語法。你也能夠很快遞將這樣的概念套用到其他屬性的學習上唷！
這也是為什麼在 CSS 學習上，「從做中學」是個很重要的學習途徑，因為在架構頁面 CSS 樣式的脈絡與我們在閱讀頁面的的脈絡是如出一徹的概念過程，無形之中也有很多關聯性存在，只是我們習慣而不自知而已！
如果你現在正覺得 「CSS 樣式好多… 不知從何下手…」的狀態，不妨嘗試從 Pinterest 上找各種圖卡式的設計 進行練習，並且將設計中的各種元素利用上述歸納出的樣式等級，來進行設計上的拆分，然後再開始進行實作練習。
並且在這歸納樣式的脈絡中，不斷去擴展學習新的 CSS 樣式屬性、歸納這些屬性的樣式等級、嘗試記憶不同屬性值的作用變化，相信練習一陣子後，你會昇華到另外一個境界，並且更有脈絡地（甚至是更內化地）去拆解設計稿的畫面！
另外，在學習這些 CSS 屬性語法時，很重要的一點是要先掌握當前這個屬性在瀏覽器的「預設情況」會如何呈現？理解之後再往下理解、學習不同的屬性值變化唷！絕對不要捨近求遠，學了很多屬性值卻不知道哪一個設定是預設畫面設定！這樣可能會讓你在撰寫樣式時，因為沒有掌握預設設定而寫了更多樣式屬性來達成樣式本身預設就能做到的效果！不僅增加了很多不必要的屬性撰寫，也增加了維護上的困難。
文案內容與 HTML 標籤的關聯建立
網頁絕對缺少不了的就是文案內容，在閱讀文案的時候，你一定會知道什麼是標題、什麼是副標題、主文在哪，或甚至是段落的切分在哪？這些對於文案內容認知的過程都會跟 HTML 標籤的定義有一定程度的相關性與連結度，也因此在學習 HTML 標籤時，最重要的就是去理解標籤本身所要表達的內容意義。
我們也能夠根據上一段提到的頁面架構拆分去分類頁面上不同區塊的意義，在 HTML 中，很多的標籤命名其實就明顯透露出它想要對應的文案內容，如
- <header> 標籤可能拿來包覆頁面標頭區塊的內容
- <footer> 可以拿來包覆頁尾區塊的內容
- <ul> 可以用來包覆清單式的內容架構
- <nav> 可以用來包覆具有導覽意義的內容
從這些例子中，其實你已經可以知道， HTML 之所以會有這麼多標籤，其實就是為了要使文案內容能夠在進入瀏覽器的頁面時，透過適當的 HTML 標籤包覆，來讓文案內容在整體頁面上產生更精準的頁面架構意義。
如果能夠做好這一點，將適當的文案利用適當的 HTML 標籤定義，會使頁面更有調理，對於網頁優化（SEO）的項目指標上，也能夠立下很好的基礎，進而幫助搜尋引擎的爬蟲更有效地理解我們頁面內容！是不是很有趣呢？！：）
介面動態掌握
前端工程師在從靜態樣式開發跨足到動態樣式開發時，是會有一定的陣痛期！你開始考慮到需要動態的區塊在畫面上要從哪邊開始動？怎麼動？怎麼結束動態？
你也會開始考慮到區塊之間的圖層會不會因為動態的變化而產生一些顯示上的副作用，例如：某個區塊因為有動態而覆蓋到其它區塊的顯示，或是子區塊的移動超出母區塊的邊界，等等令人白眼的問題XD。
但是希望在前端邁進的勇士們要放寬心去面對這些挑戰，一旦攻破這些挑戰後，你將會有更細膩且成熟的的預設思維去面對每個迎面而來的頁面設計，並且在尚未進到切版階段前，就能適度地提出可能遇到的開發限制，或是考量到設計師對於動態需求上的開發疑慮，進一步就能進入開發前與開發團隊進行溝通與修正！
總之，永遠要記得，只要嘗試去理解 CSS 屬性與切版上的邊界限制（即技術上能夠做到的範圍），並適度地與設計溝通，基本上就沒有切不出的頁面設計！
身為前端工程師，一定少不了在這樣的翹翹板之間去嘗試溝通並取得平衡；並且只要在靜態頁面設計上牽涉到動態時，身為前端的我們，就要更小心翼翼、亦步亦趨的審視自己的實作細節，畢竟動的東西相對於靜的來說，它牽涉到畫面的占比就更大，會影響到的介面內容就更多！
—-
