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

中國水利水電出版社

【作者】主編張春英李英文鐘大偉

【I S B N 】978-7-5170-2942-7

【責(zé)任編輯】張玉玲

【適用讀者群】高職高專

【出版時間】2015-02-13

【開本】16開

【裝幀信息】平裝（光膜）

【版次】第1版第1次印刷

【頁數(shù)】148

【千字?jǐn)?shù)】240

【印張】9.25

【定價】￥23

【叢書】國家示范（骨干）高職院校重點建設(shè)專業(yè)優(yōu)質(zhì)核心課程系列教材

【備注信息】

圖書詳情

簡介

本書特色

前言

章節(jié)列表

精彩閱讀

下載資源

相關(guān)圖書

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

全書包含八個基本實訓(xùn)項目和三個綜合實訓(xùn)項目。按照能力遞進(jìn)的原則，安排各個基本實訓(xùn)項目的學(xué)習(xí)。每個實訓(xùn)項目分為不同的任務(wù)，每個學(xué)習(xí)任務(wù)對應(yīng)PHP的不同知識點，使學(xué)生在完成任務(wù)及基礎(chǔ)實訓(xùn)項目的同時，掌握PHP的基本知識點，逐步培養(yǎng)程序設(shè)計能力。三個綜合實訓(xùn)項目分別按照網(wǎng)站開發(fā)的流程和步驟劃分為不同的任務(wù)，使學(xué)生在完成任務(wù)及實訓(xùn)項目的同時，逐步培養(yǎng)靜態(tài)網(wǎng)站開發(fā)能力。

本書取材新穎、概念清楚、語言簡潔流暢、結(jié)構(gòu)合理、通俗易懂、實用性強，便于教師指導(dǎo)教學(xué)和學(xué)生自學(xué)，適合作為高等職業(yè)院校相關(guān)專業(yè)教材，也可作為靜態(tài)網(wǎng)站開發(fā)愛好者的參考用書。

本書配有電子教案及部分實訓(xùn)源代碼文件，讀者可以從中國水利水電出版社網(wǎng)站和萬水書苑免費下載，網(wǎng)址為：http://www.waterpub.com.cn/softdown/和http://www.hzxbc.cn。

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

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

按照能力遞進(jìn)的原則安排各實訓(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)案例，并對案例進(jìn)行任務(wù)分解，詳細(xì)介紹任務(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樣式表對超鏈接進(jìn)行效果控制。

實訓(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布局樣式的制作方法，并詳細(xì)介紹了一個DIV+CSS布局的案例。

實訓(xùn)九、實訓(xùn)十和實訓(xùn)十一介紹了三個綜合案例，分別從設(shè)計分析、排版架構(gòu)和模塊設(shè)計等方面詳細(xì)介紹了博客網(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)目標(biāo) 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)目標(biāo) 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)目標(biāo) 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)目標(biāo) 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)目標(biāo) 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)目標(biāo) 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)目標(biāo) 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)目標(biāo) 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
參考文獻(xiàn) 142