CSS+DIV網(wǎng)頁樣式與布局課程標準

1、序號課程單元第1章 CSS樣式設(shè)計基礎(chǔ)視頻講解：2小時38分鐘1.1 設(shè)計良好的網(wǎng)頁結(jié)構(gòu)1.1.1 選用符合語義的標簽1.1.2 文檔類型和瀏覽器模式1.2 初識CSS1.2.1 為什么學(xué)習(xí)CSS1.2.2 CSS基本語法1.2.3 設(shè)計第一個實例1.3 CSS選擇器1.3.1 CSS選擇器概述1.3.2 標簽選擇器1.3.3 ID選擇器1.3.4 類選擇器1.3.5 偽類和偽對象選擇器1.3.6 子選擇器1.3.7 相鄰選擇器1.3.8 屬性選擇器1.3.9 通用選擇器1.3.10 包含選擇器1.3.11 分組選擇器1.3.12 指定選擇器1.4 CSS基本特性1.4.1 層疊和特殊性1.4

2、.2 繼承1.5 樣式表規(guī)劃、組織和維護1.5.1 對文檔應(yīng)用樣式1.5.2 對代碼進行注釋1.5.3 樣式文檔1.5.4 組織樣式表以便簡化維護1.6 CSS屬性和屬性值1.6.1 CSS屬性1.6.2 CSS單位1.6.3 設(shè)置顏色第2章 使用CSS設(shè)置字體和文本樣式視頻講解：2小時12分鐘2.1 字體和文本樣式基礎(chǔ)2.1.1 定義字體類型2.1.2 定義字體大小2.1.3 定義字體顏色2.1.4 定義字體粗細2.1.5 定義斜體字體2.1.6 定義下劃線、刪除線和頂劃線2.1.7 定義字體大小寫2.1.8 定義文本對齊2.1.9 定義垂直對齊2.1.10 定義字間距和行間距2.1.11

3、定義行間距2.1.12 定義縮進2.2 案例實戰(zhàn)2.2.1 設(shè)計百度Logo2.2.2 設(shè)置標題樣式2.2.3 設(shè)置正文樣式2.2.4 設(shè)置文本樣式2.2.5 設(shè)置文本段樣式2.2.6 設(shè)置段落版式樣式2.2.7 設(shè)計單頁圖文混排版式第3章 使用CSS設(shè)置圖片樣式視頻講解：1小時32分鐘3.1 圖片樣式設(shè)置基礎(chǔ)3.1.1 定義圖片邊框3.1.2 定義圖片大小3.1.3 定義圖片的橫向?qū)R3.1.4 定義圖片的縱向?qū)R3.1.5 設(shè)置文字環(huán)繞效果3.2 案例實戰(zhàn)3.2.1 圖文混排3.2.2 圖片布局3.2.3 多圖排列3.2.4 陰影圖片3.2.5 圓角圖片3.2.6 設(shè)計圓角欄目第4章 使用

4、CSS控制背景圖像視頻講解：1小時38分鐘4.1 背景樣式設(shè)置基礎(chǔ)4.1.1 設(shè)置頁面背景顏色4.1.2 設(shè)置背景顏色給頁面分塊4.1.3 定義背景圖片4.1.4 背景圖片的重復(fù)4.1.5 定義背景圖片的位置4.1.6 固定背景圖片4.2 案例實戰(zhàn)4.2.1 設(shè)置網(wǎng)頁背景顏色4.2.2 設(shè)置帶花紋邊框4.2.3 設(shè)置永遠固定的背景4.2.4 設(shè)置圓潤的欄目模塊4.2.5 設(shè)計分欄版式4.2.6 設(shè)計滑動門菜單4.2.7 設(shè)計燈箱廣告4.2.8 設(shè)計博客首頁效果第5章 使用CSS控制列表樣式視頻講解：55分鐘5.1 列表樣式設(shè)置基礎(chǔ)5.1.1 設(shè)置列表項符號5.1.2 定義項目的圖片符號5.1.

