第一篇：實驗七：動畫與視頻制作實踐

實驗七：動畫與視頻制作實踐

學號：201213210127姓名：***

一、實驗目的1.了解動畫和視頻的基本原理

2.熟悉和掌握制作網(wǎng)頁動畫、變形動畫和視頻處理

3.培養(yǎng)創(chuàng)新意識，不拘泥于常規(guī)方法和設(shè)計理念，捕捉突發(fā)奇想的靈感

二、實驗內(nèi)容

1、制作變形動畫

a)用ps打開光盤“練習素材動畫素材變形動畫素材”中的兩個文件：Demo-5a.bmp和demo-5b.bmp。

b)將demo_5b復制并粘貼在demo_5a之上，點擊“時間軸”，點擊“創(chuàng)建幀動畫”，點擊右上角小三角形，點“從圖層建立幀”。

c)動畫完成，存儲為“實驗7_變形動畫.gif”。

2、在ppt中使用動畫

a)打開ppt，把剛做好的“實驗7_變形動畫.gif”動畫插入到演示頁中。b)插入光盤“練習素材聲音素材wav簡短音樂”中的“托卡塔.wav”到演示頁中。

c)保存演示文稿為“實驗7_配樂動畫.pps”

3、制作網(wǎng)頁動畫

a)用PS工具打開配套光盤“練習素材動畫素材網(wǎng)頁動畫素材”文件夾中的“兔子01.bmp至兔子08.bmp”圖像。

b)按順序添加到時間軸。

c)動畫完成，存儲為“實驗7_GIF動畫.gif”。

4、繪制動畫

a)打開flash軟件，輸入“welcome”，用關(guān)鍵幀制作動畫。

b)保存動畫為“實驗7_flash動畫.gif”。

三、思考題

1、動畫節(jié)奏是有時間幀來控制。

2、格式統(tǒng)一。

3、不能。

4、pal制式每秒25幀，ntsc制式每秒30幀。

第二篇：制作Authorware視頻動畫(精)

在目前的多媒體課件制作中，經(jīng)常需要調(diào)用視頻片段，在Authorware中使用視頻動畫一般通過數(shù)字電影圖標來導入，但數(shù)字電影圖標所提供的控制功能比較簡單，不能完全滿足實際教學的需要。不過隨著Authorware版本的提高（5.2及以上），我們可以用各種方法來實現(xiàn)對數(shù)字電影的控制，以下是實現(xiàn)控制的不同方法。

基本型

啟動Authorware，新建一文件，命名為“電影控制”（下同）。在主流程線上拖入一數(shù)字電影圖標，雙擊數(shù)字電影圖標，在屬性對話框中選擇“計時”，在“播放”中選擇“直到為真”，在下面的文本框中輸入一個變量或表達式來實現(xiàn)對電影的控制。例如輸入“MouseDown”，則數(shù)字電影在播放過程中，只要單擊鼠標左鍵，數(shù)字電影就會停止播放。這種方法適合于要求不高的制作，控制也是最簡單的。

傻瓜型

之所以稱為“傻瓜型”，是因為并不需要太多復雜的設(shè)置就可以實現(xiàn)對數(shù)字電影的控制。

方法一：在主菜單欄中單擊[插入]，選擇[Media控件]下的[DirectMedia Xtra]，在出現(xiàn)的對話框中點擊[瀏覽文件]，選擇所需要的電影文件，并在播放選項中勾選“滑桿控制”，單擊[確定]。運行程序，可以看到出現(xiàn)了一個類似Windows媒體播放器的播放界面，可以很方便地進行播放、停止、繼續(xù)等操作，并可以用滑桿任意調(diào)整播放進度（圖1為思想教育課播放的視頻片段）。

方法二：在知識對象對話框中選擇“電影控制器”，并將之拖到主流程線上，在隨后出現(xiàn)的對話框中對“電影控制器”進行設(shè)置：首先出現(xiàn)“電影控制器”的簡要說明，單擊[下一步]→選擇所需的電影文件，也可以文本框中直接輸入路徑，單擊[下一步]→選擇電影控制器所需的控制按鈕，默認狀態(tài)下提供了播放、暫停、快進、快退和退出，可根據(jù)所需選擇，單擊[下一步]→對所需的電影進行大小的設(shè)置，單擊[下一步]→調(diào)整電影在屏幕中的位置，單擊[下一步]→單擊[完成]。至此，一個電影控制器就做成了，運行程序，界面如圖2所示，控制也很方便。

函數(shù)控制型

主要運用Authorware自帶的一些內(nèi)部函數(shù)來實現(xiàn)對電影的控制。

方法一：在主流程線上拖入一個電影圖標，命名為“電影”，雙擊電影圖標，導入所需的電影→在主流程線上拖入一交互圖標，命名為“電影控制”→在交互圖標右側(cè)分別拖入3個計算圖標，分別命名為“播放”、“暫?！?、“退出”，響應(yīng)類型都選擇“按鈕”響應(yīng)→在計算圖標中分別輸入如圖3所示的內(nèi)容（注意：在關(guān)閉“暫?！庇嬎銏D標窗口時，由于使用了一個自定義變量“Pause”，系統(tǒng)會出現(xiàn)一個對話框，要求輸入自定義變量的初始值，這里把初始值定為1），整個程序流程圖如圖所示。

方法二：在主流程線上拖入一個計算圖標，雙擊計算圖標，在其中輸入“JumpOutReturn(“D:hero2001sthsdvd.exe”,“F: emp1.rm”)”，其中“D:hero2001sthsdvd.exe”為筆者所安裝的豪杰超級解霸2001的路徑，“F: emp1.rm”為所要播放的RM格式的文件所在路徑，利用這種調(diào)用外部程序的方法，我們可以用來播放Authorware本身不支持的一些電影格式（當然，你調(diào)用的外部程序必須支持），并且也可實現(xiàn)全面控制。

第三篇：多媒體作品制作_動畫、視頻

多媒體作品制作＿動畫、視頻

所屬科目：多媒體技術(shù)應(yīng)用

課 時：一課時

課 型：新授課

教學方法：

1、演示教學法

2、分析討論法

3、作品點評法

教學目標：

（一）在知識、技能方面

1、能通過分析作品，揭示動畫、視頻信息在表達中的作用。

2、了解動畫、視頻表達主題的特點。

（二）過程、方法方面

1、能根據(jù)主題和表達目標的需求選擇動畫、視頻信息。

2、明確運用動畫、視頻信息能夠更好地表達事物的變化過程的思想。

（三）情感態(tài)度與價值觀方面

1、體會計算機動畫在表達主題中的效果與特點。

2、增強對計算機動畫應(yīng)用的進一步認識。

3、滲透德育內(nèi)容，培養(yǎng)學生良好的思想情操。

重點難點：

1、動畫、視頻在表達思想上的特點

2、動畫、視頻的選擇

3、理解動畫、視頻在表達思想上的特點

教學媒體：網(wǎng)絡(luò)電腦室

在線資源：（1）互聯(lián)網(wǎng)教學資源；（2）學校個性資源

學生分析：大部分學生已經(jīng)具備了一定信息技術(shù)基礎(chǔ)知識，如上網(wǎng)、玩游戲等。

教材分析：《信息技術(shù)基礎(chǔ)》（科學出版社）

教學過程：

一、新課引入

〖教師〗演示：圖文和一段視頻

內(nèi)容：劉翔獲得奧運金牌的報道

〖學生〗觀看

二、動畫、視頻的視覺特征

〖教師〗演示動畫與源文件：太陽臉譜

〖教師〗講解“視覺暫留特性”：

