web前端靜態(tài)網(wǎng)頁(yè)的制作流程

web前端靜態(tài)網(wǎng)頁(yè)的制作流程：制作靜態(tài)網(wǎng)頁(yè)效果圖——將制作好的靜態(tài)網(wǎng)頁(yè)效果圖進(jìn)行PS切片——使用HTML5和CSS3進(jìn)行網(wǎng)頁(yè)布局——使用JS代碼制作特效——優(yōu)化網(wǎng)頁(yè)代碼，刪除冗余的文件。

第一步：制作一個(gè)靜態(tài)網(wǎng)頁(yè)之前，我們需要先制作一個(gè)網(wǎng)頁(yè)1:1的效果圖，又稱靜態(tài)網(wǎng)頁(yè)效果圖。制作靜態(tài)網(wǎng)頁(yè)效果圖可以使用Photoshop CS4中文版制作。

第二步：將制作好的靜態(tài)網(wǎng)頁(yè)效果圖進(jìn)行PS切片。通過(guò)PS切片可將一張大的效果圖切成多張小圖片，以后可直接用在網(wǎng)頁(yè)上。

第三步：使用HTML5和CSS3進(jìn)行網(wǎng)頁(yè)布局，網(wǎng)頁(yè)布局遵從“先大后小，先外后里”的原則，先將整個(gè)靜態(tài)網(wǎng)頁(yè)大結(jié)構(gòu)寫出來(lái)，然后再按照效果圖寫各個(gè)部分的小版塊。(這個(gè)部分需要有代碼基礎(chǔ)，可先學(xué)習(xí)HTML入門教程)

第四步：制作網(wǎng)頁(yè)上的特效，例如輪播圖，需要使用JS代碼制作。再將PS切片出來(lái)的小圖片通過(guò)代碼插入網(wǎng)頁(yè)中，并且使用測(cè)試數(shù)據(jù)填充各個(gè)小版塊，達(dá)到與效果圖一樣的效果。

第五步：優(yōu)化網(wǎng)頁(yè)代碼，刪除冗余的文件，整理出一個(gè)簡(jiǎn)潔的靜態(tài)網(wǎng)頁(yè)，這樣靜態(tài)網(wǎng)頁(yè)就制作好了。

靜態(tài)網(wǎng)頁(yè)與動(dòng)態(tài)網(wǎng)頁(yè)的區(qū)別

1、網(wǎng)頁(yè)制作語(yǔ)言上的區(qū)別

靜態(tài)網(wǎng)頁(yè)使用超文本標(biāo)記語(yǔ)言(標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用)，也就是頂部會(huì)標(biāo)記一個(gè)html。

動(dòng)態(tài)網(wǎng)頁(yè)使用語(yǔ)言：超文本標(biāo)記語(yǔ)言+ASP或超文本標(biāo)記語(yǔ)言+PHP或超文本標(biāo)記語(yǔ)言+JSP等。

2、程序運(yùn)行端口的差異

靜態(tài)頁(yè)面則在客戶端就能直接運(yùn)行，網(wǎng)頁(yè)數(shù)據(jù)和信息，除非人為去更改，否則不會(huì)有變化。

動(dòng)態(tài)網(wǎng)頁(yè)需要在服務(wù)器端運(yùn)行，直接調(diào)用服務(wù)器數(shù)據(jù)，根據(jù)不同用戶，不同的行為返回不同的網(wǎng)頁(yè)和數(shù)據(jù)。

3、關(guān)于兩者區(qū)別簡(jiǎn)單的直接描述

(1)、靜態(tài)頁(yè)面是設(shè)計(jì)者把頁(yè)面上所有內(nèi)容都設(shè)定好、做死了，然后放在空間里，不管是誰(shuí)在任何時(shí)候看到的頁(yè)面內(nèi)容都是一樣的，一成不變(除非手動(dòng)修改頁(yè)面內(nèi)容)。靜態(tài)html頁(yè)面文件，可以直接用本地的瀏覽器打開。

(2)、動(dòng)態(tài)頁(yè)面的內(nèi)容一般都是依靠服務(wù)器端的程序來(lái)生成的，不同人、不同時(shí)候訪問(wèn)頁(yè)面，顯示的內(nèi)容都可能不同。網(wǎng)頁(yè)設(shè)計(jì)者在寫好服務(wù)器端的頁(yè)面程序后，不需要手工控制，頁(yè)面內(nèi)容會(huì)按照頁(yè)面程序的安排自動(dòng)更改變換。