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

第1章　網(wǎng)頁和網(wǎng)站的制作流程
1.1　認(rèn)識(shí)網(wǎng)頁
1.1.1　 網(wǎng)頁和網(wǎng)站
1.1.2　 網(wǎng)頁的基本構(gòu)成元素
1.2　什么是網(wǎng)頁設(shè)計(jì)
1.2.1　 網(wǎng)頁設(shè)計(jì)概述
1.2.2　 網(wǎng)頁設(shè)計(jì)與網(wǎng)頁制作
1.2.3　 網(wǎng)頁設(shè)計(jì)的特點(diǎn)
1.2.4　 網(wǎng)頁設(shè)計(jì)的相關(guān)術(shù)語
1.3　網(wǎng)頁設(shè)計(jì)涵蓋的內(nèi)容
1.3.1　 視聽元素
1.3.2　 版式設(shè)計(jì)
1.4　如何設(shè)計(jì)網(wǎng)頁
1.4.1　 網(wǎng)頁設(shè)計(jì)的基本原則
1.4.2　 網(wǎng)站設(shè)計(jì)成功的要素
1.4.3　 網(wǎng)頁的設(shè)計(jì)風(fēng)格及色彩搭配
1.5　網(wǎng)頁設(shè)計(jì)的原則
1.5.1　 為用戶考慮的原則
1.5.2　 主題突出的原則
1.5.3　 整體原則
1.5.4　 內(nèi)容與形式相統(tǒng)一的原則
1.5.5　 更新和維護(hù)的原則
1.6　網(wǎng)頁設(shè)計(jì)師應(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　 頁面細(xì)化及實(shí)施
1.7.3　 后期維護(hù)
1.8　靜態(tài)頁面的制作流程
1.8.1　 觀察設(shè)計(jì)稿
1.8.2　 拆分設(shè)計(jì)稿
1.8.3　 網(wǎng)頁設(shè)計(jì)的實(shí)現(xiàn)
第2章　CSS樣式入門
2.1　CSS的基本概念
2.1.1　 CSS的特點(diǎn)
2.1.2　 CSS的類型
2.1.3　 CSS的基本語法
2.1.4　 CSS的沖突
2.2　網(wǎng)頁設(shè)計(jì)中的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)用實(shí)例--為頁面添加CSS樣式
2.6.1　 設(shè)計(jì)分析
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　 浮動(dòng)定位
3.2.2　 position定位
3.3　可視化盒模型
3.3.1　 盒子模型
3.3.2　 視覺可視化模型
3.3.3　 空白邊疊加
3.4　常用的布局方式
3.4.1　 居中布局設(shè)計(jì)
3.4.2　 浮動(dòng)布局設(shè)計(jì)
3.4.3　 高度自適應(yīng)設(shè)計(jì)
3.5　CSS 3.0中盒模型的新增屬性
3.5.1　 overflow
3.5.2　 overflow-x
3.5.3　 overflow-y
3.6　應(yīng)用實(shí)例--使用Div+CSS布局頁面
3.6.1　 設(shè)計(jì)分析
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è)置背景滾動(dòng)
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)用實(shí)例--制作金融類網(wǎng)站頁面
4.4.1　 設(shè)計(jì)分析
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　 文字顏色和粗細(xì)
5.1.3　 斜體
5.1.4　 下畫線、頂畫線和刪除線
5.1.5　 英文字母大小寫
5.2　控制段落樣式
5.2.1　 段落水平對(duì)齊
5.2.2　 段落垂直對(duì)齊
5.2.3　 行間距和字間距
5.2.4　 首字下沉
5.3　使用CSS對(duì)Flash中的文字進(jìn)行控制
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í)例--制作設(shè)計(jì)類網(wǎng)站
5.5.1　 設(shè)計(jì)分析
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　圖片對(duì)齊
6.2.1　 水平對(duì)齊設(shè)置
6.2.2　 垂直對(duì)齊設(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)用實(shí)例--制作婚慶網(wǎng)站
6.5.1　 設(shè)計(jì)分析
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　 改變項(xiàng)目樣式
7.1.4　 圖片符號(hào)
7.2　使用列表制作實(shí)用菜單
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)用實(shí)例--制作音樂網(wǎng)站
7.4.1　 設(shè)計(jì)分析
7.4.2　 制作步驟
7.4.3　 案例總結(jié)
7.5　舉一反三--制作設(shè)計(jì)工作室網(wǎng)站
7.5.1　 案例分析
7.5.2　 視頻操作
第8章　使用CSS控制表單樣式
8.1　表單設(shè)計(jì)概述
8.1.1　 表單的設(shè)計(jì)原則
8.1.2　 表單應(yīng)用分類
8.2　表單的設(shè)計(jì)
8.2.1　 表單和表單元素
8.2.2　 標(biāo)簽、字段集和圖例
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)用實(shí)例--制作用戶注冊(cè)頁面
8.4.1　 設(shè)計(jì)分析
8.4.2　 制作步驟
8.4.3　 案例總結(jié)
8.5　舉一反三--制作用戶登錄頁面
8.5.1　 案例分析
8.5.2　 視頻操作
第9章　使用CSS美化瀏覽器效果
9.1　使用CSS控制超鏈接
9.1.1　 認(rèn)識(shí)超鏈接
9.1.2　 關(guān)于鏈接路徑
9.1.3　 超鏈接屬性控制
9.1.4　 圖像映射
9.1.5　 鏈接的打開方式
9.2　超鏈接特效
9.2.1　 按鈕式超鏈接
9.2.2　 浮雕式超鏈接
9.3　鼠標(biāo)特效
9.3.1　 CSS控制鼠標(biāo)箭頭
9.3.2　 鼠標(biāo)變化的超鏈接
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)用實(shí)例--制作產(chǎn)品宣傳網(wǎng)站
9.5.1　 設(shè)計(jì)分析
9.5.2　 制作步驟
9.5.3　 案例總結(jié)
9.6　舉一反三--制作運(yùn)輸公司網(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)用實(shí)例--制作產(chǎn)品類網(wǎng)站
10.3.1　設(shè)計(jì)分析
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的特點(diǎn)
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　表達(dá)式和運(yùn)算符
11.2.5　基本語句
11.3　使用Spry構(gòu)件
11.3.1　關(guān)于Spry構(gòu)件
11.3.2　插入Spry菜單
11.3.3　插入Spry選項(xiàng)卡式面板
11.3.4　插入Spry折疊式構(gòu)件
11.3.5　插入Spry可折疊面板
11.4　應(yīng)用實(shí)例--在網(wǎng)頁中應(yīng)用Spry構(gòu)件
11.4.1　設(shè)計(jì)分析
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的特點(diǎn)
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　實(shí)現(xiàn)隔行變色的表格
12.4　應(yīng)用實(shí)例--在HTML頁面中調(diào)用XML數(shù)據(jù)
12.4.1　設(shè)計(jì)分析
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簡(jiǎn)介
13.1.2　Ajax的關(guān)鍵元素
13.1.3　Ajax的優(yōu)勢(shì)
13.1.4　實(shí)現(xiàn)Ajax的步驟
13.1.5　使用CSS的必要性
13.2　Ajax基礎(chǔ)
13.2.1　創(chuàng)建XMLHttpRequest對(duì)象
13.2.2　發(fā)出Ajax請(qǐng)求
13.2.3　處理服務(wù)器響應(yīng)
13.2.4　使用CSS樣式
13.3　HTML 5.0簡(jiǎn)介
13.3.1　HTML 5.0標(biāo)簽
13.3.2　HTML 5.0事件屬性
13.3.3　HTML 5.0標(biāo)準(zhǔn)屬性
13.4　應(yīng)用實(shí)例--使用Ajax 實(shí)現(xiàn)頁面特效
13.4.1　設(shè)計(jì)分析
13.4.2　制作步驟
13.4.3　案例總結(jié)
13.5　舉一反三--通過Ajax 實(shí)現(xiàn)可拖動(dòng)Div塊
13.5.1　案例分析
13.5.2　視頻操作
第14章　兒童教育類網(wǎng)站
14.1　綜合實(shí)例--制作兒童教育類網(wǎng)站
14.1.1　設(shè)計(jì)分析
14.1.2　制作步驟
14.1.3　案例總結(jié)
第15章　醫(yī)療保健類網(wǎng)站設(shè)計(jì)
15.1　綜合實(shí)例--制作醫(yī)療保健類網(wǎng)站
15.1.1　設(shè)計(jì)分析
15.1.2　制作步驟
15.1.3　案例總結(jié)
第16章　游戲類網(wǎng)站設(shè)計(jì)
16.1　綜合實(shí)例--制作游戲類網(wǎng)站
16.1.1　設(shè)計(jì)分析
16.1.2　制作步驟
16.1.3　案例總結(jié)