Web編程基礎（HTML+CSS）項目實戰教程

購買商店

Web編程基礎（HTML+CSS）項目實戰教程

$348.00

馬上購買

內容描述

本書根據技術應用型人才的培養目標，以一個企業生產性項目“新聞網”的設計製作貫穿始終，將課程內容整合、序化為8個教學模塊、26個開發任務、63個案例、28個實訓操作任務、3個企業典型綜合項目，採用由易到難、螺旋遞進的方式詳細講解了Web前端開發技術，並介紹了HTML和CSS的基礎知識和使用技巧。本書內容主要包括Web前端開發的相關概念、網站的設計與策劃、開發工具的使用、文本圖像的創建、CSS樣式對頁面的美化、列表的典型應用、各種超鏈接的創建、表格和表單的應用，以及DIV+CSS頁面佈局等實用技術，覆蓋了“1+X證書”Web前端開發職業技能中HTML+CSS的基本知識點，同時根據教學模塊主題，融入了思政教育內容，將立德樹人、課程思政等元素穿插到教學內容中，潤物細無聲，使學習者掌握專業技能的同時，完成全方位育人的重任。本書是一本從零開始學習Web前端開發技術的教材，無須讀者具有任何編程基礎。本書既可作為高等院校本、專科電腦及相關專業的網頁設計與製作課程的教材，又可作為Web前端開發學習班的培訓教材或網頁製作愛好者的參考書。

目錄大綱

模塊1 網站的設計與策劃 1
1.1 任務1：認識網頁與網站 1
1.1.1 網頁與網站的相關概念 2
1.1.2 服務器與客戶端 3
1.2 任務2：認識網頁開發技術 4
1.2.1 Web前端的概念 4
1.2.2 Web前端開發技術 5
1.3 任務3：設計策劃網站 9
1.3.1 網站設計原則 9
1.3.2 網站製作流程 11
1.4 任務4：選擇網頁開發工具 12
1.4.1 編寫工具 12
1.4.2 瀏覽工具 16
1.5 知識進階 16
1.6 小結 18
1.7 實訓任務 19
實訓任務1：創建班級網站頁面 19
實訓任務2：製作班級學習交流頁面 20
實訓任務3：製作班級公告欄 21
模塊2 製作圖文並茂的新聞頁面 24
2.1 任務1：創建網頁結構 25
2.1.1 HTML文檔結構 25
2.1.2 HTML基本語法 26
2.1.3 ＜head＞標記 27
2.1.4 任務實施 28
2.2 任務2：添加網頁文本內容 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：設置圖文並茂的網頁 35
2.3.1 插入圖像 36
2.3.2 網頁中支持的圖像文件格式 37
2.3.3 任務實施 38
2.4 知識進階 38
2.5 小結 42
2.6 實訓任務 42
實訓任務1：製作圖文並茂的班級學習交流頁面 42
實訓任務2：製作圖文並茂的班級公告欄頁面 44
模塊3 美化修飾網站的新聞頁面 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：製作班級網站中的青春名片 117
實訓任務4：製作圖文環繞效果 119
實訓任務5：製作班級圖片新聞版塊 121
模塊4 製作網站的最新動態頁面 124
4.1 任務1：製作最新動態列表條目 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：創建最新動態條目鏈接 134
4.2.1 創建超鏈接 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：製作班級網站的軟件大賽通知 145
實訓任務3：製作班級學習園地 147
實訓任務4：製作班級網站的導航條 150
實訓任務5：製作班級網站的新聞欄目 152
模塊5 製作網站的多媒體相冊頁面 159
5.1 任務1：創建多媒體相冊 160
5.1.1 表格組成 160
5.1.2 表格屬性 161
5.1.3 任務實施 163
5.2 任務2：調整相冊行列結構 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：製作班級網站的班級課程表 181
實訓任務2：製作班級網站的學生信息登記表 184
實訓任務3：製作班級網站的新聞欄目 185
實訓任務4：製作班級網站的首頁佈局 187
模塊6 製作網站的會員註冊頁面 191
6.1 任務1：製作基本信息區 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：製作信息收集區 205
6.2.1 多行文本域 205
6.2.2 下拉列錶框 206
6.2.3 任務實施 208
6.3 任務3：製作法律條款區 209
6.3.1 浮動框架標記 209
6.3.2 任務實施 210
6.4 知識進階 211
6.5 小結 219
6.6 實訓任務 220
實訓任務1：製作班級網站的調查問卷 220
實訓任務2：製作班級網站的郵箱註冊頁面 224
實訓任務3：製作電子郵箱的發送郵件頁面 226
實訓任務4：製作班級網站的用戶註冊頁面 229
模塊7 網站首頁的設計製作 233
7.1 任務1：首頁整體佈局分析設計 234
7.1.1 整體佈局分析 234
7.1.2 樣式重置 234
7.1.3 全局CSS的定義 235
7.2 任務2：頭部的實現 236
7.2.1 頭部的佈局分析和實現 236
7.2.2 Logo的實現 237
7.2.3 頂部導航的實現 237
7.2.4 登錄註冊的實現 238
7.3 任務3：中間主體內容的實現 239
7.3.1 主體內容的佈局分析和實現 239
7.3.2 上部內容區的實現 240
7.3.3 左側主要內容區的實現 240
7.3.4 右側主要內容區的實現 242
7.4 任務4：底部頁腳版權的實現 243
7.5 知識進階 244
7.6 小結 247
7.7 實訓任務 248
實訓任務1：DIV+CSS佈局班級網站首頁 248
實訓任務2：使用DIV+CSS佈局左中右頁面結構 252
實訓任務3：使用HTML5中新增語義化標記進行頁面佈局 254
模塊8 企業級項目綜合應用 258
8.1 任務1：製作企業產品展示頁面 258
8.1.1 任務描述 258
8.1.2 定義頁面結構 259
8.1.3 添加頁面樣式 259
8.2 任務2：製作新聞詳情頁面 261
8.2.1 任務描述 261
8.2.2 整體佈局分析的實現 262
8.2.3 頭部的實現 263
8.2.4 內容部分的實現 265
8.2.5 版權信息部分的實現 270
8.3 任務3：製作用戶登錄頁面 271
8.3.1 任務描述 271
8.3.2 定義頁面結構 271
8.3.3 登錄表單部分的實現 272
8.3.4 其他部分的實現 274
8.4 知識進階 275
8.5 小結 279
8.6 實訓任務 279
實訓任務1：CSS精靈技術製作導航條 279
實訓任務2：CSS製作圖文版塊中的三角形 282
參考文獻 286