網(wǎng)頁(yè)設(shè)計(jì)實(shí)訓(xùn)教程

充分考慮高等職業(yè)院校學(xué)生的學(xué)習(xí)基礎(chǔ)、認(rèn)知規(guī)律與培養(yǎng)目標(biāo)，按照“項(xiàng)目導(dǎo)向、任務(wù)驅(qū)動(dòng)”的原則編寫(xiě)。

包含八個(gè)基本實(shí)訓(xùn)項(xiàng)目和三個(gè)綜合實(shí)訓(xùn)項(xiàng)目。每個(gè)基本實(shí)訓(xùn)中都有一個(gè)完整的案例，每個(gè)案例都是構(gòu)成一個(gè)網(wǎng)站或網(wǎng)頁(yè)的一部分，具有真實(shí)的應(yīng)用價(jià)值。

按照能力遞進(jìn)的原則安排各實(shí)訓(xùn)項(xiàng)目的學(xué)習(xí)，每個(gè)實(shí)訓(xùn)項(xiàng)目分為不同的任務(wù)，每個(gè)學(xué)習(xí)任務(wù)對(duì)應(yīng)PHP的不同知識(shí)點(diǎn)，使學(xué)生在完成任務(wù)的同時(shí)，掌握PHP的基本知識(shí)點(diǎn)，逐步培養(yǎng)靜態(tài)網(wǎng)站開(kāi)發(fā)能力。

前 言

HTML、CSS、JavaScript三項(xiàng)技術(shù)是靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)、制作的核心，本書(shū)針對(duì)上述技術(shù)的特點(diǎn)和不同知識(shí)點(diǎn)的具體應(yīng)用，提供相應(yīng)的實(shí)訓(xùn)案例，并對(duì)案例進(jìn)行任務(wù)分解，詳細(xì)介紹任務(wù)的操作步驟及原理。本書(shū)針對(duì)高等職業(yè)院校學(xué)生的特點(diǎn)，采取了實(shí)訓(xùn)教學(xué)的方式。書(shū)中共包含11個(gè)實(shí)訓(xùn)，每個(gè)實(shí)訓(xùn)中都有一個(gè)完整的案例，每個(gè)案例都是構(gòu)成一個(gè)網(wǎng)站或網(wǎng)頁(yè)的一部分，具有真實(shí)的應(yīng)用價(jià)值。

實(shí)訓(xùn)一制作詩(shī)詞欣賞頁(yè)面，介紹HTML基礎(chǔ)，重點(diǎn)介紹HTML基本語(yǔ)法結(jié)構(gòu)及網(wǎng)頁(yè)中的文字和段落的排版。

實(shí)訓(xùn)二制作新聞列表頁(yè)面，介紹各種列表的應(yīng)用，重點(diǎn)介紹HTML中無(wú)序列表和有序列表的應(yīng)用。

實(shí)訓(xùn)三制作導(dǎo)航菜單，介紹HTML中超級(jí)鏈接的應(yīng)用，同時(shí)結(jié)合無(wú)序列表和CSS樣式表對(duì)超鏈接進(jìn)行效果控制。

實(shí)訓(xùn)四制作個(gè)人相冊(cè)，介紹HTML頁(yè)面中圖片的應(yīng)用，同時(shí)介紹了CSS盒模型以及DIV+CSS布局基礎(chǔ)，重點(diǎn)介紹CSS盒模型與浮動(dòng)技術(shù)。

實(shí)訓(xùn)五制作成績(jī)登記表，介紹HTML中表格的應(yīng)用，重點(diǎn)介紹表格、行、單元格的各種屬性應(yīng)用，同時(shí)結(jié)合CSS對(duì)單元格效果加以修飾。

實(shí)訓(xùn)六制作網(wǎng)站后臺(tái)管理主頁(yè)，重點(diǎn)介紹HTML中框架的應(yīng)用，綜合前面實(shí)訓(xùn)內(nèi)容涉及的各知識(shí)點(diǎn)設(shè)計(jì)框架窗口頁(yè)面。

實(shí)訓(xùn)七制作登錄和注冊(cè)頁(yè)面，介紹了HTML表單的應(yīng)用，重點(diǎn)介紹HTML表單中各元素的屬性及應(yīng)用；同時(shí)還介紹了JavaScript基本語(yǔ)法，實(shí)現(xiàn)對(duì)表單的各種信息驗(yàn)證。

實(shí)訓(xùn)八布局網(wǎng)站首頁(yè)，介紹DIV+CSS基礎(chǔ)，重點(diǎn)介紹CSS排版觀念和常見(jiàn)DIV+CSS布局樣式的制作方法，并詳細(xì)介紹了一個(gè)DIV+CSS布局的案例。

