微課學Dreamweaver CC網頁設計與網站組建

目錄

 

第1章?認識Dreamweaver與創建站點  

1.1　網頁概述  

1.1.1?網頁設計與網頁製作  

1.1.2?網頁設計術語  

1.2　Dreamweaver工作界面  

1.2.1?啟動Dreamweaver  

1.2.2?認識Dreamweaver工作界面  

1.2.3?“插入”面板  

1.2.4?狀態欄  

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?【課堂任務】：創建企業站點並設置遠程服務器  

1.5　站點文件的基本操作  

1.5.1?創建頁面  

1.5.2?創建文件夾  

1.5.3?移動和復制文件或文件夾  

1.5.4?重命名文件或文件夾  

1.5.5?刪除文件或文件夾  

1.6　管理站點  

1.6.1?站點的切換  

1.6.2?“管理站點”對話框  

1.7　本章小結  

1.8　課後練習  

第2章?從HTML到HTML5  

2.1　HTML基礎  

2.1.1?HTML概述  

2.1.2?HTML的特點  

2.1.3?HTML的文檔結構  

2.1.4?HTML的基本語法  

2.1.5?編寫HTML的註意事項  

2.2　HTML中的常用重要標簽  

2.2.1?字符格式標簽  

2.2.2?區段格式標簽  

2.2.3?列表標簽  

2.2.4?表格標簽  

2.2.5?鏈接標簽  

2.2.6?多媒體標簽  

2.2.7?表單標簽  

2.2.8?分區標簽  

2.2.9?【課堂任務】：在Dreamweaver中編寫HTML  

2.3　HTML5概述  

2.3.1?瞭解HTML5  

2.3.2?HTML5文檔結構  

2.4　HTML5中新增的標簽  

2.4.1?結構標簽  

2.4.2?文本標簽  

2.4.3?應用和輔助標簽  

2.4.4?進度標簽  

2.4.5?交互性標簽  

2.4.6?在文檔和應用中使用的標簽  

2.4.7?<ruby>標簽  

2.4.8?其他標簽  

2.5　網頁中的其他源代碼  

2.5.1?CSS樣式代碼  

2.5.2?JavaScript腳本代碼  

2.5.3?源代碼中的註釋  

2.6　本章小結  

2.7　課後練習  

第3章?精通CSS樣式  

3.1　瞭解CSS樣式  

3.1.1?CSS樣式概述  

3.1.2?CSS樣式規則  

3.2　認識“CSS設計器”面板  

3.2.1?“源”選項區  

3.2.2?“@媒體”選項區  

3.2.3?“選擇器”選項區  

3.2.4?“屬性”選項區  

3.3　CSS樣式屬性  

3.3.1?佈局CSS樣式屬性  

3.3.2?文本CSS樣式屬性  

3.3.3?邊框CSS樣式屬性  

3.3.4?背景CSS樣式屬性  

3.3.5?其他CSS樣式屬性  

3.3.6?【課堂任務】：設置網頁中的文字效果  

3.4　CSS選擇器  

3.4.1?認識不同類型的CSS選擇器  

3.4.2?【課堂任務】：使用通配符選擇器控制網頁中的所有標簽  

3.4.3?【課堂任務】：使用標簽選擇器設置網頁的整體樣式  

3.4.4?【課堂任務】：創建和使用ID CSS樣式  

3.4.5?【課堂任務】：創建和使用類 CSS樣式  

3.4.6?【課堂任務】：設置網頁中超鏈接的偽類樣式  

3.4.7?【課堂任務】：創建並應用派生選擇器樣式  

3.4.8?【課堂任務】：同時定義多個網頁元素樣式  

3.5　使用CSS樣式的方式  

3.5.1?網頁使用CSS樣式的4種方式  

3.5.2?【課堂任務】：鏈接外部CSS樣式表文件  

3.6　CSS 3.0新增的顏色定義方法  

3.6.1?HSL顏色定義方法  

3.6.2?HSLA顏色定義方法  

3.6.3?RGBA顏色定義方法  

3.6.4?【課堂任務】：為網頁元素設置半透明背景顏色  

3.7　CSS 3.0新增的文字設置屬性  

3.7.1?text-overflow屬性  

3.7.2?word-wrap屬性  

