HTML + CSS + JavaScript 網頁設計從入門到精通

胡曉霞，資深Web技術專家，有10餘年開發經驗，是國內較早專業從事Web開發的一線技術人員和培訓講師。一直致力於對HTML5、JavaScript、CSS3、jQuery、jQUery Mobile等Web開發技術的研究和實踐，在HTML頁面的優化與用戶體驗的研究，以及頁面框架搭建、數據流向分析、頁面靜態優化等方面都擁有豐富的實踐經驗。他還是微軟技術方面的專家，精通C#、ASP．NET和SQL Server等技術。

第1章網頁設計基礎
1.1熟悉網頁設計概念
1.1.1網頁和網站
1.1.2網頁類型
1.1.3網頁構成
1.2網頁設計學習任務
1.2.1學習HTML 
1.2.2學習DIV結構
1.2.3學習CSS 
1.2. 4學習JavaScript 
1.3網頁設計素養
1.3.1網頁設計任務
1.3.2網頁設計原則
1.3.3網頁設計流程
1.3.4網頁配色
1.4網站開發流程
1.4.1個人網站開發流程
1.4.2應用項目開發流程
1.4. 3承包網站開發流程
附錄一：《網站建設合同》參考範本
附錄二：《網站維護說明書》
參考範本

第2章HTML基礎
視頻講解：26分鐘
2.1HTML歷史
2.2HTML規範雛形
2.3HTML與XHTML 
2.4HTML基礎
2.4 .1HTML語言作用
2.4.2HTML文檔基本結構
2.4.3HTML基本語法
2.4.4HTML常用標籤
2.5XHTML基礎
2.5.1XHTML文檔基本結構
2.5.2XHTML基本語法
2.5.3XHTML文檔類型
2.5.4DTD文檔類型解析
2.5.5名字空間
2.6HTML元信息

第3章設計符合語義的頁面
視頻講解：67分鐘
3.1網頁語義化概述
3.2元素分類
3.2.1結構語義
3.2.2內容語義
3.2.3修飾語義
3.3屬性分類
3.3.1核心屬性
3.3.2語言屬性
3.3.3鍵盤屬性
3.3.4內容屬性
3.3.5其他屬性
3.4定義文本信息
3.4.1設計標題信息
3.4 .2設計段落信息
3.4.3設計引用信息
3.4.4設計強調信息
3.4.5設計格式信息
3.4.6設計輸出信息
3.4.7設計信息縮寫
3.4.8設計插入和刪除信息
3.4.9設計其他文本信息
3.5定義列表信息
3.5.1認識列表
3.5.2設計普通列表
3.5.3設計定義列表
3.5.4使用定義列表的誤區
3.6設計表格
3.6.1認識表格結構
3.6.2使用表格元素
3.6.3表格分組
3.7設計表單
3.7.1認識表單結構
3.7.2使用表單元素
3.7.3form元素
3.7.4input元素
3.7.5textarea和select元素
3.7.6表單分組
3.7.7綁定提示標籤
3.7.8定義快捷鍵、訪問鍵和禁止訪問
3.7.9select選項分區
3.7.10使用按鈕
3.8案例實戰
3.8.1設計一個自我介紹簡單頁面
3.8.2解決網頁亂碼現象
3.8.3把HTML轉換為XHTML 
3.8.4輸出唐詩

第4章設計符合標準的結構
4.1元素顯示類型
4.1.1認識元素顯示類型
4.1.2塊狀元素
4.1.3行內元素
4.1.4其他元素
4.2結構嵌套規則
4.2.1分析結構亂套現象
4.2.2嚴謹的嵌套規則
4.2.3HTML嵌套規則應用
4.3案例實戰：設計CSS禪意花園
4.3.1認識CSS禪意花園
4.3.2定義網頁結構
4.3.3設計嵌套結構
4.3.4構建基本框架
4.3. 5設計局部結構
4.3.6正文版式設計

