.png?v=1647475200)
.jpg?v=1697597433)
什麼是切版?
切版這個詞聽起來好像很簡單，但又不是那麼容易理解。
我們可以從字面上先理解：切版，就是「切出版面」！
也就是對設計圖進行版面的切分，並使用程式碼編寫這些區塊(html)，以及各區塊的樣式(css)，將平面的靜態設計圖，轉化成瀏覽器可閱讀、使用者可互動操作的網站。
下面分別為大家介紹切版階段會處理的項目：
版面切分與設計
就大方向來說，網頁會有頁首（header）、頁尾（footer）、頁面內容（main），在設計圖上是一體的，到了切版階段就會各成一個區塊，內部也有各自不同的按鈕與功能。
小項目則是像目前你在看的這篇文章，會有標題、日期、作者、內文，以及右方側欄等等元素，它們都有各自的html特性（h1,h2,h3..等等是標題，可以讓瀏覽器知道它是這個頁面或區塊的標題）與css屬性（字體大小、字重、顏色等等）。
互動效果
舉例來說，我們官網右上方有一個 [聯絡我們] 的按鈕，試著將滑鼠移動到該處，看看發現了什麼？
沒錯！你會注意到按鈕的背景有一個圓形會隨著你指過去的時候展開來！
這個就是在切版的時候會進行的細節處理，其它包含點擊、頁面滾動效果等，在網頁上會進行到的互動操作，都是在切版階段完成的。
RWD
RWD的處理也是在切版時，透過編寫各項css規則來達到「跨瀏覽器、跨裝置皆能正常瀏覽」的目的。
例如大螢幕下的標題字體大小一定需要小於手機上瀏覽的字體大小、右側欄的內容在手機上會變成在下方，
還有很重要的一部份是：解決跨瀏覽器可能遇到的問題。
更多網站架設問題：網站建置4流程！快速瞭解建置前準備與費用重點，網站建置輕鬆做
結語
對一位前端工程師來說，切版是最家常便飯的事情，但其實中間隱含很多細節，例如設計圖上某一個區塊的圖片是否要區分成主圖與背景？
又例如產品列表中，某一段文字是來自於後端給予的資料，html內容如何安排？
還有許多議題都可能在這個網站架設的階段碰到，簡而言之，跨部門的溝通是非常重要的。