web前端靜態網頁的制作流程：制作靜態網頁效果圖——將制作好的靜態網頁效果圖進行PS切片——使用HTML5和CSS3進行網頁布局——使用JS代碼制作特效——優化網頁代碼，刪除冗余的文件。

第一步：制作一個靜態網頁之前，我們需要先制作一個網頁1:1的效果圖，又稱靜態網頁效果圖。制作靜態網頁效果圖可以使用Photoshop CS4中文版制作。

第二步：將制作好的靜態網頁效果圖進行PS切片。通過PS切片可將一張大的效果圖切成多張小圖片，以后可直接用在網頁上。

第三步：使用HTML5和CSS3進行網頁布局，網頁布局遵從“先大后小，先外后里”的原則，先將整個靜態網頁大結構寫出來，然后再按照效果圖寫各個部分的小版塊。(這個部分需要有代碼基礎，可先學習HTML入門教程)

第四步：制作網頁上的特效，例如輪播圖，需要使用JS代碼制作。再將PS切片出來的小圖片通過代碼插入網頁中，并且使用測試數據填充各個小版塊，達到與效果圖一樣的效果。

第五步：優化網頁代碼，刪除冗余的文件，整理出一個簡潔的靜態網頁，這樣靜態網頁就制作好了。

靜態網頁與動態網頁的區別

1、網頁制作語言上的區別

靜態網頁使用超文本標記語言(標準通用標記語言的一個應用)，也就是頂部會標記一個html。

動態網頁使用語言：超文本標記語言+ASP或超文本標記語言+PHP或超文本標記語言+JSP等。

2、程序運行端口的差異

靜態頁面則在客戶端就能直接運行，網頁數據和信息，除非人為去更改，否則不會有變化。

動態網頁需要在服務器端運行，直接調用服務器數據，根據不同用戶，不同的行為返回不同的網頁和數據。

3、關于兩者區別簡單的直接描述

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

(2)、動態頁面的內容一般都是依靠服務器端的程序來生成的，不同人、不同時候訪問頁面，顯示的內容都可能不同。網頁設計者在寫好服務器端的頁面程序后，不需要手工控制，頁面內容會按照頁面程序的安排自動更改變換。