第5章設計HTML5文檔
視頻講解：36分鐘
5.1HTML5基礎
5.1.1HTML5語法
5.1.2HTML5元素
5.1.3HTML5對象屬性
5.1.4HTML5全局屬性
5.2認識HTML5文檔結構
5.3HTML5元素分類
5.4構建主體內容
5.4.1標識文章
5.4.2給內容分段
5.4.3設計導航信息
5.4.4設計輔助信息
5.4.5設計微格式
5.4.6添加發布日期
5.5添加語義模塊
5.5.1添加標題塊
5.5.2給標題分組
5.5.3添加腳註塊
5.5.4添加聯繫信息
5.6案例實戰：使用HTML5設計博客主頁
5.6.1設計大綱
5.6.2設計樣式

第6章CSS基礎
視頻講解：79分鐘
6.1CSS概述
6.1.1什麼是CSS樣式
6.1. 2為什麼學習CSS 
6.1.3CSS特點
6.2CSS語法和用法
6.2.1CSS基本結構
6.2.2CSS基本用法
6.2.3CSS樣式表
6.2.4導入外部樣式表
6.2.5CSS註釋和版式
6.3CSS屬性和單位
6.3.1CSS屬性
6.3.2CSS單位
6.4簡單選擇器
6.4.1標籤選擇器
6.4.2類選擇器
6.4.3ID選擇器
6.4.4通配選擇器
6.5複合選擇器
6.5.1子選擇器
6.5.2相鄰選擇器
6.5.3包含選擇器
6.5.4多層選擇器嵌套
6.5.5屬性選擇器
6.5.6偽選擇器和偽元素選擇器
6.5.7選擇器分組
6.6CSS3新增選擇器
6.6.1兄弟選擇器
6.6.2目標偽類選擇器
6.6.3結構偽類選擇器
6.6.4否定偽類選擇器
6.6.5狀態偽類選擇器
6.7CSS繼承性、層疊性和特殊性
6.7.1CSS繼承性
6.7.2CSS層疊性
6.7.3CSS優先級
6.7.4CSS特殊性
6.8案例實戰
6.8.1設計導航菜單
6.8.2設計登錄表單

第7章設計文本樣式
視頻講解： 56分鐘
7.1字體樣式
7.1.1定義字體類型
7.1.2定義字體大小
7.1.3定義字體顏色
7.1.4定義字體粗細
7.1.5定義斜體字體
7.1.6定義下劃線
7.1.7定義字體大小寫
7.2文本樣式
7.2.1定義文本對齊
7.2.2定義垂直對齊
7.2.3定義字距和詞距
7.2.4定義行高
7.2.5定義縮進
7.3案例實戰
7.3.1設計英文格式1 
7.3.2設計英文格式2 
7.3.3設計中文報刊版式
7.3.4設計中文層級版式

第8章設計圖像樣式
視頻講解：72分鐘
8.1網頁中的圖像
8.2圖像樣式
8.2.1定義圖像大小
8.2.2定義圖像邊框
8.2.3定義圖像不透明度
8.2.4定義圓角圖像
8.2.5定義陰影圖像
8.2. 6圖文混排
8.3綜合實戰：設計圖文新聞內容頁
8.4背景圖像
8.4.1定義背景圖像
8.4.2定義顯示方式
8.4.3定義顯示位置
8.4.4定義固定背景
8.5綜合實戰
8.5.1設計博客首頁
8.5.2設計社區相冊
8.5.3CSSSprites

第9章設計超鏈接樣式
視頻講解：26分鐘
9.1定義超鏈接樣式
9.1.1認識超鏈接
9.1.2偽類和偽對象
9.1.3定義鏈接樣式
9.2案例實戰
9.2.1定義下劃線樣式
9.2.2定義立體樣式
9.2.3定義動態樣式
9.2.4定義圖像交換樣式
9.2.5定義鼠標樣式
9.2.6設計圖形化按鈕樣式
9.2.7設計滑動門樣式

第10章設計列表樣式
視頻講解：49分鐘
10.1設計列表結構
10.1.1無序列表
10.1.2有序列表
10.1.3定義列表
10.2定義列表樣式
10.2.1定義列表類型
10.2.2自定義項目符號
10.2.3用背景圖模擬項目符號
10.3列表佈局
10.3.1列表堆疊
10.3.2水平佈局
10.4案例實戰
10.4.1設計背景水平滑動菜單
10.4.2設計背景垂直滑動菜單
10.4.3設計Tab面板菜單
10.4.4設計下拉式面板菜單
10.5設計列表欄目樣式
10.5.1案例1：音樂榜單
10.5.2案例2：圖文列表欄

