什麼是網頁切版
網站製作必知 》什麼是網頁切版？瞭解網頁切版的製作項目有哪些？｜天矽網頁設計
在製作網站時，常常會聽到設計師或專案人員跟客戶說，「視覺風格確認完畢，接下來要進行網頁切版囉!」。那麼，網頁切版代表的意思是什麼呢？包含的功用或前端程式語言為哪些？本篇文章將進行詳細說明!
什麼是網頁切版
切版是網頁製作常說的詞語，簡單的說，切版指的就是依設計師規劃的視覺設計稿，實際將網頁版型製作出，原本在設計稿可能看不出的效果，切版時就是將效果製作出，例如：當滑鼠游標移到按鈕上時，按鈕會有改變色彩的效果。
▲ 滑鼠尚未移到按鈕上 vs 滑鼠移到按鈕上
在切版此階段，設計師或前端工程師會透過前端程式語言，將其它網頁製作時會有的更多互動效果或色彩，進行妥善的安排與規劃，在下個小節，我們將解說：進行網頁切版時，實際會有的內容有哪些。
網頁切版的製作項目
一個網頁製作完成，只要是任何於前台可以看到的，例如：首頁Banner輪播、最新消息、產品介紹等相關之視覺設計，皆屬於「切版」的範疇。
「切版」是網頁前端的一部分，主要透過HTML、CSS、JavaScript這三個技能，將原本的網站設計稿，變成實際可以與使用者互動的效果，及色彩的搭配。如此一來，使用者在瀏覽網站時，便能產生良好的使用體驗。至於HTML、CSS、JavaScript是什麼呢？
(1)HTML
全名Hypertext Markup Language，主要是撐起一個網站的基礎(就好像種植物時，一定需要有土壤的概念)。能定義網頁上的區塊，例如：頁首(header)、頁尾(footer)、網頁內容(main)，每個區塊都會有各自對應的HTML屬性。
▲ 網頁上的區塊 : header、main、footer
(2)CSS
全名Cascading Style Sheets，指網頁製作時需設計的外觀、樣式、字體大小等，(如果一樣用種植做為比喻的話，花盆就像是CSS，因花盆可以選擇不同顏色、大小)。
CSS可以更仔細處理網站製作的色彩、字體、字體大小、字體粗細，讓網頁整體視覺看起來更美觀、閱讀上更舒適。以下列出幾個常見的CSS屬性與說明，CSS的屬性有許多種，如果有興趣瞭解更多CSS的屬性功能，可參考以下延伸文章!
| CSS屬性 | 屬性文字說明 | Sample |
|
background |
背景設定 | |
|
background-color |
背景色彩設定 |
background-color:blue; |
|
font-family |
字體設定 | |
|
font-size |
字體尺寸設定 |
font-size:12px; |
|
color |
文字色彩設定 |
color:#ffc7d7; |
|
font-weight |
文字粗細設定 |
font-weight:normal; |
(3) JavaScript
簡稱JS，主要可讓網頁產生互動效果，使網頁變得更活潑，例如：滑鼠移到圖片時出現滑動效果、文字淡出或淡入，以下列出幾個常見JavaScript能做出的互動效果：
常見互動效果1 -> 點擊按鈕、懸停 : 使用者若將滑鼠游標移到圖片或文字上，會出現新的效果。
常見互動效果2 -> 文字或圖片淡出或淡入 : 進到網頁的第一瞬間，文字或圖片有淡入效果。
▲圖片淡入效果(以Pay4U案為例)
常見互動效果3 -> 內容摺疊效果 : 可將內容區塊進行摺疊，如想觀看詳細內容，可再展開，常應用於FAQ。
▲內容摺疊效果(以科傳案為例)