5、3 列表的橫豎轉(zhuǎn)換5.2 案例實戰(zhàn)5.2.1 設(shè)計新聞欄目5.2.2 設(shè)計導(dǎo)航菜單5.2.3 設(shè)計多級菜單5.2.4 列表排版的應(yīng)用5.2.5 使用列表實現(xiàn)圖文混排效果第6章 使用CSS設(shè)計表格樣式視頻講解：45分鐘6.1 表格樣式設(shè)置基礎(chǔ)6.1.1 設(shè)置表格顏色6.1.2 設(shè)置表格邊框6.2 案例實戰(zhàn)6.2.1 美化表格6.2.2 設(shè)計高效的表格6.2.3 讓表格更易用6.2.4 表格布局第7章 使用CSS設(shè)計表單樣式視頻講解：1小時45分鐘7.1 表單樣式設(shè)置基礎(chǔ)7.1.1 表單基本結(jié)構(gòu)7.1.2 設(shè)置基本樣式7.1.3 定義字體樣式7.1.4 定義邊框樣式7.1.5 定義背景樣式7.2

6、案例實戰(zhàn)7.2.1 設(shè)計多彩下拉菜單樣式7.2.2 設(shè)計注冊表單7.2.3 設(shè)計調(diào)查表7.2.4 設(shè)計反饋表第8章 使用CSS定義鏈接樣式視頻講解：1小時12分鐘8.1 鏈接樣式設(shè)置基礎(chǔ)8.1.1 設(shè)置鏈接樣式8.1.2 設(shè)計下劃線樣式8.1.3 設(shè)置類型指示樣式8.1.4 定義按鈕樣式8.1.5 定義已訪問樣式8.1.6 鏈接提示樣式8.2 案例實戰(zhàn)8.2.1 鼠標樣式8.2.2 設(shè)計菜單樣式8.2.3 設(shè)計蘋果導(dǎo)航菜單8.2.4 塊狀選項卡8.2.5 圖片瀏覽第9章 網(wǎng)頁排版和DIV+CSS布局視頻講解：2小時47分鐘9.1 CSS盒模型9.1.1 認識盒模型9.1.2 外邊距9.1.3

7、內(nèi)邊距9.1.4 邊框9.1.5 寬和高9.2 網(wǎng)頁重構(gòu)9.2.1 設(shè)置文檔類型9.2.2 選擇標簽9.2.3 案例實戰(zhàn)：嘗試重構(gòu)禪意花園9.3 網(wǎng)頁排版9.3.1 網(wǎng)頁排版基本原則9.3.2 標準網(wǎng)頁版式基本形式9.3.3 網(wǎng)頁排版基本方法9.4 DIV+CSS布局9.4.1 布局空間9.4.2 布局位置9.4.3 布局環(huán)繞9.4.4 清除浮動9.4.5 布局嵌套9.4.6 調(diào)整布局間距9.5 案例實戰(zhàn)9.5.1 兩列布局9.5.2 三列布局第10章 用CSS定位控制網(wǎng)頁布局視頻講解：1小時53分鐘10.1 CSS定位10.1.1 認識position10.1.2 靜態(tài)定位10.1.3 絕對

8、定位10.1.4 相對定位10.1.5 固定定位10.2 定位參照10.2.1 參照對象10.2.2 坐標值10.2.3 定位的特殊性10.3 定位層疊10.3.1 層疊順序10.3.2 嵌套層疊順序10.3.3 CSS層疊框10.3.4 CSS層疊常見問題10.4 案例實戰(zhàn)10.4.1 畫冊式網(wǎng)頁布局10.4.2 展覽式網(wǎng)頁布局10.4.3 浪漫式網(wǎng)頁布局第11章 解決CSS設(shè)計中的常見問題視頻講解：2小時11.1 IE條件語句11.1.1 認識IE條件語句11.1.2 IE條件語句基本用法11.1.3 案例實戰(zhàn)：設(shè)計兼容的多級菜單11.2 CSS渲染及問題11.2.1 開啟和關(guān)閉IE布局特

