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