第11章設計表格樣式
視頻講解：45分鐘
11.1設計表格結構
11.1.1早期表格結構
11.1.2標準表格結構
11.2定義表格基本樣式
11.2.1使用表格標籤屬性
11.2.2設計細線表格
11.2.3定義單元格空隙
11.2.4隱藏空單元格
11.3設計表格特殊樣式
11.3.1表格佈局特性
11.3.2定義列組和行組樣式
11.3.3定義表格標題樣式
11.3.4合併單元格
11.3.5表格樣式的層疊順序
11.4案例實戰
11.4.1設計單線表格
11.4.2設計層級表格樣式
11.4.3設計日曆表

第12章設計表單樣式
視頻講解：42分鐘
12.1設計表單
12.1.1表單框
12.1.2輸入框
12.1. 3選擇框
12.1.4優化結構
12.2定義表單樣式
12.2.1設計文本框
12.2.2設計單選按鈕和復選框
12.2.3設計下拉菜單和列錶框
12.3案例實戰
12.3.1設計用戶登錄頁
12.3. 2設計用戶註冊頁
12.3.3設計搜索框

第13章CSS網頁佈局
視頻講解：41分鐘
13.1網頁佈局概述
13.1.1認識div和span 
13.1.2認識display 
13.1.3網頁佈局分類
13.2CSS盒模型
13.2.1認識盒模型
13.2.2定義邊界
13.2. 3邊界重疊
13.2.4定義邊框
13.2.5定義補白
13.3網頁佈局基本方法
13.3.1定義float 
13.3.2使用clear 
13.3.3定義position 
13.3.4設置層疊順序
13.4案例實戰
13.4.1設計網頁居中顯示
13.4 .2設計定位版三欄頁面佈局
13.4.3設計多欄高度自適應頁面
13.4.4設計負margin頁面

第14章CSS兼容技法
視頻講解：39分鐘
14.1認識瀏覽器
14.1.1瀏覽器類型
14.1.2瀏覽器解析模式
14.2基本兼容方法
14.2.1IE條件語句
14.2.2屬性過濾器
14.2.3選擇器過濾器
14.3案例實戰：流動問題與處理
14.3.1標籤的默認樣式
14.3.2有序列表高度問題
14.3.3列表寬度問題
14.3.4項目符號變異問題
14.3.5列表行雙倍高度問題
14.3.6列表項錯行問題
14.3.7默認高度問題
14.3.8失控的子標籤問題
14.3.9使用背景圖代替文本問題
14.4案例實戰：浮動問題與處理
14.4.1浮動被流動包含問題
14.4.2高度自適應問題
14.4.3欄目內容被隱藏
14.4.4邊界和浮動問題
14.4.5半個像素問題
14.4.63像素問題
14.4.7多出字符問題
14.5案例實戰：定位問題與處理
14.5.1定位參照物的問題
14.5.2定位層疊問題
14.5.3定位丟失問題

第15章JavaScript基礎
視頻講解：262分鐘
15.1JavaScript入門
15.1.1網頁中的JavaScript 
15.1.2使用JavaScript文件
15.1.3JavaScript語法基礎
15.1.4認識JavaScript語法特性
15.2常量和變量
15.3表達式和運算符
15.4語句
15.4.1表達式語句和語句塊
15.4.2條件語句
15.4.3循環語句
15.4.4跳轉語句
15.4.5異常處理語句
15.4.6var語句和function語句
15.4.7with語句和空語句
15.5數據類型和類型轉換
15.5.1數值
15.5.2字符串
15.5.3布爾型
15.5.4null和undefined 
15.5.5引用型數據
15.6函數
15.6.1定義函數
15.6.2調用函數
15.6.3函數參數
15.6.4函數應用
15.6.5閉包函數
15.7對象
15.7.1創建對象
15.7.2訪問對象
15.8數組
15.8 .1定義數組
15.8.2存取元素
15.8.3數組應用
15.9案例實戰
15.9.1檢測數據類型
15.9.2數值計算與類型轉換
15.9.3字符串替換
15.9.4增強數組排序
15.9.5使用高階函數
15.9.6函數柯里化
15.9.7靈活使用this 