為什么一幅幅圖片連續(xù)播放就會形成動畫呢？它是利用了視覺暫留特征。每一幅圖像從我們的眼前消失時，留在我們眼睛視網(wǎng)膜上的圖像并不會馬上清除，還會延遲大約70毫秒，如果在這段時間內(nèi)，下一幅圖像又出現(xiàn)了，就會在我們眼睛里形成連續(xù)的畫面。如果畫面的內(nèi)容是有關(guān)聯(lián)的，我們看到是一個動態(tài)的過程。

一般情況下，如果動畫每秒播放12幅以上畫面，視頻每秒放映25幅畫面以上，則人眼看到的就是連續(xù)的畫面。

注：此內(nèi)容并非重點，且學生容易理解，故學生實踐安排在課外。

三、動畫、視頻的特點

動畫、視頻的共同特點

與文字、圖片相比，動畫、視頻素材適于表達事物的動態(tài)變化過程，渲染效果更強，在表達思想上具有更直觀、具體的特點。

1、視頻的特點

是將多幅實地拍攝的圖像信息按照一定的速度連續(xù)播放，要體會真實畫面變化時，要用視頻信息來完成。

如歷史課上的一些史實的講解，語文課上人物性格的刻畫等，用視頻表達可以加深學生的理解。因為是現(xiàn)場的真實記錄，使觀眾有如身臨其境之感，感染力非常強。

如視頻作品《劉翔獲得跨欄奧運冠軍》，你們看了有什么感想？

真實地再現(xiàn)了劉翔的整個比賽過程，記錄了一個非常重要的歷史時刻，感染力非常強，每一個中國人看了都會很興奮、很自豪、很激動。這是動畫或其它媒體無法比擬的。

2、動畫的特點

（1）動畫的技術(shù)特點

〖教師〗演示模擬動畫：氣剎車

引導學生得出技術(shù)特點：

動畫主要是對真實的物體進行模型化、抽象化、線條化后，生成再造動畫，主要用來動態(tài)模擬，展示虛擬現(xiàn)實等。如化學反應(yīng)過程、有毒物質(zhì)實驗；物理學中原理、規(guī)律、現(xiàn)象的展示；地理課中白晝、黑夜的形成，海洋中洋流的走向，鋒面雨的形成等，都可以用動畫來仿真或模擬出來。

（2）動畫的表達特點

〖教師〗演示動畫：《游戲》

〖學生〗觀看動畫，感受動畫表達事物的動態(tài)過程。

〖教師〗引導學生分析動畫的技術(shù)特點：

動畫可以采取幽默的手法，或采取真實與夸張、簡化與細膩等手法使要表達的思想或意圖更形象、深刻，具更具有情趣。

附：作品分析如下：

作品主題：為了虛擬世界而忘了現(xiàn)實世界

通過窗外的太陽與月亮的不斷交替，重復出現(xiàn)的游戲及人物的表情，反映一個青少年晝夜不分地玩游戲，沉溺于虛擬的游戲世界中。

此作品是對廣大青少年的一種警醒，一定要把握好玩游戲（或上網(wǎng)）的尺度，不要為了虛擬世界而忘了現(xiàn)實世界。

四、動畫、視頻的應(yīng)用

1、動畫、視頻媒體的選擇

〖教師〗演示一：《水循環(huán)》的動畫

演示二：《水循環(huán)》的圖片

提問：你希望地理老師選擇哪一個講解，為什么？ 突出動畫與圖片的表達特點。

〖學生〗分析討論

〖教師〗演示圖片：王熙鳳

播放視頻：林黛玉進賈府片斷

〖學生〗分析：在刻畫王熙鳳這個人物性格上，兩者效果有何不同？

突出視頻、動畫、圖片表達的特點。

小結(jié)：根據(jù)主題和表達的需求，恰當?shù)剡x擇圖片、動畫、視頻，才能達到最佳效果。

2、學生實踐：

任選一個動畫作品進行分析，兩個人一組，進行交流討論，并填寫作品分析報告表,并上傳。

學生姓名

作品名稱 表達了什么主題？如何表達主題？（從哪些畫面的變化進行體現(xiàn)）

如果是你，你會如何去表達主題？（寫出你的設(shè)想）

《無償獻血》

《美麗的回憶》

3、點評

學生介紹作品設(shè)想；學生之間交流作品；教師點評。

五、小結(jié)

1、動畫、視頻的視覺特征

2、動畫、視頻的特點

3、動畫、視頻的應(yīng)用

動畫、視頻有很好的表達效果，但是我們在選擇時，一定要根據(jù)主題和表達的需求，恰當?shù)剡x擇媒體，才能達到最佳效果。有些用文字、圖片能表達清楚的，就不一定非要動畫或視頻，避免造成資源的浪費。

第四篇：《視頻網(wǎng)站制作》實驗教案

網(wǎng) 頁 制 作

授課教師：熊伶俐

授課班級：廣播電視編導

授課時間：

教 案

2008級B方向 2011——2012學第一學期

目 錄

實驗一：基本網(wǎng)頁元素的使用 ··························································· 1 實驗二：插入多媒體對象··································································· 2 實驗三：超級鏈接的使用實驗四：頁面布局實驗五：實驗六：模板的使用實驗七：制作表單網(wǎng)頁實驗八：設(shè)計并制作一個視頻網(wǎng)站··································································· 4 ·············································································· 5 CSS樣式的使用··································································· 7 ·········································································· 9 ···································································· 10 ···················································11 實驗一：基本網(wǎng)頁元素的使用

實驗內(nèi)容：

1、插入文字；

2、插入圖像。實驗目的：熟練掌握基本網(wǎng)頁元素的使用 實驗器材：裝有Dreamweaver的PC機一臺 實驗步驟：

1、插入文字 1.1輸入文字

鼠標在文檔工作區(qū)單擊，當出現(xiàn)閃爍的光標后，選擇合適的輸入法即可輸入文字。1.2改變文本屬性

選中文字后，可以在屬性面板上改變文字的大小、粗細、樣式、對齊方式等，還可以為文字建立超級鏈接。1.3增加字體

打開字體選項列表，單擊最后一行的“編輯字體列表”，彈出“編輯字體列表”對話框。單擊“＋”按鈕，在“可用字體”列表中選擇字體，單擊向左的箭頭，即可將所選擇的字體添加到字體列表中。1.4添加項目編號

在屬性面板上單擊“項目列表”按鈕，輸入幾行文字，每行文字均帶有強調(diào)性的圓形小黑點

單擊“編號列表”按鈕，輸入幾行文字，每行文字均帶有數(shù)字編號。

單擊“列表項目”按鈕，在打開的“列表屬性”對話框中可以對項目符號進行詳細設(shè)計。2插入圖像

2.1常用圖像格式：GIF、JPEG 和 PNG。2.2插入圖像

（1）將光標置于要插入圖像的位置，在“插入”欄的“常用”選項卡中單擊“圖像”按鈕或選擇“插入”菜單中的“圖像”命令。

（2）此時將打開“選擇圖像源”對話框，選取存放在站點中的圖像文件，最后單擊“確認”按鈕即可將圖片插入到指定區(qū)域。

（3）如果所選擇的圖像文件不是站點中的文件，則將打開“Macromedia Dreamweaver MX”對話框。提示是否將圖像文件保存到根目錄下，單擊“是”按鈕，然后打開“拷貝文件為”對話框，定位到站點中用于存放圖像文件的文件夾，最后單擊“保存”按鈕即可。

2.3修改圖像尺寸

1、自由縮放

