教學(xué)課題：購房中心網(wǎng)頁
教學(xué)目標(biāo)：1、熟練掌握插入和編輯圖像的方法
2、掌握調(diào)整圖文混排效果的方法
教學(xué)重點(diǎn)：1、插入圖像
2、設(shè)置圖像屬性
教學(xué)難點(diǎn)：設(shè)置圖像屬性
教學(xué)方法：任務(wù)驅(qū)動法、小組合組學(xué)習(xí)法。
教學(xué)課時：2節(jié)
教學(xué)過程：
1、導(dǎo)入：略
2、講解新課
演示案例1：購房中心網(wǎng)頁
【需求分析】：用戶利用家里因特網(wǎng)，了解房地產(chǎn)樓盤項(xiàng)目的規(guī)模和環(huán)境，查詢和觀看各種房屋戶型。要求房屋的寫實(shí)照片作為背景，導(dǎo)航欄簡潔清晰，通過文字和圖片的編排，體現(xiàn)出房產(chǎn)項(xiàng)目的人文氣息。
【技能要點(diǎn)】
- 插入圖像
- 設(shè)置圖像屬性
【操作步驟】
步驟1：選擇“文件”-“打開”命令，將“Ch04\購房中心網(wǎng)頁\index.htm”文件打開，將光標(biāo)置入空白單元格中。如圖4-2
圖4-2
步驟2：單擊“插入”面板中“常用”選項(xiàng)卡的“圖像”按鈕 
，在彈出的“選擇圖像源文件”對話框中選擇“Ch04\購房中心網(wǎng)頁images\img_01.jpg”文件，單擊確定按鈕完成圖片的插入。
圖4-3
步驟3：選中圖4-3，在“屬性”面板中將“寬”、“高”分別設(shè)為385、550，并在“替換”選項(xiàng)右側(cè)的文本框中輸入“美好家園”為圖片添加說明文字，如圖4-4。
圖4-4
步驟4：使用相同的方法，將“img_02.jpg”、“img_03.jpg”、“img_04.jpg”、“img_05.jpg”“img_06.jpg”插入到其他相應(yīng)單元格中,將“img_07.jpg”作為背景插入相應(yīng)單元格中。
步驟5：在單元格中輸入文字如下，效果如圖4-1
感受自然
FEEl NATURE
風(fēng) 云間隙，
何妨放下一切，讓思想盡情隨波逐流。
這里珍藏著兩條原生河道，
它們經(jīng)歷著這塊土地百年的風(fēng)雨和陽光，
沉淀著醇厚的人文意蘊(yùn)，
就連上方飄渺的空氣都流滿時間的味道。
步驟6：將光標(biāo)放在“沉淀著醇厚的人文意蘊(yùn)，”后面，單擊“插入”面板中“常用”選項(xiàng)卡中的圖像按鈕 
，在彈出的“選擇圖像源文件”對話框中選擇“Ch04\購房中心網(wǎng)頁\images\img_.jpg”文件，單擊確定按鈕完成圖片的插入。
步驟7：保持圖像的選取狀態(tài)，在“屬性”面板的“對齊”選項(xiàng)列表中選擇“右對齊”選項(xiàng)，將“水平邊距”選項(xiàng)設(shè)為19。如圖4-5
圖4-5
調(diào)整同一行文字與圖像相對位置，“對齊”選項(xiàng)提供9種方式：
“默認(rèn)值”：通常指定基線對齊。
“基線”和“底部”：將文本的基線與選定對象的底部對齊。
“頂端”：將當(dāng)前行中最高文本的頂端與圖像的頂端對齊。
“居中”：將當(dāng)前行的基線與圖像的中部對齊。
“文本上方”：將文本行中最高字符的頂端與圖像的頂端對齊。
“絕對居中”：將當(dāng)前行中文本的中部與圖像的中部對齊。
“絕對底部”：將文本行字母的底部與圖像的底部對齊。
“左對齊”：將所選的圖像放置在左邊，文本在圖像的右側(cè)換行。
“右對齊”：將所選的圖像放在右邊，文本在圖像的左側(cè)換行。
步驟8：保存文檔，按<F12>鍵預(yù)覽效果，如圖4-6。
圖4-6
【知識鏈接】
（1）圖像格式：Web頁中通常使用的圖像文件有JPEG、GIF、PNG 3中格式。為了保證瀏覽者下載網(wǎng)頁的速度，網(wǎng)站設(shè)計(jì)者常使用JPEG和GIF兩種格式的圖像。
（2）插入圖像方法：一是單擊“插入”面板中“常用”選項(xiàng)卡的“圖像”按鈕 的黑色三角形，在下拉菜單中選“圖像”選項(xiàng)；二是選擇菜單“插入”-“圖像”命令。
（3）設(shè)置圖像屬性：插入圖像后，在“屬性”面板中顯示該圖像的屬性。
“寬”和“高”選項(xiàng)：以像素為單位指定圖像的寬度和高度。
“源文件”：指定圖像的源文件。
“鏈接”：指定單擊圖像時要顯示的網(wǎng)頁文件。
“替換”：當(dāng)圖片不能在瀏覽器中正常顯示時，用來替換圖片的顯示。
“邊框”：指定圖像邊框的寬度，默認(rèn)無邊框。
“對齊”：指定同一行上的圖像和文本的對齊方式。
（4）圖像占位符：在網(wǎng)頁布局時，設(shè)計(jì)者需要先設(shè)計(jì)圖像在網(wǎng)頁中的位置，等方案通過后，再將這個位置變成具體圖像。占位符一般需設(shè)置大小、顏色和文本標(biāo)簽。
3、作業(yè)：上機(jī)練習(xí)，打開“Ch04\家具特賣網(wǎng)頁\index.htm”文件，完成家具特賣網(wǎng)頁。
教學(xué)課題：圣誕裝飾網(wǎng)頁
教學(xué)目標(biāo)：學(xué)會插入Flash動畫、JavaApplet小程序、ActiveX控件等多媒體，以豐富網(wǎng)頁的內(nèi)容。
教學(xué)重點(diǎn)：插入Flash動畫
教學(xué)難點(diǎn)：其它多媒體元素的使用
教學(xué)方法：任務(wù)驅(qū)動法、小組合組學(xué)習(xí)法。
教學(xué)課時：2節(jié)
教學(xué)過程：
1、導(dǎo)入：略
2、講解新課
演示案例1：圣誕裝飾網(wǎng)頁
【需求分析】：本例是為圣誕裝飾公司制作的網(wǎng)頁，主要是對圣誕樹不同規(guī)格產(chǎn)品的介紹，吸引人們關(guān)注和購買圣誕裝飾品。
【技能要點(diǎn)】
- 插入Flash動畫
【操作步驟】
步驟1：選擇“文件”-“打開”命令，將“Ch04\圣誕裝飾網(wǎng)頁\index.htm”文件打開，將光標(biāo)置入空白單元格中。如圖4-9
圖4-9
步驟2：單擊“插入”面板中“常用”選項(xiàng)卡的“媒體”按鈕 
，在彈出的“選擇SWF”對話框中選擇“Ch04\圣誕裝飾網(wǎng)頁\images\DH.swf”文件，單擊確定按鈕完成Flash影片的插入。如圖4-10
圖4-10
說明：Dreamweaver CS5只支持Flash SWF（.swf）文件，因?yàn)樗荈lash（.fla）文件的壓縮版本，便于在Web上查看。
步驟3：選中插入的動畫，單擊“屬性”面板中的“播放”按鈕，在文檔窗口中預(yù)覽效果。單擊“屬性”面板中的“停止”按鈕，可以停止播放。如圖4-11。
圖4-11
步驟4：保存文檔，按<F12>鍵預(yù)覽效果，如圖4-12。
圖4-12
說明：當(dāng)網(wǎng)頁中包含兩個以上Flash動畫時，要預(yù)覽所有的Flash內(nèi)容，可以按<Ctrl+Alt+Shift+P>快捷鍵。
【知識鏈接】
（1）插入FLV：在網(wǎng)頁中可以輕松添加FLV視頻，但用戶必須安裝Flash Player 8或更高版本。插入方法：“插入”-“常用”面板-“媒體”-“FLV”選項(xiàng)，在文檔窗口中出現(xiàn)FLV占位符。
（2）插入Shockwave影片：在網(wǎng)頁上能夠被快速下載，可以在大多數(shù)常用瀏覽器中播放。插入方法：“插入”-“常用”面板-“媒體”-“Shockwave”選項(xiàng)，在文檔窗口中出現(xiàn)FLV占位符。在“屬性”面板中修改“寬”和“高”，單擊“播放”按鈕測試效果。
（3）插入Applet程序：Applet是用Java編程語言開發(fā)的、可嵌入Web頁中的小型應(yīng)用程序。方法同上。
（4）插入ActiveX控件：ActiveX控件也稱OLE控件，它是可以充當(dāng)瀏覽器插件的可重復(fù)使用的組件，只在Windows系統(tǒng)上的Internet Explorer中運(yùn)行。方法同上。
3、作業(yè)1：上機(jī)練習(xí)，打開“Ch04\動感音樂網(wǎng)頁\index.htm”文件，完成動感音樂網(wǎng)頁。
作業(yè)2：上機(jī)練習(xí)，打開“Ch04\野生動物網(wǎng)頁\index.htm”文件，完成野生動物網(wǎng)頁。
