HTML+CSS+JavaScript網(wǎng)頁設(shè)計從入門到精通

目錄：
第1章網(wǎng)頁設(shè)計基礎(chǔ)
1.1熟悉網(wǎng)頁設(shè)計概念
1.1.1網(wǎng)頁和網(wǎng)站
1.1.2網(wǎng)頁類型
1.1.3網(wǎng)頁構(gòu)成
1.2網(wǎng)頁設(shè)計學習任務(wù)
1.2.1學習HTML
1.2.2學習DIV結(jié)構(gòu)
1.2.3學習CSS
1.2.4學習JavaScript
1.3網(wǎng)頁設(shè)計素養(yǎng)
1.3.1網(wǎng)頁設(shè)計任務(wù)
1.3.2網(wǎng)頁設(shè)計原則
1.3.3網(wǎng)頁設(shè)計流程
1.3.4網(wǎng)頁配色
1.4網(wǎng)站開發(fā)流程
1.4.1個人網(wǎng)站開發(fā)流程
1.4.2應(yīng)用項目開發(fā)流程
1.4.3承包網(wǎng)站開發(fā)流程
附錄一：《網(wǎng)站建設(shè)合同》參考范本
附錄二：《網(wǎng)站維護說明書》
參考范本
第2章HTML基礎(chǔ)
視頻講解：26分鐘
2.1HTML歷史
2.2HTML規(guī)范雛形
2.3HTML與XHTML
2.4HTML基礎(chǔ)
2.4.1HTML語言作用
2.4.2HTML文檔基本結(jié)構(gòu)
2.4.3HTML基本語法
2.4.4HTML常用標簽
2.5XHTML基礎(chǔ)
2.5.1XHTML文檔基本結(jié)構(gòu)
2.5.2XHTML基本語法
2.5.3XHTML文檔類型
2.5.4DTD文檔類型解析
2.5.5名字空間
2.6HTML元信息
第3章設(shè)計符合語義的頁面
視頻講解：67分鐘
3.1網(wǎng)頁語義化概述
3.2元素分類
3.2.1結(jié)構(gòu)語義
3.2.2內(nèi)容語義
3.2.3修飾語義
3.3屬性分類
3.3.1核心屬性
3.3.2語言屬性
3.3.3鍵盤屬性
3.3.4內(nèi)容屬性
3.3.5其他屬性
3.4定義文本信息
3.4.1設(shè)計標題信息
3.4.2設(shè)計段落信息
3.4.3設(shè)計引用信息
3.4.4設(shè)計強調(diào)信息
3.4.5設(shè)計格式信息
3.4.6設(shè)計輸出信息
3.4.7設(shè)計信息縮寫
3.4.8設(shè)計插入和刪除信息
3.4.9設(shè)計其他文本信息
3.5定義列表信息
3.5.1認識列表
3.5.2設(shè)計普通列表
3.5.3設(shè)計定義列表
3.5.4使用定義列表的誤區(qū)
3.6設(shè)計表格
3.6.1認識表格結(jié)構(gòu)
3.6.2使用表格元素
3.6.3表格分組
3.7設(shè)計表單
3.7.1認識表單結(jié)構(gòu)
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選項分區(qū)
3.7.10使用按鈕
3.8案例實戰(zhàn)
3.8.1設(shè)計一個自我介紹簡單頁面
3.8.2解決網(wǎng)頁亂碼現(xiàn)象
3.8.3把HTML轉(zhuǎn)換為XHTML
3.8.4輸出唐詩
第4章設(shè)計符合標準的結(jié)構(gòu)
4.1元素顯示類型
4.1.1認識元素顯示類型
4.1.2塊狀元素
4.1.3行內(nèi)元素
4.1.4其他元素
4.2結(jié)構(gòu)嵌套規(guī)則
4.2.1分析結(jié)構(gòu)亂套現(xiàn)象
4.2.2嚴謹?shù)那短滓?guī)則
4.2.3HTML嵌套規(guī)則應(yīng)用
4.3案例實戰(zhàn)：設(shè)計CSS禪意花園
4.3.1認識CSS禪意花園
4.3.2定義網(wǎng)頁結(jié)構(gòu)
4.3.3設(shè)計嵌套結(jié)構(gòu)
4.3.4構(gòu)建基本框架
4.3.5設(shè)計局部結(jié)構(gòu)
4.3.6正文版式設(shè)計
第5章設(shè)計HTML5文檔
視頻講解：36分鐘
5.1HTML5基礎(chǔ)
5.1.1HTML5語法
5.1.2HTML5元素
5.1.3HTML5對象屬性
5.1.4HTML5全局屬性
5.2認識HTML5文檔結(jié)構(gòu)
5.3HTML5元素分類
5.4構(gòu)建主體內(nèi)容
5.4.1標識文章
5.4.2給內(nèi)容分段
5.4.3設(shè)計導航信息
5.4.4設(shè)計輔助信息
5.4.5設(shè)計微格式
5.4.6添加發(fā)布日期
5.5添加語義模塊
5.5.1添加標題塊
5.5.2給標題分組
5.5.3添加腳注塊
5.5.4添加聯(lián)系信息
5.6案例實戰(zhàn)：使用HTML5設(shè)計博客主頁
5.6.1設(shè)計大綱
5.6.2設(shè)計樣式
第6章CSS基礎(chǔ)
視頻講解：79分鐘
6.1CSS概述
6.1.1什么是CSS樣式
6.1.2為什么學習CSS
6.1.3CSS特點
6.2CSS語法和用法
6.2.1CSS基本結(jié)構(gòu)
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復(fù)合選擇器
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結(jié)構(gòu)偽類選擇器
6.6.4否定偽類選擇器
6.6.5狀態(tài)偽類選擇器
6.7CSS繼承性、層疊性和特殊性
6.7.1CSS繼承性
6.7.2CSS層疊性
6.7.3CSS優(yōu)先級
6.7.4CSS特殊性
6.8案例實戰(zhàn)
6.8.1設(shè)計導航菜單
6.8.2設(shè)計登錄表單
第7章設(shè)計文本樣式
視頻講解：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案例實戰(zhàn)
7.3.1設(shè)計英文格式1
7.3.2設(shè)計英文格式2
7.3.3設(shè)計中文報刊版式
7.3.4設(shè)計中文層級版式
第8章設(shè)計圖像樣式
視頻講解：72分鐘
8.1網(wǎng)頁中的圖像
8.2圖像樣式
8.2.1定義圖像大小
8.2.2定義圖像邊框
8.2.3定義圖像不透明度
8.2.4定義圓角圖像
8.2.5定義陰影圖像
8.2.6圖文混排
8.3綜合實戰(zhàn)：設(shè)計圖文新聞內(nèi)容頁
8.4背景圖像
8.4.1定義背景圖像
8.4.2定義顯示方式
8.4.3定義顯示位置
8.4.4定義固定背景
8.5綜合實戰(zhàn)
8.5.1設(shè)計博客首頁
8.5.2設(shè)計社區(qū)相冊
8.5.3CSSSprites
第9章設(shè)計超鏈接樣式
視頻講解：26分鐘
9.1定義超鏈接樣式
9.1.1認識超鏈接
9.1.2偽類和偽對象
9.1.3定義鏈接樣式
9.2案例實戰(zhàn)
9.2.1定義下劃線樣式
9.2.2定義立體樣式
9.2.3定義動態(tài)樣式
9.2.4定義圖像交換樣式
9.2.5定義鼠標樣式
9.2.6設(shè)計圖形化按鈕樣式
9.2.7設(shè)計滑動門樣式
第10章設(shè)計列表樣式
視頻講解：49分鐘
10.1設(shè)計列表結(jié)構(gòu)
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案例實戰(zhàn)
10.4.1設(shè)計背景水平滑動菜單
10.4.2設(shè)計背景垂直滑動菜單
10.4.3設(shè)計Tab面板菜單
10.4.4設(shè)計下拉式面板菜單
10.5設(shè)計列表欄目樣式
10.5.1案例1：音樂榜單
10.5.2案例2：圖文列表欄
第11章設(shè)計表格樣式
視頻講解：45分鐘
11.1設(shè)計表格結(jié)構(gòu)
11.1.1早期表格結(jié)構(gòu)
11.1.2標準表格結(jié)構(gòu)
11.2定義表格基本樣式
11.2.1使用表格標簽屬性
11.2.2設(shè)計細線表格
11.2.3定義單元格空隙
11.2.4隱藏空單元格
11.3設(shè)計表格特殊樣式
11.3.1表格布局特性
11.3.2定義列組和行組樣式
11.3.3定義表格標題樣式
11.3.4合并單元格
11.3.5表格樣式的層疊順序
11.4案例實戰(zhàn)
11.4.1設(shè)計單線表格
11.4.2設(shè)計層級表格樣式
11.4.3設(shè)計日歷表
第12章設(shè)計表單樣式
視頻講解：42分鐘
12.1設(shè)計表單
12.1.1表單框
12.1.2輸入框
12.1.3選擇框
12.1.4優(yōu)化結(jié)構(gòu)
12.2定義表單樣式
12.2.1設(shè)計文本框
12.2.2設(shè)計單選按鈕和復(fù)選框
12.2.3設(shè)計下拉菜單和列表框
12.3案例實戰(zhàn)
12.3.1設(shè)計用戶登錄頁
12.3.2設(shè)計用戶注冊頁
12.3.3設(shè)計搜索框
第13章CSS網(wǎng)頁布局
視頻講解：41分鐘
13.1網(wǎng)頁布局概述
13.1.1認識div和span
13.1.2認識display
13.1.3網(wǎng)頁布局分類
13.2CSS盒模型
13.2.1認識盒模型
13.2.2定義邊界
13.2.3邊界重疊
13.2.4定義邊框
13.2.5定義補白
13.3網(wǎng)頁布局基本方法
13.3.1定義float
13.3.2使用clear
13.3.3定義position
13.3.4設(shè)置層疊順序
13.4案例實戰(zhàn)
13.4.1設(shè)計網(wǎng)頁居中顯示
13.4.2設(shè)計定位版三欄頁面布局
13.4.3設(shè)計多欄高度自適應(yīng)頁面
13.4.4設(shè)計負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案例實戰(zhàn)：流動問題與處理
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案例實戰(zhàn)：浮動問題與處理
14.4.1浮動被流動包含問題
14.4.2高度自適應(yīng)問題
14.4.3欄目內(nèi)容被隱藏
14.4.4邊界和浮動問題
14.4.5半個像素問題
14.4.63像素問題
14.4.7多出字符問題
14.5案例實戰(zhàn)：定位問題與處理
14.5.1定位參照物的問題
14.5.2定位層疊問題
14.5.3定位丟失問題
第15章JavaScript基礎(chǔ)
視頻講解：262分鐘
15.1JavaScript入門
15.1.1網(wǎng)頁中的JavaScript
15.1.2使用JavaScript文件
15.1.3JavaScript語法基礎(chǔ)
15.1.4認識JavaScript語法特性
15.2常量和變量
15.3表達式和運算符
15.4語句
15.4.1表達式語句和語句塊
15.4.2條件語句
15.4.3循環(huán)語句
15.4.4跳轉(zhuǎn)語句
15.4.5異常處理語句
15.4.6var語句和function語句
15.4.7with語句和空語句
15.5數(shù)據(jù)類型和類型轉(zhuǎn)換
15.5.1數(shù)值
15.5.2字符串
15.5.3布爾型
15.5.4null和undefined
15.5.5引用型數(shù)據(jù)
15.6函數(shù)
15.6.1定義函數(shù)
15.6.2調(diào)用函數(shù)
15.6.3函數(shù)參數(shù)
15.6.4函數(shù)應(yīng)用
15.6.5閉包函數(shù)
15.7對象
15.7.1創(chuàng)建對象
15.7.2訪問對象
15.8數(shù)組
15.8.1定義數(shù)組
15.8.2存取元素
15.8.3數(shù)組應(yīng)用
15.9案例實戰(zhàn)
15.9.1檢測數(shù)據(jù)類型
15.9.2數(shù)值計算與類型轉(zhuǎn)換
15.9.3字符串替換
15.9.4增強數(shù)組排序
15.9.5使用高階函數(shù)
15.9.6函數(shù)柯里化
15.9.7靈活使用this