Chapter01一起來(lái)學(xué)HTML 5 WarmingUp HTML 5能做什么 Section01 更強(qiáng)大的元素 01 一起來(lái)畫圖 02 一個(gè)實(shí)用的表單 03 路癡的救星 04 讓圖片可以拖拽 Section02 更精美的樣式 01 漂亮的文字 02 炫酷的圖片 03 設(shè)置動(dòng)畫效果 04 自適應(yīng)網(wǎng)頁(yè) Section03 更炫酷的特效 01banner是怎樣制作的 02 消息的提示框 Test 課后作業(yè) Chapter02網(wǎng)頁(yè)繪圖如此有趣 WarmingUp 強(qiáng)大的canvas Section01 潛心修行canvas 01 圓形表盤 Try it 制作圓形表盤 02 分針、時(shí)針和秒針 Try it 制作表針 03 時(shí)間刻度線 Try it 制作時(shí)間刻度線 04 看看幾點(diǎn)了 Try it 計(jì)時(shí)開始 Section02 圖像好看的樣式 01 讓圖片更加高級(jí) Try it 修飾圖片 02 觀看圖片的局部 Try it 圖片的局部顯示 03 給圖片添加“蒙版” Try it 微信聊天框效果 04 圖片的立體顯示 Try it 圖片的陰影效果 Try it 文字、邊框、圖片的陰影效果 Section03 圖形的各種效果 01 螺旋形旋轉(zhuǎn) Try it 螺旋旋轉(zhuǎn)圖形 02 兩種漸變?cè)O(shè)置 Try it 圖形的漸變?cè)O(shè)置 03 當(dāng)圖形重疊時(shí) Try it 組合圖形的繪制 Test 課后作業(yè) Chapter03生成漂亮的表單 WarmingUp 怎樣讓表單變漂亮 Section01 一起制作表單 01 改變傳統(tǒng)登錄方式 Try it 制作一個(gè)登錄表單 02 注冊(cè)簡(jiǎn)潔大方型表單 Try it 制作簡(jiǎn)潔的注冊(cè)型表單 Section02 多姿多彩的表單 01 年月日的出現(xiàn) WarmingUp 怎樣讓表單變漂亮 Section01 一起制作表單 01 改變傳統(tǒng)登錄方式 Try it 制作一個(gè)登錄表單 02 注冊(cè)簡(jiǎn)潔大方型表單 Try it 制作簡(jiǎn)潔的注冊(cè)型表單 Section02 多姿多彩的表單 01 年月日的出現(xiàn) Chapter04播放器的打開姿勢(shì) WarmingUp 網(wǎng)頁(yè)播放器 Section01 看視頻聽音樂(lè)之前 01 了解瀏覽器支持情況 02 測(cè)試瀏覽器 Try it 親測(cè)瀏覽器是否支持 Try it 嵌入插件作為備選解決不支持 Section02 享受視聽盛宴 01 沉浸在音樂(lè)的海洋 Try it 制作音樂(lè)播放器 02 打開視頻的正確方式 Try it 制作視頻播放器 03 了解播放器中的方法 Test 課后作業(yè) Chapter05定位自己的位置 WarmingUp 一起學(xué)習(xí)定位知識(shí) Section01 有導(dǎo)航不迷路 01 學(xué)習(xí)經(jīng)緯度知識(shí) 02 IP地址定位數(shù)據(jù) 03 GPS地理定位 Section02 開始定位 01 獲取地理位置 Try it 獲取當(dāng)前的地理位置 02 瀏覽器的支持情況 Try it 測(cè)試瀏覽器支持情況 Section03 找到自己 01 保護(hù)用戶的隱私 02 調(diào)用地圖接口 Try it 調(diào)用谷歌地圖 03 顯示你的位置 Try it 定位自己的位置 Test 課后作業(yè) Chapter06 實(shí)用的上傳方式 WarmingUp 拖拽上傳的應(yīng)用 Section01 調(diào)整圖片位置 01 實(shí)現(xiàn)拖放的步驟 02 實(shí)現(xiàn)拖拽的方法 Section02 拖放操作 01 拖放應(yīng)用 Try it 最簡(jiǎn)單的拖放操作 02 拖放列表 Try it 制作拖放列表 03 拖拽上傳文件 Try it 附件的拖拽上傳 Section03 離線知識(shí) 01 支持離線行為 Try it 演示網(wǎng)頁(yè)是否在線 02 檢測(cè)瀏覽器支持與否 Try it 檢測(cè)瀏覽器是否支持 03 WebWorkers的簡(jiǎn)單應(yīng)用 Test 課后作業(yè) Chapter07開啟樣式的大門 WarmingUp 讓網(wǎng)頁(yè)多姿多彩 Section01 給樣式作修飾 01 選擇元素進(jìn)行樣式設(shè)置 Try it 需要重點(diǎn)標(biāo)注的句子 02 設(shè)置一類元素的樣式 Try it 給所有元素設(shè)置相同樣式 Try it 使用什么方法能制作出相同的效 03 屬性也可以設(shè)置樣式 Try it 設(shè)置其中一張圖片的屬性 Section02 選擇性地修飾 01 新版本與舊版本的比較 02 讓設(shè)計(jì)更高級(jí) Try it 單擊鏈接發(fā)生顏色變化 Try it 設(shè)置多彩的輸入框 Try it 單擊時(shí)按鈕顏色發(fā)生變化 03 結(jié)構(gòu)性偽類的用法 Try it 變化的字體顏色 04 偽類選擇器 Try it 給第一句詩(shī)添加背景顏色 Try it 設(shè)置首字母的大小寫 Try it 運(yùn)用其他方法做出圖片效果 Test 課后作業(yè) Chapter08網(wǎng)頁(yè)中的“動(dòng)畫片” WarmingUp 怎樣讓元素動(dòng)起來(lái) Section01 過(guò)渡知識(shí) 01 與用戶的互動(dòng) Try it 讓元素不再呆板 02 變化出更多樣式 Try it 多種變化效果 03 模擬DOCK的縮放特效 Try it 制作一個(gè)有導(dǎo)航的電腦桌面 Section02 實(shí)現(xiàn)動(dòng)畫 01 動(dòng)起來(lái)的關(guān)鍵 Try it 一起蕩秋千 02 制作旋轉(zhuǎn)的圈圈 Try it 制作loading圖標(biāo) Try it 制作loading進(jìn)度條 03 使用放大鏡查看 Try it 使用放大鏡查看圖片 Test 課后作業(yè) Chapter09讓瀏覽更輕松 WarmingUp 三站合一 Section01 自適應(yīng)效果 01 多媒體查詢能做什么 02 窗口大小控制顏色 Try it 網(wǎng)頁(yè)背景隨瀏覽器大小改變而改變 03 自適應(yīng)導(dǎo)航欄 Try it 制作流行的網(wǎng)頁(yè)導(dǎo)航欄 Section02 與用戶的互動(dòng) 01 制作一張電子報(bào)紙 Try it 多列布局的用法 02 Photoshop中的濾鏡效果 Try itps一張美女圖片 03 修飾圖片 Try it 修飾圖片的輪廓 04 開關(guān)按鈕樣式 Try it 用最簡(jiǎn)單的方法制作按鈕 Test 課后作業(yè) Chapter10重要的網(wǎng)頁(yè)元素 WarmingUp 變花樣的文字和邊框 Section01 文字讓網(wǎng)頁(yè)更突出 01 文字的陰影效果 Try it 讓文字顯得立體 Try it 用陰影增加前景色與背景色的對(duì)比 02 更多的文字效果 Try it 制作更多文字效果 03 文本溢出的設(shè)置 Try it 制作文本的溢出效果 04 英文單詞的換行 Try it 長(zhǎng)單詞的換行 Try it 拆分單詞 Section02 顏色讓網(wǎng)頁(yè)更好看 01 多變的顏色 Try it 制作顏色漸變 Try it 制作一顆閃閃的星星 02 色彩的模式 Try it 制作一個(gè)HsL顏色模式表 03 擴(kuò)展的色彩模式 Try it 制作顏色的不透明度 Section03 動(dòng)作讓網(wǎng)頁(yè)更高級(jí) 01 圖片的3D旋轉(zhuǎn) Try it 制作圖片的3D旋轉(zhuǎn) 02 高級(jí)圖標(biāo) Try it 制作扁平化的圖標(biāo) Test 課后作業(yè) Chapter11特效是用什么做的 WarmingUp Javascript怎樣嵌入 Section01 流行的網(wǎng)頁(yè)樣式 01JavaScript的作用 02JavaScript的特點(diǎn) 03JavaScript的應(yīng)用 Try it 單擊按鈕出現(xiàn)文字 Section02 炫酷特效的前提 01 掌握一些類型 02 了解一些語(yǔ)句 Try it 單擊按鈕出現(xiàn)問(wèn)候語(yǔ) Try it 用時(shí)間點(diǎn)來(lái)設(shè)置問(wèn)候語(yǔ) Try it 讓代碼循環(huán)計(jì)算5次 Try it 一直循環(huán)代碼 03 應(yīng)用哪些事件 04 事件的句柄 05 怎樣處理事件 Test 課后作業(yè) Chapter12炫酷效果應(yīng)用方向 WarmingUp 怎樣制作滾動(dòng)banner Section01 這個(gè)函數(shù)不一樣 01 函數(shù)定義 Try it 單擊按鈕顯示“你好” Try it 單擊按鈕出現(xiàn)歡迎詞 Try it 制作一個(gè)計(jì)算器 02 函數(shù)參數(shù) Try it 給參數(shù)設(shè)置默認(rèn)值 Try it 設(shè)置查找值的函數(shù) 03 函數(shù)調(diào)用 Section02 表單中的應(yīng)用 01 按鈕對(duì)象 Try it 設(shè)置表單的按鈕對(duì)象 02 復(fù)選框?qū)ο? Try it 可以全選的復(fù)選框 03 列表框?qū)ο? Try it 設(shè)置列表框?qū)ο? 04 增加列表框 Try it 與用戶的互動(dòng)效果 05 表單中的時(shí)間 Try it 調(diào)用時(shí)間 Section03 網(wǎng)頁(yè)中的應(yīng)用 01 輪播圖效果 Try it 制作一個(gè)網(wǎng)頁(yè)的輪播圖 02 字體閃爍效果 Try it 制作文字的閃爍效果 03 鼠標(biāo)滑過(guò)效果 Try it 制作鼠標(biāo)滑過(guò)圖片的震動(dòng)效果 Section04 網(wǎng)頁(yè)中的特效 01 顯示網(wǎng)頁(yè)停留時(shí)間 Try it 顯示所在網(wǎng)頁(yè)停留的時(shí)間 02 制作定時(shí)關(guān)閉窗口 Try it 讓窗口在設(shè)定好的時(shí)間自動(dòng)關(guān)閉 Test課后作業(yè)