單擊圖片，在圖片的下方和右側(cè)出現(xiàn)3個黑色的控制柄。分別拖動這3個控制柄可以改變圖片的尺寸。若要等比例縮放圖片，可以按住shift鍵，用鼠標左鍵拖動右下角的控制柄。

2、精確縮放

如果已經(jīng)確定了圖片的具體縮放尺寸，單擊圖片，在其屬性面板中輸入寬和高的具體數(shù)值，可以精確地改變圖片的尺寸。2.4為圖片增加說明文字

單擊圖片，在屬性面板的替代框輸入圖片的說明文字，按下F12鍵，打開瀏覽器窗口，將光標移動到圖片上就可以看到為其添加的說明文字。2.5鼠標經(jīng)過圖像

（1）將插入點定位到要插入鼠標經(jīng)過圖像的區(qū)域，然后在“插入”欄的“常用”選項卡中單擊“鼠標經(jīng)過圖像”按鈕。

（2）打開“插入鼠標經(jīng)過圖像”對話框。

在“圖像名稱”文字框內(nèi)輸入翻轉(zhuǎn)圖像的名稱；單擊“原始圖像”文本框后的“瀏覽”按鈕，然后在“原始圖像”對話框中，選取作為初始圖像的圖片文件后按“確認”按鈕；單擊“鼠標經(jīng)過圖像”文本框后的“瀏覽”按鈕，然后在“鼠標經(jīng)過圖像”對話框中，選取作為鼠標經(jīng)過圖像的圖片文件后按“確認”按鈕；確保選中“預載鼠標經(jīng)過圖像”復選框；在“替換文本”文本框內(nèi)輸入替換文字；在“按下時，前往的 URL”文本框中指定目標文件的地址，最后單擊“確定”按鈕。

（3）按【F12】鍵在瀏覽器窗口中查看鼠標經(jīng)過圖像效果。2.6插入圖像映射（熱區(qū)）

1、先選中圖像，此時可以在圖像屬性面板上看見一個“地圖”區(qū)域，在其下方有三個淡藍色的工具圖標，即矩形、圓形和多邊形。

2、根據(jù)需要用鼠標選中其中的一個，再把鼠標移到圖像上拖拽出一塊淡藍色的區(qū)域。實驗小結(jié)：略（學生寫實驗過程中的感受、體會，遇到什么問題，如何解決問題等）

實驗二：插入多媒體對象

實驗內(nèi)容：

1、插入聲音；

2、插入視頻；

3、插入Flash。實驗目的：熟練使用各種多媒體素材豐富網(wǎng)頁 實驗器材：裝有Dreamweaver的PC機一臺，耳麥一副 實驗步驟：

1、在頁面中插入背景音樂。方法一：通過手工編寫代碼

（1）打開要添加背景音樂的網(wǎng)頁，切換到代碼視圖或拆分視圖。

（2）在 和 之間添加以下代碼：。

bgsound 標記符的基本屬性是 src，用于指定背景音樂的源文件。

loop，用于指定背景音樂重復的次數(shù)；如果不指定該屬性，或者loop值為-1或者true時，背景音樂無限循環(huán)。方法二：通過行為來實現(xiàn)

（1）打開一個網(wǎng)頁文檔，在文檔左下角的“標簽選擇器”中選擇“ body ”標簽。（2）打開行為面板，點擊“＋”按鈕添加行為“播放聲音”。（3）選擇聲音文件。一個網(wǎng)頁的背景音樂就添加好了。（4）在文檔中選擇背景音樂的圖標。（5）在屬性面板中，點擊“參數(shù)”按鈕。（6）修改參數(shù)Autostart為true。2、鏈接聲音與視頻

（1）選擇要用作超鏈接的文本或圖像。

（2）在屬性面板中，單擊鏈接文本框后的“瀏覽文件”按鈕，選擇站點中的音頻文件或視頻文件。

注：如果原來的文件名為中文，應(yīng)事先將其改為英文。

3、嵌入聲音與視頻

（1）在文檔窗口中，將插入點定位到要嵌入文件的地方，然后在“插入”欄的“媒體”選項卡中單擊“插件”圖標。

（2）在“選擇文件”對話框中選擇嵌入的音頻文件或視頻文件（文件名稱必須是英文，不能插入漢字名稱的文件）。

（3）通過在“高”和“寬”文本框中輸入數(shù)值或者通過在“文檔”窗口中拖動調(diào)整插件占位符的大小，可以確定播放器控件在瀏覽器中的顯示大小。

4、插入Flash動畫

將光標置于要插入Flash動畫的位置，執(zhí)行“插入/媒體/Flash”命令，從彈出的“選擇文件”對話框中選擇Flash文件，單擊“確定”按鈕即可。注：插入的Flash文檔只能是.swf格式文件。

5、插入Flash文本

（1）執(zhí)行“插入/媒體/Flash文本”命令，彈出“插入Flash文本”對話框，設(shè)置文本字體、大小、對齊方式、粗體、斜體、顏色、背景色、鏈接URL等參數(shù)。（2）在“另存為”對話框中指定Flash文本的存盤文件名。

注：若Flash文本設(shè)置了鏈接，則必須將該文件與HTML文檔保存在相同的文件夾下。*文件的路徑和文件名都不能含有中文。

6、插入Flash按鈕

（1）執(zhí)行“插入/媒體/Flash按鈕”命令，彈出“插入Flash按鈕”對話框。

（2）選擇按鈕樣式（有多達40余種樣式可供選擇），然后輸入按鈕文本，選擇文本字體、大小、背景色、鏈接URL等參數(shù)。

（3）在“另存為”對話框中指定Flash按鈕的存盤文件名。（注意事項同F(xiàn)lash文本）

7、制作圖象查看器

（1）執(zhí)行“插入/媒體/圖象查看器”命令（或者單擊插入工具欄的Flash元素選項卡中的圖象查看器命令），彈出“保存Flash元素”對話框，設(shè)置將圖象瀏覽器Flash影片保存在 站點下面，單擊“保存”按鈕在頁面中插入一個Flash對象。

（2）在面板組合區(qū)中找到標簽面板，單擊將其展開（或者用F9鍵直接打開標簽面板），可以看到Flash元素具有很多屬性值。

（3）在屬性列表框中打開frameShow，單擊右方的下拉箭頭，選擇是。

（4）打開屬性imageURLs，單擊右側(cè)的按鈕，打開“編輯‘imageURLs’數(shù)組”對話框。（5）系統(tǒng)默認加了3各圖象在列表中，單擊上方的減號按鈕將其全部刪除。

（6）單擊加號按鈕，但后單擊列表框右側(cè)的打開文件按鈕，在彈出的“選擇文件”對話框中選擇需要顯示的圖片。

（7）重復上一步操作，直到將所有需要顯示的圖片全部加入列表框中。

（8）如果需要對圖片設(shè)置鏈接，在屬性列表中選中imageLinks屬性，單擊右側(cè)的按鈕，彈出“編輯‘imageLinks’數(shù)組”對話框，按順序設(shè)計各圖片的鏈接URL即可。（9）在屬性列表框中找到title，在后面輸入圖片的標題。

（10）在屬性列表框中找到transitionsType，設(shè)置其值為Random，讓圖片之間的切換效果為隨機效果。

（11）按F12鍵預覽最后的效果。

實驗小結(jié)：略（學生寫實驗過程中的感受、體會，遇到什么問題，如何解決問題等）

實驗三：超級鏈接的使用

實驗內(nèi)容：插入超級鏈接 實驗目的：熟練使用超級鏈接

實驗器材：裝有Dreamweaver的PC機一臺 實驗步驟：

