(1)精選實際案例,滿足實戰(zhàn)應(yīng)用需要! 。2)圖書、光盤、手機閱讀及視頻演示,全方位立體化教學(xué)! 。3)利用手機等移動終端即可進行學(xué)習(xí)。 。4)全彩印刷,重點突出,版式清爽! 。5)隨光盤贈送大量輔助學(xué)習(xí)資料。
第1章 CSS入門
本章從CSS的基本概念出發(fā),介紹CSS語言的特點,以及如何在網(wǎng)頁中引入CSS,并對CSS進行初步的體驗。
1.1 CSS的概念
1.1.1 網(wǎng)頁中標(biāo)記的概念
1.1.2 HTML與CSS的互補
1.1.3 瀏覽器對CSS的支持
1.2 網(wǎng)頁設(shè)計中的CSS
1.2.1 CSS能做什么
1.2.2 CSS的局限性
1.3 網(wǎng)站CSS賞析
1.3.1 商務(wù)網(wǎng)站CSS樣式賞析
1.3.2 游戲網(wǎng)站CSS樣式賞析
1.4 實例——編寫我的第一個CSS樣式
1.4.1 從零開始
1.4.2 加入CSS控制
第1章 CSS入門
本章從CSS的基本概念出發(fā),介紹CSS語言的特點,以及如何在網(wǎng)頁中引入CSS,并對CSS進行初步的體驗。
1.1 CSS的概念
1.1.1 網(wǎng)頁中標(biāo)記的概念
1.1.2 HTML與CSS的互補
1.1.3 瀏覽器對CSS的支持
1.2 網(wǎng)頁設(shè)計中的CSS
1.2.1 CSS能做什么
1.2.2 CSS的局限性
1.3 網(wǎng)站CSS賞析
1.3.1 商務(wù)網(wǎng)站CSS樣式賞析
1.3.2 游戲網(wǎng)站CSS樣式賞析
1.4 實例——編寫我的第一個CSS樣式
1.4.1 從零開始
1.4.2 加入CSS控制
1.4.3 控制圖片
1.4.4 CSS的注釋
高手私房菜
第2章 CSS 3基本語法
本章重點介紹CSS如何控制頁面中的各個標(biāo)記。先從控制HTML標(biāo)記的不同方法入手,介紹各種選擇器的概念和聲明方法,以及CSS的有關(guān)屬性值。
2.1 構(gòu)造CSS規(guī)則
2.2 實例1——基本CSS選擇器
2.2.1 標(biāo)記選擇器
2.2.2 類別選擇器
2.2.3 ID選擇器
2.3 實例2——在HTML中使用CSS
2.3.1 行內(nèi)樣式
2.3.2 內(nèi)嵌式
2.3.3 鏈接式
2.3.4 導(dǎo)入式
2.3.5 各種方式的優(yōu)先級
2.4 CSS 3的聲明
2.4.1 標(biāo)準(zhǔn)聲明
2.4.2 合并多重聲明
2.5 屬性值
2.5.1 整數(shù)和實數(shù)
2.5.2 長度值
2.5.3 百分比值
2.5.4 URL
2.5.5 顏色值
2.6 CSS的繼承
高手私房菜
第3章 手工與借助工具編寫網(wǎng)頁樣式
本章分別通過使用手工與借助工具設(shè)置標(biāo)題、控制圖片、設(shè)置整體頁面等內(nèi)容,來講述如何完成一個使用CSS技術(shù)的網(wǎng)頁。
3.1 實例1——手工編寫
3.1.1 從零開始
3.1.2 設(shè)置標(biāo)題
3.1.3 控制圖片
3.1.4 設(shè)置正文
3.1.5 設(shè)置整體頁面
3.1.6 對段落進行分別設(shè)置
3.1.7 完整代碼
3.2 實例2——使用Dreamweaver編寫
3.2.1 使用Dreamweaver創(chuàng)建頁面
3.2.2 在Dreamweaver中新建CSS規(guī)則
3.2.3 在Dreamweaver中編輯CSS規(guī)則
3.2.4 為圖像創(chuàng)建CSS規(guī)則
高手私房菜
第4章 盒子模型
盒子模型是CSS控制頁面時一個很重要的概念。只有很好地掌握了盒子模型以及其中的每一個元素的用法,才能真正控制頁面中各個元素的位置。
4.1 盒子的內(nèi)部結(jié)構(gòu)
4.2 實例1——邊框
4.2.1 邊框類型
4.2.2 屬性值的簡寫形式
4.2.3 邊框與背景
4.3 實例2——內(nèi)邊距
4.4 實例3——外邊距
4.5 實例4——盒子之間的關(guān)系
4.5.1 HTML與DOM
4.5.2 標(biāo)準(zhǔn)文檔流
4.5.3 div標(biāo)記與span標(biāo)記
4.6 實例5——盒子在標(biāo)準(zhǔn)流中的定位原則
4.6.1 行元素之間的水平margin
4.6.2 塊元素之間的豎直margin
4.6.3 嵌套盒子之間的margin
4.6.4 將margin設(shè)為負(fù)值
4.7 實例6——盒子的浮動
4.7.1 準(zhǔn)備代碼
4.7.2 設(shè)置浮動的div
4.7.3 改變浮動的方向
4.7.4 全部向右浮動
4.7.5 使用clear屬性清除浮動的影響
4.8 實例7——盒子的定位
4.8.1 靜態(tài)定位
4.8.2 相對定位
4.8.3 絕對定位
4.8.4 固定定位
高手私房菜
第5章 CSS 3的高級特性
本章主要介紹CSS的復(fù)合選擇器、繼承性及層疊性等高級特性,學(xué)習(xí)這些高級特性,在提高頁面制作效率上會有很大幫助。
5.1 實例1——復(fù)合選擇器
5.1.1 交集選擇器
5.1.2 并集選擇器
5.1.3 后代選擇器
5.2 實例2——CSS的繼承特性
5.2.1 繼承關(guān)系
5.2.2 CSS繼承的運用
5.3 實例3——CSS的層疊特性
高手私房菜
第6章 網(wǎng)頁字體與對象尺寸
文字是網(wǎng)頁設(shè)計永遠(yuǎn)不可缺少的元素,文字尺寸的設(shè)置關(guān)系著網(wǎng)頁是否美觀。本章從基礎(chǔ)文字設(shè)置出發(fā),詳細(xì)講解CSS設(shè)置各種文字效果的方法。
6.1 實例1——指定字體屬性
6.1.1 font-weight屬性
6.1.2 font-variant屬性
6.1.3 font-style屬性
6.1.4 font簡寫屬性
6.2 實例2——字體族
6.2.1 泛型字體族
6.2.2 通常安裝的字體
6.3 實例3——設(shè)置字體
6.3.1 選擇字體集
6.3.2 設(shè)置字體尺寸
6.3.3 設(shè)置文字橫向拉伸變形
6.3.4 設(shè)置字體尺寸是否統(tǒng)一
6.4 實例4——設(shè)置對象尺寸
6.4.1 對象寬度設(shè)定
6.4.2 對象高度設(shè)定
6.4.3 對象尺寸范圍設(shè)定
6.4.4 文本行高控制
6.4.5 垂直對齊方式
高手私房菜
第7章 網(wǎng)頁文本與段落設(shè)計
本章主要介紹文字的有關(guān)設(shè)置和段落排版,如果說第6章是文字的設(shè)置基礎(chǔ),那么本章就是文字的設(shè)置應(yīng)用。
7.1 實例1——添加文本
7.1.1 普通文本
7.1.2 特殊文字符號
7.2 實例2——文本排版
7.2.1 段落標(biāo)記p與換行標(biāo)記br
7.2.2 標(biāo)題標(biāo)記h1~h6
7.2.3 文本水平居中標(biāo)記center
7.3 實例3——網(wǎng)頁特殊字符
7.4 實例4——文本的應(yīng)用
高手私房菜
第8章 文本樣式
本章通過介紹文本的顏色定義、字體設(shè)置效果、段落縮進、字詞間距等,來綜合講解排版布局中具體如何設(shè)置文本的樣式。
8.1 長度單位
8.2 實例1——顏色定義
8.3 實例2——準(zhǔn)備頁面
8.4 實例3——設(shè)置文字的字體
8.5 實例4——設(shè)置文字的傾斜效果
8.6 實例5——設(shè)置文字的加粗效果
8.7 實例6——英文字母大小寫轉(zhuǎn)換
8.8 實例7——控制文字的大小
8.9 實例8——文字的裝飾效果
8.10 實例9——設(shè)置段落首行縮進
8.11 實例10——設(shè)置字詞間距
8.12 實例11——設(shè)置段落內(nèi)部的文字行高
8.13 實例12——設(shè)置段落之間的距離
8.14 實例13——控制文本的水平位置
8.15 實例14——設(shè)置文字與背景的顏色
8.16 實例15——設(shè)置段落的垂直對齊方式
高手私房菜
第9章 文本顏色與效果
本章主要是深層次地介紹文本的顏色設(shè)置、特殊文本的效果設(shè)置以及控制文本間距的操作方法,從而使讀者熟練地掌握文本顏色設(shè)置和文本效果屬性。
9.1 實例1——文本顏色
9.1.1 定義顏色值
9.1.2 有效使用顏色
9.2 實例2——特殊文本效果
9.2.1 text-decoration屬性
9.2.2 text-transform屬性
9.3 實例3——控制文本間距
9.3.1 letter-spacing屬性
9.3.2 word-spacing屬性
9.3.3 white-spacing屬性
9.3.4 line-height屬性
高手私房菜
第10章 背景顏色與圖像
任何一個網(wǎng)頁,它的背景顏色和圖案往往是給用戶的第一印象,因此在頁面中控制背景和圖案是一個網(wǎng)站設(shè)計的重要步驟。本章主要講述CSS控制背景顏色和圖像的方法。
10.1 實例1——設(shè)置背景顏色
10.2 實例2——設(shè)置背景圖像
10.3 實例3——設(shè)置背景圖像平鋪
10.4 實例4——設(shè)置背景圖像位置
10.5 實例5——設(shè)置背景圖片位置固定
10.6 實例6——設(shè)置標(biāo)題的圖像替換
10.7 實例7——使用滑動門技術(shù)的標(biāo)題
高手私房菜
第11章 圖像效果
本章通過講述設(shè)置圖片邊框、圖片縮放、圖文混排、圖片與文字對齊方式等,綜合介紹圖像的設(shè)置方式。
11.1 實例1——設(shè)置圖片邊框
11.1.1 基本屬性
11.1.2 為不同的邊框分別設(shè)置樣式
11.2 實例2——圖片縮放
11.3 實例3——圖文混排
11.3.1 文字環(huán)繞
11.3.2 設(shè)置圖片與文字的間距
11.4 實例4——八大行星科普網(wǎng)頁
11.5 實例5——設(shè)置圖片與文字的對齊方式
11.5.1 橫向?qū)R方式
11.5.2 縱向?qū)R方式
高手私房菜
第12章 網(wǎng)頁表格
網(wǎng)頁表格是網(wǎng)頁常見的元素,本章主要圍繞表格介紹CSS設(shè)置其樣式的方法。最后通過實例制作計算機報價表來總結(jié)本章的知識點。
12.1 實例1——創(chuàng)建表格
12.2 實例2——控制表格
12.2.1 表格中的標(biāo)記
12.2.2 表格的邊框
12.2.3 表格寬度的確定
12.2.4 其他與表格相關(guān)的標(biāo)記
12.3 實例3——表格操作
12.3.1 合并單元格
12.3.2 設(shè)置對齊方式
12.3.3 用cellpadding屬性和cellspacing屬性設(shè)定距離
12.4 實例4——鼠標(biāo)指針經(jīng)過時整行變色提示的表格
12.4.1 搭建HTML結(jié)構(gòu)
12.4.2 在Firefox和IE9中實現(xiàn)鼠標(biāo)指針經(jīng)過時整行變色
12.4.3 在IE6中實現(xiàn)鼠標(biāo)指針經(jīng)過時整行變色
12.5 實例5——制作計算機報價表
高手私房菜
第13章 鏈接與項目列表
網(wǎng)頁中除文字、圖像、表格等元素外,還有鏈接和項目列表。網(wǎng)站來源于鏈接,從本質(zhì)上來說網(wǎng)站就是鏈接。
13.1 實例1——豐富的鏈接特效
13.1.1 動態(tài)超鏈接
13.1.2 按鈕式超鏈接
13.1.3 CSS控制鼠標(biāo)指針
13.1.4 浮雕背景超鏈接
13.1.5 讓下畫線動起來
13.2 實例2——項目列表
13.2.1 列表的符號
13.2.2 圖片符號
13.2.3 建立有序列表
13.2.4 建立無序列表
13.2.5 網(wǎng)頁列表的應(yīng)用
高手私房菜
第14章 導(dǎo)航菜單
一個好的網(wǎng)站,導(dǎo)航菜單是不可缺少的元素之一。導(dǎo)航菜單的基調(diào)決定著網(wǎng)站的基調(diào)。本章主要介紹各種導(dǎo)航菜單的制作方法。
14.1 實例1——簡單的導(dǎo)航菜單
14.1.1 豎直導(dǎo)航菜單
14.1.2 橫豎自由轉(zhuǎn)換菜單
14.2 實例2——水平導(dǎo)航菜單
14.2.1 自適應(yīng)的斜角水平菜單
14.2.2 應(yīng)用滑動門技術(shù)的玻璃效果菜單
14.2.3 會跳起的多彩菜單
14.3 實例3——豎直排列的導(dǎo)航菜單
14.3.1 雙豎線菜單
14.3.2 雙斜角橫線菜單
14.3.3 立體菜單
14.3.4 箭頭菜單
14.3.5 帶說明信息的菜單
14.4 實例4——下拉菜單
高手私房菜
第15章 固定寬度布局
本章主要介紹CSS排版的觀念和具體方法,包括CSS排版的整體思路、兩種具體的排版結(jié)構(gòu)。最后以制作魔術(shù)布局來總結(jié)分析CSS的布局方法。
15.1 CSS排版觀念
15.1.1 MSN的首頁
15.1.2 Hao123的首頁
15.1.3 Yahoo的首頁
15.2 實例1——單列布局
15.2.1 放置第一個圓角框
15.2.2 設(shè)置圓角框的CSS樣式
15.2.3 放置其他圓角框
15.3 實例2——“1-2-1”固定寬度布局
15.3.1 準(zhǔn)備工作
15.3.2 絕對定位法
15.3.3 浮動法
15.4 實例3——“1-3-1”固定寬度布局
15.5 實例4——魔術(shù)布局
15.5.1 魔術(shù)布局設(shè)計
15.5.2 制作魔術(shù)布局
15.5.3 修正缺陷
高手私房菜
第16章 變寬度布局
本章主要講述常用變寬度布局的制作,變寬度的布局要比固定寬度的布局復(fù)雜一些,根本的原因在于寬度不確定,導(dǎo)致很多參數(shù)無法確定,必須使用一些技巧來完成。
16.1 實例1——“1-2-1”變寬度網(wǎng)頁布局
16.1.1 “1-2-1”等比例變寬布局
16.1.2 “1-2-1”單列變寬布局
16.2 實例2——“1-3-1”變寬度網(wǎng)頁布局
16.2.1 “1-3-1”三列寬度等比例布局
16.2.2 “1-3-1”單側(cè)列寬度固定的變寬布局
16.2.3 “1-3-1”中間列寬度固定的變寬布局
16.2.4 “1-3-1”雙側(cè)列寬度固定的變寬布局
16.2.5 “1-3-1”中列和側(cè)列寬度固定的變寬布局
16.3 實例3——分列布局背景顏色問題
16.3.1 設(shè)置固定寬度布局的列背景色
16.3.2 設(shè)置特殊寬度變化布局的列背景色
16.3.3 設(shè)置單列寬度變化布局的列背景色
16.3.4 設(shè)置多列等比例寬度變化布局的列背景色
高手私房菜
第17章 制作商務(wù)類型網(wǎng)頁
本章主要以制作紅酒企業(yè)的網(wǎng)頁來講述商務(wù)類型網(wǎng)頁的制作方法,使讀者能掌握制作商務(wù)網(wǎng)頁的要點。
17.1 設(shè)計整體結(jié)構(gòu)
17.1.1 設(shè)計分析
17.1.2 排版架構(gòu)
17.2 整體設(shè)置
17.3 設(shè)置頁頭
17.4 設(shè)置中間部分
17.4.1 產(chǎn)品展示
17.4.2 新聞中心
17.4.3 促銷產(chǎn)品
17.5 頁腳部分
高手私房菜
第18章 制作時尚科技類型網(wǎng)頁
本章主要以制作時尚科技類型網(wǎng)頁來講述企業(yè)網(wǎng)頁的制作方法,使讀者能掌握制作企業(yè)型網(wǎng)頁的要點。
18.1 整體布局
18.1.1 設(shè)計分析
18.1.2 排版架構(gòu)
18.2 設(shè)計模塊組成
18.2.1 導(dǎo)航區(qū)
18.2.2 Banner區(qū)
18.2.3 資訊區(qū)
18.2.4 頁腳
18.3 設(shè)置鏈接
高手私房菜
第19章 制作在線購物類型網(wǎng)頁
網(wǎng)上購物是一種便捷的購物方式,也是目前最火的購物方式。本章主要講述購物網(wǎng)頁的整體布局和模塊組成。
19.1 整體布局
19.1.1 設(shè)計分析
19.1.2 排版架構(gòu)
19.2 設(shè)計模塊組成
19.2.1 導(dǎo)航
19.2.2 Banner
19.2.3 產(chǎn)品類別
19.2.4 頁腳
19.3 設(shè)置鏈接
高手私房菜
第20章 制作娛樂休閑類型網(wǎng)頁
本章主要介紹娛樂休閑網(wǎng)頁制作要點及娛樂休閑網(wǎng)頁模塊組成,使讀者初步了解娛樂休閑網(wǎng)頁的制作方法。
20.1 設(shè)置網(wǎng)頁背景
20.2 整體布局
20.2.1 設(shè)計分析
20.2.2 排版架構(gòu)
20.3 設(shè)計模塊組成
20.3.1 注冊
20.3.2 導(dǎo)航
20.3.3 預(yù)告
20.3.4 新片
20.3.5 頁腳
20.4 設(shè)置鏈接
高手私房菜
第21章 制作適合手機瀏覽的網(wǎng)頁
隨著智能手機的普及,制作手機網(wǎng)頁也成為了網(wǎng)頁制作中的重要部分。本章主要以一個簡單的手機網(wǎng)頁制作來講述其制作方法。
21.1 整體布局
21.1.1 設(shè)計分析
21.1.2 排版架構(gòu)
21.2 設(shè)計導(dǎo)航菜單
21.3 設(shè)置模塊內(nèi)容
高手私房菜