一個(gè)成功的網(wǎng)頁(yè)設(shè)計(jì)除了它出眾的內(nèi)容以外，還需要進(jìn)行網(wǎng)頁(yè)的版面設(shè)計(jì)以及動(dòng)畫設(shè)計(jì)。今天我們就來聊一聊網(wǎng)站設(shè)計(jì)中使用到的技術(shù)。

網(wǎng)頁(yè)制作前需要將美工給的設(shè)計(jì)圖進(jìn)行切片，所以在網(wǎng)頁(yè)設(shè)計(jì)中用到的第一個(gè)工具首選phototrap,而且photostrap的cs版本中還特意推出了網(wǎng)頁(yè)制作功能，可以將設(shè)計(jì)圖以定位的方式顯示在網(wǎng)頁(yè)中，這種方式比較簡(jiǎn)單，做成的頁(yè)面和設(shè)計(jì)圖上的頁(yè)面基本相同，但是頁(yè)面中存在大量的圖片和大量的定位屬性，在實(shí)際的網(wǎng)頁(yè)制作過程中比較難以改動(dòng)和二次開發(fā)。而大量的圖片又影響到了頁(yè)面的加載速度。所以不建議使用photostrap直接生成網(wǎng)頁(yè)。

將圖片切好后就開始著手對(duì)比設(shè)計(jì)圖中的各個(gè)元素的距離進(jìn)行頁(yè)面的開發(fā)了，在往常的頁(yè)面開發(fā)中最常用的還是網(wǎng)頁(yè)三劍客，用HTML來書寫頁(yè)面的DOM及內(nèi)容，CSS來定義DOM的樣式，JS來定義動(dòng)畫效果和必要的表單驗(yàn)證，有些時(shí)候還需要用js寫AJAX請(qǐng)求，來提升網(wǎng)頁(yè)與后臺(tái)的交互能力。有些復(fù)雜的頁(yè)面交互還得一些專門的后臺(tái)語(yǔ)言來完成。

在制作好頁(yè)面之后大體效果就已經(jīng)出來了，但是此時(shí)的網(wǎng)站的建設(shè)還沒有完成。想要完成網(wǎng)站的建設(shè)那肯定需要一個(gè)后臺(tái)管理系統(tǒng)呀！后臺(tái)管理系統(tǒng)的作用就是方便站長(zhǎng)在網(wǎng)頁(yè)中更新網(wǎng)站里的內(nèi)容，這些內(nèi)容通常會(huì)保存到數(shù)據(jù)庫(kù)里，所以最后還得需要建立一個(gè)數(shù)據(jù)庫(kù)并設(shè)置好表來存放數(shù)據(jù)。