1、創(chuàng)建錨記

錨記是在文檔中設(shè)置位置標記，并給該位置一個名稱以便引用。通過創(chuàng)建錨記，可以使鏈接指向當前文檔或不同文檔中的指定位置。錨記常常被用來跳轉(zhuǎn)到特定的主題或文檔的頂部，使訪問者能夠快速瀏覽到選定的位置，從而加快信息的檢索速度。

（1）在需要設(shè)置錨記的位置單擊，在插入工具欄的常用選項卡中選擇命名錨記按鈕，打開“命名錨記”對話框。

（2）在對話框的“錨記”名稱框中輸入錨記名（區(qū)分大小寫），單擊確定按鈕，錨記標記出現(xiàn)在光標插入點。如果錨記標記沒有出現(xiàn)，執(zhí)行“查看/可視化助理/不可見元素”命令即可。

2、文字或圖片的鏈接

（1）單擊需要創(chuàng)建超級鏈接的文字或者圖片，然后在屬性面板的“鏈接”文本框旁單擊“瀏覽文件”按鈕。

（2）打開“選擇文件”對話框，定位到要跳轉(zhuǎn)的文件后單擊“確認”按鈕即可。

3、電子郵件鏈接

方法一：在鏈接文本框中輸入“mailto：電子郵件地址”。

方法二：單擊插入工具欄的常用選項卡中的“電子郵件鏈接”按鈕，彈出“電子郵件鏈接”對話框，在文本輸入框中輸入作為電子郵件鏈接顯示在文檔中的文本，在E－Mail欄中輸入電子郵件地址。如果不輸入文本，則在文檔中直接顯示電子郵件地址。

4、錨鏈接

直接在鏈接文本框中輸入“＃錨記名”即可。

5、快速檢查網(wǎng)頁鏈接

（1）在Dreamweaver 8中運行“站點→檢查站點范圍的鏈接”命令，此時將會激活鏈接檢查面板。

（2）從面板左上部的“顯示”下拉菜單中可以選擇“斷掉的鏈接”、“外部的鏈接”、“孤立文件”三種，比如我們選取“孤立文件”之后，Dreamweaver 8將對當前鏈接情況進行檢查，并且將孤立的文件列表顯示出來。

（3）對于有問題的文件，直接雙擊鼠標左鍵即可打開進行修改。

提示：外部鏈接是鏈接到外部網(wǎng)站的鏈接地址，Dreamweaver無法對其正確性進行檢查。在為網(wǎng)頁建立鏈接的時候需要提醒大家一定要格外小心，因為網(wǎng)站通常都有數(shù)百個頁面，稍不留神就會導致空鏈接或者是鏈接錯誤的情況，這對你的網(wǎng)站形象可是有很不好的影響喲！

6、刪除超級鏈接

在屬性面板的鏈接對話框中刪除鏈接路徑，該鏈接便消失了。

實驗小結(jié)：略（學生寫實驗過程中的感受、體會，遇到什么問題，如何解決問題等）

實驗四：頁面布局

實驗內(nèi)容：

1、利用框架進行布局；

2、使用表格進行頁面布局；

3、使用圖層進行頁面布局。

實驗目的：熟練掌握和使用各種方法進行頁面布局 實驗器材：裝有Dreamweaver的PC機一臺 實驗步驟：

1、利用框架進行布局

（1）選擇“文件”菜單中的“新建”命令，打開“新建文檔”對話框，在“常規(guī)”選項中的類別框內(nèi)選擇“框架集”，在“框架集”框內(nèi)選擇“左側(cè)固定，上方嵌套”結(jié)構(gòu)，單擊“創(chuàng)建”按鈕。

（2）選擇“文件”菜單中的“保存全部”命令，之后將出現(xiàn) 4 個“保存為”對話框，分別將框架集和各框架網(wǎng)頁保存在站點中的同一文件夾中。

（3）按【Shift + F2】鍵打開“框架”面板，單擊該面板中的最外層邊框，選擇整個框架 集，在其“屬性檢查器”中的“列值”文本框內(nèi)輸入“170”，在“單位”框內(nèi)選擇“像素”，其他屬性保持不變。再選擇包含上下結(jié)構(gòu)的框架集，在其“屬性檢查器”中設(shè)置“行值”為 80 像素，其他屬性保持不變。

（4）將插入點定位在左側(cè)框架內(nèi)，按【Ctrl + J】鍵打開“頁面屬性”對話框，分別設(shè)置網(wǎng)頁的背景色為“黑色”、文本顏色為“#d1c598”、鏈接顏色為“#d1c598”、活動鏈接顏色為“#993300”、訪問過鏈接顏色為“#006600”，單擊“確定”按鈕。

（5）繼續(xù)將插入點定位在左側(cè)框架內(nèi)，單擊“插入表格”按鈕，插入一個 3 行 2 列，寬度為“140”像素，適當高度，單元格填充、單元格間距、邊框都為“0”的表格。對單元格進行適當合并，然后在各單元格內(nèi)添加內(nèi)容，并使用“屬性檢查器”進行修飾，制作出左側(cè)框架中的網(wǎng)頁。

（6）分別制作出另外兩個框架中的網(wǎng)頁，使用“全部保存”命令保存對文檔的修改。（7）制作要作為超鏈接目標、在右下框架內(nèi)顯示的各網(wǎng)頁，注意其風格與尺寸應(yīng)與原來右下框架中的網(wǎng)頁相似。

（8）在左側(cè)框架內(nèi)，為導航欄中的文字設(shè)置超鏈接，并將其鏈接“目標”指定為右下框架（即 mainFrame），保存對文檔的修改，在瀏覽器窗口中預覽網(wǎng)頁。

2、使用表格進行頁面布局

（1）在空白文檔窗口中，按【Ctrl + J】鍵打開“頁面屬性”對話框，在“標題”文本框內(nèi)輸入網(wǎng)頁的標題，在“背景”文本框內(nèi)選擇黑色作為網(wǎng)頁的背景，在“文本”文本框內(nèi)選擇白色作文本顏色，設(shè)置完成后單擊“確定”按鈕。

（2）將“插入欄”切換到“布局”選項卡，單擊“布局視圖”按鈕切換到布局視圖模式下，按【Ctrl + S】鍵將網(wǎng)頁保存到站點中。

（3）在“插入欄”中單擊“繪制布局單元格”按鈕，繪制一個寬為 600 像素，高為 24 像素的布局單元格，然后添加若干文字。

（4）按住【Alt】鍵不放，多次單擊“繪制布局單元格”按鈕，連續(xù)繪制4個寬度相等的單元格，分別在第二與第三個布局單元格內(nèi)插入若干文本，在第四個布局單元格內(nèi)插入一條寬度為 600 像素，高度為 1 像素的水平線，并使用屬性檢查器對添加的文本與水平線進行修飾。

（5）將繪制的第二個布局單元格的高度調(diào)整為 120 像素，適當調(diào)整其他三個單元格的高度與寬度，在適當調(diào)整布局表格的寬度。

（6）單擊“標準視圖”按鈕，將文檔窗口切換到標準視圖模式，將插入點定位在繪制的第四個單元格內(nèi)，單擊“插入表格”按鈕，在打開的“插入表格”對話框中，設(shè)置表格“行”為

8、“列”為

5、“單元格填充”為0、“單元格邊距”為0、“寬度”為100%（即所在單元格的寬度600像素）、“邊框”為0，完成后單擊“確定”按鈕。

（7）在插入表格中的第一、三、五、七行與一、三、五列交界處的單元格內(nèi)，分別插入尺寸相等的圖像，在圖像下方的單元格內(nèi)輸入一些文字并進行修飾。

