本書面向Web前端開發的讀者,采用全新流行的Web標準,以Web前端開發技術三要素(HTML5、CSS3、JavaScript)等前端技術,由淺入深、完整詳細地講解采用手寫編碼編寫符合W3C標準、兼容多種瀏覽器的代碼。本書共分12章,主要內容包括:網站規劃和網頁設計基礎、HTML概述、編輯網頁文檔、網頁布局與交互、CSS基礎、CSS盒模型、使用CSS修飾常見的網頁元素、使用CSS設置鏈接與導航、Div+CSS布局頁面、網頁行為語言――JavaScript、珠寶商城前臺頁面和珠寶商城后臺管理頁面。本書內容緊扣國家對高等學校培養高級應用型、復合型人才的技能水平和知識結構的要求,以珠寶商城項目案例的開發思路為主線,采用模塊分解、任務驅動、子任務實現和代碼設計四層結構,通過對模塊中每個任務相應知識點的講解,引導讀者學習網頁制作、設計、規劃的基本知識以及項目開發、測試的完整流程。
目 錄
第1章 網站規劃和網頁設計基礎 1
1.1 萬維網WWW 1
1.1.1 WWW和瀏覽器的基本概念 1
1.1.2 網址 2
1.1.3 超文本 3
1.1.4 超文本標記語言HTML 3
1.1.5 HTTP 3
1.1.6 搜索引擎 4
1.2 網站與網頁的基本概念 4
1.2.1 網站、網頁和主頁 4
1.2.2 靜態網頁和動態網頁 5
1.3 網站的規劃與設計 5
1.4 定位網站的主題和名稱 6
1.4.1 網站主題的確定 6
1.4.2 網站名稱的確定 6
1.5 確定網站的CI形象 7
1.6 網站內容的設計 7
1.6.1 設計網站的欄目 8
1.6.2 確定網站的目錄結構 8
1.6.3 設計網站的鏈接結構 9
1.7 網頁的基本元素 10
1.8 網頁布局結構 11
1.9 常見的網頁編輯工具 12
1.10 Web標準 13
1.10.1 什么是Web標準 13
1.10.2 建立Web標準的優點 14
1.10.3 理解表現和結構相分離 14
習題1 15
第2章 HTML概述 16
2.1 HTML簡介 16
2.1.1 Web技術發展歷程 16
2.1.2 HTML5的特性 16
2.1.3 HTML5元素 17
2.2 HTML語法基礎 17
2.2.1 HTML語法結構 18
2.2.2 HTML編寫規范 18
2.2.3 HTML5文檔結構 19
2.3 創建HTML文檔 20
2.4 搭建支持HTML5的瀏覽器環境 21
2.5 網頁頭部標簽 22
2.5.1 <title>標簽 22
2.5.2 <meta>標簽 22
2.5.3 <link>標簽 23
2.5.4 <script>標簽 23
2.5.5 案例―制作珠寶商城頁面摘要信息 23
2.6 注釋 24
2.7 特殊符號 24
習題2 25
第3章 編輯網頁文檔 26
3.1 文字與段落排版 26
3.1.1 段落標簽<p>…</p> 26
3.1.2 強制換行標簽<br/> 26
3.1.3 標題標簽<h#>…</h#> 27
3.1.4 水平線標簽<hr/> 28
3.1.5 縮排標簽<blockquote>…</blockquote> 29
3.1.6 案例―制作珠寶商城關于我們頁面 29
3.2 超鏈接 30
3.2.1 超鏈接簡介 30
3.2.2 超鏈接的應用 30
3.2.3 案例―制作珠寶商城服務指南及下載頁面 32
3.3 圖像 33
3.3.1 Web圖像的格式及使用要點 33
3.3.2 圖像標簽<img> 34
3.3.3 圖像超鏈接 35
3.3.4 設置網頁背景圖像 35
3.3.5 圖文混排 36
3.4 列表 37
3.4.1 無序列表 37
3.4.2 有序列表 38
3.4.3 定義列表 39
3.4.4 嵌套列表 40
習題3 41
第4章 網頁布局與交互 42
4.1 表格 42
4.1.1 表格的結構 42
4.1.2 表格的基本語法 42
4.1.3 表格的屬性 43
4.1.4 不規范表格 45
4.1.5 表格數據的分組 46
4.1.6 使用表格實現頁面局部布局 48
4.2 使用結構元素構建網頁布局 49
4.3 <div>標簽 53
4.4 <span>標簽 53
4.4.1 基本語法 53
4.4.2 <span>標簽與<div>標簽的區別 54
4.4.3 使用<div>標簽和<span>標簽布局網頁內容 54
4.5 表單 55
4.5.1 表單的工作機制 55
4.5.2 表單標簽<form>…</form> 55
4.5.3 表單元素 56
4.5.4 案例―制作珠寶商城會員注冊表單 59
4.5.5 使用表格布局表單 61
習題4 62
第5章 CSS基礎 64
5.1 CSS簡介 64
5.1.1 什么是CSS 64
5.1.2 CSS的發展歷史 64
5.1.3 CSS3的特點 65
5.1.4 CSS編寫規則 65
5.1.5 CSS的工作環境 67
5.2 HTML與CSS 67
5.2.1 傳統HTML的缺點 67
5.2.2 CSS的優勢 68
5.2.3 CSS的局限性 68
5.3 CSS語法基礎 68
5.3.1 CSS樣式規則 69
5.3.2 基本選擇符 69
5.3.3 復合選擇符 71
5.3.4 通配符選擇符 73
5.3.5 特殊選擇符 74
5.4 CSS的屬性單位 76
5.4.1 長度、百分比單位 76
5.4.2 色彩單位 77
5.5 網頁中引用CSS的方法 78
5.5.1 行內樣式 78
5.5.2 內部樣式表 79
5.5.3 鏈入外部樣式表 80
5.5.4 導入外部樣式表 81
5.5.5 案例―制作珠寶商城客服中心頁面 82
5.6 文檔結構 84
5.6.1 文檔結構的基本概念 84
5.6.2 繼承 85
5.6.3 樣式表的層疊、特殊性與重要性 86
5.6.4 元素類型 88
5.6.5 案例―制作珠寶商城特色禮品局部頁面 89
習題5 92
第6章 CSS盒模型 93
6.1 盒模型的概念 93
6.2 邊框、外邊距與內邊距 94
6.2.1 邊框 94
6.2.2 外邊距 97
6.2.3 內邊距 99
6.2.4 案例―盒模型的演示 99
6.3 盒模型的尺寸 101
6.3.1 盒模型的寬度與高度 101
6.3.2 塊級元素與行級元素寬度和高度的區別 101
6.4 盒子的margin疊加問題 102
6.4.1 行級元素之間的水平margin疊加 102
6.4.2 塊級元素之間的垂直margin疊加 103
6.5 盒模型綜合案例―珠寶商城頂部內容 105
6.6 盒子的定位 108
6.6.1 定位屬性 108
6.6.2 定位方式 109
6.7 浮動與清除浮動 113
6.7.1 浮動 114
6.7.2 清除浮動 117
6.8 綜合案例―珠寶商城市場團隊簡介頁面 118
6.8.1 頁面布局規劃 118
6.8.2 頁面的制作過程 119
習題6 122
第7章 使用CSS修飾常見的網頁元素 124
7.1 設置字體樣式 124
7.1.1 字體類型 124
7.1.2 字體大小 124
7.1.3 字體粗細 125
7.1.4 字體傾斜 125
7.1.5 設置字體樣式綜合案例 125
7.2 設置文本樣式 126
7.2.1 文本水平對齊方式 126
7.2.2 行高 127
7.2.3 文本的修飾 127
7.2.4 段落首行縮進 127
7.2.5 首字下沉 127
7.2.6 文本的截斷 128
7.2.7 文本換行 128
7.2.8 文本的顏色 128
7.2.9 文本的背景顏色 129
7.2.10 設置文本樣式綜合案例 129
7.3 設置圖像樣式 130
7.3.1 圖像縮放 131
7.3.2 圖像邊框 132
7.3.3 背景圖像 133
7.3.4 背景重復 133
7.3.5 背景圖像定位 134
7.3.6 背景圖像大小 136
7.4 設置表格樣式 137
7.4.1 常用的CSS表格屬性 137
7.4.2 案例―使用隔行換色表格制作暢銷商品銷量排行榜 140
7.5 設置表單樣式 142
7.5.1 使用CSS修飾常用的表單元素 142
7.5.2 案例―制作珠寶商城會員注冊頁面 146
7.6 綜合案例―制作珠寶商城網購空間頁面 149
7.6.1 頁面布局規劃 149
7.6.2 頁面的制作過程 150
習題7 152
第8章 使用CSS設置鏈接與導航 154
8.1 使用CSS設置鏈接 154
8.1.1 設置文字鏈接的外觀 154
8.1.2 圖文鏈接 157
8.1.3 按鈕式鏈接 157
8.2 使用CSS設置列表 159
8.2.1 表格布局的缺點 159
8.2.2 列表布局的優勢 160
8.2.3 CSS列表屬性 160
8.2.4 圖文信息列表 165
8.3 創建導航菜單 169
8.3.1 普通的超鏈接導航菜單 169
8.3.2 縱向列表模式的導航菜單 170
8.3.3 橫向列表模式的導航菜單 174
8.4 綜合案例―使用CSS修飾頁面和制作導航菜單 177
8.4.1 制作珠寶商城網購學堂主頁 177
8.4.2 制作珠寶商城網購學堂欄目頁 186
習題8 190
第9章 Div+CSS布局頁面 191
9.1 Div+CSS布局理念 191
9.1.1 認識Div+CSS布局 191
9.1.2 正確理解Web標準 191
9.1.3 將頁面用Div分塊 192
9.2 典型的CSS布局樣式 193
9.2.1 兩列布局樣式 193
9.2.2 三列布局樣式 196
9.3 綜合案例―制作珠寶商城博客頁面 200
9.4 綜合案例―制作珠寶商城網絡服務中心頁面 209
9.4.1 頁面布局規劃 209
9.4.2 頁面的制作過程 210
習題9 216
第10章 網頁行為語言―JavaScript 218
10.1 JavaScript概述 218
10.2 在網頁中調用JavaScript 218
10.3 JavaScript基本交互方法 219
10.3.1 信息對話框 219
10.3.2 選擇對話框 220
10.3.3 提示對話框 221
10.4 表單對象與交互性 222
10.5 制作網頁特效 226
10.5.1 制作網頁Tab選項卡切換效果 226
10.5.2 循環滾動的圖文字幕 229
10.5.3 幻燈片廣告 232
10.5.4 制作二級縱向列表模式的導航菜單 234
習題10 237
第11章 珠寶商城前臺頁面 239
11.1 網站的開發流程 239
11.1.1 規劃站點 239
11.1.2 網站制作 241
11.1.3 測試網站 241
11.1.4 發布站點 241
11.2 設計首頁布局 241
11.2.1 創建站點目錄 241
11.2.2 頁面布局規劃 242
11.3 制作首頁 242
11.4 制作產品列表頁 253
11.5 制作產品明細頁 256
11.6 制作查看購物車頁 262
習題11 265
第12章 珠寶商城后臺管理頁面 267
12.1 制作后臺管理登錄頁 267
12.2 制作查詢商品頁 271
12.3 制作添加商品頁 280
12.4 制作會員管理頁 283
12.5 欄目的整合 285
習題12 286
參考文獻 287