9、性11.2.2 設(shè)置Layout特性的方法11.2.3 問題1：不能自動展開包含框11.2.4 問題2：包含浮動布局的問題與處理11.2.5 問題3：相鄰浮動布局的問題與處理11.2.6 問題4：列表布局的問題與處理11.2.7 問題5：定位布局的問題與處理11.3 常用瀏覽器解析問題和解決方法11.3.1 兼容IE6版本瀏覽器11.3.2 兼容IE5系列版本瀏覽器11.3.3 兼容IE7版本瀏覽器11.3.4 兼容FF等標準瀏覽器11.3.5 問題1：超鏈接的Bug11.3.6 問題2：內(nèi)容與背景分離的Bug11.3.7 問題3：IE6躲躲貓Bug11.3.8 問題4：IE6多余字符Bug1

10、1.4 案例實戰(zhàn)11.4.1 3列等高布局11.4.2 3列浮動布局第12章 旅游酒店網(wǎng)站視頻講解：2小時18分鐘12.1 網(wǎng)站頁面效果分析12.1.1 旅游度假頁面效果分析12.1.2 預(yù)定酒店頁面效果分析12.2 首頁策劃設(shè)計12.3 網(wǎng)頁設(shè)計與重構(gòu)12.3.1 畫草圖和設(shè)計圖12.3.2 切圖12.3.3 主體重構(gòu)12.4 頁面布局12.4.1 設(shè)計頁面基本樣式12.4.2 設(shè)計頁頭布局和樣式12.4.3 設(shè)計搜索和幻燈區(qū)布局和樣式12.4.4 設(shè)計左側(cè)引導(dǎo)區(qū)布局和樣式12.4.5 設(shè)計內(nèi)容區(qū)樣式12.4.6 設(shè)計右側(cè)專題欄樣式第13章 新聞網(wǎng)站視頻講解：1小時20分鐘13.1 網(wǎng)站頁面

11、效果分析13.1.1 對話頁面效果分析13.1.2 環(huán)球看點頁面效果分析13.2 首頁策劃設(shè)計13.3 網(wǎng)頁設(shè)計與重構(gòu)13.3.1 畫草圖和設(shè)計圖13.3.2 切圖13.3.3 主體重構(gòu)13.4 頁面布局13.4.1 設(shè)計頁面基本樣式13.4.2 設(shè)計頁頭布局和樣式13.4.3 設(shè)計主要新聞區(qū)布局和樣式13.4.4 設(shè)計分類新聞區(qū)布局和樣式第14章 使用JavaScript控制CSS樣式視頻講解：2小時47分鐘14.1 JavaScript基礎(chǔ)14.1.1 在網(wǎng)頁中嵌入JavaScript腳本14.1.2 JavaScript腳本在文檔中的位置14.1.3 解決JavaScript腳本與CSS

12、樣式?jīng)_突14.2 CSS腳本化傳統(tǒng)控制方法14.2.1 認識Style對象14.2.2 讀寫行內(nèi)樣式14.2.3 讀寫樣式表中樣式14.2.4 訪問網(wǎng)頁實際樣式14.3 控制CSS腳本的標準方法14.3.1 CSSStyleSheet接口14.3.2 CSSStyleRule接口14.3.3 CSSStyleDeclaration接口14.4 使用JavaScript控制元素大小14.4.1 讀取元素的長寬樣式值14.4.2 使用offsetWidth和offsetHeight屬性讀取元素的尺寸14.4.3 讀取復(fù)雜結(jié)構(gòu)中的元素尺寸14.4.4 讀取瀏覽器窗口大小14.5 使用JavaScri

13、pt定位14.5.1 在窗口中的位置14.5.2 相對父元素的位置14.5.3 相對包含塊的位置14.5.4 定義偏移位置14.5.5 定義相對位置14.5.6 確定光標位置14.5.7 確定光標的相對位置14.5.8 確定滾動條的位置14.5.9 定義滾動條的位置14.6 使用JavaScript設(shè)置顯隱效果14.6.1 設(shè)置顯隱效果14.6.2 設(shè)置透明度14.6.3 控制動畫時長14.6.4 設(shè)計滑動效果第15章 使用CSS設(shè)計XML文檔樣式視頻講解：43分鐘15.1 XML基礎(chǔ)15.1.1 XML文檔基本結(jié)構(gòu)15.1.2 聲明15.1.3 處理指令15.1.4 注釋15.1.5 標簽1

