用Dreamweaver制作課件.ppt

1、課件的構(gòu)思、素材的準備 2. 新建文件夾 3. 新建站點 4. 插入表格 5. 文字的輸入 插入圖片 7. 圖文混排,8. Flash動畫的插入 9. 背景音樂、視頻的插入 10. 網(wǎng)頁間的鏈接 11. 首頁的設(shè)計制作 12. 課件內(nèi)容頁的制作（層） 13. 模板的制作 14. Css樣式,用Dreamweaver 制作課件,課件的構(gòu)思、素材的準備,能否將課件做好，最重要的是要有一個十分清晰的思路，從而產(chǎn)生一個對整個課件的合理布局。整體上要遵循正常的講課思路，使教學更加生動化。一開始構(gòu)思時就必須掌握課件的內(nèi)容，搞清教學的全過程。 根據(jù)課件的需要規(guī)劃好一級，二級菜單的內(nèi)容，確定一級二級菜單所放的

2、位置，菜單和按鈕的樣式設(shè)計美觀大方，安排合理。以便于制作課件。 收集好課件所需的素材（文字、圖片、動畫等）,返回目錄,新建文件夾,建好站點文件夾及子文件夾，以便分類存放課件中使用的圖片、動畫等素材。 注意：Dreamweaver對中文文件名支持得不是太好，經(jīng)常會有頁面調(diào)用不正確的現(xiàn)象發(fā)生，在新建文件夾或在Dreamweaver中保存網(wǎng)頁的時候，用英文或者數(shù)字作為文件名稱，就可以避免上面的出錯現(xiàn)象。,返回目錄,打開Dreamweaver軟件，在工具欄中，點擊站點-新建站點，這時會彈出一個面板，在這個面板上有基本和高級兩種選擇。在這里，我們選擇基本，給你的站點起個名字(要是英文的)，下面的文本框，

3、要填寫http地址，這個不用去管它。 單擊下一步，會提示你“是否使用服務(wù)器技術(shù)”，選擇“否，我不使用服務(wù)器技術(shù)” 。 單擊下一步，選擇“文件存放的位置”，這里文件位置，是你存放站點的路徑。 單擊下一步，選擇“是否連接遠程服務(wù)器”，在這里，我們選擇“本地/網(wǎng)絡(luò)”。選擇“文件存儲在服務(wù)器上的文件夾”，選擇和上一步存放的文件在同一目錄下。 單擊下一步，會提示你是“否存回和取出文件”，這個不用管它，單擊下一步，點擊完成。,新建站點,返回目錄,Dreamweaver利用表格來布局頁面、排版。 1）點菜單“插入表格”命令，出來一個對話框，設(shè)置好所需表格的行列數(shù)和寬度、邊框等。,插入表格,返回目錄,2）點“

4、確定”即可插入一個33的表格，橫著的是行，豎著的是列，每一個小格叫單元格； 3）在表格的邊框上點一下，可以選中整個表格，下面的屬性面板中也出來表格的各個選項，邊框為0的時候不顯示邊框線；,插入表格,返回目錄,練習1 表格拆分、合并、嵌套 在網(wǎng)頁中制作一個學生管理表，效果如圖3-75所示。先插入一個7行4列的表格，設(shè)置表格寬度和高度，然后合并單元格，輸入相應(yīng)的文本即可。,返回目錄,練習2 用表格布局網(wǎng)頁 制作一個用表格布局網(wǎng)站主頁的實例，效果如圖所示。在本例中，采取了多種插入、修改表格的方法進行頁面布局，旨在通過實例的操作練習，能夠幫助讀者更熟練地掌握表格布局的各個知識點，在今后的表格布局中靈活

5、應(yīng)用，方便快捷地完成頁面布局。,返回目錄,在網(wǎng)頁中輸入文字有二種方法：直接輸入、復制粘貼文字。 注意： 1）輸入文字時，每段前的空兩格，將輸入法工具條設(shè)置為全角狀態(tài)后再按空格鍵。 2）分段時觀察按Shift+EnterEnter區(qū)別,文字的輸入,返回目錄,網(wǎng)頁中所用圖像格式主要有GIF、JPEG和PNG。其中使用最為廣泛的是GIF和JPEG。 在將圖片插入網(wǎng)頁前，先將圖片存放在站點文件夾下的圖片文件夾中。 1）插入圖像時，將光標放置在文檔窗口需要插入圖像的位置，然后鼠標單擊常用插入欄的“圖像”按鈕插入，然后根據(jù)需要設(shè)置大小、對齊方式、邊框等。,插入圖片,返回目錄,2）鼠標經(jīng)過圖像，鼠標經(jīng)過圖像