第16章使用JavaScript操作瀏覽器和文檔
視頻講解：78分鐘
16.1操作瀏覽器
16.1.1了解瀏覽器對像模型
16.1.2案例：設計廣告彈窗
16.1.3案例：設計人機交互窗口
16.1.4案例：檢測瀏覽器類型和版本
16.1.5案例：獲取URL查詢字符串信息
16.1.6案例：設計窗口居中顯示
16.1.7案例：設計自由彈跳的窗口
16.2操作文檔
16.2.1了解文檔對像模型
16.2.2認識DOM節點類型
16.2.3案例：遍歷文檔
16.2.4案例：動態增加文檔內容
16.3操作節點
16.3.1獲取節點
16.3.2創建節點
16.3.3複製節點
16.3.4插入節點
16.3.5刪除節點
16.3.6替換節點
16.4操作屬性
16.4.1獲取節點屬性
16.4.2設置節點屬性
16.4.3刪除節點屬性

第17章JavaScript事件處理
視頻講解：78分鐘
17.1了解事件處理模型
17.1.1事件模型分類
17.1.2事件流
17.2基本事件模型
17.2.1基本事件類型
17.2.2綁定事件
17.2.3事件處理函數的返回值
17.2 .4事件處理函數的參數
17.2.5事件處理函數中的this
17.3標準事件模型
17.3.1事件傳播
17.3.2註冊事件
17.3.3註銷事件
17.3.4事件類型
17.3.5Event對象
17.4IE事件模型
17.4.1註冊和銷毀事件
17.4.2Event對象
17.5事件類型
17.5.1案例：設計鼠標拖放操作
17.5.2案例：設計鼠標跟隨特效
17.5.3案例：跟踪鼠標在對象內相對位置
17.5.4案例：設計推箱子遊戲
17.5.5案例：設計滿屏畫布背景
17.5.6案例：自動讀取選擇文本
17.5.7案例：設計自動跳轉下拉菜單
17.5.8案例：禁止表單提交
17.6案例實戰
17.6.1設計Tab面板
17.6.2使用事件屬性激活Tab行為
17.6.3分離HTML和JavaScript 
17.6.4標準化Tab交互行為

第18章使用JavaScript操作CSS樣式
視頻講解：49分鐘
18.1腳本化CSS概述
18.1.1了解DHTML 
18.1.2CSS腳本化的應用
18.1.3認識CSS腳本屬性
18.2操作行內樣式
18.2. 1CSS腳本屬性名規範
18.2.2使用style對象
18.3操作樣式表
18.3.1使用styleSheets對象
18.3.2訪問樣式表中的樣式
18.3.3讀取樣式的選擇符
18.3.4編輯樣式
18.3.5添加樣式
18.3.6訪問顯示樣式
18.4案例實戰
18.4.1網頁換膚
18.4.2設計折疊面板
18.4.3設計工具提示

第19章使用Ajax 
視頻講解：63分鐘
19.1Ajax概述
19.1.1了解Ajax 
19.1.2如何學習Ajax 
19.2模擬本地服務器環境
19.2.1安裝IIS組件
19.2.2定義虛擬目錄
19.2.3定義本地站點
19.2.4定義動態站點
19.2.5測試本地站點
19.3使用XMLHttpRequest 
19.3.1創建XMLHttpRequest 
19.3.2設計測試文件
19.3.3使用XMLHttpRequest發送請求
19.3.4異步回調函數
19.3.5處理響應信息
19.4案例實戰
19.4.1Ajax交互提示
19.4.2控制顯示記錄個數
19.4.3記錄集分頁顯示
19.4.4異步更新Tab面板內容
19.4.5快速匹配搜索

