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