實(shí)訓(xùn)九、實(shí)訓(xùn)十和實(shí)訓(xùn)十一介紹了三個(gè)綜合案例，分別從設(shè)計(jì)分析、排版架構(gòu)和模塊設(shè)計(jì)等方面詳細(xì)介紹了博客網(wǎng)站、企業(yè)網(wǎng)站和班級(jí)網(wǎng)站的布局方法。

本書(shū)是編者在多年從事HTML、CSS、JavaScript教學(xué)工作和網(wǎng)站開(kāi)發(fā)工作的基礎(chǔ)上編寫(xiě)而成的，由張春英、李英文、鐘大偉任主編，由孫豐偉、趙海俠、張玉華、胡志強(qiáng)、張海艷、鄭明秋任副主編，參加本書(shū)部分章節(jié)編寫(xiě)工作的還有李紅巖、王石光、蒙連超等老師。

由于時(shí)間倉(cāng)促、作者水平有限，書(shū)中錯(cuò)漏之處在所難免，歡迎廣大讀者批評(píng)指正。

編 者

2015年1月

前言

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

1. 大學(xué)生創(chuàng)新創(chuàng)業(yè)基礎(chǔ) [主編 姜國(guó)權(quán) 姜福佳]
2. 信息技術(shù)（微課版） [王云　徐江鴻　李清霞　羅學(xué)鋒　]
3. 管理基礎(chǔ)與實(shí)務(wù) [主編 王鳳基 顏漢軍]
4. 高等數(shù)學(xué)導(dǎo)學(xué)篇（上冊(cè)） [主編 李文婧 胡雷 尹金生]
5. 高等數(shù)學(xué)（下冊(cè)） [主編 李?lèi)?ài)芹 胡雷 尹金生]
6. 高等數(shù)學(xué)（上冊(cè)） [主編 李?lèi)?ài)芹 胡雷 尹金生]
7. 人工智能應(yīng)用基礎(chǔ) [主編 楊纓 李佳]
8. 中華水文化（慕課版）（第二版） [畢雪燕 楊華軻 羅玲誼 等編著]
9. 電路與電子技術(shù)Ⅱ——電路分析基礎(chǔ) [主編 陳曉 金哲]
10. 人工智能概論（第二版） [主編　任云暉　丁紅　徐迎春 ]
11. 信息時(shí)代美育之道 [主編　劉宏宇　黎婭]
12. 數(shù)字媒體交互設(shè)計(jì)項(xiàng)目式教程（微課版） [主編　蘇陸]
13. Amazing！兒童英語(yǔ)自然拼讀分級(jí)教材（全8冊(cè)） [王玲　編著]
14. Spark大數(shù)據(jù)處理技術(shù) [主編　劉仁山　周洪翠　莊新妍]
15. 人工智能算法與實(shí)踐 [主編　梁琨　張翼英]
16. 計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)項(xiàng)目化教程（微課版） [主編 王艷萍 安華萍]
17. 數(shù)據(jù)清洗 [黃源　劉智楊　孫大松]
18. 電路設(shè)計(jì)與PCB制作實(shí)操教程 [主編 周永宏]
19. 電路與電子技術(shù)Ⅰ—數(shù)字電子技術(shù) [主編 鄭玉珍 王淑琴]
20. Java編程基礎(chǔ)案例式教程 [主編 陳艷華 唐春蘭]
21. Excel在會(huì)計(jì)工作中的應(yīng)用（第三版） [主 編 趙艷莉 耿聰慧]
22. 應(yīng)用數(shù)學(xué) [主編 劉東海 劉麗瑤]
23. Web用戶(hù)界面設(shè)計(jì)與制作 [主編 趙娟]
24. 計(jì)算機(jī)網(wǎng)絡(luò)基礎(chǔ)創(chuàng)新教程（模塊化+課程思政版） [主編 唐繼勇 李旭]
25. 計(jì)算機(jī)應(yīng)用技術(shù)基礎(chǔ)案例教程 [主編 周麗娟 王璐]
26. Unity應(yīng)用開(kāi)發(fā)與實(shí)戰(zhàn)（微課版） [主 編 程永恒]
27. PHP程序設(shè)計(jì)項(xiàng)目化教程 [主 編 杜海穎]
28. 文學(xué)基礎(chǔ)與影視欣賞 [楊華軻 朱偉利 畢雪燕 羅玲誼]
29. 路由交換技術(shù)項(xiàng)目化教程 [主編　范國(guó)娟]
30. 信息技術(shù)基礎(chǔ)立體化教程 [鄒承俊 周洪林 劉和文 葉煜 ]