切版是前端工程師必須要具備的技能，需要把設計師針對使用者需求所完成的設計稿，透過程式讓它在網頁中實際呈現出來。切版是很重要的，如果少了這個過程在網頁中會沒有畫面，使用者也就沒有辦法獲取我們想提供的資訊和服務。

在切版經驗還不足時，拿到設計稿切版和開發時，很可能會發生以下幾種情況：

1. 看到內容的豐富或版面的多元程度，認為自己不能完成，而過度緊張。
2. 有些區塊的功能和版面設計沒實作過，認為做不到。而否定自己的能力。
3. 因時間壓力或一時的興奮，立馬撰寫程式碼。切版到一半，才發現可能無法實作出來。
4. 實作發現當前方式無法運作，在不清楚原因的情況下，就到網路上查找方法，無腦逐一套用直到可行為止。

開發前的心態準備與前置作業

確認開發目標
決定目標後，首先要全部打量一遍需求，從大方向到小細節一一確認哪些是需要完成的。如果等到開發完後才發現有少功能或效果需要增加，有些直接修改一下即可，但有些是需要調整架構，就會讓開發效率降低。

將大問題切成小問題
有時開發所設定的目標太大或太複雜，可能會不知道如何下手。如果將大區塊切成數多個小區塊來思考，再一一擊破，問題就不難了，例如說，在切割的過程中，發現許多重複性的區塊，我們就能知道在程式碼、命名上，有很多能重複使用的地方。這對於後續開發上的效率就能有所提升。

查找資料
以繁體中文為例，可參考以下

• 使用的套件或框架，例如：Bootstrap、Element、Materialize
• 使用的語言，例如：HTML 、CSS、JavaScript
• 使用的語法或組件，例如：Positioning absolute、input 元素、彈跳視窗元件
• 想要達成的目標，例如：背景圖片滿版、實作客製化 radio button
• 遇到的問題，例如：圖片溢出、視窗無法開啟、點擊沒有效果
• 特別想要參考的網站或類型，例如：CSS-tricks、MDN、範例、心得

什麼是切版?

切版，顧名思義是「切出版面」，也就是對設計圖進行版面的切分，並使用程式碼編寫這些區塊，及各區塊的樣(css)，將平面的靜態設計圖，轉化成瀏覽器可閱讀、使用者可互動操作的網站。

版面切分與設計

網頁會有頁首、頁尾、頁面內容，在設計圖上是一體的，到了切版階段就會各成一個區塊，內部也有各自不同的按鈕與功能。小項目是像標題、日期、作者、內文，以及右方側欄等等元素，它們都有各自的html特性，可以讓瀏覽器知道它是這個頁面或區塊的標題，與css屬性，字體大小、字重、顏色等等。

互動效果

是在切版時會進行的細節處理，包含點擊、頁面滾動效果等，在網頁上會進行到的互動操作，都是在切版階段完成的。

RWD

RWD的處理是在切版時，透過編寫各項css規則來達到跨瀏覽器、跨裝置皆能正常瀏覽的目的。例如大螢幕下的標題字體大小一定需要小於手機上瀏覽的字體大小、右側欄的內容在手機上會變成在下方，還有很重要的一部份是：解決跨瀏覽器可能遇到的問題。