《典型網頁設計與制作》以項目為導向、以任務為驅動、以學習情境為線索，將內容劃分成五個學習情境（企業型網站、電子商務型網站、政府型網站、娛樂型網站、美食網站）。
《典型網頁設計與制作》每一個學習情境代表一個典型網站，詳細介紹設計與制作過程，並將知識目標和能力目標融合於項目任務中，讓學生在練習中理解其知識要點，達到“教、學、做”一體化的效果。
《典型網頁設計與制作》適合作為高等職業院校計算機相關專業的教材，還可作為網站設計、網頁制作人員的參考用書。

• 
• 
• 
• 

學習情境1 企業型網站設計與制作
1.1 企業型網站界面設計
任務1 設計制作頁面背景
任務2 設計制作網站logo
任務3 設計制作豎式導航區
任務4 設計制作主要內容區域
任務5 設計制作版權區域
1.2 企業型網站頁面制作
任務1 搭建建設網頁制作網站的基本工作環境
任務2 布局制作頭部區域
任務3 布局制作導航區
任務4 布局制作內容區域
任務5 布局制作版權區域
1.3 知識拓展
1.3.1 網頁設計：圖層和圖層樣式
1.3.2 網頁制作：運用class與id設置樣式
1.3.3 網頁制作：盒子模型應用
1.3.4 網頁制作：設置背景
1.4 能力拓展
1.4.1 拓展練習：設計企業網站的logo
1.4.2 獨立實踐：設計制作企業網站

學習情境2 電子商務型網站的設計與制作
2.1 電子商務型網站界面設計
任務1 設計制作頭部區域
任務2 設計制作banner區域
任務3 設計制作欄目“商品分類”
任務4 設計制作欄目“新品上架”
任務5 設計制作欄目“暢銷排行”
任務6 設計制作欄目“產品意見分享”
任務7 設計制作底部及版權區域
2.2 電子商務型網站頁面制作
任務1 布局制作頭部區域
任務2 布局制作banner區域
任務3 布局制作欄目“商品分類”
任務4 布局制作欄目“新品上架”
任務5 布局制作欄目“暢銷排行/產品意見分享”
任務6 布局制作底部及版權區域
2.3 知識拓展
2.3.1 網頁設計：Photoshop中的蒙版
2.3.2 網頁制作：利用浮動設置樣式
2.3.3 網頁制作：運用列表標簽制作網頁內容
2.4 能力拓展
2.4.1 拓展練習：利用圖層樣式設計藝術文字
2.4.2 獨立實踐：設計制作電子商務型網站

學習情境3 政府型網站設計與制作
3.1 政府型網站界面設計
任務1 設計制作頁面背景
任務2 設計制作banner區域
任務3 設計欄目標題
任務4 設計制作欄目“信息公告”
任務5 設計制作欄目“信息中心”
任務6 設計制作欄目“辦事大廳”
任務7 設計制作欄目“辦件查詢”
任務8 設計制作欄目“政策法規”和“便民服務”
3.2 政府型網站頁面制作
任務1 布局制作頁面背景
任務2 布局制作banner區域
任務3 布局欄目標題樣式
任務4 布局左邊欄目內容
任務5 布局制作欄目“信息中心”
任務6 布局制作欄目“辦事大廳”
任務7 布局制作欄目“辦件進度查詢”
任務8 布局制作欄目“政策法規”和“便民服務”
3.3 知識拓展
3.3.1 網頁設計：通道
3.3.2 網頁制作：表格結構布局要點
3.3.3 網頁制作：表單布局制作要點
3.3.4 網頁制作：“選項卡”常見結構與關鍵樣式
3.4 能力拓展
3.4.1 拓展練習：利用圖層樣式設計藝術文字
3.4..2 獨立實踐：設計制作政府型網站

學習情境4 娛樂型網站設計與制作
4.1 娛樂型網站界面設計
任務1 設計制作頭部區域
任務2 設計制作導航區域
任務3 設計制作熱點區域
任務4 設計制作欄目“娛樂”區
任務5 設計制作欄目“版權”區
4.2 娛樂型網站頁面制作
任務1 布局制作banner區域
任務2 布局制作導航區域
任務3 布局制作熱點區域
任務4 布局制作內容區域
任務5 布局制作3 個廣告條
任務6 布局制作底部區域
4.3 知識拓展
4.3.1 網頁設計：Photoshop中的路徑
4.3.2 網頁制作：絕對定位與相對定位
4.4 能力拓展
4.4.1 拓展練習：利用路徑勾勒圖形
4.4.2 獨立實踐：設計制作娛樂型網站

學習情境5 美食網站設計與制作
5.1 美食網站界面設計
任務1 設計制作頭部區域
任務2 設計制作banner。區域
任務3 設計制作欄目“商家排行”和“訂餐廳”
任務4 設計制作欄目“拍客榜”和“找美食”
任務5 設計制作剩餘欄目
任務6 設計制作底部區域
5.2 美食網站頁面制作
任務1 制作頭部區域
任務2 制作banner.區域
任務3 布局制作欄目“排行榜”和“拍客榜”
任務4 布局制作欄目“訂餐廳”和“找美食”
任務5 布局制作欄目“找優惠”
任務6 布局制作欄目“預訂動態”和“網友熱評”
任務7 制作友情鏈接和版權部分
5.3 知識拓展
5.3.1 網頁設計：Photoshop使用技巧集錦
5.3.2 網頁制作：二級菜單結構樣式設置
5.4 能力拓展
5.4.1 拓展練習：人物美化
5.4.2 獨立實踐：設計制作綜合型門戶網站