14、5.1.6 屬性15.2 設(shè)置XML文檔樣式15.2.1 CSS樣式表15.2.2 XSL樣式表15.3 CSS與XML文檔關(guān)聯(lián)15.3.1 直接嵌入CSS樣式15.3.2 導(dǎo)入外部CSS樣式表文件15.3.3 import15.4 案例實戰(zhàn)15.4.1 設(shè)計詩情畫意圖文效果15.4.2 設(shè)計新聞版面效果第16章 使用CSS濾鏡視頻講解：43小時分鐘16.1 CSS濾鏡概述16.1.1 基本用法16.1.2 恰當選用濾鏡16.2 常用CSS濾鏡16.2.1 通道（Alpha）16.2.2 模糊（Blur）16.2.3 運動模糊（MotionBlur）16.2.4 透明色（Chroma）16.2

15、.5 翻轉(zhuǎn)（Flip）16.2.6 光暈（Glow）16.2.7 灰度（Gray）16.2.8 反色（Invert）16.2.9 遮罩（Mask）16.2.10 陰影（Shadow）16.2.11 X射線（Xray）16.2.12 浮雕（Emboss）16.2.13 波浪（Wave）16.3 案例實戰(zhàn)學(xué)習(xí)任務(wù)參考學(xué)時第1章 CSS樣式設(shè)計基礎(chǔ)視頻講解：2小時38分鐘1.1 設(shè)計良好的網(wǎng)頁結(jié)構(gòu)1.1.1 選用符合語義的標簽1.1.2 文檔類型和瀏覽器模式1.2 初識CSS1.2.1 為什么學(xué)習(xí)CSS1.2.2 CSS基本語法1.2.3 設(shè)計第一個實例1.3 CSS選擇器1.3.1 CSS選擇器概

16、述1.3.2 標簽選擇器1.3.3 ID選擇器1.3.4 類選擇器1.3.5 偽類和偽對象選擇器1.3.6 子選擇器1.3.7 相鄰選擇器1.3.8 屬性選擇器1.3.9 通用選擇器1.3.10 包含選擇器1.3.11 分組選擇器1.3.12 指定選擇器1.4 CSS基本特性1.4.1 層疊和特殊性1.4.2 繼承1.5 樣式表規(guī)劃、組織和維護1.5.1 對文檔應(yīng)用樣式1.5.2 對代碼進行注釋1.5.3 樣式文檔1.5.4 組織樣式表以便簡化維護1.6 CSS屬性和屬性值1.6.1 CSS屬性1.6.2 CSS單位1.6.3 設(shè)置顏色第2章 使用CSS設(shè)置字體和文本樣式視頻講解：2小時12分

17、鐘2.1 字體和文本樣式基礎(chǔ)2.1.1 定義字體類型2.1.2 定義字體大小2.1.3 定義字體顏色2.1.4 定義字體粗細2.1.5 定義斜體字體2.1.6 定義下劃線、刪除線和頂劃線2.1.7 定義字體大小寫2.1.8 定義文本對齊2.1.9 定義垂直對齊2.1.10 定義字間距和行間距2.1.11 定義行間距2.1.12 定義縮進2.2 案例實戰(zhàn)2.2.1 設(shè)計百度Logo2.2.2 設(shè)置標題樣式2.2.3 設(shè)置正文樣式2.2.4 設(shè)置文本樣式2.2.5 設(shè)置文本段樣式2.2.6 設(shè)置段落版式樣式2.2.7 設(shè)計單頁圖文混排版式第3章 使用CSS設(shè)置圖片樣式視頻講解：1小時32分鐘3.1

18、 圖片樣式設(shè)置基礎(chǔ)3.1.1 定義圖片邊框3.1.2 定義圖片大小3.1.3 定義圖片的橫向?qū)R3.1.4 定義圖片的縱向?qū)R3.1.5 設(shè)置文字環(huán)繞效果3.2 案例實戰(zhàn)3.2.1 圖文混排3.2.2 圖片布局3.2.3 多圖排列3.2.4 陰影圖片3.2.5 圓角圖片3.2.6 設(shè)計圓角欄目第4章 使用CSS控制背景圖像視頻講解：1小時38分鐘4.1 背景樣式設(shè)置基礎(chǔ)4.1.1 設(shè)置頁面背景顏色4.1.2 設(shè)置背景顏色給頁面分塊4.1.3 定義背景圖片4.1.4 背景圖片的重復(fù)4.1.5 定義背景圖片的位置4.1.6 固定背景圖片4.2 案例實戰(zhàn)4.2.1 設(shè)置網(wǎng)頁背景顏色4.2.2 設(shè)置帶

