Web編程基礎(chǔ)（HTML+CSS）項(xiàng)目實(shí)戰(zhàn)教程
定 價(jià)：58 元
- 作者：高麗霞
- 出版時(shí)間：2022/7/1
- ISBN：9787121438288
- 出 版 社：電子工業(yè)出版社
- 中圖法分類：TP312.8；TP393.092.2
- 頁(yè)碼：296
- 紙張：
- 版次：01
- 開(kāi)本：16開(kāi)
本書(shū)根據(jù)技術(shù)應(yīng)用型人才的培養(yǎng)目標(biāo)，以一個(gè)企業(yè)生產(chǎn)性項(xiàng)目“新聞網(wǎng)”的設(shè)計(jì)制作貫穿始終，將課程內(nèi)容整合、序化為8個(gè)教學(xué)模塊、26個(gè)開(kāi)發(fā)任務(wù)、63個(gè)案例、28個(gè)實(shí)訓(xùn)操作任務(wù)、3個(gè)企業(yè)典型綜合項(xiàng)目，采用由易到難、螺旋遞進(jìn)的方式詳細(xì)講解了Web前端開(kāi)發(fā)技術(shù)，并介紹了HTML和CSS的基礎(chǔ)知識(shí)和使用技巧。本書(shū)內(nèi)容主要包括Web前端開(kāi)發(fā)的相關(guān)概念、網(wǎng)站的設(shè)計(jì)與策劃、開(kāi)發(fā)工具的使用、文本圖像的創(chuàng)建、CSS樣式對(duì)頁(yè)面的美化、列表的典型應(yīng)用、各種超鏈接的創(chuàng)建、表格和表單的應(yīng)用，以及DIV+CSS頁(yè)面布局等實(shí)用技術(shù)，覆蓋了“1+X證書(shū)”Web前端開(kāi)發(fā)職業(yè)技能中HTML+CSS的基本知識(shí)點(diǎn)，同時(shí)根據(jù)教學(xué)模塊主題，融入了思政教育內(nèi)容，將立德樹(shù)人、課程思政等元素穿插到教學(xué)內(nèi)容中，潤(rùn)物細(xì)無(wú)聲，使學(xué)習(xí)者掌握專業(yè)技能的同時(shí)，完成全方位育人的重任。本書(shū)是一本從零開(kāi)始學(xué)習(xí)Web前端開(kāi)發(fā)技術(shù)的教材，無(wú)須讀者具有任何編程基礎(chǔ)。本書(shū)既可作為高等院校本、專科計(jì)算機(jī)及相關(guān)專業(yè)的網(wǎng)頁(yè)設(shè)計(jì)與制作課程的教材，又可作為Web前端開(kāi)發(fā)學(xué)習(xí)班的培訓(xùn)教材或網(wǎng)頁(yè)制作愛(ài)好者的參考書(shū)。
高麗霞，雙師型教師，Oracle企業(yè)級(jí)認(rèn)證講師，自2002年從事教學(xué)工作以來(lái)，先后講授過(guò)《Web編程基礎(chǔ)》、《HTML5應(yīng)用開(kāi)發(fā)》、《Web前端開(kāi)發(fā)（JavaScript與jQuery）》、《C語(yǔ)言程序設(shè)計(jì)》、《C#程序設(shè)計(jì)》、《Java程序設(shè)計(jì)》和《Authorware多媒體制作》等多門(mén)課程。參編4本教材，其中《Authorware多媒體技術(shù)應(yīng)用實(shí)例教程（第2版）》十二五規(guī)劃教材，被評(píng)選為"高等職業(yè)院校教學(xué)改革創(chuàng)新示范教材”；《C#程序設(shè)計(jì)任務(wù)式教程》十三五規(guī)劃教材，被評(píng)為中國(guó)通信工業(yè)協(xié)會(huì)"全國(guó)計(jì)算機(jī)類優(yōu)秀教材”。撰寫(xiě)多篇論文，其中兩篇為國(guó)家核心期刊論文。參與國(guó)家級(jí)、省級(jí)資源庫(kù)建設(shè)4項(xiàng)，課題、重點(diǎn)課題建設(shè)5項(xiàng)，參與品牌專業(yè)群建設(shè)1項(xiàng)。連續(xù)6年講授《Web編程基礎(chǔ)》課程，授課年級(jí)8個(gè)，累計(jì)授課班級(jí)32個(gè)，本課程授課人數(shù)約1580人，在《Web編程基礎(chǔ)》課程上積累了豐富的實(shí)踐、教科研經(jīng)驗(yàn)，通過(guò)項(xiàng)目化教學(xué)、任務(wù)驅(qū)動(dòng)、信息化教學(xué)等多種教學(xué)方式調(diào)度課堂、融合創(chuàng)新，深受學(xué)生喜愛(ài)。2020年作為課程負(fù)責(zé)人，主持《Web編程基礎(chǔ)》校級(jí)精品資源庫(kù)建設(shè)。
模塊1 網(wǎng)站的設(shè)計(jì)與策劃 1
1.1 任務(wù)1：認(rèn)識(shí)網(wǎng)頁(yè)與網(wǎng)站 1
1.1.1 網(wǎng)頁(yè)與網(wǎng)站的相關(guān)概念 2
1.1.2 服務(wù)器與客戶端 3
1.2 任務(wù)2：認(rèn)識(shí)網(wǎng)頁(yè)開(kāi)發(fā)技術(shù) 4
1.2.1 Web前端的概念 4
1.2.2 Web前端開(kāi)發(fā)技術(shù) 5
1.3 任務(wù)3：設(shè)計(jì)策劃網(wǎng)站 9
1.3.1 網(wǎng)站設(shè)計(jì)原則 9
1.3.2 網(wǎng)站制作流程 11
1.4 任務(wù)4：選擇網(wǎng)頁(yè)開(kāi)發(fā)工具 12
1.4.1 編寫(xiě)工具 12
1.4.2 瀏覽工具 16
1.5 知識(shí)進(jìn)階 16
1.6 小結(jié) 18
1.7 實(shí)訓(xùn)任務(wù) 19
實(shí)訓(xùn)任務(wù)1：創(chuàng)建班級(jí)網(wǎng)站頁(yè)面 19
實(shí)訓(xùn)任務(wù)2：制作班級(jí)學(xué)習(xí)交流頁(yè)面 20
實(shí)訓(xùn)任務(wù)3：制作班級(jí)公告欄 21
模塊2 制作圖文并茂的新聞頁(yè)面 24
2.1 任務(wù)1：創(chuàng)建網(wǎng)頁(yè)結(jié)構(gòu) 25
2.1.1 HTML文檔結(jié)構(gòu) 25
2.1.2 HTML基本語(yǔ)法 26
2.1.3 ＜head＞標(biāo)記 27
2.1.4 任務(wù)實(shí)施 28
2.2 任務(wù)2：添加網(wǎng)頁(yè)文本內(nèi)容 29
2.2.1 標(biāo)題與段落標(biāo)記 30
2.2.2 水平線標(biāo)記 32
2.2.3 換行標(biāo)記 33
2.2.4 特殊字符 33
2.2.5 ＜div＞與＜span＞標(biāo)記 34
2.2.6 任務(wù)實(shí)施 35
2.3 任務(wù)3：設(shè)置圖文并茂的網(wǎng)頁(yè) 35
2.3.1 插入圖像 36
2.3.2 網(wǎng)頁(yè)中支持的圖像文件格式 37
2.3.3 任務(wù)實(shí)施 38
2.4 知識(shí)進(jìn)階 38
2.5 小結(jié) 42
2.6 實(shí)訓(xùn)任務(wù) 42
實(shí)訓(xùn)任務(wù)1：制作圖文并茂的班級(jí)學(xué)習(xí)交流頁(yè)面 42
實(shí)訓(xùn)任務(wù)2：制作圖文并茂的班級(jí)公告欄頁(yè)面 44
模塊3 美化修飾網(wǎng)站的新聞頁(yè)面 47
3.1 任務(wù)1：修飾文字排版 48
3.1.1 CSS概述 48
3.1.2 引入CSS的方法 49
3.1.3 CSS選擇器 50
3.1.4 CSS特性 66
3.1.5 文字修飾 68
3.1.6 文本修飾 69
3.1.7 任務(wù)實(shí)施 71
3.2 任務(wù)2：控制元素屬性 74
3.2.1 盒子模型 74
3.2.2 邊框?qū)傩?74
3.2.3 邊距屬性 76
3.2.4 浮動(dòng) 81
3.2.5 定位 92
3.2.6 任務(wù)實(shí)施 100
3.3 任務(wù)3：設(shè)置頁(yè)面背景 102
3.3.1 背景的設(shè)置 102
3.3.2 背景的運(yùn)用技術(shù) 104
3.3.3 任務(wù)實(shí)施 107
3.4 知識(shí)進(jìn)階 108
3.5 小結(jié) 113
3.6 實(shí)訓(xùn)任務(wù) 114
實(shí)訓(xùn)任務(wù)1：使用CSS渲染班級(jí)學(xué)習(xí)交流頁(yè)面 114
實(shí)訓(xùn)任務(wù)2：使用CSS渲染班級(jí)公告欄頁(yè)面 116
實(shí)訓(xùn)任務(wù)3：制作班級(jí)網(wǎng)站中的青春名片 117
實(shí)訓(xùn)任務(wù)4：制作圖文環(huán)繞效果 119
實(shí)訓(xùn)任務(wù)5：制作班級(jí)圖片新聞版塊 121
模塊4 制作網(wǎng)站的最新動(dòng)態(tài)頁(yè)面 124
4.1 任務(wù)1：制作最新動(dòng)態(tài)列表?xiàng)l目 125
4.1.1 有序列表 125
4.1.2 無(wú)序列表 127
4.1.3 嵌套列表 128
4.1.4 定義列表 129
4.1.5 CSS列表修飾 130
4.1.6 任務(wù)實(shí)施 131
4.2 任務(wù)2：創(chuàng)建最新動(dòng)態(tài)條目鏈接 134
4.2.1 創(chuàng)建超鏈接 135
4.2.2 鏈接對(duì)象 135
4.2.3 CSS超鏈接修飾 136
4.2.4 任務(wù)實(shí)施 139
4.3 知識(shí)進(jìn)階 141
4.4 小結(jié) 143
4.5 實(shí)訓(xùn)任務(wù) 144
實(shí)訓(xùn)任務(wù)1：制作班級(jí)新聞欄目 144
實(shí)訓(xùn)任務(wù)2：制作班級(jí)網(wǎng)站的軟件大賽通知 145
實(shí)訓(xùn)任務(wù)3：制作班級(jí)學(xué)習(xí)園地 147
實(shí)訓(xùn)任務(wù)4：制作班級(jí)網(wǎng)站的導(dǎo)航條 150
實(shí)訓(xùn)任務(wù)5：制作班級(jí)網(wǎng)站的新聞欄目 152
模塊5 制作網(wǎng)站的多媒體相冊(cè)頁(yè)面 159
5.1 任務(wù)1：創(chuàng)建多媒體相冊(cè) 160
5.1.1 表格組成 160
5.1.2 表格屬性 161
5.1.3 任務(wù)實(shí)施 163
5.2 任務(wù)2：調(diào)整相冊(cè)行列結(jié)構(gòu) 164
5.2.1 單元格屬性 164
5.2.2 單元格合并 165
5.2.3 任務(wù)實(shí)施 167
5.3 任務(wù)3：設(shè)置相冊(cè)布局 168
5.3.1 表格嵌套 168
5.3.2 表格布局 170
5.3.3 任務(wù)實(shí)施 173
5.4 任務(wù)4：設(shè)置多媒體效果 175
5.4.1 音頻 175
5.4.2 視頻 176
5.4.3 任務(wù)實(shí)施 178
5.5 知識(shí)進(jìn)階 178
5.6 小結(jié) 181
5.7 實(shí)訓(xùn)任務(wù) 181
實(shí)訓(xùn)任務(wù)1：制作班級(jí)網(wǎng)站的班級(jí)課程表 181
實(shí)訓(xùn)任務(wù)2：制作班級(jí)網(wǎng)站的學(xué)生信息登記表 184
實(shí)訓(xùn)任務(wù)3：制作班級(jí)網(wǎng)站的新聞欄目 185
實(shí)訓(xùn)任務(wù)4：制作班級(jí)網(wǎng)站的首頁(yè)布局 187
模塊6 制作網(wǎng)站的會(huì)員注冊(cè)頁(yè)面 191
6.1 任務(wù)1：制作基本信息區(qū) 192
6.1.1 表單基礎(chǔ) 192
6.1.2 輔助標(biāo)記 194
6.1.3 單行文本輸入框 194
6.1.4 密碼輸入框 194
6.1.5 表單按鈕 197
6.1.6 單選按鈕 199
6.1.7 復(fù)選框 199
6.1.8 文件上傳域 201
6.1.9 任務(wù)實(shí)施 202
6.2 任務(wù)2：制作信息收集區(qū) 205
6.2.1 多行文本域 205
6.2.2 下拉列表框 206
6.2.3 任務(wù)實(shí)施 208
6.3 任務(wù)3：制作法律條款區(qū) 209
6.3.1 浮動(dòng)框架標(biāo)記 209
6.3.2 任務(wù)實(shí)施 210
6.4 知識(shí)進(jìn)階 211
6.5 小結(jié) 219
6.6 實(shí)訓(xùn)任務(wù) 220
實(shí)訓(xùn)任務(wù)1：制作班級(jí)網(wǎng)站的調(diào)查問(wèn)卷 220
實(shí)訓(xùn)任務(wù)2：制作班級(jí)網(wǎng)站的郵箱注冊(cè)頁(yè)面 224
實(shí)訓(xùn)任務(wù)3：制作電子郵箱的發(fā)送郵件頁(yè)面 226
實(shí)訓(xùn)任務(wù)4：制作班級(jí)網(wǎng)站的用戶注冊(cè)頁(yè)面 229
模塊7 網(wǎng)站首頁(yè)的設(shè)計(jì)制作 233
7.1 任務(wù)1：首頁(yè)整體布局分析設(shè)計(jì) 234
7.1.1 整體布局分析 234
7.1.2 樣式重置 234
7.1.3 全局CSS的定義 235
7.2 任務(wù)2：頭部的實(shí)現(xiàn) 236
7.2.1 頭部的布局分析和實(shí)現(xiàn) 236
7.2.2 Logo的實(shí)現(xiàn) 237
7.2.3 頂部導(dǎo)航的實(shí)現(xiàn) 237
7.2.4 登錄注冊(cè)的實(shí)現(xiàn) 238
7.3 任務(wù)3：中間主體內(nèi)容的實(shí)現(xiàn) 239
7.3.1 主體內(nèi)容的布局分析和實(shí)現(xiàn) 239
7.3.2 上部?jī)?nèi)容區(qū)的實(shí)現(xiàn) 240
7.3.3 左側(cè)主要內(nèi)容區(qū)的實(shí)現(xiàn) 240
7.3.4 右側(cè)主要內(nèi)容區(qū)的實(shí)現(xiàn) 242
7.4 任務(wù)4：底部頁(yè)腳版權(quán)的實(shí)現(xiàn) 243
7.5 知識(shí)進(jìn)階 244
7.6 小結(jié) 247
7.7 實(shí)訓(xùn)任務(wù) 248
實(shí)訓(xùn)任務(wù)1：DIV+CSS布局班級(jí)網(wǎng)站首頁(yè) 248
實(shí)訓(xùn)任務(wù)2：使用DIV+CSS布局左中右頁(yè)面結(jié)構(gòu) 252
實(shí)訓(xùn)任務(wù)3：使用HTML5中新增語(yǔ)義化標(biāo)記進(jìn)行頁(yè)面布局 254
模塊8 企業(yè)級(jí)項(xiàng)目綜合應(yīng)用 258
8.1 任務(wù)1：制作企業(yè)產(chǎn)品展示頁(yè)面 258
8.1.1 任務(wù)描述 258
8.1.2 定義頁(yè)面結(jié)構(gòu) 259
8.1.3 添加頁(yè)面樣式 259
8.2 任務(wù)2：制作新聞詳情頁(yè)面 261
8.2.1 任務(wù)描述 261
8.2.2 整體布局分析的實(shí)現(xiàn) 262
8.2.3 頭部的實(shí)現(xiàn) 263
8.2.4 內(nèi)容部分的實(shí)現(xiàn) 265
8.2.5 版權(quán)信息部分的實(shí)現(xiàn) 270
8.3 任務(wù)3：制作用戶登錄頁(yè)面 271
8.3.1 任務(wù)描述 271
8.3.2 定義頁(yè)面結(jié)構(gòu) 271
8.3.3 登錄表單部分的實(shí)現(xiàn) 272
8.3.4 其他部分的實(shí)現(xiàn) 274
8.4 知識(shí)進(jìn)階 275
8.5 小結(jié) 279
8.6 實(shí)訓(xùn)任務(wù) 279
實(shí)訓(xùn)任務(wù)1：CSS精靈技術(shù)制作導(dǎo)航條 279
實(shí)訓(xùn)任務(wù)2：CSS制作圖文版塊中的三角形 282
參考文獻(xiàn) 286
書(shū)單推薦
