Div+CSS 3+jQuery網(wǎng)頁設(shè)計深度剖析

第1章　網(wǎng)頁和網(wǎng)站的制作流程 11.1　認識網(wǎng)頁 21.1.1　網(wǎng)頁和網(wǎng)站的關(guān)系 21.1.2　網(wǎng)頁的基本構(gòu)成元素 31.2　什么是網(wǎng)頁設(shè)計 41.2.1　網(wǎng)頁設(shè)計概述 41.2.2　網(wǎng)頁設(shè)計與網(wǎng)頁制作 51.2.3　網(wǎng)頁設(shè)計的特點 61.2.4　網(wǎng)頁設(shè)計相關(guān)術(shù)語 81.3　網(wǎng)頁設(shè)計所涵蓋的內(nèi)容 101.3.1　網(wǎng)頁中的視聽元素 111.3.2　網(wǎng)頁版式設(shè)計 111.4　如何設(shè)計網(wǎng)頁 121.4.1　網(wǎng)頁設(shè)計的基本原則 121.4.2　網(wǎng)站設(shè)計成功的要素 131.4.3　網(wǎng)頁的設(shè)計風格及色彩搭配 141.5　網(wǎng)頁設(shè)計的原則 151.6　網(wǎng)頁設(shè)計師應(yīng)具備的素質(zhì) 181.7　網(wǎng)站的制作流程 201.7.1　前期策劃 201.7.2　頁面細化及實施 211.7.3　后期維護 221.8　網(wǎng)頁設(shè)計的實現(xiàn) 22第2章　CSS樣式入門 252.1　CSS的基本概念 262.1.1　CSS的特點 262.1.2　CSS的類型 272.1.3　CSS的基本語法 282.1.4　CSS的沖突 292.2　網(wǎng)頁設(shè)計中的CSS 302.2.1　如何使用CSS 312.2.2　CSS能做什么 332.2.3　CSS的局限性 332.3　CSS樣式的基本用法 342.4　應(yīng)用CSS到網(wǎng)頁中 352.5　單位和值 372.6　CSS樣式具有的特性 432.7　CSS 3中的新增選擇符 442.7.1　屬性選擇符 44課堂練習　屬性選擇符的運用 452.7.2　結(jié)構(gòu)偽類選擇符 472.7.3　UI元素狀態(tài)偽類選擇符 572.8　應(yīng)用實例——為頁面添加CSS樣式 632.9　舉一反三——產(chǎn)品介紹網(wǎng)站 72第3章　使用Div+CSS布局頁面 753.1　定義Div 763.2　CSS布局定位 793.3　可視化盒模型 873.3.1　盒子模型 873.3.2　margin屬性 893.3.3　border屬性 893.3.4　padding屬性 903.3.5　content屬性 903.3.6　視覺可視化模型 913.4　常用的布局方式 913.4.1　居中布局設(shè)計 913.4.2　浮動布局設(shè)計 923.4.3　高度自適應(yīng) 973.5　流體網(wǎng)格布局 98課堂練習　制作適合手機瀏覽的網(wǎng)頁 983.6　CSS 3中有關(guān)基礎(chǔ)盒模型 1033.6.1　overflow 1033.6.2　overflow-x 1053.6.3　overflow-y 1063.7　CSS 3中新增的彈性盒模型 1063.7.1　box-orient屬性控制盒子取向 1073.7.2　box-direction 屬性控制盒子順序 1083.7.3　box-ordinal-group屬性控制盒子位置 1103.7.4　box-flex屬性控制盒子彈性空間 1123.7.5　盒子空間管理——box-pack和box-align屬性 1133.7.6　盒子空間溢出管理——box-lines屬性 1153.8　應(yīng)用實例——使用Div+CSS布局頁面 1153.9　舉一反三——制作健康網(wǎng)站 123第4章　使用CSS控制網(wǎng)頁中的背景 1254.1　背景顏色 1264.1.1　設(shè)置頁面背景顏色 126課堂練習　設(shè)置背景顏色 1264.1.2　設(shè)置塊背景顏色 127課堂練習　設(shè)置塊背景顏色 1284.2　背景圖像 1294.2.1　為頁面設(shè)置背景圖像 129課堂練習　設(shè)置背景圖片 1304.2.2　背景圖像的重復(fù) 1314.2.3　設(shè)置背景圖像的位置 132課堂練習　背景圖像定位 1334.2.4　設(shè)置背景滾動 1344.2.5　背景樣式縮寫的方式 1364.3　CSS 3中有關(guān)背景的新增屬性 1364.3.1　background-origin 1364.3.2　background-clip 1384.3.3　background-size 1394.4　應(yīng)用實例——制作金融類網(wǎng)站頁面 1404.5　舉一反三——學習用品網(wǎng)站 149第5章　使用CSS控制頁面文字樣式 1515.1　控制文字樣式 1525.1.1　字體和大小 152課堂練習　不同字體的設(shè)置 1535.1.2　文字顏色和粗細 1575.1.3　斜體 1595.1.4　下畫線、頂畫線和刪除線 1605.1.5　英文字母大小寫 1605.2　控制段落樣式 1615.2.1　段落水平對齊 1615.2.2　段落垂直對齊 1635.2.3　行間距和字間距 1645.2.4　首字下沉 1655.2.5　首行縮進 1665.3　使用CSS對Flash中的文字進行控制 1675.4　CSS類選區(qū) 169課堂練習　利用CSS類選區(qū)制作個人網(wǎng)站首頁 1695.5　制作文字的滾動效果 171課堂練習　實現(xiàn)文字的滾動效果 1715.6　CSS 3中有關(guān)文字的新增屬性 1745.6.1　text-shadow 1745.6.2　text-overflow 1755.6.3　word-wrap 1775.7　文字樣式設(shè)置實例——設(shè)計類網(wǎng)站 1785.8　舉一反三——制作社區(qū)類網(wǎng)站頁面 186第6章　使用CSS控制圖像樣式 1896.1　圖像樣式 1906.1.1　圖像邊框設(shè)置 1906.1.2　圖像縮放設(shè)置 1936.2　圖像對齊 1956.2.1　水平對齊設(shè)置 1956.2.2　垂直對齊設(shè)置 1966.3　圖文混排 1986.3.1　文字環(huán)繞 198課堂練習　文字環(huán)繞效果的制作 1986.3.2　設(shè)置混排間距 1996.4　網(wǎng)頁中特殊的圖像效果 1996.4.1　全屏大圖切換 1996.4.2　鼠標經(jīng)過圖像的動態(tài)效果 2026.5　CSS 3中有關(guān)邊框的新增屬性 2076.5.1　border-image 2076.5.2　border-radius 2096.5.3　box-shadow 2106.5.4　border-color 2116.6　應(yīng)用實例——制作婚慶網(wǎng)站頁面 2126.7　舉一反三——產(chǎn)品介紹網(wǎng)站 219第7章　利用CSS控制列表樣式 2217.1　列表控制概述 2227.1.1　列表控制原則 2227.1.2　列表的類型及使用 2227.1.3　改變項目樣式 2257.1.4　圖像符號 2277.2　使用列表制作實用菜單 2277.2.1　無須表格的菜單 2287.2.2　菜單的橫豎轉(zhuǎn)換 2307.3　CSS 3中有關(guān)顏色的新增屬性 2327.3.1　HSL colors 2327.3.2　HSLA colors 2337.3.3　opacity 2347.3.4　RGBA colors 2357.4　列表在網(wǎng)頁中的特殊應(yīng)用 2377.4.1　滾動圖像 237課堂練習　在網(wǎng)頁中實現(xiàn)圖像橫向滾動效果 2377.4.2　動態(tài)堆疊卡 243課堂練習　在網(wǎng)頁中實現(xiàn)動態(tài)堆疊卡效果 2437.5　應(yīng)用實例——制作音樂網(wǎng)站 2467.6　舉一反三——制作設(shè)計工作室網(wǎng)站 253第8章　使用CSS控制表單樣式 2558.1　表單設(shè)計概述 2568.1.1　表單的設(shè)計原則 2568.1.2　表單應(yīng)用分類 2578.2　表單的設(shè)計 259課堂練習　制作商城賬號注冊頁面 2638.3　使用CSS樣式控制表單元素 2698.3.1　使用CSS樣式控制表單元素的背景 2698.3.2　使用CSS樣式實現(xiàn)圓角文本域 2728.3.3　使用CSS樣式設(shè)置下拉列表 2748.4　表單在網(wǎng)頁中的特殊應(yīng)用 2768.4.1　聚焦型提示語消失 2768.4.2　輸入型提示語消失 2808.5　CSS 3中有關(guān)內(nèi)容的新增屬性 2828.6　應(yīng)用實例——制作用戶注冊頁面 2838.7　舉一反三——制作用戶登錄頁面 291第9章　使用CSS美化瀏覽器 2939.1　使用CSS控制超鏈接 2949.1.1　認識超鏈接 2949.1.2　關(guān)于鏈接路徑 2959.1.3　超鏈接屬性控制 2989.1.4　圖像映射 301課堂練習　實現(xiàn)圖像映射 3019.1.5　鏈接的打開方式 3039.2　超鏈接特效 3039.2.1　按鈕式超鏈接 3039.2.2　浮雕式超鏈接 3059.3　鼠標特效 3069.3.1　通過CSS樣式控制鼠標箭頭 3069.3.2　鼠標變化的超鏈接 3079.4　超鏈接在網(wǎng)頁中的特殊應(yīng)用 3089.4.1　網(wǎng)頁中的傾斜導(dǎo)航菜單 308課堂練習　制作網(wǎng)站的傾斜導(dǎo)航菜單 3089.4.2　網(wǎng)頁中的動感超鏈接 310課堂練習　制作網(wǎng)站的動感導(dǎo)航菜單 3109.5　CSS 3中有關(guān)用戶界面的新增屬性 3149.5.1　box-sizing 3149.5.2　resize 3169.5.3　outline 3179.5.4　nav-index 3189.6　應(yīng)用實例——制作產(chǎn)品宣傳網(wǎng)站頁面 3209.7　舉一反三——制作運輸公司網(wǎng)站頁面 329第10章　應(yīng)用CSS中的濾鏡 33110.1　了解CSS濾鏡 33210.1.1　Alpha濾鏡 33210.1.2　Blur濾鏡 33510.1.3　MotionBlur濾鏡 33610.1.4　Dropshadow濾鏡 33810.1.5　Shadow濾鏡 33910.1.6　Flip濾鏡 33910.1.7　Glow濾鏡 34110.1.8　Gray濾鏡 34110.1.9　Invert濾鏡 34210.1.10　Xray濾鏡 34210.1.11　Mask濾鏡 34310.1.12　Wave濾鏡 34410.1.13　Chroma濾鏡 34410.1.14　BlendTrans濾鏡 345課堂練習　實現(xiàn)圖像的漸變效果 34510.1.15　Light濾鏡 34710.1.16　RevealTrans濾鏡 34810.2　CSS 3中其他模塊的新增屬性 35010.2.1　@media 35010.2.2　columns 35110.2.3　@font-face 35310.2.4　speech 35410.3　應(yīng)用實例——制作餐飲類網(wǎng)站 35610.4　舉一反三——制作網(wǎng)絡(luò)游戲網(wǎng)站頁面 366第11章　CSS與jQurey的綜合應(yīng)用 36911.1　什么是JavaScript 37011.1.1　了解JavaScript 37011.1.2　JavaScript的特點 37211.1.3　JavaScript的應(yīng)用范圍 37311.1.4　CSS樣式與JavaScript 37511.2　JavaScript和JavaScript庫 37511.2.1　關(guān)于jQuery 37511.2.2　jQuery文件的下載 37611.2.3　jQuery的優(yōu)勢 37611.2.4　jQuery代碼的編寫 37711.2.5　jQuery選擇器 37711.2.6　jQuery事件 37911.3　在Dreamweaver CC中使用jQuery 379課堂練習　調(diào)用外部jQuery文件實現(xiàn)鼠標經(jīng)過圖像變形特效 379課堂練習　制作一個簡單的檢索頁面 38111.4　使用jQuery控制聲音 38411.5　使用jQuery實現(xiàn)淡入淡出效果 38411.6　使用jQuery制作選項卡 38911.7　應(yīng)用實例——使用jQuery框架 39211.8　舉一反三——制作網(wǎng)頁高光過渡效果 401第12章　CSS與XML的綜合應(yīng)用 40312.1　XML基礎(chǔ) 40412.1.1　XML的特點 40412.1.2　XML與HTML 40512.1.3　XML的基本語法 40712.1.4　格式正確的XML文檔 41012.2　XML與CSS的鏈接 41112.2.1　使用xml:styles