6、實際上由兩個圖像組成，原始圖像和鼠標經(jīng)過圖像。這兩張圖片要大小相等，如果不相等，Dreaweaver會自動調(diào)整鼠標經(jīng)過圖像的大小跟原始圖像大小一致。,插入圖片,返回目錄,制作一個圖文并茂的網(wǎng)頁，效果如下圖所示。注意應(yīng)用圖像屬性中的左對齊和右對齊。,圖文混排,返回目錄,Flash動畫以小巧、動感、富有交互性而風靡網(wǎng)絡(luò)。在制作網(wǎng)頁時，將Flash動畫應(yīng)用到網(wǎng)頁中，能使網(wǎng)頁更具動感，更富有感染力。 在網(wǎng)頁中插入Flash制作的SWF格式動畫，單擊對象工具欄上的Flash按鈕或單擊的“媒體”下的“Flash”，打開一個對話框，選擇SWF動畫文件即可。 如果需要插入Flash透明，可進行參數(shù)的設(shè)置： 單

7、擊屬性面板中的參數(shù)按鈕，打開參數(shù)設(shè)置對話框，在參數(shù)欄輸入wmode值欄輸入transparent,Flash動畫的插入,返回目錄,練習1： 插入Flash動畫并使背景透明,要求制作一個網(wǎng)頁，設(shè)置網(wǎng)頁背景為藍色，將這個Flash動畫插入到網(wǎng)頁中，并設(shè)置這個Flash動畫的背景透明，這樣可以和網(wǎng)頁背景融合在一起。效果如圖所示。,返回目錄,練習2 Flash導航條,利用在Dreamweaver中直接制作Flash按鈕的功能，制作一個動感的Flash導航條，效果如圖所示。,返回目錄,制作網(wǎng)頁背景音樂主要有兩個步驟，第一是插入音樂文件，其次是隱藏音樂的播放條。而在Dreamweaver中插入背景音樂的基

8、本方法是通過插入插件的方法來實現(xiàn)的。 注意： .mid、.wav、.mp3格式都可作背景音樂，最好用占空間小的文件.mid、.mp3 參數(shù)說明(詳細說明) autostart：true自動播放 hidden：true 隱藏播放控制面板 loop：true 循環(huán)播放,背景音樂的插入,返回目錄,練習： 循環(huán)播放的網(wǎng)頁背景音樂,利用在Dreamweaver中插入插件的功能，制作一個網(wǎng)頁，使這個網(wǎng)頁具備循環(huán)播放背景音樂的功能。,返回目錄,插入音樂的參數(shù)說明,返回目錄, src：音樂文件的路徑及文件名； autostart：true為音樂文件上傳完后自動開始播放，默認為false（否） loop：tru

9、e為無限次重播，false為不重播，某一具體值（整數(shù)）為重播多少次 volume：取值范圍為0-100，設(shè)置音量，默認為系統(tǒng)本身的音量 starttime：“分：秒”，設(shè)置歌曲開始播放的時間，如，starttime=“00:10”， 從 第10開始播放 endtime：分：秒，設(shè)置歌曲結(jié)束播放的時間 width：控制面板的寬 height：控制面板的高 controls：控制面板的外觀 console：正常大小的面板 smallconsole：較小的面板 playbutton：顯示播放按鈕 pausebutton：顯示暫停按鈕 stopbutton：顯示停止按鈕 volumelever：顯示音

10、量調(diào)節(jié)按鈕 hidden：為true時可以隱藏面板,網(wǎng)頁中插入視頻有兩個步驟，第一是插入視頻文件，其次是設(shè)置視頻的寬度、高度。在Dreamweaver中插入視頻的基本方法是通過插入插件的方法來實現(xiàn)的。 注意： 在屬性面板中設(shè)置寬度和高度，若設(shè)置錯誤要重新調(diào)整。,視頻的插入,返回目錄,課件有很多的頁面，為了建立起網(wǎng)頁之間的聯(lián)系我們必須使用超級鏈接。通過超鏈接可以很方便地從一個網(wǎng)頁跳轉(zhuǎn)到另一個網(wǎng)頁。 超級鏈接可通過文字、圖片、熱區(qū)、變換圖像來實現(xiàn)。 1、在網(wǎng)頁中選中要做超級鏈接的文字或圖片。 2、在屬性面板中單擊黃色文件夾圖標，在彈出的對話框里選中相應(yīng)的網(wǎng)頁文件就完成了。,網(wǎng)頁間的鏈接,返回目錄,

