●第Ⅰ篇基礎知識
章網頁設計的推薦技能
1.1認識網頁和網站
1.1.1什麼是網頁
1.1.2什麼是網站
1.2網頁中需要包含的要素
1.2.1需要HTML文件
1.2.2需要DIV層
1.2.3需要CSS定義網頁樣式
1.2.4需要JavaScript設置網頁動畫
1.2.5需要域名與服務器空間
1.3一個簡單網頁的基本構成
1.3.1Head部分
1.3.2Body部分
1.3.3注釋部分
1.4設計網頁的總體流程
1.4.1網頁規劃
1.4.2搜集資料
1.4.3設計網頁的總體效果
1.4.4制作網頁素材文件
1.4.5搭建網頁DIV層
1.4.6使用CSS與JavaScript
1.4.7測試網頁
1.5網站的種類與網頁布局方式
1.5.1網站的種類
1.5.2網頁布局方式
1.6在Photoshop中構建網頁結構
1.7大神解惑
1.8跟我練練手
第2章CSS樣式入門
2.1認識CSS
2.1.1CSS功能
2.1.2瀏覽器與CSS
2.1.3CSS發展歷史
2.2CSS常用單位
2.2.1顏色單位
2.2.2長度單位
2.3編輯和瀏覽CSS
2.3.1案例1——手工編寫CSS
2.3.2案例2——使用Dreamweaver編寫CSS
2.4在HTML中調用CSS的方法
2.4.1案例3——行內樣式
2.4.2案例4——內嵌樣式
2.4.3案例5——鏈接樣式
2.4.4案例6——導入樣式
2.5調用CSS方法的優先級問題
2.5.1案例7——行內樣式和內嵌樣式比較
2.5.2案例8——內嵌樣式和鏈接樣式比較
2.5.3案例9——鏈接樣式和導入樣式比較
2.6綜合案例——制作產品銷售統計表
2.7大神解惑
2.8跟我練練手
第3章CSS3樣式的基本語法
3.1CSS基本語法
3.1.1CSS構造規則
3.1.2CSS的注釋
3.2CSS的常用選擇器
3.2.1案例1——標簽選擇器
3.2.2案例2——類選擇器
3.2.3案例3——ID選擇器
3.2.4案例4——選擇器的聲明
3.3綜合案例——制作炫彩網站Logo
3.4大神解惑
3.5跟我練練手
第II篇核心技術
第4章設計網頁字體與段落樣式
4.1美化字體樣式
4.1.1案例1——控制字體類型
4.1.2案例2——定義字體大小
4.1.3案例3——定義字體風格
4.1.4案例4——控制文字的粗細
4.1.5案例5——將小寫字母轉為大寫字母
4.1.6案例6——設置字體的復合屬性
4.1.7案例7——定義文字的顏色
4.2CSS3中新增的文本不錯樣式
4.2.1案例8——添加文本的陰影效果
4.2.2案例9——設置文本溢出效果
4.2.3案例10——控制文本的換行
4.2.4案例11——設置字體尺寸
4.3通過CSS控制文本間距與對齊方式
4.3.1案例12——設置單詞之間的間隔
4.3.2案例13——設置字符之間的間隔
4.3.3案例14——為文本添加下畫線、上畫線、刪除線
4.3.4案例15——設置垂直對齊方式
4.3.5案例16——轉換文本的大小寫
4.3.6案例17——設置文本的水平對齊方式
4.3.7案例18——設置文本的縮進效果
4.3.8案例19——設置文本的行高
4.3.9案例20——文本的空白處理
4.3.10案例21——文本的反排
4.4綜合案例1——設置網頁標題
4.5綜合案例2——制作新聞頁面
4.6大神解惑
4.7跟我練練手
第5章設計網頁圖片樣式
5.1圖片縮放
5.1.1案例1——通過描述標記width和height縮放圖片
5.1.2案例2——使用CSS3中的max-width和max-height縮放圖片
5.1.3案例3——使用CSS3中的width和height縮放圖片
5.2設置圖片的對齊方式
5.2.1案例4——設置圖片橫向對齊
5.2.2案例5——設置圖片縱向對齊
5.3圖文混排
5.3.1案例6——設置文字環繞效果
5.3.2案例7——設置圖片與文字的間距
5.4綜合案例1——制作學校宣傳單
5.5綜合案例2——制作簡單圖文混排網頁
5.6大神解惑
5.7跟我練練手
第6章設計網頁背景與邊框樣式
6.1設計網頁背景樣式
6.1.1案例1——設置背景顏色
6.1.2案例2——設置背景圖片
6.1.3案例3——背景圖片重復
6.1.4案例4——背景圖片顯示
6.1.5案例5——設置背景圖片位置
6.2CSS3中新增的控制網頁背景屬性
6.2.1案例6——設置背景圖片大小
6.2.2案例7——設置背景顯示區域
6.2.3案例8——設置背景圖像裁剪區域
6.2.4案例9——設置背景的復合屬性
6.3設計邊框樣式
6.3.1案例10——設置邊框樣式
6.3.2案例11——設置邊框顏色
6.3.3案例12——設置邊框線寬
6.3.4案例13——設置邊框的復合屬性
6.4CSS3中新增的邊框圓角效果
6.4.1案例14——設置圓角邊框
6.4.2案例15——指定兩個圓角半徑
6.4.3案例16——繪制四個不同圓角邊框
6.4.4案例17——繪制不同種類的邊框
6.5CSS3中的漸變效果
6.5.1案例18——線性漸變效果
6.5.2案例19——徑向漸變效果
6.6綜合案例1——制作簡單公司主頁
6.7綜合案例2——制作簡單生活資訊主頁
6.8大神解惑
6.9跟我練練手
第7章設計網頁超級鏈接和鼠標樣式
7.1使用CSS3美化超鏈接
7.1.1案例1——改變超級鏈接基本樣式
7.1.2案例2——設置帶有提示信息的超級鏈接
7.1.3案例3——設置超級鏈接的背景圖
7.1.4案例4——設置超級鏈接的按鈕效果
7.2使用CSS3美化鼠標
7.2.1案例5——使用CSS3控制鼠標箭頭
7.2.2案例6——設置鼠標變幻式超鏈接
7.2.3案例7——設置網頁頁面滾動條
7.3綜合案例1——圖片版本超級鏈接
7.4綜合案例2——關於鼠標特效案例
7.5綜合案例3——制作一個簡單的導航欄
7.6大神解惑
7.7跟我練練手
第8章設計表格和表單樣式
8.1美化表格樣式
8.1.1案例1——設置表格邊框樣式
8.1.2案例2——設置表格邊框寬度
8.1.3案例3——設置表格邊框顏色
8.2美化表單樣式
8.2.1案例4——美化表素
8.2.2案例5——美化提交按鈕
8.2.3案例6——美化下拉菜單
8.3綜合案例1——制作用戶登錄頁面
8.4綜合案例2——制作用戶注冊頁面
8.5大神解惑
8.6跟我練練手
第9章設計列表和菜單樣式
9.1美化項目列表的樣式
9.1.1案例1——美化無序列表
9.1.2案例2——美化有序列表
9.1.3案例3——美化自定義列表
9.1.4案例4——制作圖片列表
9.1.5案例5——縮進圖片列表
9.1.6案例6——列表復合屬性
9.2使用CSS制作網頁菜單
9.2.1案例7——制作動態導航菜單
9.2.2案例8——制作水平和垂直菜單
9.3綜合案例1——模擬SOSO導航欄
9.4綜合案例2——將段落轉變成列表
9.5大神解惑
9.6跟我練練手
0章使用濾鏡美素
10.1濾鏡概述
10.2設置基本濾鏡效果
10.2.1案例1——高斯模糊(blur)濾鏡
10.2.2案例2——明暗度(brightness)濾鏡
10.2.3案例3——對比度(contrast)濾鏡
10.2.4案例4——陰影(drop-shadow)濾鏡
10.2.5案例5——灰度(grayscale)濾鏡
10.2.6案例6——反相(invert)濾鏡
10.2.7案例7——透明度(opacity)濾鏡
10.2.8案例8——飽和度(saturate)濾鏡
10.2.9案例9——深褐色(sepia)濾鏡
10.3使用復合濾鏡效果
10.4大神解惑
10.5跟我練練手
第III篇不錯應用
1章CSS3的不錯特性
11.1復合選擇器
11.1.1案例1——全局選擇器
11.1.2案例2——交集選擇器
11.1.3案例3——並集選擇器
11.1.4案例4——繼承(後代)選擇器
11.2CSS3新增的選擇器
11.2.1案例5——屬性選擇器
11.2.2案例6——結構偽類選擇器
11.2.3案例7—素狀態偽類選擇器
11.2.4案例8——偽類選擇器
11.3CSS3的繼承特性
11.3.1案例9——繼承關繫
11.3.2案例10——CSS繼承的運用
11.4CSS3的層疊特性
11.4.1案例11——同一選擇器被多次定義的處理
11.4.2案例12——同一標簽運用不同類型選擇器的處理
11.5綜合案例——制作新聞菜單
11.6大神解惑
11.7跟我練練手
2章過渡和動畫效果
12.1認識過渡效果
12.2案例1——添加過渡效果
12.3了解動畫效果
12.4案例2——添加動畫效果
12.5大神解惑
12.6跟我練練手
3章2D和3D變幻效果
13.1認識2D轉換效果
13.2添加2D轉換效果
13.2.1案例1——添加移動效果
13.2.2案例2——添加旋轉效果
13.2.3案例3——添加縮放效果
13.2.4案例4——添加傾斜效果
13.2.5案例5——添加綜合變幻效果
13.3添加3D轉換效果
13.4大神解惑
13.5跟我練練手
4章CSS3和JavaScript的搭配應用
14.1JavaScript語法基礎
14.1.1什麼是JavaScript
14.1.2數據類型
14.1.3變量
14.1.4案例1——運算符的簡單應用
14.1.5案例2——流程控制語句的簡單應用
14.1.6案例3——函數的簡單應用
14.2常見的JavaScript編寫工具
14.2.1記事本編寫工具
14.2.2Dreamweaver編寫工具
14.3JavaScript在HTML中的使用
14.3.1案例4——在HTML網頁頭中嵌入JavaScript代碼
14.3.2案例5——在HTML網頁中嵌入JavaScript代碼
14.3.3案例6——在HTML素事件中嵌入JavaScript代碼14.3.4案例7——在HTML中調用已經存在的JavaScript文件
14.3.5案例8——通過JavaScript偽URL引入JavaScript腳本代碼
14.4JavaScript與CSS3的結合使用
14.4.1案例9——設置動態內容
14.4.2案例10——改變動態樣式
14.4.3案例11——動態定素
14.4.4案例12——設素的顯示與隱藏
14.5HTML5、CSS3和JavaScript的搭配應用
14.5.1案例13——設定左右移動的圖片
14.5.2案例14——制作顏色選擇器
14.5.3案例15——制作跑馬燈效果
14.6綜合案例——制作樹形導航菜單
14.7大神解惑
14.8跟我練練手
5章CSS與XML的綜合運用
15.1XML語法基礎
15.1.1實例1——XML的基本應用
15.1.2實例2——XML文檔的組成和聲明
15.1.3實例3——素介紹
15.2使用CSS修飾XML文件
15.2.1實例4——XML使用CSS
15.2.2實例5——設置字體屬性
15.2.3實例6——設置色彩屬性
15.2.4實例7——設置邊框屬性
15.2.5實例8——設置文本屬性
15.3綜合實例1——招聘廣告
15.4綜合實例2——圖文混排頁面
15.5綜合實例3——古詩欣賞
15.6大神解惑
15.7跟我練練手
第IV篇網頁布局
6章CSS定位與DIV布局核心技術
16.1認素和素
16.1.1案例1—素和素的應用
16.1.2案例2——素和s素的區別
16.2盒子模型
16.2.1盒子模型的概念
16.2.2案例3——定義網頁border區域
16.2.3案例4——定義網頁padding區域
16.2.4案例5——定義網頁margin區域
16.3彈性盒模型
16.3.1案例6——定義盒子布局方向(box-orient)
16.3.2案例7——定義盒子布局順序(box-direction)
16.3.3案例8——定義盒子布局位置(box-ordinal-group)
16.3.4案例9——定義盒子彈性空間(box-flex)
16.3.5案例10——管理盒子空間(box-pack和box-align)
16.3.6案例11——盒子空間的溢出管理(box-lines)
16.4綜合案例1——圖文排版效果
16.5綜合案例2——淘寶導購菜單
16.6大神解惑
16.7跟我練練手
7章CSS+DIV盒子的浮動與定位
17.1定義DIV
17.1.1什麼是DIV
17.1.2案例1——創建DIV
17.2盒子的定位
17.2.1案例2——靜態定位
17.2.2案例3——相對定位
17.2.3案例4——絕對定位
17.2.4案例5——固定定位
17.2.5案例6——盒子的浮動
17.3其他CSS布局定位方式
17.3.1案例7——溢出(overflow)定位
17.3.2案例8——隱藏(visibility)定位
17.3.3案例9——z-index空間定位
17.4新增CSS3多列布局
17.4.1案例10——設置列寬度
17.4.2案例11——設置列數
17.4.3案例12——設置列間距
17.4.4案例13——設置列邊框樣式
17.5綜合案例1——定位網頁布局樣式
17.6綜合案例2——制作陰影文字效果
17.7大神解惑
17.8跟我練練手
8章固定寬度網頁布局剖析與制作
18.1CSS排版的觀念
18.1.1將頁面用div分塊
18.1.2設置各塊位置
18.1.3案例1——用CSS定位
18.2固定寬度網頁剖析與布局
18.2.1案例2——網頁單列布局模式
18.2.2案例3——網頁“1-2-1”型布局模式
18.2.3案例4——網頁“1-3-1”型布局模式
18.3大神解惑
18.4跟我練練手
9章自動縮放網頁布局剖析與制作
19.1自動縮放網頁“1-2-1”型布局模式
19.1.1案例1——“1-2-1”等比例變寬布局
19.1.2案例2——“1-2-1”單列變寬布局
19.2自動縮放網頁“1-3-1”型布局模式
19.2.1“1-3-1”三列寬度等比例布局
19.2.2案例3——“1-3-1”單側列寬度固定的變寬布局
19.2.3案例4——“1-3-1”中間列寬度固定的變寬布局
19.2.4案例5——“1-3-1”雙側列寬度固定的變寬布局
19.2.5案例6——“1-3-1”中列和左側列寬度固定的變寬布局
19.3分列布局背景色的使用
19.3.1案例7——設置固定寬度布局的列背景色
19.3.2案例8——設置特殊寬度變化布局的列背景色
19.4綜合案例1——單列寬度變化布局
19.5綜合案例2——多列等比例寬度變化布局
19.6大神解惑
19.7跟我練練手
第20章創建響應式頁面
20.1了解彈性盒子
20.2案例1——使用彈性盒子
20.3案例2——設置素的位置
20.4案例3——設置素的橫向對齊方式
20.5案例4——設置素的縱向對齊方式
20.6案例5——設置素的換行方式
20.7綜合案例——使用彈性盒子創建響應式頁面
20.8大神解惑
20.9跟我練練手
第V篇項目案例實戰
第21章設計商業門戶類網頁
21.1整體設計
21.1.1顏色應用分析
21.1.2架構布局分析
21.2主要模塊設計
21.2.1網頁整體樣式插入
21.2.2網頁局部樣式
21.2.3頂部模塊樣式代碼分析
21.2.4中間主體代碼分析
21.2.5底部模塊分析
21.3網站調整
21.3.1部分內容調整
21.3.2模塊調整
21.3.3調整後預覽測試
第22章設計圖像影音類網頁
22.1整體設計
22.1.1顏色應用分析
22.1.2架構布局分析
22.2主要模塊設計
22.2.1樣式代碼分析
22.2.2頂部模塊樣式代碼分析
22.2.3網站主體模塊代碼分析
22.2.4底部模塊分析
22.3網站調整
22.3.1部分內容調整
22.3.2模塊調整
22.3.3調整後預覽測試
第23章設計娛樂休閑類網頁
23.1整體設計
23.1.1應用設計分析
23.1.2架構布局分析
23.2主要模塊設計
23.2.1網頁整體樣式插入
23.2.2頂部模塊代碼分析
23.2.3視頻模塊代碼分析
23.2.4評論模塊代碼分析
23.2.5熱門推薦模塊代碼分析
23.2.6底部模塊分析
23.3網頁調整
23.3.1部分內容調整
23.3.2調整後預覽測試
第24章設計企業門戶類網頁
24.1構思布局
24.1.1設計分析
24.1.2排版架構
24.2主要模塊設計
24.2.1Logo與導航菜單
24.2.2Banner區
24.2.3資訊區
24.2.4版權信息
第25章設計在線購物類網頁
25.1整體布局
25.1.1設計分析
25.1.2排版架構
25.2主要模塊設計
25.2.1Logo與導航區
25.2.2Banner與資訊區
25.2.3產品類別區域
25.2.4頁腳區域
《CSS3+DIV網頁樣式與布局案例課堂(第2版)》以零基礎講解為宗旨,用實例引導讀者深入學習,采取“基礎知識→核心技術→不錯應用→網頁布局→項目案例實戰”的講解模式,深入淺出地講解CSS3+DIV的各項技術及實戰技能。
《CSS3+DIV網頁樣式與布局案例課堂(第2版)》第Ⅰ篇主要講解網頁設計的推薦技能、CSS樣式入門和CSS3樣式的基本語法等;第Ⅱ篇主要講解設計網頁字體與段落樣式、設計網頁圖片樣式、設計網頁背景與邊框樣式、設計網頁不錯鏈接和鼠標樣式、設計表格和表單樣式、設計列表和菜單樣式、使用濾鏡美素等;第Ⅲ篇主要講解CSS3的不錯特性、過渡和動畫效果、2D和3D變幻效果、CSS3和JavaScript的搭配應用、CSS3與XML的綜合運用等;第Ⅳ篇主要講解CSS定位與DIV布局核心技術、CSS+DIV盒子的浮動與定位、固定寬度網頁布局剖析與制作、自動縮放網頁布局剖等