19、花紋邊框4.2.3 設(shè)置永遠固定的背景4.2.4 設(shè)置圓潤的欄目模塊4.2.5 設(shè)計分欄版式4.2.6 設(shè)計滑動門菜單4.2.7 設(shè)計燈箱廣告4.2.8 設(shè)計博客首頁效果第5章 使用CSS控制列表樣式視頻講解：55分鐘5.1 列表樣式設(shè)置基礎(chǔ)5.1.1 設(shè)置列表項符號5.1.2 定義項目的圖片符號5.1.3 列表的橫豎轉(zhuǎn)換5.2 案例實戰(zhàn)5.2.1 設(shè)計新聞欄目5.2.2 設(shè)計導(dǎo)航菜單5.2.3 設(shè)計多級菜單5.2.4 列表排版的應(yīng)用5.2.5 使用列表實現(xiàn)圖文混排效果第6章 使用CSS設(shè)計表格樣式視頻講解：45分鐘6.1 表格樣式設(shè)置基礎(chǔ)6.1.1 設(shè)置表格顏色6.1.2 設(shè)置表格邊框6.2

20、 案例實戰(zhàn)6.2.1 美化表格6.2.2 設(shè)計高效的表格6.2.3 讓表格更易用6.2.4 表格布局第7章 使用CSS設(shè)計表單樣式視頻講解：1小時45分鐘7.1 表單樣式設(shè)置基礎(chǔ)7.1.1 表單基本結(jié)構(gòu)7.1.2 設(shè)置基本樣式7.1.3 定義字體樣式7.1.4 定義邊框樣式7.1.5 定義背景樣式7.2 案例實戰(zhàn)7.2.1 設(shè)計多彩下拉菜單樣式7.2.2 設(shè)計注冊表單7.2.3 設(shè)計調(diào)查表7.2.4 設(shè)計反饋表第8章 使用CSS定義鏈接樣式視頻講解：1小時12分鐘8.1 鏈接樣式設(shè)置基礎(chǔ)8.1.1 設(shè)置鏈接樣式8.1.2 設(shè)計下劃線樣式8.1.3 設(shè)置類型指示樣式8.1.4 定義按鈕樣式8.1

21、.5 定義已訪問樣式8.1.6 鏈接提示樣式8.2 案例實戰(zhàn)8.2.1 鼠標樣式8.2.2 設(shè)計菜單樣式8.2.3 設(shè)計蘋果導(dǎo)航菜單8.2.4 塊狀選項卡8.2.5 圖片瀏覽第9章 網(wǎng)頁排版和DIV+CSS布局視頻講解：2小時47分鐘9.1 CSS盒模型9.1.1 認識盒模型9.1.2 外邊距9.1.3 內(nèi)邊距9.1.4 邊框9.1.5 寬和高9.2 網(wǎng)頁重構(gòu)9.2.1 設(shè)置文檔類型9.2.2 選擇標簽9.2.3 案例實戰(zhàn)：嘗試重構(gòu)禪意花園9.3 網(wǎng)頁排版9.3.1 網(wǎng)頁排版基本原則9.3.2 標準網(wǎng)頁版式基本形式9.3.3 網(wǎng)頁排版基本方法9.4 DIV+CSS布局9.4.1 布局空間9.4

22、.2 布局位置9.4.3 布局環(huán)繞9.4.4 清除浮動9.4.5 布局嵌套9.4.6 調(diào)整布局間距9.5 案例實戰(zhàn)9.5.1 兩列布局9.5.2 三列布局第10章 用CSS定位控制網(wǎng)頁布局視頻講解：1小時53分鐘10.1 CSS定位10.1.1 認識position10.1.2 靜態(tài)定位10.1.3 絕對定位10.1.4 相對定位10.1.5 固定定位10.2 定位參照10.2.1 參照對象10.2.2 坐標值10.2.3 定位的特殊性10.3 定位層疊10.3.1 層疊順序10.3.2 嵌套層疊順序10.3.3 CSS層疊框10.3.4 CSS層疊常見問題10.4 案例實戰(zhàn)10.4.1 畫冊

