充分考慮高等職業院校學生的學習基礎、認知規律與培養目標，按照“項目導向、任務驅動”的原則編寫。

包含八個基本實訓項目和三個綜合實訓項目。每個基本實訓中都有一個完整的案例，每個案例都是構成一個網站或網頁的一部分，具有真實的應用價值。

按照能力遞進的原則安排各實訓項目的學習，每個實訓項目分為不同的任務，每個學習任務對應PHP的不同知識點，使學生在完成任務的同時，掌握PHP的基本知識點，逐步培養靜態網站開發能力。

前 言

HTML、CSS、JavaScript三項技術是靜態網頁設計、制作的核心，本書針對上述技術的特點和不同知識點的具體應用，提供相應的實訓案例，并對案例進行任務分解，詳細介紹任務的操作步驟及原理。本書針對高等職業院校學生的特點，采取了實訓教學的方式。書中共包含11個實訓，每個實訓中都有一個完整的案例，每個案例都是構成一個網站或網頁的一部分，具有真實的應用價值。

實訓一制作詩詞欣賞頁面，介紹HTML基礎，重點介紹HTML基本語法結構及網頁中的文字和段落的排版。

實訓二制作新聞列表頁面，介紹各種列表的應用，重點介紹HTML中無序列表和有序列表的應用。

實訓三制作導航菜單，介紹HTML中超級鏈接的應用，同時結合無序列表和CSS樣式表對超鏈接進行效果控制。

實訓四制作個人相冊，介紹HTML頁面中圖片的應用，同時介紹了CSS盒模型以及DIV+CSS布局基礎，重點介紹CSS盒模型與浮動技術。

實訓五制作成績登記表，介紹HTML中表格的應用，重點介紹表格、行、單元格的各種屬性應用，同時結合CSS對單元格效果加以修飾。

實訓六制作網站后臺管理主頁，重點介紹HTML中框架的應用，綜合前面實訓內容涉及的各知識點設計框架窗口頁面。

實訓七制作登錄和注冊頁面，介紹了HTML表單的應用，重點介紹HTML表單中各元素的屬性及應用；同時還介紹了JavaScript基本語法，實現對表單的各種信息驗證。

實訓八布局網站首頁，介紹DIV+CSS基礎，重點介紹CSS排版觀念和常見DIV+CSS布局樣式的制作方法，并詳細介紹了一個DIV+CSS布局的案例。

實訓九、實訓十和實訓十一介紹了三個綜合案例，分別從設計分析、排版架構和模塊設計等方面詳細介紹了博客網站、企業網站和班級網站的布局方法。

本書是編者在多年從事HTML、CSS、JavaScript教學工作和網站開發工作的基礎上編寫而成的，由張春英、李英文、鐘大偉任主編，由孫豐偉、趙海俠、張玉華、胡志強、張海艷、鄭明秋任副主編，參加本書部分章節編寫工作的還有李紅巖、王石光、蒙連超等老師。

由于時間倉促、作者水平有限，書中錯漏之處在所難免，歡迎廣大讀者批評指正。

編 者

2015年1月

前言

