HTML+CSS+JavaScript網(wǎng)頁(yè)設(shè)計(jì)從入門(mén)到精通

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