3.7.3?word-break和word-space屬性  

3.7.4?text-shadow屬性  

3.7.5?【課堂任務】：為網頁文字設置陰影效果  

3.7.6?@font-face規則  

3.7.7?【課堂任務】：在網頁中實現特殊字體效果  

3.8　CSS 3.0新增的背景設置屬性  

3.8.1?background-size屬性  

3.8.2?【課堂任務】：實現滿屏顯示的網頁背景  

3.8.3?background-origin屬性  

3.8.4?background-clip屬性  

3.8.5?background屬性  

3.8.6?【課堂任務】：為網頁設置多背景圖像  

3.9　CSS 3.0新增的邊框設置屬性  

3.9.1?border-colors屬性  

3.9.2?border-image屬性  

3.9.3?border-radius屬性  

3.9.4?box-shadow屬性  

3.9.5?【課堂任務】：為網頁元素設置圓角效果  

3.10　CSS 3.0新增的多列佈局屬性  

3.10.1?columns屬性  

3.10.2?column-width屬性  

3.10.3?column-count屬性  

3.10.4?column-gap屬性  

3.10.5?column-rule屬性  

3.10.6?column-span屬性  

3.10.7?【課堂任務】：設置網頁內容分欄顯示  

3.11　CSS 3.0新增的盒模型設置屬性  

3.11.1?opacity屬性  

3.11.2?【課堂任務】：設置網頁元素的不透明度  

3.11.3?overflow-x和overflow-y屬性  

3.11.4?resize屬性  

3.11.5?outline屬性  

3.11.6?content屬性  

3.12　本章小結  

3.13　課後練習  

第4章?Div+CSS網頁佈局  

4.1　創建Div  

4.1.1?Div概述  

4.1.2?插入Div  

4.1.3?在設計視圖中插入Div  

4.1.4?塊元素與行內元素  

4.2　CSS基礎盒模型  

4.2.1?CSS基礎盒模型概述  

4.2.2?margin屬性——邊距  

4.2.3?border屬性——邊框  

4.2.4?padding屬性——填充  

4.2.5?【課堂任務】：設置網頁元素盒模型效果  

4.2.6?空白邊疊加  

4.2.7?【課堂任務】：網頁中空白邊疊加的應用  

4.3　網頁元素的定位  

4.3.1?CSS定位屬性  

4.3.2?相對定位  

4.3.3?【課堂任務】：實現網頁元素的疊加顯示  

4.3.4?絕對定位（absolute）  

4.3.5?【課堂任務】：網頁元素固定在頁面右側  

4.3.6?固定定位（fixed）  

4.3.7?【課堂任務】：實現固定位置的頂部導航  

4.3.8?浮動定位（float）  

4.3.9?【課堂任務】：製作順序排列的圖像列表  

4.4　常用網頁佈局方式  

4.4.1?居中佈局  

4.4.2?浮動佈局  

4.4.3?自適應高度的解決方法  

4.5　本章小結  

4.6　課後練習  

第5章?插入文本元素  

5.1　網頁頭信息設置  

5.1.1?設置網頁標題  

5.1.2?設置網頁關鍵字  

5.1.3?設置網頁說明  

5.1.4?插入視口  

5.1.5?設置網頁META信息  

5.1.6?【課堂任務】：設置網頁頭信息  

5.2　在網頁中輸入文本  

5.2.1?在網頁中輸入文本的兩種方法  

5.2.2?【課堂任務】：製作文本介紹頁面  

5.2.3?插入段落  

5.2.4?插入換行符  

5.3　插入特殊的文本對象  

5.3.1?插入水平線  

5.3.2?插入時間  

5.3.3?插入空格和特殊字符  

5.3.4?【課堂任務】：在網頁中插入特殊字符  

5.4　插入列表  

5.4.1?插入無序列表  

5.4.2?【課堂任務】：製作新聞列表  

5.4.3?插入有序列表  

5.4.4?【課堂任務】：製作排行列表  

5.4.5?設置列表屬性  

5.5　【課堂任務】：在網頁中實現滾動文本效果  

5.6　本章小結  

5.7　課後練習  

第6章?插入圖像和多媒體元素  

6.1　插入圖像元素  

