前端工程師的必備技能『切版』

什麼是切版？

切版是前端工程師必備的技能。講簡單一點，切版就是把根據設計師的設計稿，透過程式讓他實際出現。 網頁設計師或前端工程師根據UI/UX設計師的畫面設計，把網頁劃分成不同區塊並用程式碼來實現的過程。即使沒有設計師，我們也可以遵循一些基本原則來切版。例如，通常會把網頁分成幾個主要區域：header（頂端列）、nav（導覽列）、body（內容區）、aside（側邊欄）和footer（頁底區)。未來需要修改某一區域時，就可以直接在相應的區塊中編寫程式碼。

切版難易？

切版其實很講經驗。要單純劃分區塊並不難，但即使是兩個工程師在切相同區塊時，也可能會用不同的方法。這些不同的方法會影響後續的功能擴展，比如功能的新增難度、頁面圖層是否會互相覆蓋等問題。

切版入門：Html和CSS

基本Html標籤跟CSS屬性的用法都一定要去熟記了解，就如同沒有學ㄅㄆㄇㄈ，發音就會有困難，基本功都不太熟練，是沒辦法切出一個好的網頁的喔！ 那就來介紹一下html和css吧!

HTML

HTML 是一種用來建構網頁的標記語言而非程式，可以想像網頁就像一頁文件，而文件內會有標題、內文、圖片、頁尾等元素。HTML 是告訴瀏覽器網頁上有哪些標題？標題放在哪裡？圖片在哪裡等。不同的元素會用標籤 <> 來表示，比如標題用 h1，網頁內容用 body，圖片用 img 等。大部分標籤都有開頭和結尾，這樣網頁就能知道哪些文字屬於“標題”。

CSS

透過 CSS，你可以自訂網頁的字體、顏色、排版方式（橫排或直排），甚至加上動畫效果。此外，CSS 最重要的一點是能做出 RWD（響應式網頁設計），讓網頁在各種尺寸的裝置上都能有合適的瀏覽效果。它也能用來建立布局，比如把原本單欄的文字內容分成主要內容和包含相關資訊的側邊欄。CSS 甚至可以用來製作動畫果。以上這些是就是切版基本的入門介紹，切版其實也是一門大學問，需要不斷地去練習精進自己，才會成為一個厲害的前端工程師。