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)頁的基本構成元素
1.2　什么是網(wǎng)頁設計
1.2.1　 網(wǎng)頁設計概述
1.2.2　 網(wǎng)頁設計與網(wǎng)頁制作
1.2.3　 網(wǎng)頁設計的特點
1.2.4　 網(wǎng)頁設計的相關術語
1.3　網(wǎng)頁設計涵蓋的內容
1.3.1　 視聽元素
1.3.2　 版式設計
1.4　如何設計網(wǎng)頁
1.4.1　 網(wǎng)頁設計的基本原則
1.4.2　 網(wǎng)站設計成功的要素
1.4.3　 網(wǎng)頁的設計風格及色彩搭配
1.5　網(wǎng)頁設計的原則
1.5.1　 為用戶考慮的原則
1.5.2　 主題突出的原則
1.5.3　 整體原則
1.5.4　 內容與形式相統(tǒng)一的原則
1.5.5　 更新和維護的原則
1.6　網(wǎng)頁設計師應具備的素質
1.6.1　 藝術素質
1.6.2　 技能素質
1.6.3　 綜合素質
1.7　網(wǎng)站的制作流程
1.7.1　 前期策劃
1.7.2　 頁面細化及實施
1.7.3　 后期維護
1.8　靜態(tài)頁面的制作流程
1.8.1　 觀察設計稿
1.8.2　 拆分設計稿
1.8.3　 網(wǎng)頁設計的實現(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)頁設計中的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　應用CSS到網(wǎng)頁中
2.4.1　 內聯(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　應用實例--為頁面添加CSS樣式
2.6.1　 設計分析
2.6.2　 制作步驟
2.6.3　 案例總結
2.7　舉一反三--制作產品介紹網(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　 居中布局設計
3.4.2　 浮動布局設計
3.4.3　 高度自適應設計
3.5　CSS 3.0中盒模型的新增屬性
3.5.1　 overflow
3.5.2　 overflow-x
3.5.3　 overflow-y
3.6　應用實例--使用Div+CSS布局頁面
3.6.1　 設計分析
3.6.2　 制作步驟
3.6.3　 案例總結
3.7　舉一反三--制作健康網(wǎng)站
3.7.1　案例分析
3.7.2　視頻操作
第4章　使用CSS控制網(wǎng)頁背景
4.1　背景顏色
4.1.1　 設置頁面背景顏色
4.1.2　 設置塊背景顏色
4.2　背景圖片
4.2.1　 為頁面設置背景圖片
4.2.2　 背景圖片的重復
4.2.3　 設置背景圖片的位置
4.2.4　 設置背景滾動
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　應用實例--制作金融類網(wǎng)站頁面
4.4.1　 設計分析
4.4.2　 制作步驟
4.4.3　 案例總結
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　應用實例--制作設計類網(wǎng)站
5.5.1　 設計分析
5.5.2　 制作步驟
5.5.3　 案例總結
5.6　舉一反三--制作社區(qū)類網(wǎng)站
5.6.1　 案例分析
5.6.2　 視頻操作
第6章　使用CSS控制圖片樣式
6.1　圖片樣式
6.1.1　 圖片邊框設置
6.1.2　 圖片縮放設置
6.2　圖片對齊
6.2.1　 水平對齊設置
6.2.2　 垂直對齊設置
6.3　圖文混排
6.3.1　 文本混排
6.3.2　 設置混排間距
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　應用實例--制作婚慶網(wǎng)站
6.5.1　 設計分析
6.5.2　 制作步驟
6.5.3　 案例總結
6.6　舉一反三--制作產品介紹網(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　 菜單的橫豎轉換
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　應用實例--制作音樂網(wǎng)站
7.4.1　 設計分析
7.4.2　 制作步驟
7.4.3　 案例總結
7.5　舉一反三--制作設計工作室網(wǎng)站
7.5.1　 案例分析
7.5.2　 視頻操作
第8章　使用CSS控制表單樣式
8.1　表單設計概述
8.1.1　 表單的設計原則
8.1.2　 表單應用分類
8.2　表單的設計
8.2.1　 表單和表單元素
8.2.2　 標簽、字段集和圖例
8.2.3　 使用CSS控制文本字段
8.2.4　 使用CSS控制復選框與單選框
8.2.5　 使用CSS控制列表與跳轉菜單
8.3　CSS 3.0中控制內容的新增屬性
8.4　應用實例--制作用戶注冊頁面
8.4.1　 設計分析
8.4.2　 制作步驟
8.4.3　 案例總結
8.5　舉一反三--制作用戶登錄頁面
8.5.1　 案例分析
8.5.2　 視頻操作
第9章　使用CSS美化瀏覽器效果
9.1　使用CSS控制超鏈接
9.1.1　 認識超鏈接
9.1.2　 關于鏈接路徑
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　應用實例--制作產品宣傳網(wǎng)站
9.5.1　 設計分析
9.5.2　 制作步驟
9.5.3　 案例總結
9.6　舉一反三--制作運輸公司網(wǎng)站
9.6.1　 案例分析
9.6.2　 視頻操作
第10章　應用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　應用實例--制作產品類網(wǎng)站
10.3.1　設計分析
10.3.2　制作步驟
10.3.3　案例總結
10.4　舉一反三--制作網(wǎng)絡游戲網(wǎng)站
10.4.1　案例分析
10.4.2　視頻操作
第11章　CSS與JavaScript的綜合應用
11.1　什么是JavaScript
11.1.1　了解JavaScript
11.1.2　JavaScript的特點
11.1.3　JavaScript的應用范圍
11.1.4　CSS樣式與JavaScript
11.2　JavaScript的語法基礎
11.2.1　JavaScript的基本架構
11.2.2　JavaScript的基本語法
11.2.3　數(shù)據(jù)類型和變量
11.2.4　表達式和運算符
11.2.5　基本語句
11.3　使用Spry構件
11.3.1　關于Spry構件
11.3.2　插入Spry菜單
11.3.3　插入Spry選項卡式面板
11.3.4　插入Spry折疊式構件
11.3.5　插入Spry可折疊面板
11.4　應用實例--在網(wǎng)頁中應用Spry構件
11.4.1　設計分析
11.4.2　制作步驟
11.4.3　案例總結
11.5　舉一反三--制作婚紗攝影網(wǎng)站
11.5.1　案例分析
11.5.2　視頻操作
第12章　CSS與XML的綜合應用
12.1　XML基礎
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的應用
12.3.1　顯示學生信息
12.3.2　實現(xiàn)隔行變色的表格
12.4　應用實例--在HTML頁面中調用XML數(shù)據(jù)
12.4.1　設計分析
12.4.2　制作步驟
12.4.3　案例總結
12.5　舉一反三--制作企業(yè)網(wǎng)站
12.5.1　案例分析
12.5.2　視頻操作
第13章　CSS與Ajax的綜合應用
13.1　了解Ajax
13.1.1　Ajax簡介
13.1.2　Ajax的關鍵元素
13.1.3　Ajax的優(yōu)勢
13.1.4　實現(xiàn)Ajax的步驟
13.1.5　使用CSS的必要性
13.2　Ajax基礎
13.2.1　創(chuàng)建XMLHttpRequest對象
13.2.2　發(fā)出Ajax請求
13.2.3　處理服務器響應
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　應用實例--使用Ajax 實現(xiàn)頁面特效
13.4.1　設計分析
13.4.2　制作步驟
13.4.3　案例總結
13.5　舉一反三--通過Ajax 實現(xiàn)可拖動Div塊
13.5.1　案例分析
13.5.2　視頻操作
第14章　兒童教育類網(wǎng)站
14.1　綜合實例--制作兒童教育類網(wǎng)站
14.1.1　設計分析
14.1.2　制作步驟
14.1.3　案例總結
第15章　醫(yī)療保健類網(wǎng)站設計
15.1　綜合實例--制作醫(yī)療保健類網(wǎng)站
15.1.1　設計分析
15.1.2　制作步驟
15.1.3　案例總結
第16章　游戲類網(wǎng)站設計
16.1　綜合實例--制作游戲類網(wǎng)站
16.1.1　設計分析
16.1.2　制作步驟
16.1.3　案例總結