《精通CSS網(wǎng)布布局》深入、系統(tǒng)地講解了使用css進行網(wǎng)頁布局設(shè)計的相關(guān)知識和技巧,內(nèi)容包括css基礎(chǔ)、文字和版式設(shè)計、圖像控制、超鏈接和導(dǎo)航菜單設(shè)計、表格和表單設(shè)計、浮動網(wǎng)頁布局設(shè)計以及網(wǎng)頁優(yōu)化等。在書的最后,還對css框架設(shè)計進行案例分析,并通過一個購物網(wǎng)站設(shè)計實例來融會貫通所有知識點,以達到靈活應(yīng)用的目的。
《精通CSS網(wǎng)頁布局》對標(biāo)準(zhǔn)化網(wǎng)頁設(shè)計見解獨特,一針見血揭示CSS技術(shù)的核心價值及應(yīng)用,網(wǎng)上講座與答疑。共計893分鐘的超強視頻講解。CSS、Html、JavaScript、ASP教程(CHM格式),《精通CSS網(wǎng)布布局》實例源代碼。
目錄:
前言
第1章 CSS布局基礎(chǔ)
1.1 認識網(wǎng)頁中的CSS
1.1.1 編寫符合CSS布局的HTML結(jié)構(gòu)
1.1.2 DOCTYPE(文檔類型)與CSS的關(guān)系
1.2 CSS基本語法和用法
1.2.1 CSS基本語法
1.2.2 應(yīng)用CSS樣式
1.2.3 建立外部樣式表
1.2.4 在HTML中導(dǎo)入外部樣式表
1.3 CSS的屬性和屬性值
1.3.1 如何記憶CSS的屬性
1.3.2 CSS的取值單位
1.4 CSS常用選擇符
1.4.1 標(biāo)簽選擇符
1.4.2 類選擇符
1.4.3 ID選擇符
1.5 CSS高級選擇符
1.5.1 認識HTML文檔的樹狀結(jié)構(gòu)
1.5.2 子選擇符
1.5.3 相鄰選擇符
1.5.4 屬性選擇符
1.6 靈活使用CSS選擇符
1.6.1 CSS選擇符分組
1.6.2 通配選擇符
1.6.3 包含選擇符
1.6.4 偽類和偽元素選擇符
1.6.5 CSS選擇符的嵌套
1.7 CSS的繼承性
1.7.1 認識CSS的繼承性
1.7.2 CSS繼承性的局限性
1.8 CSS樣式層疊和選擇符優(yōu)先級
1.8.1 CSS樣式表的優(yōu)先級
1.8.2 CSS樣式的優(yōu)先級
1.8.3 CSS選擇符的優(yōu)先級
第2章 使用Dreamweaver實現(xiàn)CSS布局
2.1 認識Dreamweaver的CSS布局工作流
2.1.1 增強CSS功能的【屬性】面板
2.1.2 【頁面屬性】對話框
2.1.3 【CSS樣式】面板
2.1.4 屬性表
2.2 操作【css樣式】面板
2.2.1 新建樣式
2.2.2 定義樣式的屬性
2.2.3 應(yīng)用樣式
23以CSS技術(shù)為核心的設(shè)計視圖
2.3.1 強大的CSS設(shè)備類型
2.3.2 可視化助理
2.4 使用DW實現(xiàn)CSS布局實戰(zhàn)
2.4.1 使用DreamweaverCS3構(gòu)建頁面結(jié)構(gòu)
2.4.2 使用【頁面屬性】統(tǒng)一基本樣式
2.4.3 使用【csS樣式】面板定制頁面基本布局
第3章 聽話的文字和版式
3.1 看懂DreamweaverCS3提供的模板
3.1.1 善于利用示例頁
3.1.2 挖掘標(biāo)準(zhǔn)網(wǎng)頁布局模板的價值
3.2 你的文字聽話嗎
3.2.1 國際雅虎和中國雅虎
3.2.2 選擇好單位讓你的文字更聽話
3.2.3 設(shè)計網(wǎng)頁字體大小配置方案
3.2.4 設(shè)計與字體大小相關(guān)聯(lián)的網(wǎng)頁布局
3.3 留心,不要讓你的文字“露怯”
3.3.1 不要以為多此一舉
3.3.2 讓網(wǎng)頁字體顯示更靈活
3.3.3 別忘了通用字體
3.4 小家伙,你向哪兒看齊
3.4.1 文本對齊
3.4.2 布局居中
3.4.3 布局元素向左、右對齊
3.4.4 文本和元素垂直對齊
3.4.5 絕對定位元素居中顯示
3.4.6 混合結(jié)構(gòu)中對齊處理
3.5 咱們比比個吧
3.5.1 什么樣的行高更合適閱讀
3.5.2 行高、邊距和偽行高
3.6 讓網(wǎng)頁看起來和顏悅色
3.6.1 在CSS中使用顏色
3.6.2 CSS布局與配色
第4章 扮靚網(wǎng)頁的天使——圖像
4.1 選擇:前景圖像和背景圖像
4.1.1 前景圖像
4.1.2 背景圖像
4.1.3 如何選用前景圖像和背景圖像
4.1.4 走出迷失的圖像URL
4.2 圖像邊框和陰影
4.2.1 定義邊距
4.2.2 巧設(shè)邊距
4.2.3 為圖像增加陰影
4.2.4 為img元素定義默認陰影樣式
4.2.5 設(shè)計晶瑩剔透的水印
4.3 圖文混合排版
4.3.1 單行圖文定位
4.3.2 單行圖文對齊
4.3.3 圖文環(huán)繞
4.3.4 調(diào)整圖文環(huán)繞的間距
4.3.5 不規(guī)則圖文環(huán)繞
4.4 隱形的翅膀——背景圖像
4.4.1 控制背景圖像的重復(fù)顯示
4.4.2 背景圖像水平平鋪應(yīng)用示例
4.4.3 背景圖像垂直平鋪應(yīng)用示例
4.4.4 精確定位背景圖像
4.4.5 固定背景圖像在瀏覽器中的位置
4.4.6 如何增加多個背景圖像
4.4.7 設(shè)計更酷的圓角
4.5 背景圖像布局應(yīng)用——偽列布局
第5章 活潑的超鏈接和導(dǎo)航菜單
5.1 輕松掌握超鏈接樣式
5.1.1 怪異的偽類
5.1.2 超鏈接的四種狀態(tài)
5.1.3 為超鏈接綁定不同的樣式
5.1.4 為頁面定義不同的超鏈接樣式
5.2 花枝招展的超鏈接樣式
5.2.1 為超鏈接定義普通樣式
5.2.2 避免影響版面晃動的超鏈接樣式
5.2.3 模擬按鈕樣式
5.2.4 使用圖像設(shè)計超鏈接樣式
5.2.5 設(shè)計具有擴展性的超鏈接樣式
5.3 構(gòu)建導(dǎo)航條列表框架及其基本樣式
5.3.1 為什么使用項目列表來構(gòu)建導(dǎo)航條
5.3.2 搭架結(jié)構(gòu)合理的導(dǎo)航列表
5.3.3 使用定義列表搭架導(dǎo)航列表
5.3.4 控制項目列表的樣式
5.3.5 有趣的項目符號
5.3.6 自定義圖片項目符號
5.3.7 通過背景圖像來定義項目符號
5.3.8 使用行內(nèi)顯示法設(shè)計項目列表水平顯示
5.3.9 使用浮動法設(shè)計項目列表水平顯示
5.3.10 設(shè)計水平浮動列表的超鏈接樣式
5.3.11 解決浮動溢出問題
5.3.12 使用定位法設(shè)計項目列表水平顯示
5.4 設(shè)計導(dǎo)航菜單
5.4.1 淡雅的垂直導(dǎo)航菜單
5.4.2 巧妙的水平導(dǎo)航菜單
5.4.3 背景圖像在導(dǎo)航菜單中的應(yīng)用
5.4.4 實用的多級菜單
5.4.5 時尚的滑動門菜單
第6章 更專業(yè)的表格和表單
6.1 用好表格
6.1.1 正確使用表格
6.1.2 優(yōu)化數(shù)據(jù)表格的結(jié)構(gòu)
6.1.3 設(shè)計表格樣式
6.2 表格樣式設(shè)計實戰(zhàn)
6.2.1 設(shè)計表格行樣式
6.2.2 設(shè)計表格列樣式
6.2.3 設(shè)計鼠標(biāo)經(jīng)過時表格行的樣式
6.3 用好表單
6.3.1 認識表單
6.3.2 設(shè)計表單樣式
6.4 表單樣式設(shè)計實戰(zhàn)
6.4.1 設(shè)計高亮顯示當(dāng)前表單樣式
6.4.2 設(shè)計圖標(biāo)樣式的表單效果
6.4.3 設(shè)計易用性表單效果
第7章 浮動的網(wǎng)頁布局
7.1 CSS的“水立方”模型
7.1.1 盒模型
7.1.2 盒模型解疑
7.1.3 盒模型的外邊距
……
第8章 精確的網(wǎng)頁布局
第9章 兼容性網(wǎng)頁布局
第10章 網(wǎng)頁結(jié)構(gòu)化布局與實施
第11章 CSS框架設(shè)計及其案例解析
第12章 購物網(wǎng)站結(jié)構(gòu)與布局實施