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

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

按照能力遞進的原則安排各實訓項目的學習，每個實訓項目分為不同的任務，每個學習任務對應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. 中華水文化（慕課版）（第二版） [畢雪燕 楊華軻 羅玲誼 等編著]
9. 電路與電子技術Ⅱ——電路分析基礎 [主編 陳曉 金哲]
10. 人工智能概論（第二版） [主編　任云暉　丁紅　徐迎春 ]
11. 信息時代美育之道 [主編　劉宏宇　黎婭]
12. 數字媒體交互設計項目式教程（微課版） [主編　蘇陸]
13. Amazing！兒童英語自然拼讀分級教材（全8冊） [王玲　編著]
14. Spark大數據處理技術 [主編　劉仁山　周洪翠　莊新妍]
15. 人工智能算法與實踐 [主編　梁琨　張翼英]
16. 計算機網絡技術項目化教程（微課版） [主編 王艷萍 安華萍]
17. 數據清洗 [黃源　劉智楊　孫大松]
18. 電路設計與PCB制作實操教程 [主編 周永宏]
19. 電路與電子技術Ⅰ—數字電子技術 [主編 鄭玉珍 王淑琴]
20. Java編程基礎案例式教程 [主編 陳艷華 唐春蘭]
21. Excel在會計工作中的應用（第三版） [主 編 趙艷莉 耿聰慧]
22. 應用數學 [主編 劉東海 劉麗瑤]
23. Web用戶界面設計與制作 [主編 趙娟]
24. 計算機網絡基礎創新教程（模塊化+課程思政版） [主編 唐繼勇 李旭]
25. 計算機應用技術基礎案例教程 [主編 周麗娟 王璐]
26. Unity應用開發與實戰（微課版） [主 編 程永恒]
27. PHP程序設計項目化教程 [主 編 杜海穎]
28. 文學基礎與影視欣賞 [楊華軻 朱偉利 畢雪燕 羅玲誼]
29. 路由交換技術項目化教程 [主編　范國娟]
30. 信息技術基礎立體化教程 [鄒承俊 周洪林 劉和文 葉煜 ]