目錄 第1章Web前端開發(fā)概述/1 1.1Web前端開發(fā)與網(wǎng)頁設(shè)計/1 1.1.1網(wǎng)頁的概念和本質(zhì)/1 1.1.2網(wǎng)頁設(shè)計的兩個基本問題/2 1.1.3網(wǎng)頁設(shè)計語言——HTML簡介/3 1.1.4網(wǎng)頁制作軟件/4 1.2網(wǎng)站的創(chuàng)建和制作流程/5 1.2.1網(wǎng)站的特征/5 1.2.2網(wǎng)站的開發(fā)步驟/6 1.2.3在Dreamweaver中建立站點(diǎn)/8 1.3Web服務(wù)器與瀏覽器/10 1.3.1Web服務(wù)器的作用/11 1.3.2瀏覽器的種類和作用/11 1.4URL與域名/13 習(xí)題1/14第2章HTML/15 2.1HTML概述/15 2.1.1HTML文檔的結(jié)構(gòu)/15 2.1.2Dreamweaver的開發(fā)界面/16 2.1.3使用DW新建HTML文件/17 2.1.4HTML標(biāo)記/17 2.1.5常見的HTML標(biāo)記及屬性/18 2.2在網(wǎng)頁中添加文本和圖像/19 2.2.1創(chuàng)建文本和列表/19 2.2.2插入圖像/21 2.3利用DW代碼視圖提高效率/22 2.3.1代碼提示/23 2.3.2代碼快速定位/23 2.3.3DW中的常用快捷鍵/24 2.4創(chuàng)建超鏈接/25 2.4.1超鏈接標(biāo)記/252.4.2絕對URL與相對URL/27 2.4.3超鏈接的種類/28 2.4.4超鏈接目標(biāo)的打開方式/30 2.4.5超鏈接制作的原則/30 2.4.6DW中超鏈接屬性面板的使用/31 2.5插入Flash及嵌入其他網(wǎng)頁/32 2.5.1插入Flash /32 2.5.2嵌入式框架標(biāo)記/33 2.6頭部標(biāo)記/34 習(xí)題/35第3章HTML5與Web標(biāo)準(zhǔn)/36 3.1HTML5的改進(jìn)/36 3.1.1HTML5新增的標(biāo)記/36 3.1.2HTML5語法的改進(jìn)/38 3.1.3HTML5的視音頻功能/39 3.1.4HTML5的繪圖功能/41 3.2Web標(biāo)準(zhǔn)/44 3.2.1傳統(tǒng)HTML的缺點(diǎn)/44 3.2.2Web標(biāo)準(zhǔn)的含義/45 3.2.3Web標(biāo)準(zhǔn)的優(yōu)勢/47 3.3HTML元素的概念/47 3.3.1行內(nèi)元素和塊級元素/48 3.3.2和標(biāo)記/48 習(xí)題/49第4章CSS樣式美化/50 4.1CSS基礎(chǔ)/50 4.1.1CSS的語法/50 4.1.2在HTML中引入CSS的方法/51 4.1.3選擇器的分類/53 4.1.4CSS文本修飾/56 4.2CSS的特性/57 4.2.1CSS的層疊性/57 4.2.2CSS的繼承性/59 4.2.3選擇器的組合/60 4.3CSS高級選擇器/64 4.3.1關(guān)系選擇器/64 4.3.2屬性選擇器/66 4.3.3偽類選擇器/67 4.3.4使用過渡屬性配合動態(tài)偽類效果/70 4.3.5偽元素選擇器/73 4.4CSS設(shè)計和書寫技巧/75 4.4.1CSS樣式總體設(shè)計原則/75 4.4.2DW對CSS的可視化編輯支持/76 4.4.3CSS屬性的值和單位/79 4.4.4網(wǎng)頁中的字體/80 4.4.5字體圖標(biāo)技術(shù)/82 4.5盒子模型及其屬性/84 4.5.1盒子模型概述/84 4.5.2邊框border屬性/85 4.5.3圓角borderradius屬性/87 4.5.4圖像邊框borderimage屬性/89 4.5.5padding和margin屬性/91 4.6標(biāo)準(zhǔn)流下的定位及應(yīng)用/92 4.6.1標(biāo)準(zhǔn)流下的定位原則/92 4.6.2margin合并現(xiàn)象/95 4.6.3盒子模型的應(yīng)用/96 4.6.4Chrome瀏覽器的CSS調(diào)試功能/99 4.7背景的運(yùn)用/100 4.7.1CSS的背景屬性/100 4.7.2背景的基本運(yùn)用技術(shù)/104 4.7.3滑動門技術(shù)/107 4.7.4背景圖像的翻轉(zhuǎn)/111 4.7.5傳統(tǒng)圓角效果/112 4.8CSS3樣式美化功能/114 4.8.1陰影和發(fā)光效果/114 4.8.2漸變效果/117 4.8.3描邊效果/120 4.8.4遮罩效果/121 4.9變形與動畫效果/123 4.9.1平面變形效果/123 4.9.23D變換效果/126 4.9.3animation動畫效果/131 習(xí)題/134第5章CSS布局/137 5.1浮動/137 5.1.1盒子浮動后的特點(diǎn)/137 5.1.2清除浮動元素的影響/140 5.1.3清除浮動影響的方法/140 5.2浮動的應(yīng)用舉例/143 5.2.1圖文混排及首字下沉效果/143 5.2.2水平導(dǎo)航條/144 5.2.3新聞欄目框/145 5.2.4微博對話框/148 5.3相對定位/149 5.3.1定位屬性和偏移屬性/149 5.3.2相對定位的特點(diǎn)/149 5.3.3相對定位的應(yīng)用舉例/150 5.4絕對定位和固定定位/152 5.4.1絕對定位/152 5.4.2絕對定位的應(yīng)用舉例/154 5.4.3固定定位/163 5.4.4與定位屬性有關(guān)的CSS屬性/163 5.4.5overflow屬性/166 5.4.6verticalalign屬性/167 5.5CSS分欄布局/168 5.5.1分欄布局的種類/169 5.5.2網(wǎng)頁居中的方法/170 5.5.3131版式網(wǎng)頁布局/170 5.5.4121可變寬度布局/174 5.5.5CSS兩列布局案例/176 5.5.6HTML5 新增的文檔結(jié)構(gòu)標(biāo)記/181 5.5.7HTML5網(wǎng)頁布局案例/183 5.6CSS3新增的布局方式/186 5.6.1彈性盒布局/186 5.6.2分欄布局/190 5.7CSS瀏覽器的兼容問題/192 習(xí)題/193第6章表格與表單/195 6.1創(chuàng)建表格/195 6.1.1表格標(biāo)記/195 6.1.2表格行和單元格標(biāo)記/197 6.1.3在DW中操作表格的方法/199 6.1.4制作固定寬度的表格/201 6.1.5特殊效果表格的制作/201 6.2使用CSS美化表格/203 6.2.1邊框和背景的美化/203 6.2.2隔行變色效果/204 6.3創(chuàng)建表單/205 6.3.1標(biāo)記及其屬性/206 6.3.2標(biāo)記/208 6.3.3和標(biāo)記/211 6.3.4多行文本域標(biāo)記/211 6.3.5表單數(shù)據(jù)的傳遞過程/212 6.3.6表單中的按鈕/213 6.3.7表單的輔助標(biāo)記/214 6.3.8HTML5新增的表單標(biāo)記和屬性/215 6.4美化表單/218 6.4.1搜索框/218 6.4.2用戶登錄表單/219 6.4.3用戶注冊表單/222 習(xí)題/223第7章響應(yīng)式網(wǎng)頁設(shè)計/225 7.1響應(yīng)式網(wǎng)頁的基本技術(shù)/225 7.1.1媒體查詢/225 7.1.2流式布局/227 7.1.3自適應(yīng)圖片/229 7.1.4一列變寬、一列固定的方法/231 7.1.5響應(yīng)式網(wǎng)頁的頭部代碼設(shè)置/231 7.2響應(yīng)式布局的網(wǎng)站實(shí)例/232 7.2.1頁面總體布局的實(shí)現(xiàn)/233 7.2.2頁頭的設(shè)計/235 7.2.3響應(yīng)式導(dǎo)航條的制作/235 7.2.4響應(yīng)式欄目的制作/237 習(xí)題/239第8章JavaScript與jQuery基礎(chǔ)/240 8.1JavaScript的代碼結(jié)構(gòu)/240 8.2JavaScript的事件編程/242 8.2.1JavaScript語言基礎(chǔ)/242 8.2.2常用JavaScript事件/242 8.2.3事件監(jiān)聽程序/243 8.3JavaScript DOM編程/245 8.3.1動態(tài)效果的實(shí)現(xiàn)/245 8.3.2獲取指定元素/246 8.3.3訪問元素的CSS屬性/247 8.3.4訪問元素的內(nèi)容/249 8.4使用瀏覽器對象/249 8.5jQuery基礎(chǔ)/253 8.5.1jQuery的功能和使用/253 8.5.2jQuery中的“$”/254 8.5.3jQuery對象與DOM對象/258 8.5.4jQuery的選擇器/260 8.5.5jQuery的事件綁定/261 8.5.6jQuery中的常用方法/262 8.5.7jQuery應(yīng)用舉例/263 習(xí)題/265第9章Bootstrap響應(yīng)式網(wǎng)頁設(shè)計/267 9.1Bootstrap的使用/267 9.1.1下載和引用Bootstrap框架/267 9.1.2Bootstrap柵格系統(tǒng)/269 9.1.3使用柵格系統(tǒng)進(jìn)行響應(yīng)式布局/271 9.2Bootstrap中的網(wǎng)頁組件/277 9.2.1基于組件的網(wǎng)頁制作方法/277 9.2.2導(dǎo)航條/279 9.2.3輪播插件/283 9.2.4選項卡面板/286 9.2.5媒體對象/288 9.2.6折疊面板組/290 9.2.7提示框與彈出框/292 9.2.8模態(tài)彈窗/293 9.3Bootstrap網(wǎng)頁重構(gòu)實(shí)例/295 習(xí)題/297附錄實(shí)驗(yàn)/299 實(shí)驗(yàn)1個人簡歷網(wǎng)頁/299 實(shí)驗(yàn)2圓餅型盒子的制作/299 實(shí)驗(yàn)3制作背景翻轉(zhuǎn)的圖標(biāo)/300 實(shí)驗(yàn)4欄目框的制作/300 實(shí)驗(yàn)5頁頭和導(dǎo)航條的制作/301 實(shí)驗(yàn)6圖片滾動欄的制作/301 實(shí)驗(yàn)7網(wǎng)頁的布局設(shè)計/301 實(shí)驗(yàn)8網(wǎng)站首頁的實(shí)現(xiàn)/301 實(shí)驗(yàn)9網(wǎng)站列表頁的實(shí)現(xiàn)/301 實(shí)驗(yàn)10制作下拉菜單/302 實(shí)驗(yàn)11制作Tab面板/302 實(shí)驗(yàn)12使用Bootstrap制作響應(yīng)式網(wǎng)頁/302參考文獻(xiàn)/303