Web前端開發(fā)實(shí)例教程――HTML5+CSS3+JavaScript

目 錄
第1章 網(wǎng)站規(guī)劃和網(wǎng)頁設(shè)計(jì)基礎(chǔ)\t1
1．1 萬維網(wǎng)WWW\t1
1．1．1 WWW和瀏覽器的基本概念\t1
1．1．2 網(wǎng)址\t2
1．1．3 超文本\t3
1．1．4 超文本標(biāo)記語言HTML\t3
1．1．5 HTTP\t3
1．1．6 搜索引擎\t4
1．2 網(wǎng)站與網(wǎng)頁的基本概念\t4
1．2．1 網(wǎng)站、網(wǎng)頁和主頁\t4
1．2．2 靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁\t5
1．3 網(wǎng)站的規(guī)劃與設(shè)計(jì)\t5
1．4 定位網(wǎng)站的主題和名稱\t6
1．4．1 網(wǎng)站主題的確定\t6
1．4．2 網(wǎng)站名稱的確定\t6
1．5 確定網(wǎng)站的CI形象\t7
1．6 網(wǎng)站內(nèi)容的設(shè)計(jì)\t7
1．6．1 設(shè)計(jì)網(wǎng)站的欄目\t8
1．6．2 確定網(wǎng)站的目錄結(jié)構(gòu)\t8
1．6．3 設(shè)計(jì)網(wǎng)站的鏈接結(jié)構(gòu)\t9
1．7 網(wǎng)頁的基本元素\t10
1．8 網(wǎng)頁布局結(jié)構(gòu)\t11
1．9 常見的網(wǎng)頁編輯工具\(yùn)t12
1．10 Web標(biāo)準(zhǔn)\t13
1．10．1 什么是Web標(biāo)準(zhǔn)\t13
1．10．2 建立Web標(biāo)準(zhǔn)的優(yōu)點(diǎn)\t14
1．10．3 理解表現(xiàn)和結(jié)構(gòu)相分離\t14
習(xí)題1\t15
第2章 HTML概述\t16
2．1 HTML簡(jiǎn)介\t16
2．1．1 Web技術(shù)發(fā)展歷程\t16
2．1．2 HTML5的特性\t16
2．1．3 HTML5元素\t17
2．2 HTML語法基礎(chǔ)\t17
2．2．1 HTML語法結(jié)構(gòu)\t18
2．2．2 HTML編寫規(guī)范\t18
2．2．3 HTML5文檔結(jié)構(gòu)\t19
2．3 創(chuàng)建HTML文檔\t20
2．4 搭建支持HTML5的瀏覽器環(huán)境\t21
2．5 網(wǎng)頁頭部標(biāo)簽\t22
2．5．1 ＜title＞標(biāo)簽\t22
2．5．2 ＜meta＞標(biāo)簽\t22
2．5．3 ＜link＞標(biāo)簽\t23
2．5．4 ＜script＞標(biāo)簽\t23
2．5．5 案例―制作珠寶商城頁面摘要信息\t23
2．6 注釋\t24
2．7 特殊符號(hào)\t24
習(xí)題2\t25
第3章 編輯網(wǎng)頁文檔\t26
3．1 文字與段落排版\t26
3．1．1 段落標(biāo)簽＜p＞…＜/p＞\t26
3．1．2 強(qiáng)制換行標(biāo)簽＜br/＞\t26
3．1．3 標(biāo)題標(biāo)簽＜h#＞…＜/h#＞\t27
3．1．4 水平線標(biāo)簽＜hr/＞\t28
3．1．5 縮排標(biāo)簽＜blockquote＞…＜/blockquote＞\t29
3．1．6 案例―制作珠寶商城關(guān)于我們頁面\t29
3．2 超鏈接\t30
3．2．1 超鏈接簡(jiǎn)介\t30
3．2．2 超鏈接的應(yīng)用\t30
3．2．3 案例―制作珠寶商城服務(wù)指南及下載頁面\t32
3．3 圖像\t33
3．3．1 Web圖像的格式及使用要點(diǎn)\t33
3．3．2 圖像標(biāo)簽＜img＞\t34
3．3．3 圖像超鏈接\t35
3．3．4 設(shè)置網(wǎng)頁背景圖像\t35
3．3．5 圖文混排\t36
3．4 列表\t37
3．4．1 無序列表\t37
3．4．2 有序列表\t38
3．4．3 定義列表\t39
3．4．4 嵌套列表\t40
習(xí)題3\t41
第4章 網(wǎng)頁布局與交互\t42
4．1 表格\t42
4．1．1 表格的結(jié)構(gòu)\t42
4．1．2 表格的基本語法\t42
4．1．3 表格的屬性\t43
4．1．4 不規(guī)范表格\t45
4．1．5 表格數(shù)據(jù)的分組\t46
4．1．6 使用表格實(shí)現(xiàn)頁面局部布局\t48
4．2 使用結(jié)構(gòu)元素構(gòu)建網(wǎng)頁布局\t49
4．3 ＜div＞標(biāo)簽\t53
4．4 ＜span＞標(biāo)簽\t53
4．4．1 基本語法\t53
4．4．2 ＜span＞標(biāo)簽與＜div＞標(biāo)簽的區(qū)別\t54
4．4．3 使用＜div＞標(biāo)簽和＜span＞標(biāo)簽布局網(wǎng)頁內(nèi)容\t54
4．5 表單\t55
4．5．1 表單的工作機(jī)制\t55
4．5．2 表單標(biāo)簽＜form＞…＜/form＞\t55
4．5．3 表單元素\t56
4．5．4 案例―制作珠寶商城會(huì)員注冊(cè)表單\t59
4．5．5 使用表格布局表單\t61
習(xí)題4\t62
第5章 CSS基礎(chǔ)\t64
5．1 CSS簡(jiǎn)介\t64
5．1．1 什么是CSS\t64
5．1．2 CSS的發(fā)展歷史\t64
5．1．3 CSS3的特點(diǎn)\t65
5．1．4 CSS編寫規(guī)則\t65
5．1．5 CSS的工作環(huán)境\t67
5．2 HTML與CSS\t67
5．2．1 傳統(tǒng)HTML的缺點(diǎn)\t67
5．2．2 CSS的優(yōu)勢(shì)\t68
5．2．3 CSS的局限性\t68
5．3 CSS語法基礎(chǔ)\t68
5．3．1 CSS樣式規(guī)則\t69
5．3．2 基本選擇符\t69
5．3．3 復(fù)合選擇符\t71
5．3．4 通配符選擇符\t73
5．3．5 特殊選擇符\t74
5．4 CSS的屬性單位\t76
5．4．1 長(zhǎng)度、百分比單位\t76
5．4．2 色彩單位\t77
5．5 網(wǎng)頁中引用CSS的方法\t78
5．5．1 行內(nèi)樣式\t78
5．5．2 內(nèi)部樣式表\t79
5．5．3 鏈入外部樣式表\t80
5．5．4 導(dǎo)入外部樣式表\t81
5．5．5 案例―制作珠寶商城客服中心頁面\t82
5．6 文檔結(jié)構(gòu)\t84
5．6．1 文檔結(jié)構(gòu)的基本概念\t84
5．6．2 繼承\(zhòng)t85
5．6．3 樣式表的層疊、特殊性與重要性\t86
5．6．4 元素類型\t88
5．6．5 案例―制作珠寶商城特色禮品局部頁面\t89
習(xí)題5\t92
第6章 CSS盒模型\t93
6．1 盒模型的概念\t93
6．2 邊框、外邊距與內(nèi)邊距\t94
6．2．1 邊框\t94
6．2．2 外邊距\t97
6．2．3 內(nèi)邊距\t99
6．2．4 案例―盒模型的演示\t99
6．3 盒模型的尺寸\t101
6．3．1 盒模型的寬度與高度\t101
6．3．2 塊級(jí)元素與行級(jí)元素寬度和高度的區(qū)別\t101
6．4 盒子的margin疊加問題\t102
6．4．1 行級(jí)元素之間的水平margin疊加\t102
6．4．2 塊級(jí)元素之間的垂直margin疊加\t103
6．5 盒模型綜合案例―珠寶商城頂部?jī)?nèi)容\t105
6．6 盒子的定位\t108
6．6．1 定位屬性\t108
6．6．2 定位方式\t109
6．7 浮動(dòng)與清除浮動(dòng)\t113
6．7．1 浮動(dòng)\t114
6．7．2 清除浮動(dòng)\t117
6．8 綜合案例―珠寶商城市場(chǎng)團(tuán)隊(duì)簡(jiǎn)介頁面\t118
6．8．1 頁面布局規(guī)劃\t118
6．8．2 頁面的制作過程\t119
習(xí)題6\t122
第7章 使用CSS修飾常見的網(wǎng)頁元素\t124
7．1 設(shè)置字體樣式\t124
7．1．1 字體類型\t124
7．1．2 字體大小\t124
7．1．3 字體粗細(xì)\t125
7．1．4 字體傾斜\t125
7．1．5 設(shè)置字體樣式綜合案例\t125
7．2 設(shè)置文本樣式\t126
7．2．1 文本水平對(duì)齊方式\t126
7．2．2 行高\(yùn)t127
7．2．3 文本的修飾\t127
7．2．4 段落首行縮進(jìn)\t127
7．2．5 首字下沉\t127
7．2．6 文本的截?cái)郳t128
7．2．7 文本換行\(zhòng)t128
7．2．8 文本的顏色\t128
7．2．9 文本的背景顏色\t129
7．2．10 設(shè)置文本樣式綜合案例\t129
7．3 設(shè)置圖像樣式\t130
7．3．1 圖像縮放\t131
7．3．2 圖像邊框\t132
7．3．3 背景圖像\t133
7．3．4 背景重復(fù)\t133
7．3．5 背景圖像定位\t134
7．3．6 背景圖像大小\t136
7．4 設(shè)置表格樣式\t137
7．4．1 常用的CSS表格屬性\t137
7．4．2 案例―使用隔行換色表格制作暢銷商品銷量排行榜\t140
7．5 設(shè)置表單樣式\t142
7．5．1 使用CSS修飾常用的表單元素\t142
7．5．2 案例―制作珠寶商城會(huì)員注冊(cè)頁面\t146
7．6 綜合案例―制作珠寶商城網(wǎng)購(gòu)空間頁面\t149
7．6．1 頁面布局規(guī)劃\t149
7．6．2 頁面的制作過程\t150
習(xí)題7\t152
第8章 使用CSS設(shè)置鏈接與導(dǎo)航\t154
8．1 使用CSS設(shè)置鏈接\t154
8．1．1 設(shè)置文字鏈接的外觀\t154
8．1．2 圖文鏈接\t157
8．1．3 按鈕式鏈接\t157
8．2 使用CSS設(shè)置列表\t159
8．2．1 表格布局的缺點(diǎn)\t159
8．2．2 列表布局的優(yōu)勢(shì)\t160
8．2．3 CSS列表屬性\t160
8．2．4 圖文信息列表\t165
8．3 創(chuàng)建導(dǎo)航菜單\t169
8．3．1 普通的超鏈接導(dǎo)航菜單\t169
8．3．2 縱向列表模式的導(dǎo)航菜單\t170
8．3．3 橫向列表模式的導(dǎo)航菜單\t174
8．4 綜合案例―使用CSS修飾頁面和制作導(dǎo)航菜單\t177
8．4．1 制作珠寶商城網(wǎng)購(gòu)學(xué)堂主頁\t177
8．4．2 制作珠寶商城網(wǎng)購(gòu)學(xué)堂欄目頁\t186
習(xí)題8\t190
第9章 Div+CSS布局頁面\t191
9．1 Div+CSS布局理念\t191
9．1．1 認(rèn)識(shí)Div+CSS布局\t191
9．1．2 正確理解Web標(biāo)準(zhǔn)\t191
9．1．3 將頁面用Div分塊\t192
9．2 典型的CSS布局樣式\t193
9．2．1 兩列布局樣式\t193
9．2．2 三列布局樣式\t196
9．3 綜合案例―制作珠寶商城博客頁面\t200
9．4 綜合案例―制作珠寶商城網(wǎng)絡(luò)服務(wù)中心頁面\t209
9．4．1 頁面布局規(guī)劃\t209
9．4．2 頁面的制作過程\t210
習(xí)題9\t216
第10章 網(wǎng)頁行為語言―JavaScript\t218
10．1 JavaScript概述\t218
10．2 在網(wǎng)頁中調(diào)用JavaScript\t218
10．3 JavaScript基本交互方法\t219
10．3．1 信息對(duì)話框\t219
10．3．2 選擇對(duì)話框\t220
10．3．3 提示對(duì)話框\t221
10．4 表單對(duì)象與交互性\t222
10．5 制作網(wǎng)頁特效\t226
10．5．1 制作網(wǎng)頁Tab選項(xiàng)卡切換效果\t226
10．5．2 循環(huán)滾動(dòng)的圖文字幕\t229
10．5．3 幻燈片廣告\t232
10．5．4 制作二級(jí)縱向列表模式的導(dǎo)航菜單\t234
習(xí)題10\t237
第11章 珠寶商城前臺(tái)頁面\t239
11．1 網(wǎng)站的開發(fā)流程\t239
11．1．1 規(guī)劃站點(diǎn)\t239
11．1．2 網(wǎng)站制作\t241
11．1．3 測(cè)試網(wǎng)站\t241
11．1．4 發(fā)布站點(diǎn)\t241
11．2 設(shè)計(jì)首頁布局\t241
11．2．1 創(chuàng)建站點(diǎn)目錄\t241
11．2．2 頁面布局規(guī)劃\t242
11．3 制作首頁\t242
11．4 制作產(chǎn)品列表頁\t253
11．5 制作產(chǎn)品明細(xì)頁\t256
11．6 制作查看購(gòu)物車頁\t262
習(xí)題11\t265
第12章 珠寶商城后臺(tái)管理頁面\t267
12．1 制作后臺(tái)管理登錄頁\t267
12．2 制作查詢商品頁\t271
12．3 制作添加商品頁\t280
12．4 制作會(huì)員管理頁\t283
12．5 欄目的整合\t285
習(xí)題12\t286
參考文獻(xiàn)\t287