11、目標下拉列表中有4個選項，它們的功能如下： _blank：將鏈接的網(wǎng)頁在新窗口中打開 _parent：將鏈接的文檔載入該鏈接所在框架的父框架或父窗口。如果包含鏈接的框架不是嵌套框架，則所鏈接的文檔載入整個瀏覽器窗口。 _self：打開鏈接窗口時會替換原來的窗口。此目標是默認的，通常不需要指定它。 _top：將鏈接的文檔載入整個瀏覽器窗口，從而刪除所有框架。,鏈接目標,返回目錄,有時需要去掉超鏈接文字之下的下劃線，設(shè)置鏈接文字的顏色等。 設(shè)置方法（也可鏈接外部Css樣式） 打開頁面屬性對話框，選中鏈接選項，根據(jù)需要進行相關(guān)設(shè)置,為超級鏈接換個顏色,返回目錄,選中要設(shè)定E-mail鏈接的文字，從常

12、用菜單模式單 擊電子郵件鏈接按鈕。 在E-mail欄輸入電子郵件地址確定。,電子郵件超級鏈接,返回目錄,首頁的設(shè)計,課件的首頁是訪問者看到的第一頁，是課件關(guān)鍵性的一頁，人們往往看到第一頁就已經(jīng)對你的課件有一個整體的印象。課件的首頁一般做成一個簡單的Flash動畫。 注意：1、首頁保存在站點文件夾下，文件名為index.html 或default.html。 2、頁面屬性的設(shè)置，特別給首頁加好一個標題，使訪問者通過標題就可以知道課件的名稱。（每一個網(wǎng)頁都要把標題加好）,返回目錄,頁面屬性的設(shè)置,從菜單欄選擇“修改” “頁面屬性”，或從屬性面板中單擊頁面屬性按鈕，彈出頁面屬性設(shè)置對話框，進行背景、

13、標題、頁面邊距等設(shè)置。,返回目錄,制作網(wǎng)頁前，要確定好網(wǎng)頁的欄目和板塊，確定網(wǎng)頁間的鏈接結(jié)構(gòu)及網(wǎng)頁的整體風格，一般用表格進行布局。1、新建html頁后，保存在站點文件夾下專門存放網(wǎng)頁的文件夾中。 設(shè)置頁面屬性，插入表格布局網(wǎng)頁，（層的運用使網(wǎng)頁更加活潑），,課件內(nèi)容頁的制作（一）,返回目錄,實例練習：用表格布局網(wǎng)頁,1插入表格(寬度用像素)并設(shè)置頁面屬性 2布局Banner和導航條 3布局圖像列表 4布局詳細內(nèi)容,返回目錄,制作網(wǎng)頁前，要確定好網(wǎng)頁的欄目和板塊，確定網(wǎng)頁間的鏈接結(jié)構(gòu)及網(wǎng)頁的整體風格，注意顏色搭配的協(xié)調(diào)。一般用表格進行布局。,課件內(nèi)容頁的制作（二）,返回目錄,課件內(nèi)容頁的制作（三

14、）,利用Dreamweaver與Fireworks（Photoshop）結(jié)合制作網(wǎng)站內(nèi)容頁，效果如下圖所示。首先對這個圖片進行合理的切片并導出，然后再利用表格布局導入進行編輯。,返回目錄,課件內(nèi)容頁的制作（四）,2、建好一個網(wǎng)頁后，其它的網(wǎng)頁我們可以復制、粘貼，然后對網(wǎng)頁重命名，修改內(nèi)容部分。 3、這樣制作的課件以后修改起來比較麻煩，為了便于修改，課件的內(nèi)容頁可使用模板。,返回目錄,為了方便網(wǎng)頁的修改，課件的內(nèi)容頁可以直接套用模板，會迅速生成風格一致的頁面。 1、基于一個網(wǎng)頁創(chuàng)建模板的方法。 簡單步驟： 建好一個網(wǎng)頁另存為模板在要插入內(nèi)容的區(qū)域擊右鍵在彈出的菜單中選中“模板”“新建可編輯區(qū)域”保存。 2、使用模板制作網(wǎng)頁 新建網(wǎng)頁，“修改”“模板”“應(yīng)用模板到頁”，在可編輯區(qū)添加內(nèi)容即可。 3、這樣建好一個網(wǎng)頁后，其它的網(wǎng)頁可復制、粘貼。修改時只需修改模板，其它的內(nèi)容頁就可以自動更新。,模板的制作,返回目錄,課件中文字的字體、大小合適，文字段落制作的層次分明，才能讓瀏覽者更好地閱讀。也使得網(wǎng)頁看起來整潔、美觀。這就用到Css樣式的設(shè)置 1、從外部調(diào)用Css樣式 單擊Css樣式面板中的附加樣式表按鈕，打開鏈接外部樣式表對話框，單擊瀏覽按鈕鏈接或?qū)霚蕚浜玫臉邮轿募?Css樣式,返回目錄,2、利用屬性