第1章 Web前端職業(yè)前景與重要理念　1 1.1　了解Web前端工程師　2 1.1.1　HTML5前端開(kāi)發(fā)的前景與必要認(rèn)知　2 1.1.2　認(rèn)識(shí)網(wǎng)頁(yè)的構(gòu)成元素　5 1.1.3　了解專業(yè)術(shù)語(yǔ)　6 1.2　重要理念——表現(xiàn)和結(jié)構(gòu)相分離　7 1.2.1　體驗(yàn)“表現(xiàn)和結(jié)構(gòu)相分離”　7 1.2.2　認(rèn)識(shí)Web標(biāo)準(zhǔn)　8 1.3　Web前端開(kāi)發(fā)基本流程　10 1.3.1　開(kāi)發(fā)流程　10 1.3.2　常用開(kāi)發(fā)軟件介紹　12 1.4　使用記事本創(chuàng)建HTML5頁(yè)面　13 1.5　課堂動(dòng)手實(shí)踐　14 第2章　HTML5頁(yè)面的構(gòu)建與簡(jiǎn)單控制　16 2.1　Dreamweaver的工作環(huán)境概述　17 2.1.1　界面介紹　17 2.1.2　常用工具欄和面板　18 2.2　創(chuàng)建和管理站點(diǎn)　20 2.2.1　創(chuàng)建站點(diǎn)　21 2.2.2　“文件”面板的使用方法　21 2.2.3　管理站點(diǎn)　23 2.3　HTML5入門(mén)　24 2.3.1　使用Dreamweaver構(gòu)建“H5標(biāo)準(zhǔn)頁(yè)面”　24 2.3.2　DOCTYPE文檔類型與基本結(jié)構(gòu)元素　25 2.3.3　HTML5常見(jiàn)元素　28 2.3.4　HTML5新增結(jié)構(gòu)元素　37 2.4　課堂動(dòng)手實(shí)踐　38 第3章　CSS3基礎(chǔ)入門(mén)　39 3.1　CSS3的基礎(chǔ)知識(shí)　40 3.1.1　CSS介紹　40 3.1.2　CSS的語(yǔ)法與注釋　41 3.1.3　CSS的引入方式　42 3.2　盒模型　46 3.2.1　盒模型的基本概念　47 3.2.2　計(jì)算盒模型中的寬與高　49 3.3　CSS3初級(jí)選擇器　50 3.3.1　通配符選擇器　50 3.3.2　類型選擇器　52 3.3.3　類選擇器　53 3.3.4　ID選擇器　54 3.3.5　后代選擇器　55 3.3.6　群組選擇器　56 3.4　CSS3高級(jí)選擇器　57 3.4.1　子元素選擇器和相鄰兄弟選擇器　57 3.4.2　屬性選擇器　59 3.4.3　關(guān)于優(yōu)先級(jí)　60 3.5　使用CSS3基礎(chǔ)知識(shí)完成頁(yè)面簡(jiǎn)易美化——404頁(yè)面的制作　61 3.6　課堂動(dòng)手實(shí)踐　64 第4章　實(shí)現(xiàn)Web前端排版的基本美化　66 4.1　控制文本　67 4.1.1　CSS中字體屬性與文本屬性介紹　68 4.1.2　Web Font與@font-face　72 4.1.3　文本的首行縮進(jìn)、行高和陰影　75 4.1.4　文本溢出處理　77 4.2　控制超鏈接　78 4.2.1　文本鏈接、郵件鏈接與錨鏈接　78 4.2.2　CSS偽類與超鏈接　80 4.3　控制圖像和顏色　82 4.3.1　CSS中控制圖像和顏色的基本屬性　82 4.3.2　圖文混排　86 4.4　課堂動(dòng)手實(shí)踐　91 第5章　浮動(dòng)、定位與列表　93 5.1　浮動(dòng)與清除浮動(dòng)　94 5.1.1　浮動(dòng)　94 5.1.2　清除浮動(dòng)的3種方法　96 5.2　CSS定位　98 5.2.1　靜態(tài)定位和固定定位　99 5.2.2　相對(duì)定位和絕對(duì)定位　101 5.2.3　相對(duì)于某一容器的絕對(duì)定位　104 5.3　列表　105 5.3.1　有關(guān)列表的CSS樣式　105 5.3.2　縱向?qū)Ш健?06 5.3.3　橫向?qū)Ш健?11 5.4　圖文信息列表　113 5.5　課堂動(dòng)手實(shí)踐　118 第6章　HTML5增強(qiáng)型表單與簡(jiǎn)易表格　119 6.1　表單的創(chuàng)建與編輯　120 6.1.1　表單的基本知識(shí)　120 6.1.2　常見(jiàn)的表單對(duì)象　121 6.2　CSS控制表單　128 6.2.1　搜索欄　128 6.2.2　用戶登錄頁(yè)面　130 6.2.3　傳統(tǒng)按鈕、CSS3按鈕與開(kāi)源樣式庫(kù)按鈕　134 6.3　表格　137 6.3.1　表格的基本概念及其簡(jiǎn)易操作　137 6.3.2　細(xì)線表格　140 6.3.3　隔行換色表格　142 6.4　課堂動(dòng)手實(shí)踐　144 第7章　CSS3與HTML5的高級(jí)應(yīng)用　146 7.1　CSS Sprite技術(shù)　147 7.1.1　CSS Sprite技術(shù)分解　147 7.1.2　CSS Sprite技術(shù)的應(yīng)用　148 7.2　CSS3漸變　151 7.3　CSS3動(dòng)畫(huà)　153 7.3.1　變形——transform屬性　153 7.3.2　過(guò)渡——transition屬性　155 7.3.3　CSS3動(dòng)畫(huà)的應(yīng)用——“幽靈按鈕”　156 7.4　CSS3選項(xiàng)卡　160 7.5　HTML5 Canvas　164 7.5.1　創(chuàng)建畫(huà)布并繪制簡(jiǎn)單圖形　164 7.5.2　Canvas坐標(biāo)、線條與圓　165 7.6　課堂動(dòng)手實(shí)踐　167 第8章　PC端典型頁(yè)面的設(shè)計(jì)與實(shí)現(xiàn)　168 8.1　Photoshop在Web前端的常見(jiàn)操作　169 8.1.1　基礎(chǔ)操作　169 8.1.2　切片并輸出　171 8.2　頁(yè)面布局規(guī)劃與實(shí)現(xiàn)　172 8.2.1　首頁(yè)的實(shí)現(xiàn)　173 8.2.2　列表頁(yè)的實(shí)現(xiàn)　180 8.2.3　內(nèi)容頁(yè)的實(shí)現(xiàn)　184 8.3　課堂動(dòng)手實(shí)踐　186 第9章　多設(shè)備響應(yīng)式頁(yè)面的實(shí)現(xiàn)　187 9.1　響應(yīng)式頁(yè)面開(kāi)發(fā)　188 9.1.1　了解“響應(yīng)式Web設(shè)計(jì)”　188 9.1.2　viewport網(wǎng)頁(yè)可視區(qū)域　189 9.1.3　媒體查詢?cè)斀狻?91 9.2　“響應(yīng)式”頁(yè)面的設(shè)計(jì)與實(shí)現(xiàn)　195 9.2.1　頁(yè)面分析　195 9.2.2　詳細(xì)實(shí)施過(guò)程　197 9.3　“響應(yīng)式”框架介紹　203 9.4　課堂動(dòng)手實(shí)踐　203 第10章　使用Bootstrap框架創(chuàng)建頁(yè)面　205 10.1　Bootstrap框架　206 10.1.1　Bootstrap的環(huán)境配置　206 10.1.2　Bootstrap柵格系統(tǒng)　207 10.1.3　Bootstrap表格　211 10.1.4　Bootstrap表單　212 10.1.5　Bootstrap圖片　213 10.1.6　Bootstrap導(dǎo)航欄　214 10.2　使用Bootstrap框架搭建簡(jiǎn)單頁(yè)面　216 10.2.1　頁(yè)面結(jié)構(gòu)分析　217 10.2.2　頁(yè)面搭建過(guò)程　218 10.3　課堂動(dòng)手實(shí)踐　220 第11章　Web App類頁(yè)面的設(shè)計(jì)與實(shí)現(xiàn)　221 11.1　Web App開(kāi)發(fā)基礎(chǔ)知識(shí)　222 11.1.1　開(kāi)發(fā)模式概述　222 11.1.2　手機(jī)屏幕基本知識(shí)　223 11.2　Swiper插件　224 11.3　Web App頁(yè)面分析與環(huán)境準(zhǔn)備　226 11.3.1　頁(yè)面分析　226 11.3.2　環(huán)境準(zhǔn)備　227 11.4　頁(yè)面實(shí)現(xiàn)的詳細(xì)過(guò)程　228 11.4.1　首頁(yè)的實(shí)現(xiàn)　228 11.4.2　列表頁(yè)的實(shí)現(xiàn)　236 11.4.3　詳細(xì)內(nèi)容頁(yè)的實(shí)現(xiàn)　240 11.5　課堂動(dòng)手實(shí)踐　242