（8）使用單元格的“屬性檢查器”，將插入圖像單元格的寬度設(shè)置為 150 像素，高度為 100 像素，文字所在單元格高度為 80 像素，沒有內(nèi)容的單元格寬度為 75 像素。

（9）另外將插入圖像單元格的對齊方式設(shè)置為水平“居中對齊”、垂直“中間”對齊，此 時的文檔窗口。

（10）選取包含圖像的單元格，然后使用 CSS 樣式為該單元格設(shè)置一種邊框效果。（11）在第一個單元格與第二個單元格內(nèi)設(shè)置一個背景圖像，按【Ctrl + S】鍵保存對文檔的修改，按【F12】鍵在瀏覽器窗口中預覽網(wǎng)頁效果。

3、使用圖層進行頁面布局

（1）在空白文檔窗口中，確保文檔窗口處于“標準視圖”模式下，按【Ctrl + J】鍵打開“頁面屬性”對話框，在“標題”文本框內(nèi)輸入網(wǎng)頁的標題，在“背景”文本框內(nèi)選擇黑色作為網(wǎng)頁的背景顏色，單擊“確定”按鈕，再按【Ctrl + S】鍵將網(wǎng)頁保存到站點中。（2）單擊“繪制層”按鈕，在文檔窗口中頂部繪制一個層，設(shè)置以下層屬性：左 20、上 20、寬度 600、高度 20、指定一個背景圖像作為第一層的背景。

（3）在該層中添加若干文本，然后使用“屬性檢查器”對文本進行修飾。使用相同方法在下面繼續(xù)繪制一個層，添加若干文本并進行修飾，之后適當調(diào)整該層的位置與大小。（4）按住【Alt】鍵不放，單擊“繪制層”按鈕，在文檔窗口中連續(xù)繪制三個層，將其中的一個層的寬度設(shè)置為 150、高度為 115，然后同時選取它們（注意最后選擇有精確尺寸的層），選擇“修改”菜單“對齊”選項中的“設(shè)成寬度相等”與“設(shè)成高度相等”命令，將這三個層設(shè)置為大小相等的層。此時這三個層仍然處于選中狀態(tài)。

（5）按【Shift】鍵選取繪制的第一個層，選擇“修改”菜單“對齊”選擇中的“左對齊”命令，使這三個層與第一層對齊，最后適當調(diào)整它們所在的上下位置，使用“插入欄”中的“圖像”按鈕分別插入尺寸相同的三個圖像。

（6）使用相同方法分別在文檔中繪制其他層，并插入若干圖像與文字。

（7）按【Ctrl + S】鍵，保存對文檔的修改，按【F12】鍵在瀏覽器窗口中預覽網(wǎng)頁。實驗小結(jié)：略（學生寫實驗過程中的感受、體會，遇到什么問題，如何解決問題等）

實驗五：CSS樣式的使用

實驗內(nèi)容：使用CSS樣式創(chuàng)建風格統(tǒng)一的網(wǎng)頁 實驗目的：熟練使用內(nèi)部樣式表和外部樣式表 實驗器材：裝有Dreamweaver的PC機一臺 實驗步驟：

1、使用“CSS 樣式”面板

在網(wǎng)站或網(wǎng)頁中創(chuàng)建和應(yīng)用 CSS 樣式時，需要使用“CSS 樣式”面板。選擇“窗口”菜單中的“CSS 樣式”命令或按【Shift + F11】鍵，可以打開“CSS 樣式”面板。

在文檔窗口中，class 類樣式將出現(xiàn)在 “CSS 樣式面板”中。而對于創(chuàng)建的其他兩種樣式，將直接包含在網(wǎng)頁代碼或 CSS 外部樣式表中，而不會顯示在“CSS 樣式”面板。

2、創(chuàng)建 CSS 樣式

在文檔中要創(chuàng)建 CSS 樣式，首先將“CSS 樣式”面板打開，然后執(zhí)行以下步驟。

（1）在 CSS 樣式面板中，單擊“新建 CSS 樣式”按鈕，打開“新建 CSS 樣式”對話框。（2）在“新建 CSS 樣式”對話框中進行如下設(shè)置：如果選擇“創(chuàng)建自定義樣式（class）”樣式類型，則在“名稱”文本框中輸入樣式名稱；如果選擇“重定義HTML 標簽”或“使用 CSS 選擇器”樣式類型，則在“名稱”文本框中選擇相應(yīng)的樣式名稱。

（3）在“定義在”框中選擇，如果選擇“新建樣式表文件”選項，如果曾經(jīng)定義過樣式表文件，則可以從列表中選擇一個文件；如果選擇“僅對該文檔”單選按鈕，表示樣式將直接定義在當前文檔中。

（4）單擊“確定”按鈕，如果選擇“新建樣式表文件”選項，則打開“保存樣式表文件”對話框，進行保存設(shè)置即可后彈出“樣式名稱的CSS 樣式定義”對話框；則直接彈出“樣式名稱的 CSS 樣式定義”對話框。

（5）用戶可以在“分類”列表框中選擇 8 種 CSS 樣式屬性，Dreamweaver 選擇相應(yīng)屬性分類后則在對話框右部會顯示相應(yīng)的選項，可以根據(jù)需要設(shè)置。（6）最后單擊“確定”按鈕，則樣式定義完畢。

3、應(yīng)用CSS樣式

在文檔窗口，不論是內(nèi)部樣式還是外部樣式表文件，對于出現(xiàn)在“CSS 樣式”面板中的自定義 class 類樣式，應(yīng)首先選取要應(yīng)用樣式的文本、段落或其他對象，然后單擊面板中的樣式圖標或樣式名稱。如果要取消樣式，選取對象后，單擊面板中的“無 CSS 樣式”選項即可。

對于“重新定義 HTML 標簽”樣式與“使用 CSS 選擇器”樣式，網(wǎng)頁自動應(yīng)用該樣式而無須用戶指定。

4、自定義CSS樣式實例

本實例定義一種網(wǎng)頁中常用的正文樣式，效果為“文字大小16 px，行高120%，首行縮進兩個字符”。

（1）打開一個包含段落文本的文檔，確保打開“CSS 樣式”面板，單擊“新建 CSS 樣式”按鈕，打開“新建CSS樣式”對話框，在“名稱”文本框中輸入樣式名稱“test”，在“類型”選項中選擇“創(chuàng)建自定義樣式（class）（M）”單選按鈕，選擇“僅對該文檔”單選按鈕，設(shè)置完成后單擊“確定”按鈕。

（2）在打開的“.test 的CSS 樣式定義”對話框中，設(shè)置字體為“宋體”、大小為 16 像素（px）、行高為 120%。

（3）然后在“分類”列表框中選擇“區(qū)塊”選項，設(shè)置文字縮進為 32 像素（相當于兩個字符），單擊“確定”按鈕，則新建的“test”樣式出現(xiàn)在“CSS 樣式”面板中。

（4）在文檔窗口中選擇取要應(yīng)用樣式的文本，然后在單擊“test”樣式，即可應(yīng)用該樣式。

5、重新定義 HTML 標簽樣式實例

本實例定義一種常見的效果，即網(wǎng)頁中的所有超鏈接都沒有下劃線。

（1）打開一個包含有超鏈接的文檔，確保打開“CSS 樣式”面板，單擊“新建 CSS 樣式”按鈕，打開“新建 CSS 樣式”對話框，在“類型”框內(nèi)選擇“重新定義 HTML 標簽（R）”選項，然后在“名稱”框內(nèi)選擇 a 標簽（即超鏈接標簽），選擇“僅對該文檔”選 項，單擊“確定”按鈕。

