1、佛山電大職院Macromedia Dreamweaver8 網(wǎng)頁設計與制作,計算機高級講師：楊　揚電子郵件：gdnhyy@126.com電話：86222030（辦公室）,序,本課程上課特點和要求,本課程計劃安排10次理論課和14次實驗制作課共24晚。實驗課結(jié)束后要書寫實驗報告，于下次實驗課前交來。鑒于本課程的特點，我們并不嚴格區(qū)分理論課和實驗課。中間穿插教授一些Photoshop、Fireworks、Flash等知識。按教學大綱

2、要求，本學期共要完成十一次實驗報告。　　同學們課后必須自己閱讀教材和自行安排時間練習制作，僅靠上幾次課和做幾次實驗肯定是不夠的?！　∥逡还?jié)后完成一個基礎站點模型的制作并交老師檢查。期未機試安排在第十七周進行。機試檢查合格者才能參加中央電大的筆試統(tǒng)考！,序,網(wǎng)頁設計基本流程及所需軟件工具Dreamweaver 8 界面簡介,第一課,第一課：,目的和要求：,了解網(wǎng)頁設計基本流程知道網(wǎng)頁制作所需哪些軟件工具Dreamweaver

3、 8界面簡介,第一課,網(wǎng)站制作流程,需求分析規(guī)劃網(wǎng)站收集資料建立本地站點設計標準頁面添加內(nèi)容測試和發(fā)布站點維護和更新,網(wǎng)站設計制作的基本流程：,第一課,網(wǎng)站制作軟件,圖形處理軟件Photoshop Fireworks動畫制作軟件FlashSwishGIF aninator網(wǎng)頁布局整合排版軟件DreaweaverFrontpage,網(wǎng)站制作一般需三類軟件配合：,第一課,網(wǎng)頁制作概論,網(wǎng)頁規(guī)劃和排版構圖網(wǎng)

4、頁制作工具基礎Fireworks Dreamweaver Flash,第一課,Dreamweaver 8 的安裝過程Dreamweaver 8 界面和菜單標題欄菜單欄快捷工具欄編輯窗口屬性面板浮動面板,第一課,第二課　本地站點的構建 網(wǎng)頁設計基礎知識,學習使用向?qū)?chuàng)建本地站點的方法設置和修改站點屬性建設立站點文件和文件夾結(jié)構管理本地站點HTML及XHTML語言介紹常用的網(wǎng)頁語法標

5、記設置頁面頭信息,第二課,設置整體頁面自屬性制作普通文字頁面在頁面中放入圖像制作圖文混排頁面制作鼠標經(jīng)過圖像交互效果制作導航條的交互效果,第三課：制作圖文混排頁面,第三課,目的和要求：,插入Flash動畫、按鈕、文本插入音頻、視頻插入Applet插入滾動字幕,,第四課　制作多媒體頁面,第四課,目的和要求：,插入并設置表格對表格進行格式化對表格數(shù)據(jù)進行排序使用表格排版網(wǎng)頁,,第五課　使用表格排版網(wǎng)頁,第五課,目的

6、和要求：,制作外部網(wǎng)站鏈接制作內(nèi)部網(wǎng)頁鏈接制作電子郵件鏈接制作空鏈接制作腳本鏈接制作錨點鏈接制作圖像映射熱點鏈接,,第六課　制作網(wǎng)站鏈接,第六課,目的和要求：,了解表單的工作原理制作表單插入各種表單元素,,第七課　制作表單頁面,第七課,目的和要求：,建立交互表單,一、建立表單布局先畫一個2*2表格，插入圖片文字等在預定的單元格中插入表單在表單中插入一個6*2的表格插入表單各元素：文本域、單選鈕、復選框、文本標簽、

7、表單按鈕、彈出菜單等并設置其屬性,,第七課　建立交互表單,第七課,建立交互表單,各表單元素設置如下單行文本域：babyname,20,20,彈出下拉列表菜單：Month,值輸入1~12，默認值任意Day， 值輸入1~31， 默認值任意單選鈕：Gender, male, 已勾選 Gender, female, 未勾選復選框：Checkbox1,charkly,已勾選Checkbox2,guagua,已勾選Checkb

8、ox3,haha, 已勾選多行文本域：suggestion ,寬30,6行表單按鈕：Submit,提交Reset,動作選 “重設”,,第七課,建立交互表單,二、設置表單的數(shù)據(jù)輸入規(guī)則選中表單的提交按鈕在設計面板中選“行為”在“+”號中選“檢查表單”將兩個文本域都選中為“必需的”,,第七課,建立交互表單,三、指定表單的動作光標停在表單中任一位置選標簽在屬性面板中設置：“動作”,,第七課,如果使用電子郵件接收表單

9、結(jié)果：動作填：mailto:gdnhyy@163.comMIME類型填：text/plain,,第八課 使用樣式表,第八課,目的和要求：樣式表的定義樣式表的類型文字樣式的使用背景樣式的使用區(qū)塊樣式的使用邊框樣式的使用鼠標光標樣式的使用為網(wǎng)頁設置整體和局部鏈接效果將樣式表應用于整個網(wǎng)站,,第九課 建設框架網(wǎng)站,第八課,目的和要求： 創(chuàng)建普通框架頁面創(chuàng)建嵌套框架結(jié)構頁面創(chuàng)建浮動框架頁面,框架結(jié)構網(wǎng)頁

