佛山電大職院macromediadreamweaver8網(wǎng)頁(yè)設(shè)計(jì)與制作

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

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

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

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

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

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

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

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

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

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

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

12、如位置、大小、層疊順序、背景等創(chuàng)建嵌套層在層中嵌入網(wǎng)頁(yè) (在網(wǎng)頁(yè)中打開窗口),一、層的概念和應(yīng)用,用Ctrl T打開代碼編輯窗，輸入：,層概念創(chuàng)建層動(dòng)畫,層和時(shí)間軸動(dòng)畫的關(guān)系（層有自己的定位屬性，時(shí)間軸面板描繪了層和圖像隨時(shí)間變化的屬性）將層直接拖入時(shí)間軸面板，通過(guò)調(diào)整或添加關(guān)鍵幀建立動(dòng)畫直接拖拽層錄制運(yùn)動(dòng)路徑產(chǎn)生動(dòng)畫,,第九課,二、創(chuàng)建時(shí)間軸層動(dòng)畫,通過(guò)行為創(chuàng)建動(dòng)態(tài)交互,實(shí)驗(yàn)?zāi)康幕蛞螅毫私庑袨榈慕换ズ晚憫?yīng)模式常用對(duì)象

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

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

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

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

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