實訓一 制作詩詞欣賞頁面 1
1.1 實訓目標 1
1.2 實訓內容 1
1.3 實訓效果 1
1.4 實現過程 2
任務1：制作詩詞欣賞頁面 2
任務2：美化詩詞欣賞頁面 7
1.5 總結與思考 9
實訓二 制作新聞列表頁面 10
2.1 實訓目標 10
2.2 實訓內容 10
2.3 實訓效果 10
2.4 實現過程 11
任務1：制作新聞列表頁面 11
任務2：美化新聞列表頁面 14
2.5 總結與思考 15
實訓三 制作導航菜單 16
3.1 實訓目標 16
3.2 實訓內容 16
3.3 實訓效果 16
3.4 實現過程 17
任務1：編輯導航菜單 17
任務2：美化導航菜單 19
3.5 總結與思考 28
實訓四 制作個人相冊 29
4.1 實訓目標 29
4.2 實訓內容 29
4.3 實訓效果 29
4.4 實現過程 30
任務1：編輯個人相冊 30
任務2：美化個人相冊 32
4.5 總結與思考 41
實訓五 制作成績登記表 42
5.1 實訓目標 42
5.2 實訓內容 42
5.3 實訓效果 42
5.4 實現過程 43
任務1：制作成績登記表 43
任務2：美化成績登記表 46
5.5 總結與思考 52
實訓六 使用框架制作網站管理中心系統 53
6.1 實訓目標 53
6.2 實訓內容 53
6.3 實訓效果 53
6.4 實現過程 54
任務1：制作框架結構 54
任務2：子窗口的設置 57
任務3：頁面設計 59
任務4：浮動框架 63
6.5 總結與思考 63
實訓七 制作會員登錄與注冊頁面 65
7.1 實訓目標 65
7.2 實訓內容 65
7.3 實訓效果 65
7.4 實現過程 66
任務1：制作會員登錄頁面 66
任務2：制作注冊頁面 69
任務3：實現表單信息驗證 73
7.5 總結與思考 77
實訓八 使用DIV+CSS布局網站首頁 79
8.1 實訓目標 79
8.2 實訓內容 79
8.3 實訓效果 79
8.4 實現過程 80
任務1：企業網站布局設計 80
任務2：頁面各區域內容實現 84
8.5 總結與思考 90
實訓九 綜合案例——我的博客 91
9.1 分析結構 91
9.1.1 設計分析 91
9.1.2 排版架構 92
9.2 模塊設計 93
9.2.1 導航與banner 93
9.2.2 左側列表 94
9.2.3 內容部分 97
9.2.4 footer腳注 98
9.3 整體調整 99
9.4 網頁源碼 101
實訓十 綜合案例——企業網站 106
10.1 分析結構 106
10.1.1 設計分析 107
10.1.2 排版架構 107
10.2 模塊設計 108
10.2.1 導航與banner 109
10.2.2 左側部分 110
10.2.3 中間部分 112
10.2.4 右側部分 113
10.2.5 footer腳注 115
10.3 整體調整 116
10.4 網頁源碼 118
實訓十一 綜合案例——班級網站 126
11.1 班級網站的規劃與設計 126
11.1.1 網站定位 126
11.1.2 需求分析 126
11.1.3 欄目設計 127
11.1.4 站點定義與目錄管理 127
11.1.5 網站的風格設計 127
11.2 網頁設計與制作 129
11.2.1 頁面布局 129
11.2.2 全局CSS定義 129
11.2.3 首頁制作 131
11.2.4 二級頁面制作 136
11.2.5 內容頁面制作 138
11.3 網站測試與發布 139
11.3.1 安裝IIS服務器 139
11.3.2 建立虛擬目錄 140
11.3.3 管理站點 141
參考文獻 142

1. 實用運籌學 [主編　邢育紅　于晉臣]
2. 電子技術（第二版） [主編 覃愛娜 李飛]
3. 工程數學 [主編 郭立娟 王海]
4. 語音識別理論與實踐 [主編　莫宏偉]
5. 武術基礎教程 [主編 李代勇 謝志民]
6. 計算機網絡實訓教程 [主編 張浩軍 趙玉娟]
7. 電工電子技術基礎 [主編 劉 軍 楊國龍 劉天成]
8. MySQL數據庫項目式教程 [陳亞峰]
9. 機械設計基礎（第二版） [主編 田亞平 李愛姣]
10. 畫法幾何與機械制圖 [主編 趙軍]
11. C語言程序設計習題與實驗指導（第二版） [主編 甄增榮 張賓]
12. C語言程序設計（第二版） [主編 甄增榮 田云霞]
13. Unity3D虛擬現實應用開發實踐 [主 編 劉龍]
14. 智能化技術基礎（第三版） [鄧文達　李禮]
15. 面向對象程序設計 [主編 張勇 張平華 趙小龍]
16. 網絡營銷 [主編 夏薇薇 劉婷 尚潔]
17. 電視節目策劃與制作（微課版） [主　編　黃滴滴]
18. 數據庫技術與應用實踐教程（SQL Server 2019） [主 編 嚴暉 周肆清]
19. 大學應用數學 [主編 郭立娟]
20. 軟件定義網絡技術與實踐 [主編　但唐仁]
21. 工業機器人拆裝與調試 [主編 胡月霞 向艷芳 朱奇]
22. 信號與系統（第二版） [主編 張宇]
23. 信息技術基礎 [主編 唐倩 邵銳]
24. 混合式課堂教學改革與實踐—微動教學法 [石鐵峰 石家羽 著]
25. Python 語言程序設計實踐指導 [主編　張雙獅]
26. Photoshop 圖形圖像項目化教程 [主編 胡斌斌 黎婭 蘇大椿]
27. 基于.NET Core框架的分布式系統架構設計 [湯佳 著]
28. 高職院校軟件類專業“類上班制”人才培養模式研究 [楊智勇 王海洋 著]
29. 體育舞蹈教程 [主編 劉偉 陳志明 曾明]
30. 大學生創新創業基礎 [主編 姜國權 姜福佳]