（2）在打開“a 的 CSS 定義”對話框中的“修飾”選項中選擇“無”，單擊“確定”按鈕。

（3）此時樣式被自動應(yīng)用，網(wǎng)頁中的所有超鏈接都沒有下劃線。

實驗小結(jié)：略（學生寫實驗過程中的感受、體會，遇到什么問題，如何解決問題等）

實驗六：模板的使用

實驗內(nèi)容：利用模板創(chuàng)建風格統(tǒng)一的網(wǎng)頁

實驗目的：掌握模板的創(chuàng)建和編輯方法；熟練利用模板創(chuàng)建網(wǎng)頁 實驗器材：裝有Dreamweaver的PC機一臺 實驗步驟：

1、新建一個文檔，將“插入”欄中的“常用”選項卡改為“布局”選項卡，此時就出現(xiàn)“布局”工具欄，切換到“布局”模式，單擊“布局表格” 按鈕，繪制一個寬：780px，高：636px的表格。

2、單擊“布局表格” 按鈕，從該表格的左上角起，繪制一個寬：780，高：120的表格。

3、單擊“布局單元格” 按鈕，從表格的左上角開始繪制一個寬：140，高：120的單元格.4、將光標定位在單元格內(nèi)，選擇[插入]/[圖像]菜單命令，打開“選擇圖像源”文件對話框，選擇圖像logo.gif。

5、單擊“布局單元格” 按鈕，接著上面的單元格的右邊繪制一個寬：640，高：120的單元格.6、將光標定位在單元格內(nèi)，選擇[插入]/[媒體]/[Flash]菜單命令，打開“選擇文件”對話框，選擇文件banner.swf。

7、接著往下繪制一個寬：780，高：21，水平：居中對齊，垂直;居中，背景顏色：#CC3333的單元格，輸入文字：首頁 個人簡介 文學作品 繪畫作品 動畫作品 視頻作品 學習心得 給我留言 寫信給我，設(shè)置文字格式：字體“宋體”，大小“14px”。

8、接著再往下繪制一個寬：140，高：470，水平：居中對齊，垂直;居中，背景顏色：#0066FF的單元格。

9、接著上面表格的右邊繪制一個寬：640，高：470，水平：居中對齊，垂直;居中，背景圖像：back.gif的單元格。

10、接著上面的兩個表格的下面繪制一個高：18，水平：居中對齊，垂直;居中，背景顏色：#000000的單元格，輸入文字：2006年12月20日最后更新 ? Copyright 2006 小慧版權(quán)所有，設(shè)置文字格式：字體：宋體，大?。?2px，顏色：白色。

11、回到“標準”模式，將光標定位到第8步創(chuàng)建的單元格內(nèi)，選擇[插入]/[模板對象]/[可編輯區(qū)域]菜單命令，彈出如圖2-10-11所示的對話框，單擊“確定”按鈕，則在該單元格內(nèi)就出現(xiàn)了一個名為“EditRegion1”的可編輯區(qū)域。

實驗小結(jié)：略（學生寫實驗過程中的感受、體會，遇到什么問題，如何解決問題等）

實驗七：制作表單網(wǎng)頁

實驗內(nèi)容：使用表單制作一個注冊頁面

實驗目的：掌握表單的建立和使用；熟練使用表單提交相關(guān)數(shù)據(jù) 實驗器材：裝有Dreamweaver的PC機一臺 實驗步驟：

1、新建一個文檔，將“插入”欄中的“常用”選項卡改為“表單”選項卡。

2、將光標定位在文檔頁面中需要插入表單的位置，單擊 “表單” 按鈕，此時光標定位處出現(xiàn)一個紅色的虛線框，它表示表單的范圍，所有表單對象都在該區(qū)域內(nèi)插入。

3、在表單中插入一個9行2列的表格的表格，設(shè)置表格的背景圖像為”bg1.gif”，表格“居中”。

4、合并第1行的單元格，輸入文字”用戶注冊表”，文字之間空一格，格式：字體“宋體”，大小“16pt”，顏色：“紅色”。

5、在第2行第1個單元格內(nèi)輸入“你的用戶名：” 將光標定位到第2個單元格，單擊 “文本字段” 按鈕，在彈出的“輔助標簽屬性”對話框中單擊“取消”按鈕。

6、在第3行第1個單元格內(nèi)輸入“你的密碼：” 將光標定位到第2個單元格，單擊 “文本字段” 按鈕，在彈出的“輔助標簽屬性”對話框中單擊“取消”按鈕，打開“屬性”面板，在“最多字數(shù)符”中輸入“6”，將“類型”改為“密碼域”。

7、在第4行第1個單元格內(nèi)輸入“你的性別：” 將光標定位到第2個單元格，單擊 “單選按鈕” 按鈕，在彈出的“輔助標簽屬性”對話框中“標簽文字”中輸入“男”，“位置”改為“在表單項前”，單擊“確定”按鈕，敲一個空格，再單擊 “單選按鈕” 按鈕，在彈出的“輔助標簽屬性”對話框中“標簽文字”中輸入“女”，位置”改為“在表單項前”，單擊“確定”按鈕，選擇“男”前面的單選鈕，打開“屬性”面板，將“初始狀態(tài)”改為“已勾選”。

8、在第5行第1個單元格內(nèi)輸入“你的生日：” 將光標定位到第2個單元格，單擊 “列表/菜單” 按鈕，在彈出的“輔助標簽屬性”對話框中“標簽文字”中輸入“年”，“位置”為“在表單項后”，單擊“確定”按鈕，再單擊 “列表/菜單” 按鈕，在彈出的“輔助標簽屬性”對話框中“標簽文字”中輸入“月”，“位置”為“在表單項后”，單擊“確定”按鈕，再單擊 “列表/菜單” 按鈕，在彈出的“輔助標簽屬性”對話框中“標簽文字”中輸入“日”，“位置”為“在表單項后”，單擊“確定”按鈕；選擇“年”前的列表，打開“屬性”面板，將“類型”設(shè)為“菜單”，單擊 按鈕，在彈出的“列表值”對話框中的“項目標簽”中輸入“1990”，單擊 按鈕，添加第二個項目標簽，輸入“1991”，重復上面的操作，輸入后面的數(shù)字，單擊“確定”按鈕，回到“屬性”面板，將“初始化選定”設(shè)為“1990”，同理對后面的列表進行相同的操作。

9、在第6行第1個單元格內(nèi)輸入“你的生日：” 將光標定位到第2個單元格，單擊 “復選框” 按鈕，在彈出的“輔助標簽屬性”對話框中“標簽文字”中輸入“唱歌”，同理插入后面的復選框。

10、在第7行第1個單元格內(nèi)輸入“個人近照：” 將光標定位到第2個單元格，單擊 “文件域” 按鈕，在彈出的“輔助標簽屬性”對話框中單擊“取消”按鈕。

11、在第8行第1個單元格內(nèi)輸入“個人簡介：” 將光標定位到第2個單元格單擊 “文本字段” 按鈕，在彈出的“輔助標簽屬性”對話框中單擊“取消”按鈕，在彈出的“輔助標簽屬性”對話框中單擊“取消”按鈕，打開“屬性”面板，將“類型”改為“多行”。

12、將光標定位到第9行第2個單元格，單擊 “按鈕” 按鈕，在彈出的“輔助標簽屬性”對話框中單擊“取消”按鈕，連續(xù)插入幾個“不換行空格”，再單擊 “按鈕” 按鈕，在彈出的“輔助標簽屬性”對話框中單擊“取消”按鈕，打開“屬性”面板，將“動作”改為“重設(shè)表單”。

