Div+CSS 3.0網(wǎng)頁布局案例精粹

第1章　網(wǎng)頁和網(wǎng)站的制作流程
1.1　認識網(wǎng)頁
1.1.1　 網(wǎng)頁和網(wǎng)站
1.1.2　 網(wǎng)頁的基本構(gòu)成元素
1.2　什么是網(wǎng)頁設(shè)計
1.2.1　 網(wǎng)頁設(shè)計概述
1.2.2　 網(wǎng)頁設(shè)計與網(wǎng)頁制作
1.2.3　 網(wǎng)頁設(shè)計的特點
1.2.4　 網(wǎng)頁設(shè)計的相關(guān)術(shù)語
1.3　網(wǎng)頁設(shè)計涵蓋的內(nèi)容
1.3.1　 視聽元素
1.3.2　 版式設(shè)計
1.4　如何設(shè)計網(wǎng)頁
1.4.1　 網(wǎng)頁設(shè)計的基本原則
1.4.2　 網(wǎng)站設(shè)計成功的要素
1.4.3　 網(wǎng)頁的設(shè)計風(fēng)格及色彩搭配
1.5　網(wǎng)頁設(shè)計的原則
1.5.1　 為用戶考慮的原則
1.5.2　 主題突出的原則
1.5.3　 整體原則
1.5.4　 內(nèi)容與形式相統(tǒng)一的原則
1.5.5　 更新和維護的原則
1.6　網(wǎng)頁設(shè)計師應(yīng)具備的素質(zhì)
1.6.1　 藝術(shù)素質(zhì)
1.6.2　 技能素質(zhì)
1.6.3　 綜合素質(zhì)
1.7　網(wǎng)站的制作流程
1.7.1　 前期策劃
1.7.2　 頁面細化及實施
1.7.3　 后期維護
1.8　靜態(tài)頁面的制作流程
1.8.1　 觀察設(shè)計稿
1.8.2　 拆分設(shè)計稿
1.8.3　 網(wǎng)頁設(shè)計的實現(xiàn)
第2章　CSS樣式入門
2.1　CSS的基本概念
2.1.1　 CSS的特點
2.1.2　 CSS的類型
2.1.3　 CSS的基本語法
2.1.4　 CSS的沖突
2.2　網(wǎng)頁設(shè)計中的CSS
2.2.1　 怎樣使用CSS
2.2.2　 CSS能做什么
2.2.3　 CSS不能做什么
2.3　CSS樣式表的基本用法
2.3.1　怎樣在HTML中插入樣式表
2.3.2　 CSS樣式表規(guī)則
2.4　應(yīng)用CSS到網(wǎng)頁中
2.4.1　 內(nèi)聯(lián)樣式
2.4.2　 嵌入樣式表
2.4.3　 外部樣式表
2.5　單位和值
2.5.1　 定義顏色值
2.5.2　 定義字體
2.5.3　 群選擇符
2.5.4　 派生選擇符
2.5.5　 id選擇符
2.5.6　 類別選擇符
2.6　應(yīng)用實例--為頁面添加CSS樣式
2.6.1　 設(shè)計分析
2.6.2　 制作步驟
2.6.3　 案例總結(jié)
2.7　舉一反三--制作產(chǎn)品介紹網(wǎng)站
2.7.1　 案例分析
2.7.2　 視頻操作
第3章　使用Div+CSS布局頁面
3.1　定義Div
3.1.1　 什么是Div
3.1.2　 插入Div
3.1.3　 Div的嵌套和固定格式
3.2　CSS布局定位
3.2.1　 浮動定位
3.2.2　 position定位
3.3　可視化盒模型
3.3.1　 盒子模型
3.3.2　 視覺可視化模型
3.3.3　 空白邊疊加
3.4　常用的布局方式
3.4.1　 居中布局設(shè)計
3.4.2　 浮動布局設(shè)計
3.4.3　 高度自適應(yīng)設(shè)計
3.5　CSS 3.0中盒模型的新增屬性
3.5.1　 overflow
3.5.2　 overflow-x
3.5.3　 overflow-y
3.6　應(yīng)用實例--使用Div+CSS布局頁面
3.6.1　 設(shè)計分析
3.6.2　 制作步驟
3.6.3　 案例總結(jié)
3.7　舉一反三--制作健康網(wǎng)站
3.7.1　案例分析
3.7.2　視頻操作
第4章　使用CSS控制網(wǎng)頁背景
4.1　背景顏色
4.1.1　 設(shè)置頁面背景顏色
4.1.2　 設(shè)置塊背景顏色
4.2　背景圖片
4.2.1　 為頁面設(shè)置背景圖片
4.2.2　 背景圖片的重復(fù)
4.2.3　 設(shè)置背景圖片的位置
4.2.4　 設(shè)置背景滾動
4.2.5　 背景樣式的縮寫方式
4.3　CSS 3.0中背景的新增屬性
4.3.1　 background-origin
4.3.2　 background-clip
4.3.3　 background-size
4.3.4　 multiple backgrounds
4.4　應(yīng)用實例--制作金融類網(wǎng)站頁面
4.4.1　 設(shè)計分析
4.4.2　 制作步驟
4.4.3　 案例總結(jié)
4.5　舉一反三--制作保健商品網(wǎng)站
4.5.1　 案例分析
4.5.2　 視頻操作
第5章　使用CSS控制文字樣式
5.1　控制文字樣式
5.1.1　 字體和大小
5.1.2　 文字顏色和粗細
5.1.3　 斜體
5.1.4　 下畫線、頂畫線和刪除線
5.1.5　 英文字母大小寫
5.2　控制段落樣式
5.2.1　 段落水平對齊
5.2.2　 段落垂直對齊
5.2.3　 行間距和字間距
5.2.4　 首字下沉
5.3　使用CSS對Flash中的文字進行控制
5.4　CSS 3.0中文字的新增屬性
5.4.1　 text-shadow
5.4.2　 text-overflow
5.4.3　 word-wrap
5.5　應(yīng)用實例--制作設(shè)計類網(wǎng)站
5.5.1　 設(shè)計分析
5.5.2　 制作步驟
5.5.3　 案例總結(jié)
5.6　舉一反三--制作社區(qū)類網(wǎng)站
5.6.1　 案例分析
5.6.2　 視頻操作
第6章　使用CSS控制圖片樣式
6.1　圖片樣式
6.1.1　 圖片邊框設(shè)置
6.1.2　 圖片縮放設(shè)置
6.2　圖片對齊
6.2.1　 水平對齊設(shè)置
6.2.2　 垂直對齊設(shè)置
6.3　圖文混排
6.3.1　 文本混排
6.3.2　 設(shè)置混排間距
6.4　CSS 3.0中邊框的新增屬性
6.4.1　 border-image
6.4.2　 border-radius
6.4.3　 box-shadow
6.4.4　 border-color
6.5　應(yīng)用實例--制作婚慶網(wǎng)站
6.5.1　 設(shè)計分析
6.5.2　 制作步驟
6.5.3　 案例總結(jié)
6.6　舉一反三--制作產(chǎn)品介紹網(wǎng)站
6.6.1　 案例分析
6.6.2　 視頻操作
第7章　使用CSS控制列表樣式
7.1　列表控制概述
7.1.1　 列表控制原則
7.1.2　 列表的類型及使用
7.1.3　 改變項目樣式
7.1.4　 圖片符號
7.2　使用列表制作實用菜單
7.2.1　 無須表格的菜單
7.2.2　 菜單的橫豎轉(zhuǎn)換
7.3　CSS 3.0中顏色的新增屬性
7.3.1　 HSL colors
7.3.2　 HSLA colors
7.3.3　 opacity
7.3.4　 RGBA colors
7.4　應(yīng)用實例--制作音樂網(wǎng)站
7.4.1　 設(shè)計分析
7.4.2　 制作步驟
7.4.3　 案例總結(jié)
7.5　舉一反三--制作設(shè)計工作室網(wǎng)站
7.5.1　 案例分析
7.5.2　 視頻操作
第8章　使用CSS控制表單樣式
8.1　表單設(shè)計概述
8.1.1　 表單的設(shè)計原則
8.1.2　 表單應(yīng)用分類
8.2　表單的設(shè)計
8.2.1　 表單和表單元素
8.2.2　 標簽、字段集和圖例
8.2.3　 使用CSS控制文本字段
8.2.4　 使用CSS控制復(fù)選框與單選框
8.2.5　 使用CSS控制列表與跳轉(zhuǎn)菜單
8.3　CSS 3.0中控制內(nèi)容的新增屬性
8.4　應(yīng)用實例--制作用戶注冊頁面
8.4.1　 設(shè)計分析
8.4.2　 制作步驟
8.4.3　 案例總結(jié)
8.5　舉一反三--制作用戶登錄頁面
8.5.1　 案例分析
8.5.2　 視頻操作
第9章　使用CSS美化瀏覽器效果
9.1　使用CSS控制超鏈接
9.1.1　 認識超鏈接
9.1.2　 關(guān)于鏈接路徑
9.1.3　 超鏈接屬性控制
9.1.4　 圖像映射
9.1.5　 鏈接的打開方式
9.2　超鏈接特效
9.2.1　 按鈕式超鏈接
9.2.2　 浮雕式超鏈接
9.3　鼠標特效
9.3.1　 CSS控制鼠標箭頭
9.3.2　 鼠標變化的超鏈接
9.4　CSS 3.0中用戶界面的新增屬性
9.4.1　 box-sizing
9.4.2　 resize
9.4.3　 outline
9.4.4　 nav-index
9.5　應(yīng)用實例--制作產(chǎn)品宣傳網(wǎng)站
9.5.1　 設(shè)計分析
9.5.2　 制作步驟
9.5.3　 案例總結(jié)
9.6　舉一反三--制作運輸公司網(wǎng)站
9.6.1　 案例分析
9.6.2　 視頻操作
第10章　應(yīng)用CSS中的濾鏡
10.1　了解CSS濾鏡
10.1.1　Alpha濾鏡
10.1.2　Blur濾鏡
10.1.3　MotionBlur濾鏡
10.1.4　Dropshadow濾鏡
10.1.5　Shadow濾鏡
10.1.6　Flip濾鏡
10.1.7　Glow濾鏡
10.1.8　Gray濾鏡
10.1.9　Invert濾鏡
10.1.10　Xray濾鏡
10.1.11　Mask濾鏡
10.1.12　Wave濾鏡
10.2　CSS 3.0中其他模塊的新增屬性
10.2.1　@media
10.2.2　columns
10.2.3　@font-face
10.2.4　speech
10.3　應(yīng)用實例--制作產(chǎn)品類網(wǎng)站
10.3.1　設(shè)計分析
10.3.2　制作步驟
10.3.3　案例總結(jié)
10.4　舉一反三--制作網(wǎng)絡(luò)游戲網(wǎng)站
10.4.1　案例分析
10.4.2　視頻操作
第11章　CSS與JavaScript的綜合應(yīng)用
11.1　什么是JavaScript
11.1.1　了解JavaScript
11.1.2　JavaScript的特點
11.1.3　JavaScript的應(yīng)用范圍
11.1.4　CSS樣式與JavaScript
11.2　JavaScript的語法基礎(chǔ)
11.2.1　JavaScript的基本架構(gòu)
11.2.2　JavaScript的基本語法
11.2.3　數(shù)據(jù)類型和變量
11.2.4　表達式和運算符
11.2.5　基本語句
11.3　使用Spry構(gòu)件
11.3.1　關(guān)于Spry構(gòu)件
11.3.2　插入Spry菜單
11.3.3　插入Spry選項卡式面板
11.3.4　插入Spry折疊式構(gòu)件
11.3.5　插入Spry可折疊面板
11.4　應(yīng)用實例--在網(wǎng)頁中應(yīng)用Spry構(gòu)件
11.4.1　設(shè)計分析
11.4.2　制作步驟
11.4.3　案例總結(jié)
11.5　舉一反三--制作婚紗攝影網(wǎng)站
11.5.1　案例分析
11.5.2　視頻操作
第12章　CSS與XML的綜合應(yīng)用
12.1　XML基礎(chǔ)
12.1.1　XML的特點
12.1.2　XML與HTML
12.1.3　XML基本語法
12.1.4　格式正確的XML文檔
12.2　XML與CSS的鏈接
12.2.1　使用xml:stylesheet指令
12.2.2　使用@import指令
12.3　XML與CSS的應(yīng)用
12.3.1　顯示學(xué)生信息
12.3.2　實現(xiàn)隔行變色的表格
12.4　應(yīng)用實例--在HTML頁面中調(diào)用XML數(shù)據(jù)
12.4.1　設(shè)計分析
12.4.2　制作步驟
12.4.3　案例總結(jié)
12.5　舉一反三--制作企業(yè)網(wǎng)站
12.5.1　案例分析
12.5.2　視頻操作
第13章　CSS與Ajax的綜合應(yīng)用
13.1　了解Ajax
13.1.1　Ajax簡介
13.1.2　Ajax的關(guān)鍵元素
13.1.3　Ajax的優(yōu)勢
13.1.4　實現(xiàn)Ajax的步驟
13.1.5　使用CSS的必要性
13.2　Ajax基礎(chǔ)
13.2.1　創(chuàng)建XMLHttpRequest對象
13.2.2　發(fā)出Ajax請求
13.2.3　處理服務(wù)器響應(yīng)
13.2.4　使用CSS樣式
13.3　HTML 5.0簡介
13.3.1　HTML 5.0標簽
13.3.2　HTML 5.0事件屬性
13.3.3　HTML 5.0標準屬性
13.4　應(yīng)用實例--使用Ajax 實現(xiàn)頁面特效
13.4.1　設(shè)計分析
13.4.2　制作步驟
13.4.3　案例總結(jié)
13.5　舉一反三--通過Ajax 實現(xiàn)可拖動Div塊
13.5.1　案例分析
13.5.2　視頻操作
第14章　兒童教育類網(wǎng)站
14.1　綜合實例--制作兒童教育類網(wǎng)站
14.1.1　設(shè)計分析
14.1.2　制作步驟
14.1.3　案例總結(jié)
第15章　醫(yī)療保健類網(wǎng)站設(shè)計
15.1　綜合實例--制作醫(yī)療保健類網(wǎng)站
15.1.1　設(shè)計分析
15.1.2　制作步驟
15.1.3　案例總結(jié)
第16章　游戲類網(wǎng)站設(shè)計
16.1　綜合實例--制作游戲類網(wǎng)站
16.1.1　設(shè)計分析
16.1.2　制作步驟
16.1.3　案例總結(jié)