第20章使用jQuery 
視頻講解：113分鐘
20.1jQuery概述
20.1.1認識jQuery 
20.1.2jQuery特性
20.1.3安裝jQuery 
20.1.4使用jQuery 
20.1.5認識jQuery構造器
20.2jQuery基本用法
20.2.1訪問元素
20.2.2讀寫屬性
20.2.3定義類樣式
20.2.4讀寫文本和值
20.3使用選擇器和過濾器
20.3.1常用選擇器
20.3.2偽類選擇器
20.3.3表單選擇器
20.3.4過濾器
20.4文檔處理
20.4.1插入內容
20.4.2嵌套結構
20.4.3替換結構
20.4.4刪除和克隆結構
20.5CSS處理
20.5.1定義樣式
20.5.2定義位移
20.5.3定義尺寸
20.6事件處理
20.6.1頁面初始化事件
20.6.2綁定事件
20.6.3觸發事件
20.6.4交互事件
20.6.5封裝事件
20.7動畫處理
20.7.1顯隱動畫
20.7.2滑動動畫
20.7.3淡入淡出

第21章綜合實戰：設計專題網頁
視頻講解：41分鐘
21.1設計思路
21.2構建結構
21.2.1定義基本結構
21.2.2完善詳細結構
21.3頁面佈局和样式設計
21.3.1佈局思路
21.3.2基本佈局和样式
21.3.3瀏覽器兼容處理
21.4頁面動態效果設計
21.4.1動態下拉菜單
21.4.2延遲的下拉菜單
21.4.3自定義折疊面板
21.4.4左右推拉麵板

第22章綜合實戰：設計電子相冊
視頻講解：57分鐘
22.1設計思路
22.1.1案例預覽
22.1.2案例策劃
22.1.3設計XML數據
22.2設計相冊結構
22.2.1設計基本結構
22.2.2完善頁面結構
22.3設計相冊佈局和样式
22.3.1基本佈局思路
22.3.2定義默認樣式和基本框架
22.3.3定義局部樣式
22.3.4瀏覽器兼容性處理
22.3.5設計皮膚
22.4設計交互效果
22.4.1動態更換皮膚
22.4.2使用Spry讀取XML數據
22.4.3初始化XMLDOM控件
22.4.4讀取並顯示分類導航信息
22.4.5讀取並顯示縮略圖信息
22.4.6完善鼠標操作的動感效果

第23章綜合實戰：設計網絡記事本
視頻講解：57分鐘
23.1網站策劃
23.1.1案例分析
23.1.2功能設計和效果演示
23.2設計思路
23.3設計數據結構
23.3.1網站數據結構概述
23.3.2設計數據表結構
23.4設計網站結構和样式
23.4.1網站結構
23.4.2網站佈景
23.4.3表單結構
23.4.4網站佈局
23.5基本模塊設計
23.5.1連接數據庫
23.5.2數據庫基本操作
23.5.3用戶登錄
23.5. 4DOM操作
23.6網站初始化
23.6.1生成表單
23.6.2表單初始化
23.7數據操作
23.7.1數據錄入
23.7.2數據查詢
23.8數據顯示
23.8.1設計可編輯行
23.8.2更新數據
23.8.3添加數據
23.8.4刪除數據
23.8.5恢復數據
23.8.6顯示數據
23.8.7數據顯示接口
23.8.8頁面初始化

第24章綜合實戰：設計購物網站
視頻講解：62分鐘
24.1網站策劃
24.2設計網站結構
24.2.1定義文件結構
24.2.2定義網頁結構
24.2.3設計效果圖
24.3設計網站樣式
24.3.1網站樣式分類
24.3.2編寫全局樣式
24.3.3編寫可重用樣式
24.3.4編寫網站首頁主體佈局
24.3.5編寫詳細頁主體佈局
24.4設計首頁交互行為
24.4.1搜索框文字效果
24.4.2網頁換膚
24.4.3導航效果
24.4.4商品分類熱銷效果
24.4.5產品廣告效果
24.4.6超鏈接提示
24.4.7品牌活動橫向滾動效果
24.4.8光標滑過產品列表效果
24.5設計詳細頁交互行為
24.5.1圖片放大鏡效果
24.5.2圖片遮罩效果
24.5.3小圖切換大圖
24.5.4選項卡
24.5.5產品顏色切換
24.5.6產品尺寸切換
24.5.7產品數量和價格聯動
24.5.8產品評分的效果
24.5.9放入購物車效果
24.6小結