13、選擇“提交”按鈕，打開行為“面板”，添加行為“檢查表單”，打開“檢查表單”對話框，將文本“text1在表單中，text2在表單中”都設(shè)為“必需的”，單擊“確定”按鈕。

14、選擇整個表單，打開“屬性”面板，在“動作”中輸入“mailto：你的郵箱地址”。

15、按【Ctrl+S】保存該網(wǎng)頁為form.htm，按【F12】鍵預覽。

實驗小結(jié)：略（學生寫實驗過程中的感受、體會，遇到什么問題，如何解決問題等）

實驗八：設(shè)計并制作一個視頻網(wǎng)站

實驗內(nèi)容：制作一個視頻網(wǎng)站

實驗目的：掌握和了解網(wǎng)站制作的流程，熟練使用網(wǎng)頁制作的各種技巧 實驗器材：裝有Dreamweaver的PC機一臺，耳麥一副 實驗步驟：

（一）制作首頁

1、定義網(wǎng)頁基本屬性

（1）在空白文檔窗口中，按【Ctrl + J】鍵打開“頁面屬性”對話框，在“標題”文本框內(nèi)輸入網(wǎng)頁標題“游戲王國”，設(shè)置網(wǎng)頁的背景色為“黑色”，文本色為“白色”，在“跟蹤圖像”框內(nèi)選取繪制好的草圖作為網(wǎng)頁的“跟蹤圖像”，單擊“確定”按鈕。（2）按【Ctrl + S】鍵將文檔保存到站點中。

2、頁面布局

（1）在文檔窗口中，將“插入欄”切換到“布局”選項卡，再單擊“布局視圖”按鈕，將文檔窗口切換到布局視圖模式。

（2）單擊“插入欄”中的“繪制布局單元格”按鈕，在文檔窗口頂部沿著跟蹤圖像繪制一個適當尺寸的布局單元格（用于放置標志圖案），按住【Ctrl】鍵不放，繼續(xù)使用“繪制布局單元格”按鈕，在文檔窗口中的兩側(cè)分別繪制兩個布局單元格（用于放置頁面兩側(cè)的邊 框圖案），在左側(cè)沿著跟蹤圖像繼續(xù)繪制三個布局單元格（左右兩個單元格用于放置豎線效果，中間單元格用于放置“友情鏈接”等內(nèi)容），適當調(diào)整各單元格的尺寸與位置。（3）將插入點分別定位到剛繪制的 6 個單元格內(nèi)，然后按【Ctrl + Alt + I】組合鍵分別插入圖像，適當調(diào)整布局單元格尺寸與圖像匹配，并調(diào)整它們的位置。

（4）單擊“插入欄”中的“繪制布局表格”按鈕，在文檔窗口右側(cè)繪制第二個布局表格（嵌套在第一個布局表格中）。

（5）在該布局表格頂部沿著跟蹤圖像繪制一個用于插入金黃色細線的布局單元格，然后在其中插入這個圖像，并適當調(diào)整它的尺寸與位置。

（6）按住【Ctrl】鍵不放，單擊“插入欄”中“繪制布局單元格”按鈕，在剛插入金黃色細線圖像布局單元格下方的一行中繪制兩個高度為 24 像素的布局單元格（左邊單元格用于放小標題），然后使用“繪制布局表格”按鈕，繪制一個包含這兩個布局單元格的第三個布局表格。

（7）單擊“繪制布局單元格”按鈕，沿著跟蹤圖像繼續(xù)繪制三個布局單元格（分別用于包含文字、圖片和子欄目超鏈接）。

（8）分別在右側(cè)布局單元格內(nèi)添加圖像與文字，并適當調(diào)整布局單元格與布局表格的尺寸與位置。為了看清楚在單元格中添加的文字，可按下【Ctrl + J】鍵打開“頁面屬性”對話框，將跟蹤圖像的透明度調(diào)整為“30%”。

（9）按照步驟（5）~（8）的方法添加另外兩部分的內(nèi)容（“Diablo”和“石器時代”）。（10）在最大的布局表格底部繪制一個布局單元格，并在其中插入圖像（即最底端的圖案，此處用作占位符），調(diào)整該布局單元格的尺寸與位置，使其與上面的內(nèi)容相匹配。（11）在文檔窗口中的左側(cè)位于兩個“細線”圖像之間的區(qū)域按住【Ctrl】鍵不放，連續(xù)繪制 7 個大小相等的布局單元格。

（12）在其中插入圖像、文字、日期、電子郵件鏈接和表單對象中的“列表/菜單”等網(wǎng)頁內(nèi)容，調(diào)整各單元格的尺寸與位置。

（13）單擊“繪制布局表格”按鈕，繪制一個布局表格，使其包含頁面左側(cè)除最左邊的布局單元格之外的 10 個單元格。

（14）分別將左右兩側(cè)的4個布局單元格，即用來放置左右邊框和左邊兩條豎線的單元格，適當調(diào)整高度與內(nèi)容相匹配，并將其他布局表格與布局單元格的尺寸與位置適當調(diào)整。

（15）按【Ctrl + S】鍵保存對文檔的修改。

3、進一步排版

接下來使用表格對頁面進一步排版，具體步驟如下。（1）將文檔窗口切換到“標準視圖”模式下。

（2）將最后一個布局表格中的列表/菜單、日期與電子郵件鏈接所在單元格的對齊方式設(shè)置為水平“居中對齊”、垂直“中間”對齊，將包含文字與圖像的單元格設(shè)置為水平“左對齊”、垂直“中間”對齊。

（3）在靠近邊緣的兩個單元格中設(shè)置背景圖像，作為整個網(wǎng)頁界面中的邊框，在包含有細線的單元格內(nèi)設(shè)置背景圖像，最后選中左邊用于放置“友情鏈接”的表格，為其設(shè)置背景 圖像。

（4）將包含文字“Counter-Strike”、“Diable II”和“石器時代”所在單元格的對齊方式設(shè)置為水平“居中對齊”、垂直“中間”對齊，分別選擇這三個單元格，然后設(shè)置一個背景圖像，適當調(diào)整單元格的尺寸與位置。然后選取包含該單元格的表格，設(shè)置其背景圖像。（5）將包含有文本“Counter-Strike”、“Diable II”和“石器時代”單元格下方的三個單元格的對齊方式設(shè)置為垂直“中間”對齊。

（6）將底部單元格的圖像設(shè)置成為該單元格的背景圖像，并適當調(diào)整單元格的尺寸。（7）設(shè)置完成后，在瀏覽器窗口中預覽網(wǎng)頁，然后適當調(diào)整各個表格與單元格的尺寸，按【Ctrl + S】鍵保存對文檔的修改。

4、完善頁面

最后設(shè)置頁面中的超鏈接，并使用 CSS 技術(shù)對網(wǎng)頁中的內(nèi)容進行格式修飾，具體步驟如下。

（1）分別為文檔窗口中的文本添加超鏈接（暫時沒有制作目標文件的可以用“#”指定空鏈接），然后按【Shift + F11】鍵打開“CSS 樣式”面板。

（2）在“CSS 樣式”面板中，單擊“新建 CSS 樣式”按鈕，在打開的“新建 CSS 樣式”對話框中的“名稱”文本框中輸入“test”，在“類型”框中選擇“創(chuàng)建自定義樣式（class）”單選按鈕，在“定義在”框內(nèi)選擇“新建樣式表文件”，單擊“確定”按鈕。（3）在打開的“保存樣式表文件為”對話框中選擇站點根目錄，在名稱框中輸入“mystyle”，單擊“保存”按鈕。

