第一章揭開Dreamweaver CS5的面紗
教學(xué)課題：Dreamweaver CS5簡介及工作界面
教學(xué)目標(biāo)：1、初識Dreamweaver CS5軟件。
2、熟悉Dreamweaver CS5的窗口界面。
教學(xué)重點(diǎn)：Dreamweaver CS5的窗口界面。
教學(xué)難點(diǎn)：Dreamweaver CS5的窗口界面
教學(xué)方法：任務(wù)驅(qū)動法、小組合作學(xué)習(xí)法。
教學(xué)課時：1節(jié)
教學(xué)過程：
1、導(dǎo)入：略
2、講解新課
Dreamweaver 最初是由美國的Macromedia公司推出的一個“所見即所得”的網(wǎng)站開發(fā)工具。2005年，Macromedia公司被Adobe公司收購，其軟件的版本號也逐步和Adobe系列軟件相統(tǒng)一。
Dreamweaver不僅僅是優(yōu)秀的“所見即所得”的編輯軟件，它還兼顧HTML源代碼編輯，用戶可以在兩種不同的模式之間切換，滿足初學(xué)者和開發(fā)者不同的需求。Dreamweaver還有許多出色的設(shè)計(jì)理念，如行為、時間軸和資源等，可以讓用戶無需編寫復(fù)雜的代碼，就能輕松地設(shè)計(jì)出各種動態(tài)效果。
Dreamweaver CS5是Dreamweaver的最新版本，作為業(yè)界領(lǐng)先的網(wǎng)頁開發(fā)軟件，其在Dreamweaver CS4的基礎(chǔ)上增加了許多激動人心的新功能
l 支持HTML 5
l 檢查瀏覽器兼容性
l 集成CMS支持
l 檢查動態(tài)網(wǎng)頁
l Widget插件支持
l 多屏幕預(yù)覽
l PHP自定義代碼提示
教學(xué)課題：Dreamweaver CS5的工作界面
教學(xué)目標(biāo)：熟悉Dreamweaver CS5的窗口界面。
教學(xué)重點(diǎn)：Dreamweaver CS5的窗口界面
教學(xué)難點(diǎn)：屬性面板和浮動面板組
教學(xué)方法：任務(wù)驅(qū)動法、小組合組學(xué)習(xí)法。
教學(xué)課時：1節(jié)
教學(xué)過程：1、導(dǎo)入新課：略
2、講解新課：
在首次啟動Dreamweaver CS5時，將顯示【Dreamweaver 起始頁】界面，幫助用戶快速創(chuàng)建常用的項(xiàng)目文檔，或者打開已有的文檔等（如圖1-1所示）。如果希望不再顯示起始頁，可選擇“編輯”-“首選參數(shù)”命令，彈出“首選參數(shù)”對話框，取消選擇“顯示歡迎屏幕”復(fù)選框，單擊“確定”按鈕完成設(shè)置。再次啟動Dreamweaver CS5后，將不再顯示起始畫畫。勾選起始頁上的“不再顯示”選框，也可以不再顯示起始畫面。
Dreamweaver CS5的工作界面（如圖1-2所示），包括標(biāo)題欄、菜單欄、工具欄、插入欄、編輯窗口、屬性面板和浮動面板組七個部分。
圖1-1
圖1-2
1.2.1 Dreamweaver CS5的標(biāo)題欄（如圖1-3所示）：
標(biāo)題欄位于工作區(qū)的上部，包括軟件的標(biāo)識按鈕、工作區(qū)布局選擇菜單、搜索框、CS Live服務(wù)菜單以及窗口控制按鈕（最大化、最小化和關(guān)閉按鈕）。
圖1-3
1.2.2 Dreamweaver CS5的菜單欄（如圖1-4所示）：
菜單欄共有10個菜單，即“文件”、“編輯”、“查看”、“插入”、“修改”、“格式”、“命令”、“站點(diǎn)”、“窗口”、“幫助”。
圖1-4
1.2.3 Dreamweaver CS5的快捷工具欄（如圖1-5所示）：
快捷工具欄位于菜單欄下面，包括“插入”、“文檔”、和“標(biāo)準(zhǔn)”三項(xiàng)。
l “插入”快捷工具欄，共有8類對象控制工具，即：“常用”、“布局”、“表單”、“數(shù)據(jù)”、“Spy”、“InContext Editing”、“文本”、“收藏夾”。
l “文檔”快捷工具欄，共有11個功能按鈕，即：“代碼”按鈕、“拆分”按鈕、“設(shè)計(jì)”按鈕、“、實(shí)時代碼”按鈕、“檢查瀏覽器兼容性”按鈕、“實(shí)時視圖”按鈕、“檢查”按鈕、“在瀏覽器中預(yù)覽/調(diào)試”按鈕、“可視化助理”按鈕、“刷新設(shè)計(jì)視圖”按鈕、“標(biāo)題”文本框。
l “標(biāo)準(zhǔn)”快捷工具欄，包括一些常用的操作按鈕，即：“新建”、“打開”、“瀏覽”、“保存”、“全部保存”、“打印代碼”、“剪切”、“復(fù)制”、“粘貼”、“撤銷”、“重做”等按鈕。
圖1-5
1.2.4網(wǎng)頁編輯區(qū)(如圖1-6所示):
在快捷工具欄下面的區(qū)域就是網(wǎng)頁編輯區(qū)，用戶可以在此區(qū)域?qū)W(wǎng)頁內(nèi)容進(jìn)行編輯。如輸入文字、插入表格、插入圖片、插入動畫等。
圖1-6
1.2.5“屬性”面板(如圖1-7所示):
圖1-7
屬性面板位于網(wǎng)頁編輯區(qū)的下方，網(wǎng)頁中的不同對象有不同的屬性，屬性面板會隨著網(wǎng)頁編輯區(qū)內(nèi)對象的不同而變化。如：文字有字體、字號、對齊方式等屬性，圖像有大小、鏈接、替換文字等屬性，Flash動畫也有相應(yīng)的屬性面板。
1.2.6浮動面板(如圖1-8所示):
其他面板統(tǒng)稱為浮動面板，它們浮動于編輯窗口之外，可以放置在屏幕的任何位置。按F4鍵可以將浮動面板隱藏，再按F4鍵，隱藏起來的浮動面板又會在原來的位置出現(xiàn)。
圖1-8
3、作業(yè)：上機(jī)熟悉Dreamweaver CS5的工作界面。
第二章為我們的網(wǎng)站安家（構(gòu)建站點(diǎn)）
教學(xué)課題：創(chuàng)建本地站點(diǎn)
教學(xué)目標(biāo)：1、理解什么是站點(diǎn)。
2、學(xué)習(xí)創(chuàng)建本地站點(diǎn)的方法。
教學(xué)重點(diǎn)：創(chuàng)建本地站點(diǎn)的二種方法。
教學(xué)難點(diǎn)：創(chuàng)建本地站點(diǎn)的二種方法。
教學(xué)方法：任務(wù)驅(qū)動法、小組合組學(xué)習(xí)法。
教學(xué)課時：1節(jié)
教學(xué)過程：1、導(dǎo)入新課：略
2、講解新課：
站點(diǎn)簡單的說就是一個文件夾，在這個文件夾里包含了網(wǎng)站中用到的所有文件，通過站點(diǎn)可以對網(wǎng)站的相關(guān)頁面及各類素材進(jìn)行統(tǒng)一管理，還可以使用站點(diǎn)管理實(shí)現(xiàn)將文件上傳到網(wǎng)頁服務(wù)器，測試網(wǎng)站。
演示案例1：創(chuàng)建一個本地站點(diǎn)
1、【需求分析】創(chuàng)建一個名稱為“美麗的九寨溝”的本地站點(diǎn)/【完成效果】（如圖2-1所示）
圖2-1
2、【技能要點(diǎn)】
使用新建站點(diǎn)或管理站點(diǎn)向?qū)Т罱ㄕ军c(diǎn)
3、【操作步驟】
步驟1：在D盤上新建一文件夾“jiuzhaigou”。
步驟2：啟動Dreamweaver CS5程序，在菜單欄中，選擇站點(diǎn)->新建站點(diǎn)或者選擇站點(diǎn)->管理站點(diǎn)->新建。（如圖2-2所示）
圖2-2
步驟3：在“站點(diǎn)設(shè)置對象”對話框中，選擇“站點(diǎn)”選項(xiàng)卡，在“站點(diǎn)名稱”文本框中，輸入“美麗的九寨溝”，單擊“本地站點(diǎn)文件夾”右側(cè)的“瀏覽文件夾”按鈕，選擇準(zhǔn)備使用的站點(diǎn)文件夾D:\jiuzhaigou，單擊“選擇”按鈕。（如圖2-3所示）
圖2-3
步驟5：在“管理站點(diǎn)”對話框中，顯示剛剛新建的站點(diǎn)，單擊“完成”按鈕。在“文件”面板中，即可看到創(chuàng)建的站點(diǎn)文件，通過以上步驟即可完成本地站點(diǎn)的創(chuàng)建操作。（如圖2-1所示）
教學(xué)課題：構(gòu)建站點(diǎn)結(jié)構(gòu)
教學(xué)目標(biāo)：為站點(diǎn)添加相應(yīng)的網(wǎng)頁文件和存放編輯網(wǎng)頁所需的各種圖片、媒體、庫以及樣式表等的文件夾。
教學(xué)重點(diǎn)：構(gòu)建站點(diǎn)結(jié)構(gòu)的方法。
教學(xué)難點(diǎn)：構(gòu)建站點(diǎn)結(jié)構(gòu)的方法及各種文件夾的命名原則。
教學(xué)方法：任務(wù)驅(qū)動法、小組合組學(xué)習(xí)法。
教學(xué)課時：1節(jié)
教學(xué)過程：1、導(dǎo)入新課：略
2、講解新課：
一、構(gòu)建站點(diǎn)結(jié)構(gòu)
演示案例1：為本地站點(diǎn)添加首頁和各種文件夾。
為“美麗的九寨溝”站點(diǎn)添加首頁和各種文件夾/【完成效果】（如圖2-4所示）
圖2-4
1、【操作步驟】
步驟1：在文件面板中右擊站點(diǎn)根目錄，選擇新建文件命令（如圖2-5所示）。
圖2-5
步驟2：將此網(wǎng)頁文件改名為index.html，即為該網(wǎng)站的首頁，也叫引導(dǎo)頁。
步驟3：繼續(xù)在文件面板中右擊站點(diǎn)根目錄，選擇新建文件夾，將文件夾改名為images，此文件夾為圖片文件夾。
步驟4：同步驟3，依次新建媒體文件夾media；庫文件夾library和樣式表文件夾css。（如圖2-4所示）
說明：站點(diǎn)結(jié)構(gòu)完成后，我們添加上的網(wǎng)頁文件和各種文件夾顯示在 D:\jiuzhaigou中（如圖2-6所示）。
圖2-6
教學(xué)課題：管理本地站點(diǎn)
教學(xué)目標(biāo)：對多個網(wǎng)站進(jìn)行管理，完成站點(diǎn)之間的切換、添加、刪除等操作。
教學(xué)重點(diǎn)：站點(diǎn)之間的切換、添加、刪除等操作。
教學(xué)難點(diǎn)：站點(diǎn)之間的切換、添加、刪除。
教學(xué)方法：任務(wù)驅(qū)動法、小組合組學(xué)習(xí)法。
教學(xué)課時：1節(jié)
教學(xué)過程：1、導(dǎo)入新課：略
2、講解新課：
通常dreamweaver站點(diǎn)管理器需要對多個網(wǎng)站進(jìn)行管理，完成站點(diǎn)之間的切換、添加、刪除等操作。
單擊文件面板中下拉菜單，選擇管理站點(diǎn)（如圖2-7所示）。在管理站點(diǎn)對話框中（如圖2-8所示）可以對站點(diǎn)文件和文件夾進(jìn)行管理，也可以增加、復(fù)制、刪除站點(diǎn)。
1、打開站點(diǎn)：在運(yùn)行Dreamweaver CS5之前，需要先打開新的站點(diǎn)，還可以單擊文檔窗口右邊的【文件】面板中左邊的下拉列表，在彈出的下拉列表中，選擇準(zhǔn)備打開的站點(diǎn)，單擊即可打開相應(yīng)的站點(diǎn)。
2、刪除站點(diǎn)：在“管理站點(diǎn)”對話框中，選擇需要刪除的站點(diǎn)，在對話框中，單擊“刪除”按鈕，即可站點(diǎn)刪除。
3、復(fù)制站點(diǎn)：在“管理站點(diǎn)”對話框中，選擇需要復(fù)制的站點(diǎn)，在對話框中，單擊“復(fù)制”按鈕，即可復(fù)制站點(diǎn)。
4、移動和復(fù)制文件：在“文件”面板中，使用鼠標(biāo)右鍵單擊，選擇要移動和復(fù)制的文件，在彈出的快捷菜單中，選擇“編輯”選項(xiàng)，在子菜單中，選擇相應(yīng)的菜單項(xiàng)進(jìn)行設(shè)置。
圖2-7 圖2-8
網(wǎng)站已經(jīng)搭建完成，下面我們就可以制作第一個網(wǎng)頁了。
第三章制作第一個文本頁面
教學(xué)課題：設(shè)置頁面頭內(nèi)容
教學(xué)目標(biāo)：掌握設(shè)置頁面頭內(nèi)容的方法。
教學(xué)重點(diǎn)：1、頁面頭內(nèi)容的含義。
2、設(shè)置頁面頭內(nèi)容的方法。
教學(xué)難點(diǎn)：設(shè)置頁面頭內(nèi)容的方法。
教學(xué)方法：任務(wù)驅(qū)動法、小組合組學(xué)習(xí)法。
教學(xué)課時：1節(jié)
教學(xué)過程：1、導(dǎo)入新課：略
2、講解新課：
演示案例1：設(shè)置頁面頭內(nèi)容
1、【操作步驟】
步驟1：設(shè)置網(wǎng)頁標(biāo)題
（1）打開“美麗的九寨溝”網(wǎng)頁。如圖3-1所示。
圖3-1
（2）在標(biāo)題處將網(wǎng)頁標(biāo)題更改為“美麗的九寨溝”。如圖3-2所示。
圖3-2
說明：網(wǎng)頁標(biāo)題可以是中文、英文或符號，顯示在瀏覽器的標(biāo)題欄中。當(dāng)網(wǎng)頁被添加入收藏夾時，網(wǎng)頁標(biāo)題又作為網(wǎng)頁的名字出現(xiàn)在收藏夾中。
步驟2：插入作者和版權(quán)信息
（1）單擊如圖3-3所示列表中的“META”按鈕，彈出“META”對話框。
（2）以定義作者信息為例，在“屬性”欄中選擇“名稱”屬性，在“值”文本框中輸入值為author，在“內(nèi)容”文本框中輸入作者“張紅”，即作者信息。如圖3-4所示。
圖3-3
圖3-4
（3）如果希望設(shè)置版權(quán)聲明，在“值”文本框中輸入copyright，在“內(nèi)容”文本框中輸入版權(quán)聲明，如圖3-5如示。
圖3-5
（4）如果希望設(shè)置網(wǎng)頁編輯器的說明，在“值”文本框中輸入Generator,在“內(nèi)容”文本框中輸入所用的網(wǎng)頁編輯器，如圖3-6所示。
圖3-6
步驟3：插入關(guān)鍵字
（1）單擊如圖3-3所示列表中的“關(guān)鍵字”按鈕，彈出“關(guān)鍵字”對話框。
（2）在“關(guān)鍵字”對話框中輸入關(guān)鍵字即可。如圖3-7所示。
圖3-7
步驟4：插入說明
（1）單擊如圖3-3所示列表中的“說明”按鈕，彈出“說明”對話框。
（2）在“說明”對話框中輸入說明即可。如圖3-8所示。
圖3-8
步驟5：插入刷新時間
（1）單擊如圖3-3所示列表中的“刷新”按鈕，彈出“刷新”對話框，刷新主要適用于兩種情況。
（2）一種是網(wǎng)頁地址發(fā)生變化，可以在原地址的網(wǎng)頁上使用刷新功能，到設(shè)定時間后，瀏覽器自動跳轉(zhuǎn)到新的網(wǎng)頁。如圖3-9所示，經(jīng)過8秒后，瀏覽器自動跳轉(zhuǎn)到指定的網(wǎng)頁。
圖3-9
（3）第二種網(wǎng)頁經(jīng)常更新，可以讓瀏覽器在若干秒之后自動刷新網(wǎng)頁。如圖3-10所示，8秒后，網(wǎng)頁自動刷新。
圖3-10
步驟6：插入基準(zhǔn)鏈接
（1）單擊如圖3-3所示列表中的“基礎(chǔ)”按鈕，彈出“基礎(chǔ)”對話框。在Herf文本框中輸入基礎(chǔ)URL地址，在“目標(biāo)”下拉列表中選擇鏈接頁面在哪個框架集中打開，其中包括5個選項(xiàng)，指定所有鏈接的文檔應(yīng)在哪個框架或窗口中打開。如圖3-11所示。
圖3-11
教學(xué)課題：網(wǎng)頁中的文本與文檔
教學(xué)目標(biāo)：1、掌握頁面中文本的輸入和編輯方法
2、掌握設(shè)置有序列表和無序列表的方法
3、掌握插入日期和特殊字符的方法
教學(xué)重點(diǎn)：1、文本的輸入和編輯方法。
2、設(shè)置有序列表和無序列表的方法。
3、插入日期和特殊字符的方法。
教學(xué)難點(diǎn)：文本的輸入和編輯方法。
教學(xué)方法：任務(wù)驅(qū)動法、小組合組學(xué)習(xí)法。
教學(xué)課時：1節(jié)
教學(xué)過程：1、導(dǎo)入新課：略
2、講解新課：
演示案例1：制作文本頁面，完成效果如圖3-12如示。
圖3-12
【操作步驟】
步驟1：建立網(wǎng)站站點(diǎn)。
（1）在本地硬盤上新建文件夾，名稱為“wangye”，作為站點(diǎn)文件夾。
（2）啟動Dreamweaver CS5，新建站點(diǎn)，名稱為“wenben”。
步驟2：新建網(wǎng)頁文件
（1）右擊站點(diǎn)根目錄通過新建文件添加網(wǎng)頁文件，名稱為“xingfu.html”。
步驟3．輸入普通文本。
在文檔窗口中輸入“中國人幸福感的十大標(biāo)準(zhǔn)”，每輸入一行，直接按回車鍵換行，輸入文本后的效果如圖3-13所示。
圖3-13
說明：Dreamweaver中普通文本的輸入與其他文字處理軟件基本一樣，有以下兩種方式。
第一是在文檔編輯窗口中直接由鍵盤輸入。第二是復(fù)制已有的文本。
步驟4．設(shè)置文本屬性。
圖3-14是文本屬性面板，文本的字體、字號、顏色等屬性需要添加樣式表來實(shí)現(xiàn)。
圖3-14
（1）設(shè)置文本標(biāo)題：
l 打開編輯字體列表對話框。
選擇文本標(biāo)題，右擊，選擇“字體”->“編輯字體列表”，如圖3-15所示。
圖3-15
l 添加中文字體。
從“可用字體”框中選擇需要的字體，單擊“左移”按鈕將字體類型移動到“選擇的字體”框后，單擊字體列表的“加號”按鈕，將選中的字體類型添加到字體列表中，如圖3-16所示。同樣可以單擊“右移”按鈕將已選擇的字體類型刪除。
圖3-16
l 選擇自己需要的字體后，會彈出新建CSS對話框，在該對話框中選擇或輸入選擇器名稱（如圖3-17所示）。
圖3-17
l 此時“ CSS樣式”面板如圖3-18所示。
圖3-18
l 在“ CSS樣式”中雙擊“.biaoti”樣式，打“.biaoti的CSS規(guī)則定義”對話框，如圖3-19所示。
圖3-19
l 在此對話框中設(shè)置字體為黑體、字號為36像素、顏色為紅色，此時網(wǎng)頁標(biāo)題如圖3-20所示。
圖3-20
（2）設(shè)置文本內(nèi)容：同設(shè)置文本標(biāo)題的方法，將文本內(nèi)容設(shè)置為宋體、24像素、黑色。如圖3-21所示。
圖3-21
步驟5：設(shè)置文本的對齊方式
l 選中文本。
l 打開格式菜單，選擇對齊，即可設(shè)置文本的對齊方式。
步驟6．插入水平線。
（1）將光標(biāo)置于標(biāo)題后面。
（2）選擇“插入”→“HTML”→“水平線”命令，效果如圖3-22所示。
圖3-22