6.1.1?【課堂任務】：製作圖像歡迎網頁  

6.1.2?設置圖像屬性  

6.1.3?鼠標光標經過圖像  

6.1.4?【課堂任務】：製作網站導航菜單  

6.2　插入Canvas元素  

6.2.1?Canvas元素概述  

6.2.2?插入Canvas元素  

6.2.3?使用JavaScript實現在畫布中繪圖的流程  

6.2.4?【課堂任務】：在網頁中繪制圓形圖像  

6.3　插入動畫元素  

6.3.1?【課堂任務】：製作Flash動畫頁面  

6.3.2?設置Flash SWF屬性  

6.3.3?插入Flash Video  

6.3.4?瞭解動畫合成  

6.3.5?【課堂任務】：製作網頁焦點輪換圖效果  

6.4　插入插件  

6.4.1?使用插件嵌入音頻  

6.4.2?使用插件嵌入視頻  

6.4.3?【課堂任務】：使用插件在網頁中嵌入視頻  

6.5　HTML5 Audio元素  

6.5.1?插入HTML5 Audio元素  

6.5.2?HTML5支持的音頻文件格式  

6.5.3?【課堂任務】：製作HTML5音頻頁面  

6.6　HTML5 Video元素  

6.6.1?插入HTML5 Video元素  

6.6.2?HTML5支持的視頻文件格式  

6.6.3?Audio與Video元素屬性  

6.6.4?【課堂任務】：製作HTML5視頻頁面  

6.7　本章小結  

6.8　課後練習  

第7章?設置網頁鏈接  

7.1　創建超鏈接  

7.1.1?創建文字和圖像超鏈接  

7.1.2?設置鏈接屬性  

7.1.3?相對路徑和絕對路徑  

7.1.4?【課堂任務】：設置網頁中文字和圖像鏈接  

7.2　錨點鏈接  

7.2.1?插入錨點  

7.2.2?創建錨點鏈接  

7.2.3?【課堂任務】：製作錨點鏈接頁面  

7.3　創建特殊鏈接  

7.3.1?空鏈接  

7.3.2?文件下載鏈接  

7.3.3?腳本鏈接  

7.3.4?【課堂任務】：創建關閉瀏覽器窗口鏈接  

7.3.5?E-mail鏈接  

7.3.6?【課堂任務】：在網頁中創建E-mail鏈接  

7.4　理解超鏈接屬性  

7.4.1?a:link  

7.4.2?a:hover  

7.4.3?a:active  

7.4.4?a:visited  

7.4.5?【課堂任務】：使用CSS樣式設置超鏈接  

7.5　本章小結  

7.6　課後練習  

第8章?插入表單元素  

8.1　插入表單元素  

8.1.1?表單的作用  

8.1.2?常用表單元素  

8.1.3?HTML5表單元素  

8.2　常用表單元素的應用  

8.2.1?表單域  

8.2.2?文本域  

8.2.3?密碼域  

8.2.4?按鈕、“提交”按鈕和“重置”按鈕  

8.2.5?圖像按鈕  

8.2.6?【課堂任務】：製作登錄頁面  

8.2.7?文本區域  

8.2.8?文件域  

8.2.9?隱藏域  

8.2.10?選擇域  

8.2.11?單選按鈕和單選按鈕組  

8.2.12?復選框和復選框組  

8.2.13?【課堂任務】：製作註冊頁面  

8.3　HTML5表單元素的應用  

8.3.1?電子郵件  

8.3.2?Url  

8.3.3?Tel  

8.3.4?搜索  

8.3.5?數字  

8.3.6?範圍  

8.3.7?顏色  

8.3.8?時間和日期相關表單元素  

8.3.9?【課堂任務】：製作留言表單頁面  

8.4　本章小結  

8.5　課後練習  

第9章?網站綜合案例  

9.1　製作企業宣傳網站  

9.1.1?設計分析  

9.1.2?佈局分析  

9.1.3?製作步驟  

9.2　製作房地產宣傳網站  

9.2.1?設計分析  

9.2.2?佈局分析  

9.2.3?製作步驟  

9.3　製作學校教育網站  

9.3.1?設計分析  

9.3.2?佈局分析  

9.3.3?製作步驟  

9.4　本章小結  

9.5　課後練習