（4）在打開的“.test 的 CSS 樣式定義（在 mystyle.css 中）”對話框，設(shè)置字體為“宋體”、大小為“16”像素（px）、顏色為“#CCCCCC”、行高為“150%”，單擊“確定”按鈕。在文檔窗口中分別選擇描述游戲欄目的正文文字，在“CSS 樣式”面板中單擊“test”將段落文本應(yīng)用該樣式。

（5）單擊“新建 CSS 樣式”按鈕，在“新建 CSS 樣式”對話框中的“名稱”文本框內(nèi)輸入“gold”，在“定義在”框內(nèi)選擇“mystyle.css”樣式表文件，單擊“確定”按鈕，打開“.gold 的CSS樣式定義（在 mystyle.css 中）”對話框，設(shè)置字體為“宋體”、大小為“16”像素（px）、顏色為“#d1c598”、行高為“120%”，單擊“確定”按鈕，在文檔窗口將左側(cè)插入了小圖標的文本應(yīng)用該樣式。

（6）單擊“新建CSS樣式”按鈕，在“mystyle.css”中定義一個名為“title”的樣式，定義該樣式時，設(shè)置字體族列表“宋體、Arial”，大小為“16”像素，行高為“150%”，顏色為“#d1c598”。然后為標題文本“Counter-Strike”、“Diable II”和“石器時代”應(yīng)用該樣式。

（7）單擊“新建 CSS 樣式”按鈕，在“mystyle.css”中定義一個名為“border”的樣式，定義該樣式時，設(shè)置邊框樣式為“凸出”、寬度為“細”、顏色為“#990033”，選中“全部相同”復選框，單擊“確定”按鈕。在文檔窗口中，將包含超鏈接的單元格選中，然后應(yīng)用該樣式。

（8）在該樣式表文件中，新建4個“使用CSS 選擇器”樣式。在 a:link 樣式中，設(shè)置字體為“宋體”、大小為“16 像素”、行高為“120%”、顏色為“#D1C598”、修飾為“無”；在

a:visited 樣式中，設(shè)置與 a:link 相同；在 a:hover 樣式中，設(shè)置顏色為“#FFF9CC”，修飾為“下劃線”，其他相同；在 a:active 樣式中設(shè)置顏色為“#990033”，修飾為“無”，此時網(wǎng)頁的中的超鏈接自動應(yīng)用了 CSS 選擇器樣式。

（9）在該樣式表文件中，新建一個名稱為“button”的“創(chuàng)建自定義樣式”，在“類型”選項中設(shè)置字體為“宋體”、大小為“16”像素、顏色為“#FFEFC6”；在“背景”選項中設(shè)置背景顏色為“#333333”；在“邊框”選項中設(shè)置邊框樣式為“實線”、寬度為“細”、顏色分別為“#d1c598”、“#333333”、“#333333”、“#d1c598”（需先將“全部相同”選項清除），最后將文檔窗口中插入的“列表/菜單”應(yīng)用該樣式。

（10）適當調(diào)整各個表格與單元格的尺寸與位置，按【Ctrl + S】鍵保存對文檔的修改。

（二）制作其它頁面

插入文字、圖片、聲音、動畫、視頻

（三）測試發(fā)布

1、Dreamweaver 中打開站點首頁，然后按【F12】鍵預覽頁面，在瀏覽器中測試每一個頁面，看內(nèi)容是否能正確顯示，尤其要測試超鏈接是否能正確工作。

2、將整個站點目錄復制到另外一個位置，然后在瀏覽器中打開站點首頁，測試是否所有的超鏈接都能正確工作。使用這種方法能夠檢測出使用絕對路徑創(chuàng)建出的不正確的超鏈接。如果碰上無法正確跳轉(zhuǎn)的超鏈接，應(yīng)回到原來的站點中，打開相應(yīng)頁面重新設(shè)置超鏈接。

3、為了確保不同的瀏覽者能夠看到一致的頁面效果，制作好的網(wǎng)站還應(yīng)在不同的顯示分辨率下進行測試，至少要在 800×600像素和1024×768像素兩種分辨率下進行測試。另外，還需要在不同字體顯示大小情況下進行測試（即在“大字體”和“小字體”兩種方式下測試），以確保不同字體設(shè)置的瀏覽者能夠看到一致的字體效果。

4、測試完成之后，就可以將網(wǎng)站發(fā)布到遠程站點上。

實驗小結(jié)：略（學生寫實驗過程中的感受、體會，遇到什么問題，如何解決問題等）

第五篇：《Flash動畫制作》實踐教學大綱講解

《Flash動畫制作》實踐教學大綱

中文名稱：Flash動畫制作

英文名稱：Flash Animation

面向?qū)I(yè)（層次）：動漫設(shè)計與制作?？?開設(shè)學期：第二學期 考核方式：考試

一、教學目標

通過實踐課程教學，使學生能熟練掌握Flash動畫的制作技術(shù)，并能融合自己的思維及創(chuàng)意，設(shè)計制作出具有完整主題要求的Flash作品，使學生成為符合網(wǎng)站開發(fā)、廣告設(shè)計、電子雜志制作等崗位需求的高級平面動畫制作技術(shù)人才。

二、基本要求

使學生在掌握Flash動畫基本原理和技術(shù)的基礎(chǔ)上，能理性地、有針對性地選擇使用Flash提供的動畫表現(xiàn)技術(shù)創(chuàng)作動畫作品，激發(fā)學生的創(chuàng)新精神和創(chuàng)新能力，縮短理論和實踐的距離。具體應(yīng)達到下列基本要求。

1.能夠制作運動補間動畫、形狀補間動畫和逐幀動畫；

2.能夠制作基本層動畫、具有遮罩特效的動畫和具有鏈接引導特效的動畫； 3.能夠制作按鈕并能夠為按鈕設(shè)置控制動畫播放的動作腳本； 4.能為Flash作品添加聲音。

三、實踐項目內(nèi)容及學時分配

序 號 實踐項目名稱

每組人數(shù)

實踐 學時

實踐 類型

必做選做

主要內(nèi)容

使用Flash工具箱中的圖形動畫圖形的1 繪制與編輯工具設(shè)計制作動繪制與編輯

畫場景和動畫角色 6 設(shè)計 必做

熟悉Flash動畫的制作流2 簡單動畫制作 程，設(shè)計制作簡單的小動1 6 設(shè)計 畫。在動畫中應(yīng)制作包含不同類型元件的動用元件 畫作品 6 設(shè)計 設(shè)計創(chuàng)作高級動畫作品，包4 高級動畫制作 含引導層、遮罩層、多個場1 6 設(shè)計 景。動畫配樂 為動畫導入聲音并實現(xiàn)聲音與動畫的同步 驗證6 交互式動畫為動畫作品制作播放按鈕，制作 制作簡單的動畫編程特效 驗證7 期末課程設(shè)綜合運用動畫制作技術(shù)創(chuàng)作計 一個完整的動畫作品 1

驗證

四、實驗教材、參考書

（一）教材

《Flash 8中文版實用教程》，李如超，人民郵電出版社，2009.10

（二）參考書

《中文版Flash 8實例與操作》，孫志義，航空工業(yè)出版社，2010.6 說明：

本大綱規(guī)定學生應(yīng)做6個項目，合計28學時；選做1個項目，合計2學時； 總計30學時。

撰寫人：張琳 審核人：周改云

必做

必做

必做

選做

必做

必做