23、式網(wǎng)頁布局10.4.2 展覽式網(wǎng)頁布局10.4.3 浪漫式網(wǎng)頁布局第11章 解決CSS設(shè)計中的常見問題視頻講解：2小時11.1 IE條件語句11.1.1 認識IE條件語句11.1.2 IE條件語句基本用法11.1.3 案例實戰(zhàn)：設(shè)計兼容的多級菜單11.2 CSS渲染及問題11.2.1 開啟和關(guān)閉IE布局特性11.2.2 設(shè)置Layout特性的方法11.2.3 問題1：不能自動展開包含框11.2.4 問題2：包含浮動布局的問題與處理11.2.5 問題3：相鄰浮動布局的問題與處理11.2.6 問題4：列表布局的問題與處理11.2.7 問題5：定位布局的問題與處理11.3 常用瀏覽器解析問題和解決方

24、法11.3.1 兼容IE6版本瀏覽器11.3.2 兼容IE5系列版本瀏覽器11.3.3 兼容IE7版本瀏覽器11.3.4 兼容FF等標準瀏覽器11.3.5 問題1：超鏈接的Bug11.3.6 問題2：內(nèi)容與背景分離的Bug11.3.7 問題3：IE6躲躲貓Bug11.3.8 問題4：IE6多余字符Bug11.4 案例實戰(zhàn)11.4.1 3列等高布局11.4.2 3列浮動布局第12章 旅游酒店網(wǎng)站視頻講解：2小時18分鐘12.1 網(wǎng)站頁面效果分析12.1.1 旅游度假頁面效果分析12.1.2 預(yù)定酒店頁面效果分析12.2 首頁策劃設(shè)計12.3 網(wǎng)頁設(shè)計與重構(gòu)12.3.1 畫草圖和設(shè)計圖12.3.2

25、 切圖12.3.3 主體重構(gòu)12.4 頁面布局12.4.1 設(shè)計頁面基本樣式12.4.2 設(shè)計頁頭布局和樣式12.4.3 設(shè)計搜索和幻燈區(qū)布局和樣式12.4.4 設(shè)計左側(cè)引導(dǎo)區(qū)布局和樣式12.4.5 設(shè)計內(nèi)容區(qū)樣式12.4.6 設(shè)計右側(cè)專題欄樣式第13章 新聞網(wǎng)站視頻講解：1小時20分鐘13.1 網(wǎng)站頁面效果分析13.1.1 對話頁面效果分析13.1.2 環(huán)球看點頁面效果分析13.2 首頁策劃設(shè)計13.3 網(wǎng)頁設(shè)計與重構(gòu)13.3.1 畫草圖和設(shè)計圖13.3.2 切圖13.3.3 主體重構(gòu)13.4 頁面布局13.4.1 設(shè)計頁面基本樣式13.4.2 設(shè)計頁頭布局和樣式13.4.3 設(shè)計主要新聞區(qū)

26、布局和樣式13.4.4 設(shè)計分類新聞區(qū)布局和樣式第14章 使用JavaScript控制CSS樣式視頻講解：2小時47分鐘14.1 JavaScript基礎(chǔ)14.1.1 在網(wǎng)頁中嵌入JavaScript腳本14.1.2 JavaScript腳本在文檔中的位置14.1.3 解決JavaScript腳本與CSS樣式?jīng)_突14.2 CSS腳本化傳統(tǒng)控制方法14.2.1 認識Style對象14.2.2 讀寫行內(nèi)樣式14.2.3 讀寫樣式表中樣式14.2.4 訪問網(wǎng)頁實際樣式14.3 控制CSS腳本的標準方法14.3.1 CSSStyleSheet接口14.3.2 CSSStyleRule接口14.3.3 CSSStyleDeclaration接口14.4 使用JavaSc