《HTML 5+CSS 3+JavaScript網(wǎng)頁設(shè)計案例課堂(第2版)》以零基礎(chǔ)講解為宗旨，用實(shí)例引導(dǎo)讀者深入學(xué)習(xí)，采取【HTML 5網(wǎng)頁設(shè)計→CSS 3美化網(wǎng)頁→JavaScript動態(tài)特效→綜合案例實(shí)戰(zhàn)】的講解模式，深入淺出地講解CSS+DIV的各項(xiàng)技術(shù)及實(shí)戰(zhàn)技能。
《HTML 5+CSS 3+JavaScript網(wǎng)頁設(shè)計案例課堂(第2版)》第I篇主要內(nèi)容包括初識HTML 5、HTML 5網(wǎng)頁的文檔結(jié)構(gòu)、HTML 5網(wǎng)頁中的文本和圖像、用HTML 5建立超鏈接、用HTML 5創(chuàng)建表格、用HTML 5創(chuàng)建表單、用HTML 5繪制圖形、HTML 5中的音頻和視頻等；第II篇主要內(nèi)容包括CSS 3概述與基本語法、用CSS 3美化網(wǎng)頁字體與段落、用CSS 3美化網(wǎng)頁圖片、用CSS 3美化網(wǎng)頁背景與邊框、用CSS 3美化超級鏈接和鼠標(biāo)、用CSS 3美化表格和表單的樣式、用CSS 3美化網(wǎng)頁菜單、用濾鏡美化網(wǎng)頁元素、CSS 3中的動畫效果等；第III篇主要內(nèi)容包括JavaScript編程基本知識、JavaScript的程序控制結(jié)構(gòu)與語句、JavaScript中的函數(shù)、JavaScript對象編程、JavaScript的內(nèi)置對象、HTML 5、CSS 3和JavaScript的綜合應(yīng)用等；第IV篇主要內(nèi)容包括制作企業(yè)門戶類網(wǎng)頁、制作在線購物類網(wǎng)頁、移動設(shè)備類型網(wǎng)站開發(fā)。
《HTML 5+CSS 3+JavaScript網(wǎng)頁設(shè)計案例課堂(第2版)》適合任何想學(xué)習(xí)網(wǎng)頁前臺網(wǎng)頁設(shè)計與布局的人員，無論您是否從事計算機(jī)相關(guān)行業(yè)，是否接觸過HTML 5、CSS 3和JavaScript，通過學(xué)習(xí)均可快速掌握HTML 5+CSS 3+JavaScript的設(shè)計方法和技巧。
零基礎(chǔ)、入門級的講解
無論您是否從事計算機(jī)相關(guān)行業(yè)，是否接觸過網(wǎng)頁制作和設(shè)計，都能從本書中找到*佳起點(diǎn)。
超多、實(shí)用、專業(yè)的范例和項(xiàng)目
本書在編排上緊密結(jié)合深入學(xué)習(xí)網(wǎng)頁制作技術(shù)的先后過程，從HTML 5的基本概念開始，帶領(lǐng)大家逐步深入地學(xué)習(xí)各種應(yīng)用技巧，側(cè)重實(shí)戰(zhàn)技能，使用簡單易懂的實(shí)際案例進(jìn)行分析和操作指導(dǎo)，讓讀者讀起來簡明輕松，操作起來有章可循。
隨時檢測自己的學(xué)習(xí)成果
每章首頁中，均提供了學(xué)習(xí)目標(biāo)，以指導(dǎo)讀者重點(diǎn)學(xué)習(xí)及學(xué)后檢查。
大部分章*后的“跟我學(xué)上機(jī)”板塊，均根據(jù)本章內(nèi)容精選而成，讀者可以隨時檢測自己的學(xué)習(xí)成果和實(shí)戰(zhàn)能力，做到融會貫通。
細(xì)致入微、貼心提示
本書在講解過程中，在各章中使用了“注意”“提示”“技巧”等小貼士，使讀者在學(xué)習(xí)過程中更清楚地了解相關(guān)操作、理解相關(guān)概念，并輕松掌握各種操作技巧。
專業(yè)創(chuàng)作團(tuán)隊(duì)和技術(shù)支持
本書由千谷高新教育中心編著和提供技術(shù)支持。
您在學(xué)習(xí)過程中遇到任何問題，可加入QQ群進(jìn)行提問，專家人員會在線答疑。
超值資源大放送
全程同步教學(xué)錄像
涵蓋本書所有知識點(diǎn)，詳細(xì)講解每個實(shí)例及項(xiàng)目的過程及技術(shù)關(guān)鍵點(diǎn)。比看書更輕松地掌握書中所有的網(wǎng)頁制作和設(shè)計知識，而且擴(kuò)展的講解部分使您得到比書中更多的收獲。
超多容量資源
贈送大量資源，包括實(shí)例源代碼、教學(xué)幻燈片、本書精品教學(xué)視頻、88個實(shí)用類網(wǎng)頁模板、12部網(wǎng)頁開發(fā)必備參考手冊、HTML 5標(biāo)簽速查手冊、精選的JavaScript實(shí)例、CSS 3屬性速查表、JavaScript函數(shù)速查手冊、CSS+DIV布局賞析案例、精彩網(wǎng)站配色方案賞析、網(wǎng)頁樣式與布局案例賞析、Web前端工程師常見面試題等。讀者可以通過QQ群獲取贈送資源，也可以掃描二維碼，下載本書資源。
前 言
“網(wǎng)站開發(fā)案例課堂”系列圖書是專門為辦公技能和網(wǎng)頁設(shè)計初學(xué)者量身定制的一套學(xué)習(xí)用書。整套書涵蓋高效辦公、網(wǎng)站開發(fā)、數(shù)據(jù)庫設(shè)計等方面。整套書具有以下幾個特點(diǎn)。
前沿科技
無論是網(wǎng)站建設(shè)、數(shù)據(jù)庫設(shè)計還是HTML 5、CSS 3，我們都精選較為前沿或者用戶群最大的領(lǐng)域推進(jìn)，幫助大家認(rèn)識和了解最新動態(tài)。
權(quán)威的作者團(tuán)隊(duì)
組織國家重點(diǎn)實(shí)驗(yàn)室和資深應(yīng)用專家聯(lián)手編著該套圖書，融合豐富的教學(xué)經(jīng)驗(yàn)與優(yōu)秀的管理理念。
學(xué)習(xí)型案例設(shè)計
以技術(shù)的實(shí)際應(yīng)用過程為主線，全程采用圖解和同步多媒體結(jié)合的教學(xué)方式，生動、直觀、全面地剖析使用過程中的各種應(yīng)用技能，降低難度以提升學(xué)習(xí)效率。
為什么要寫這樣一本書
目前，HTML 5、CSS 3和JavaScript是網(wǎng)頁制作和設(shè)計的黃金搭檔。特別是HTML 5的出現(xiàn)，大大減輕了前端開發(fā)者的工作量，降低了開發(fā)成本。目前學(xué)習(xí)和關(guān)注的人越來越多，而很多網(wǎng)頁制作和設(shè)計的初學(xué)者都苦于找不到一本通俗易懂、容易入門和案例實(shí)用的參考書。通過本書的案例實(shí)訓(xùn)，讀者可以很快地上手流行的工具，提高職業(yè)化能力，從而幫助解決公司與學(xué)生的雙重需求問題。
本書特色
零基礎(chǔ)、入門級的講解
無論您是否從事計算機(jī)相關(guān)行業(yè)，是否接觸過網(wǎng)頁制作和設(shè)計，都能從本書中找到最佳起點(diǎn)。
超多、實(shí)用、專業(yè)的范例和項(xiàng)目
本書在編排上緊密結(jié)合深入學(xué)習(xí)網(wǎng)頁制作技術(shù)的先后過程，從HTML 5的基本概念開始，帶領(lǐng)大家逐步深入地學(xué)習(xí)各種應(yīng)用技巧，側(cè)重實(shí)戰(zhàn)技能，使用簡單易懂的實(shí)際案例進(jìn)行分析和操作指導(dǎo)，讓讀者讀起來簡明輕松，操作起來有章可循。
隨時檢測自己的學(xué)習(xí)成果
每章首頁中，均提供了學(xué)習(xí)目標(biāo)，以指導(dǎo)讀者重點(diǎn)學(xué)習(xí)及學(xué)后檢查。
大部分章最后的“跟我學(xué)上機(jī)”板塊，均根據(jù)本章內(nèi)容精選而成，讀者可以隨時檢測自己的學(xué)習(xí)成果和實(shí)戰(zhàn)能力，做到融會貫通。
細(xì)致入微、貼心提示
本書在講解過程中，在各章中使用了“注意”“提示”“技巧”等小貼士，使讀者在學(xué)習(xí)過程中更清楚地了解相關(guān)操作、理解相關(guān)概念，并輕松掌握各種操作技巧。
專業(yè)創(chuàng)作團(tuán)隊(duì)和技術(shù)支持
本書由千谷高新教育中心編著和提供技術(shù)支持。
您在學(xué)習(xí)過程中遇到任何問題，可加入QQ群(案例課堂VIP)——451102631進(jìn)行提問，專家人員會在線答疑。
超值資源大放送
全程同步教學(xué)錄像
涵蓋本書所有知識點(diǎn)，詳細(xì)講解每個實(shí)例及項(xiàng)目的過程及技術(shù)關(guān)鍵點(diǎn)。比看書更輕松地掌握書中所有的網(wǎng)頁制作和設(shè)計知識，而且擴(kuò)展的講解部分使您得到比書中更多的收獲。
超多容量王牌資源
贈送大量王牌資源，包括實(shí)例源代碼、教學(xué)幻燈片、本書精品教學(xué)視頻、88個實(shí)用類網(wǎng)頁模板、12部網(wǎng)頁開發(fā)必備參考手冊、HTML 5標(biāo)簽速查手冊、精選的JavaScript實(shí)例、CSS 3屬性速查表、JavaScript函數(shù)速查手冊、CSS+DIV布局賞析案例、精彩網(wǎng)站配色方案賞析、網(wǎng)頁樣式與布局案例賞析、Web前端工程師常見面試題等。讀者可以通過QQ群(案例課堂VIP)——451102631獲取贈送資源，也可以掃描二維碼，下載本書資源。
讀者對象
沒有任何網(wǎng)頁設(shè)計基礎(chǔ)的初學(xué)者。
有一定的HTML 5和CSS 3基礎(chǔ)，想精通網(wǎng)頁制作和設(shè)計的人員。
有一定的HTML 5和CSS 3基礎(chǔ)，沒有項(xiàng)目經(jīng)驗(yàn)的人員。
正在進(jìn)行畢業(yè)設(shè)計的學(xué)生。
大專院校及培訓(xùn)學(xué)校的老師和學(xué)生。
創(chuàng)作團(tuán)隊(duì)
本書由劉春茂編著，參加編寫的人員還有劉玉萍、張金偉、蒲娟、周佳、付紅、李園、郭廣新、侯永崗、王攀登、劉海松、孫若淞、王月嬌、包慧利、陳偉光、胡同夫、王偉、展娜娜、李琪、梁云梁和周浩浩。在編寫過程中，我們竭盡所能地將最好的講解呈現(xiàn)給讀者，但也難免有疏漏和不妥之處，敬請不吝指正。
編 者
收起全部↑
劉春茂，本科畢業(yè)于上海復(fù)旦大學(xué)，碩士畢業(yè)于清華大學(xué)。曾在美國IBM公司移動產(chǎn)品開發(fā)組從事Android平臺應(yīng)用的開發(fā)。
擅長的核心技術(shù)
媒體和教育領(lǐng)域個性化信息推薦，網(wǎng)站用戶行為數(shù)據(jù)挖掘，健康領(lǐng)域非結(jié)構(gòu)化數(shù)據(jù)處理。
擅長的其他技術(shù)
熟悉各種網(wǎng)站和手機(jī)（Andorid和iOS）app的開發(fā)等，精通Java, C/C++, PHP, Python等流行語言并對Hadoop， MapReduce等大數(shù)據(jù)框架有深入研究。
第1篇 HTML 5網(wǎng)頁設(shè)計
第1章 初識HTML 5 3
1.1 HTML 5的基本概念 4
1.1.1 HTML的發(fā)展歷程 4
1.1.2 什么是HTML 5 4
1.1.3 HTML 5文件的基本結(jié)構(gòu) 5
1.2 HTML 5的優(yōu)勢 5
1.2.1 解決了跨瀏覽器問題 5
1.2.2 新增了多個新特性 5
1.2.3 用戶優(yōu)先的原則 6
1.2.4 化繁為簡的優(yōu)勢 7
1.3 HTML 5文件的編寫方法 7
1.3.1 使用記事本手工編寫HTML 5 7
1.3.2 使用Dreamweaver CC編寫
HTML文件 8
1.4 使用瀏覽器查看HTML 5文件 12
1.4.1 查看頁面效果 12
1.4.2 查看源文件 13
1.5 疑難解惑 13
第2章 HTML 5網(wǎng)頁的文檔結(jié)構(gòu) 15
2.1 HTML 5文件的基本結(jié)構(gòu) 16
2.1.1 HTML 5頁面的整體結(jié)構(gòu) 16
2.1.2 HTML 5新增的結(jié)構(gòu)標(biāo)記 16
2.2 HTML 5基本標(biāo)記詳解 17
2.2.1 文檔類型說明 17
2.2.2 HTML標(biāo)記 17
2.2.3 頭標(biāo)記head 18
2.2.4 網(wǎng)頁的主體標(biāo)記body 20
2.2.5 頁面注釋標(biāo)記 21
2.3 HTML 5語法的變化 22
2.3.1 標(biāo)簽不再區(qū)分大小寫 22
2.3.2 允許屬性值不使用引號 22
2.3.3 允許部分屬性的屬性值省略 23
2.4 綜合案例——符合W3C標(biāo)準(zhǔn)的
HTML 5網(wǎng)頁 23
2.5 跟我學(xué)上機(jī)——簡單的HTML 5
網(wǎng)頁 25
2.6 疑難解惑 26
第3章 HTML 5網(wǎng)頁中的文本和圖像 27
3.1 在網(wǎng)頁中添加文本 28
3.1.1 普通文本的添加 28
3.1.2 特殊字符文本的添加 28
3.1.3 使用HTML 5標(biāo)記添加特殊
文本 30
3.2 文本排版 32
3.2.1 換行標(biāo)記
32
3.2.2 段落標(biāo)記
32
3.2.3 標(biāo)題標(biāo)記
~
33
3.3 文字列表 34
3.3.1 建立無序列表
34
3.3.2 建立有序列表
36
3.3.3 建立不同類型的無序列表 37
3.3.4 建立不同類型的有序列表 38
3.3.5 建立嵌套列表 38
3.3.6 自定義列表 39
3.4 網(wǎng)頁中的圖像 40
3.4.1 在網(wǎng)頁中插入圖像 40
3.4.2 設(shè)置圖像的寬度和高度 42
3.4.3 設(shè)置圖像的提示文字 43
3.4.4 將圖片設(shè)置為網(wǎng)頁背景 44
3.4.5 排列圖像 45
3.5 綜合案例——圖文并茂的房屋裝飾裝修
網(wǎng)頁 45
3.6 跟我學(xué)上機(jī)——在線購物網(wǎng)站的產(chǎn)品
展示效果 47
3.7 疑難解惑 48
第4章 用HTML 5建立超鏈接 49
4.1 URL的概念 50
4.1.1 URL的格式 50
4.1.2 URL的類型 50
4.2 超鏈接標(biāo)記 51
4.2.1 設(shè)置文本和圖片的超鏈接 51
4.2.2 創(chuàng)建指向不同目標(biāo)類型的
超鏈接 52
4.2.3 設(shè)置以新窗口顯示超鏈接
頁面 54
4.2.4 鏈接到同一頁面的不同位置 55
4.3 創(chuàng)建熱點(diǎn)區(qū)域 56
4.4 創(chuàng)建浮動框架 58
4.5 綜合案例——用Dreamweaver精確
定位熱點(diǎn)區(qū)域 59
4.6 跟我學(xué)上機(jī)——創(chuàng)建熱點(diǎn)區(qū)域 61
4.7 疑難解惑 62
第5章 用HTML 5創(chuàng)建表格 63
5.1 表格的基本結(jié)構(gòu) 64
5.2 創(chuàng)建表格 65
5.2.1 創(chuàng)建普通表格 65
5.2.2 創(chuàng)建一個帶有標(biāo)題的表格 66
5.3 編輯表格 67
5.3.1 定義表格的邊框類型 67
5.3.2 定義表格的表頭 68
5.3.3 設(shè)置表格背景 69
5.3.4 設(shè)置單元格的背景 71
5.3.5 合并單元格 72
5.3.6 排列單元格中的內(nèi)容 76
5.3.7 設(shè)置單元格的行高與列寬 77
5.4 完整的表格標(biāo)記 78
5.5 綜合案例——制作計算機(jī)報價表 79
5.6 跟我學(xué)上機(jī)——制作學(xué)生成績表 82
5.7 疑難解惑 85
第6章 用HTML 5創(chuàng)建表單 87
6.1 表單概述 88
6.2 表單基本元素的使用 88
6.2.1 單行文本輸入框 89
6.2.2 多行文本輸入框 89
6.2.3 密碼輸入框 90
6.2.4 單選按鈕 91
6.2.5 復(fù)選框 92
6.2.6 列表框 92
6.2.7 普通按鈕 93
6.2.8 提交按鈕 94
6.2.9 重置按鈕 95
6.3 表單高級元素的使用 96
6.3.1 url屬性的使用 96
6.3.2 email屬性的使用 97
6.3.3 date和time屬性的使用 97
6.3.4 number屬性的使用 98
6.3.5 range屬性的使用 99
6.3.6 required屬性的使用 100
6.4 綜合案例——創(chuàng)建用戶反饋表單 101
6.5 跟我學(xué)上機(jī)——制作用戶注冊表單 102
6.6 疑難解惑 103
第7章 用HTML 5繪制圖形 105
7.1 添加canvas的步驟 106
7.2 繪制基本形狀 106
7.2.1 繪制矩形 107
7.2.2 繪制圓形 108
7.2.3 使用moveTo與lineTo繪制
直線 108
7.2.4 使用bezierCurveTo繪制貝塞爾
曲線 109
7.3 繪制漸變圖形 111
7.3.1 繪制線性漸變 111
7.3.2 繪制徑向漸變 112
7.4 繪制變形圖形 114
7.4.1 繪制平移效果的圖形 114
7.4.2 繪制縮放效果的圖形 115
7.4.3 繪制旋轉(zhuǎn)效果的圖形 116
7.4.4 繪制組合圖形 117
7.4.5 繪制帶陰影的圖形 119
7.5 使用圖像 120
7.5.1 繪制圖像 120
7.5.2 平鋪圖像 121
7.5.3 裁剪圖像 122
7.5.4 圖像的像素化處理 124
7.6 繪制文字 126
7.7 圖形的保存與恢復(fù) 127
7.7.1 保存與恢復(fù)狀態(tài) 127
7.7.2 保存圖形 129
7.8 綜合案例——繪制火柴棒人物 130
7.9 跟我學(xué)上機(jī)——繪制商標(biāo) 132
7.10 疑難解惑 134
第8章 HTML 5中的音頻和視頻 135
8.1 audio標(biāo)簽概述 136
8.1.1 audio標(biāo)簽概述 136
8.1.2 audio標(biāo)簽的屬性 137
8.1.3 瀏覽器對audio標(biāo)簽的支持
情況 137
8.2 在網(wǎng)頁中添加音頻文件 138
8.2.1 添加自動播放的音頻文件 138
8.2.2 添加帶有控件的音頻文件 138
8.2.3 添加循環(huán)播放的音頻文件 139
8.2.4 添加預(yù)播放的音頻文件 139
8.3 video標(biāo)簽概述 140
8.3.1 video標(biāo)簽概述 140
8.3.2 video標(biāo)簽的屬性 141
8.3.3 瀏覽器對video標(biāo)簽的支持
情況 142
8.4 在網(wǎng)頁中添加視頻文件 142
8.4.1 添加自動播放的視頻文件 142
8.4.2 添加帶有控件的視頻文件 143
8.4.3 添加循環(huán)播放的視頻文件 144
8.5 綜合案例——設(shè)置視頻文件的高度
與寬度 144
8.6 跟我學(xué)上機(jī)——添加預(yù)播放的視頻
文件 145
8.5 疑難解惑 146
第II篇 CSS 3美化網(wǎng)頁
第2章 HTML 5網(wǎng)頁的文檔結(jié)構(gòu)
一個完整的HTML 5網(wǎng)頁文檔包括標(biāo)題、段落、列表、表格、繪制的圖形以及各種嵌入對象，這些對象統(tǒng)稱為HTML 5元素。本章詳細(xì)介紹HTML 5網(wǎng)頁文檔的基本結(jié)構(gòu)。
2.1 HTML 5文件的基本結(jié)構(gòu)
在一個HTML 5文檔中，必須包含標(biāo)記，并且放在一個HTML 5文檔中的開始和結(jié)束位置。即每個文檔以開始，以結(jié)束。之間通常包含兩個部分，分別為和。HEAD標(biāo)記包含HTML頭部信息，如文檔標(biāo)題、樣式定義等。BODY包含文檔主體部分，即網(wǎng)頁內(nèi)容。需要注意的是，HTML標(biāo)記不區(qū)分大小寫。
2.1.1 HTML 5頁面的整體結(jié)構(gòu)
為了便于讀者從整體上把握HTML 5的文檔結(jié)構(gòu)，我們通過一個HTML 5頁面來介紹HTML 5頁面的整體結(jié)構(gòu)，示例代碼如下：
網(wǎng)頁內(nèi)容
從上面的代碼可以看出，一個基本的HTML 5頁面由以下幾個部分構(gòu)成。
(1) 聲明。該聲明必須位于HTML 5文檔中的第一行，也就是位于標(biāo)記之前。該標(biāo)記告知瀏覽器文檔所使用的HTML規(guī)范。聲明不屬于HTML標(biāo)記；它是一條指令，告訴瀏覽器編寫頁面所用的標(biāo)記的版本。由于HTML 5版本還沒有得到瀏覽器的完全認(rèn)可，后面介紹時還采用以前的通用標(biāo)準(zhǔn)。
(2) 標(biāo)記。說明本頁面是用HTML語言編寫的，使瀏覽器軟件能夠準(zhǔn)確無誤地解釋和顯示。
(3) 標(biāo)記。是HTML的頭部標(biāo)記，頭部信息不顯示在網(wǎng)頁中，此標(biāo)記內(nèi)可以包含一些其他標(biāo)記，用于說明文件標(biāo)題和整個文件的一些公用屬性。
……
新書資訊