10、模板,,第八課,在插入欄---框架---中選擇一種框架結(jié)構設計制作框架頁各部分保存時注意：有一個框架文件和幾個在框架中顯示的頁面文件,一、框架結(jié)構布局,框架結(jié)構網(wǎng)頁模板,創(chuàng)建模板建立模板的可編輯區(qū)域應用模板使模板和文檔分離,,第八課,二、網(wǎng)頁模板,框架結(jié)構網(wǎng)頁模板,創(chuàng)建庫項目在編輯網(wǎng)頁時添加庫項目庫項目元素的編輯修改,,第八課,三、使用庫項目,,第十課　制作動態(tài)效果頁面,第十課,目的或要求：使用層和表格配合進行排

11、版利用層溢出屬性排版使用時間軸制作動畫使用各種行為制作頁面中的動態(tài)效果制作顯示層文本特效制作拖動層特效制作控制時間軸動畫的特效,層概念創(chuàng)建層動畫,,第九課　層的概念及　　　　創(chuàng)建時間軸層動畫,第九課,層在排版布局中的作用與表格相似，但可以層疊層是網(wǎng)頁中唯一可以移動的元素，并可實現(xiàn)顏色、大小、背景等的變化層使網(wǎng)頁有了立體的概念,層概念創(chuàng)建層動畫,,第九課,插入層，在插入欄的“常用”和“布局”中都有“描繪層”設置層屬性，

12、如位置、大小、層疊順序、背景等創(chuàng)建嵌套層在層中嵌入網(wǎng)頁 (在網(wǎng)頁中打開窗口),一、層的概念和應用,用Ctrl T打開代碼編輯窗，輸入：,層概念創(chuàng)建層動畫,層和時間軸動畫的關系（層有自己的定位屬性，時間軸面板描繪了層和圖像隨時間變化的屬性）將層直接拖入時間軸面板，通過調(diào)整或添加關鍵幀建立動畫直接拖拽層錄制運動路徑產(chǎn)生動畫,,第九課,二、創(chuàng)建時間軸層動畫,通過行為創(chuàng)建動態(tài)交互,實驗目的或要求：了解行為的交互和響應模式常用對象

13、和事件了解Dreamweaver 常用的一些自帶動作學會層動畫控制動作，學會顯示/隱藏層動作,,第十課　通過行為 創(chuàng)建動態(tài)交互,第十課,通過行為創(chuàng)建動態(tài)交互,行為的交互和響應模式熟悉常用對象和事件Dreamweaver 自帶動作介紹Dreamweaver 自帶動作示例：層動畫控制示例顯示/隱藏層示例,,第十課　通過行為 創(chuàng)建動態(tài)交互,第十課,通過行為創(chuàng)建動態(tài)交互,,一、行為的交

14、互和響應模式,第十課,通過行為創(chuàng)建動態(tài)交互,,二、 常見對象和事件,第十課,Body (網(wǎng)頁中的正文)OnloadOnUnloadIMG (圖象)OnclikOndblclikonMouseOveronMouseOutForm (表單)onSubmitonReset,通過行為創(chuàng)建動態(tài)交互,Dreamweaver 有許多自帶動作，可以在行為面板中，按“+”號看到。如：播放聲音打開瀏覽器窗口拖動層

15、時間軸播放控制。。。。。。,,三、Dreamweaver 自帶動作介紹,第十課,通過行為創(chuàng)建動態(tài)交互,1、層動畫控制（如鼠標移上去會停止，移開又繼續(xù)走)2、彈出信息窗,廣告窗3、顯示/隱藏層示例,,四、dreamweaver 　　自帶動作示例：,第十課,使用模板和庫制作網(wǎng)站的好處建立、使用并更新模板在頁面中使用庫,,第十一課　使用模板和庫 制作網(wǎng)站,第十一課,目的和要求：,怎樣在頁面

16、中使用插件使用行為插件使用命令插件使用對象插件,,第十二課　使用插件 豐富頁面效果,第十二課,目的和要求：,怎樣測試網(wǎng)站怎樣上傳網(wǎng)站,,第十三課　網(wǎng)站維護和上傳,第十三課,目的和要求：,網(wǎng)頁規(guī)劃,,排版構圖,,網(wǎng)頁制作工具基礎(1),Fireworks 功能分類矢量繪圖位圖圖像編輯GIF動畫制作網(wǎng)頁元素的制作按鈕導航欄彈出菜單,,網(wǎng)頁制作工具基礎(2),Dreamweaver

17、 功能分類基本網(wǎng)頁元素處理文本表格圖片超級鏈接添加表單交互元素建立動態(tài)頁面,,網(wǎng)頁制作工具基礎(3),Flash 功能分類矢量繪圖漸變動畫創(chuàng)建和控制遮罩動畫動作腳本交互影片控制和網(wǎng)頁相關的交互控制,,網(wǎng)頁布局示例,布局設計構圖,,時間軸動畫(1),時間軸動畫(2),時間軸動畫(3),行為響應模式,onMouseOver,Show Popup Menu,事件,動作,對象,IMG,,行為,,,常見對象和事件