什麼是切版?

總經理 Vince Wu

2023-01-11
    Article outline

切版這個詞聽起來好像很簡單,但又不是那麼容易理解。

 

我們可以從字面上先理解:切版,就是「切出版面」!

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

 

下面分別為大家介紹切版階段會處理的項目:

 

版面切分與設計

就大方向來說,網頁會有頁首(header)、頁尾(footer)、頁面內容(main),在設計圖上是一體的,到了切版階段就會各成一個區塊,內部也有各自不同的按鈕與功能。

小項目則是像目前你在看的這篇文章,會有標題、日期、作者、內文,以及右方側欄等等元素,它們都有各自的html特性(h1,h2,h3..等等是標題,可以讓瀏覽器知道它是這個頁面或區塊的標題)與css屬性(字體大小、字重、顏色等等)。

 

互動效果

舉例來說,我們官網右上方有一個 [聯絡我們] 的按鈕,試著將滑鼠移動到該處,看看發現了什麼?

沒錯!你會注意到按鈕的背景有一個圓形會隨著你指過去的時候展開來!

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

 

RWD

RWD的處理也是在切版時,透過編寫各項css規則來達到「跨瀏覽器、跨裝置皆能正常瀏覽」的目的。

例如大螢幕下的標題字體大小一定需要小於手機上瀏覽的字體大小、右側欄的內容在手機上會變成在下方,

還有很重要的一部份是:解決跨瀏覽器可能遇到的問題。

 

更多網站架設問題:網站建置4流程!快速瞭解建置前準備與費用重點,網站建置輕鬆做

 

結語

對一位前端工程師來說,切版是最家常便飯的事情,但其實中間隱含很多細節,例如設計圖上某一個區塊的圖片是否要區分成主圖與背景?

又例如產品列表中,某一段文字是來自於後端給予的資料,html內容如何安排?

 

還有許多議題都可能在這個網站架設的階段碰到,簡而言之,跨部門的溝通是非常重要的。


Other Articles