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