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

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

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

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

前 言

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

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

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

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

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

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

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

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

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

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

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

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

編 者

2015年1月

前言

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

1. 新時代背景下我國職業(yè)教育產(chǎn)教融合長效機制建設(shè)研究 [王玉賢 著]
2. 嵌入式人工智能技術(shù)應(yīng)用（數(shù)字教材） [主編 胡娜 楊國勇 晏廷榮]
3. 職業(yè)教育專業(yè)大數(shù)據(jù)分析 [鄧子云 著]
4. Java Web項目化設(shè)計實踐教程 [邱云 曾陳萍]
5. 人工智能開發(fā)框架應(yīng)用 [主編 王明超 蘆婭云]
6. 民航客艙服務(wù)實用英語教程 [主編 田靜 徐亞玲]
7. Python數(shù)據(jù)分析 [主編　馮志輝　趙磊　李放]
8. 大學(xué)信息技術(shù) [曾翰穎 編著]
9. 創(chuàng)新創(chuàng)業(yè)訓(xùn)練實踐教程 [主編 王日華 陳武 黃喆誠]
10. 實用運籌學(xué) [主編　邢育紅　于晉臣]
11. 電子技術(shù)（第二版） [主編 覃愛娜 李飛]
12. 工程數(shù)學(xué) [主編 郭立娟 王海]
13. 語音識別理論與實踐 [主編　莫宏偉]
14. 武術(shù)基礎(chǔ)教程 [主編 李代勇 謝志民]
15. 計算機網(wǎng)絡(luò)實訓(xùn)教程 [主編 張浩軍 趙玉娟]
16. 電工電子技術(shù)基礎(chǔ) [主編 劉 軍 楊國龍 劉天成]
17. MySQL數(shù)據(jù)庫項目式教程 [陳亞峰]
18. 機械設(shè)計基礎(chǔ)（第二版） [主編 田亞平 李愛姣]
19. 畫法幾何與機械制圖 [主編 趙軍]
20. C語言程序設(shè)計習(xí)題與實驗指導(dǎo)（第二版） [主編 甄增榮 張賓]
21. C語言程序設(shè)計（第二版） [主編 甄增榮 田云霞]
22. Unity3D虛擬現(xiàn)實應(yīng)用開發(fā)實踐 [主 編 劉龍]
23. 智能化技術(shù)基礎(chǔ)（第三版） [鄧文達　李禮]
24. 面向?qū)ο蟪绦蛟O(shè)計 [主編 張勇 張平華 趙小龍]
25. 網(wǎng)絡(luò)營銷 [主編 夏薇薇 劉婷 尚潔]
26. 電視節(jié)目策劃與制作（微課版） [主　編　黃滴滴]
27. 數(shù)據(jù)庫技術(shù)與應(yīng)用實踐教程（SQL Server 2019） [主 編 嚴暉 周肆清]
28. 大學(xué)應(yīng)用數(shù)學(xué) [主編 郭立娟]
29. 軟件定義網(wǎng)絡(luò)技術(shù)與實踐 [主編　但唐仁]
30. 工業(yè)機器人拆裝與調(diào)試 [主編 胡月霞 向艷芳 朱奇]