2022年《網(wǎng)頁美工設計》教案

1、授課老師：網(wǎng)頁美工設計課程教案課時：授課班級 ：地點：章節(jié)網(wǎng)頁設計基礎學問Dreamweaver 軟件介紹及其基礎操作內(nèi)容教學1使同學明白網(wǎng)頁設計的相關(guān)基礎學問；目標2使同學熟識Dreamweaver 軟件界面的基本操作方法；重點1明白網(wǎng)頁設計相關(guān)概念和網(wǎng)頁的類型；難點2嫻熟把握 Dreamweaver 軟件創(chuàng)建和治理站點的方法；教學課堂講授、案例講解與指導方法教學運算機機房環(huán)境教學過程及內(nèi)容提要時間備注安排一、 引入1、 相互熟識,提出與本學科相關(guān)的學問,介紹本門課程情形、教學內(nèi)約 10 分鐘容及總學時數(shù)進度支配,宣講本課程教學紀律,勉勵同學營造一種學習氛圍,敬重同學,互幫互學,真正達到學以

2、致用；教2、 提出問題：上過網(wǎng)吧有誰自學過網(wǎng)頁設計聽說過網(wǎng)頁設計三劍客約 5 分鐘同學懂得學嗎？過3、程二、 告知同學課堂任務設本 次 課 所 學 習 的 主 要 內(nèi) 容 是 網(wǎng) 頁 設 計 相 關(guān) 基 礎 知 識 和計Dreamweaver 軟件基礎操作；約 25 分鐘三、 逐步演示講解分析教學內(nèi)容1、 網(wǎng)站和網(wǎng)頁的區(qū)分：2、 （1）網(wǎng)頁是 Internet 基本元素；3、 （2）網(wǎng)站由網(wǎng)頁組成；4、 靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁：5、 靜態(tài)網(wǎng)頁：純粹 HTML語言格式的網(wǎng)頁通常被稱為靜態(tài)網(wǎng)頁,靜態(tài)網(wǎng)頁的后綴名通常為.htm 、.html 、.shtml 、.xml ；6、 動態(tài)網(wǎng)頁：很多人認為網(wǎng)頁會

3、動就是動態(tài)網(wǎng)頁,這是個錯誤的觀點,在靜態(tài)的網(wǎng)頁中也可以含有動態(tài)的圖片,這僅僅是視覺上的動態(tài)罷 了；真正的動態(tài)網(wǎng)頁是指實際上并不是獨立存在于服務器上的網(wǎng)頁 約 10 分鐘 約 6 分鐘 文件,只有當用戶懇求時服務器才返回一個完整的網(wǎng)頁；也就是說,它是返回到了客戶端上的網(wǎng)頁；例如網(wǎng)頁文件是以 ASP、PHP、JSP、ASPX為結(jié)尾就是動態(tài)的網(wǎng)頁了；7、 靜態(tài)網(wǎng)頁的特點：約 6 分鐘8、 （1）內(nèi)容相對穩(wěn)固,簡潔被搜尋引擎檢索到；9、 （2）沒有數(shù)據(jù)庫支持,在網(wǎng)站制作和保護方面工作量大；10、 （3）交互性差,在功能方面有很大的限制；約 4 分鐘11、 動態(tài)網(wǎng)頁的特點：12、 （1）以數(shù)據(jù)庫技術(shù)為基

4、礎,可大大降低網(wǎng)站保護的工作量；13、 （2）可實現(xiàn)更多的功能,如用戶注冊、新聞發(fā)布、在線留言等；14、 （3）不利于使用搜尋引擎進行網(wǎng)站推廣；約 8 分鐘同學實踐15、 常見網(wǎng)頁類型：形象頁、主頁、欄目頁、內(nèi)頁、新聞具體頁等；約 12 分鐘16、 網(wǎng)頁設計原就：17、 （1）明白客戶需求 18、 （2）遵循 Web標準 約 20 分鐘 19、 （3）運用形式美法就20、 網(wǎng)頁設計流程：約 50 分鐘同學實踐21、 （1）手繪成效圖：確定網(wǎng)頁主題內(nèi)容和風格 22、 （2）設計成效圖：搜集、整合設計所需素材 總結(jié)23、 （3）版面編輯：網(wǎng)頁的制作與實現(xiàn) 約 40 分鐘24、 （4）網(wǎng)頁美化：動畫

5、設計,網(wǎng)頁測試和發(fā)布 25、 網(wǎng)頁設計的主要軟件：約 4 分鐘 26、 （1）Photoshop 27、 （2）Dweamveawer 28、 （3）Flash 29、 （4）Firworks 30、 Dreamweaver 軟件界面介紹：31、 （1）軟件面板組成及基本操作方法 32、 （2）軟件參數(shù)設置 33、 Dreamweaver 站點創(chuàng)建：34、 站點 - 新建站點 - 設置站點名稱 - 設置站點默認圖像文件夾；35、 同學實訓操作：36、 Dreamweaver 站點創(chuàng)建與設置 37、 Dreamweaver 創(chuàng)建第一個網(wǎng)頁：38、 （1 名稱：39、 （2 設置標題、輸入文本、輸

6、入特別字符 40、 （3）頁面屬性設置 41、 （4）預覽網(wǎng)頁42、四、 同學實訓及輔導；五、 創(chuàng)建第一個網(wǎng)頁；六、七、 課堂小結(jié) 本次課主要內(nèi)容：1、網(wǎng)頁設計基礎學問；2、Dreamweaver 基本使用方法；3、Dreamweaver 創(chuàng)建第一個網(wǎng)頁；后 記授課老師：網(wǎng)頁美工設計課程教案課時：授課班級 ：地點：章節(jié)Dreamweaver 表格操作；內(nèi)容CSS樣式表應用；教學1把握 Dreamweaver 中表格的設計方法；目標2CSS樣式表的使用方法和技巧；重點1嫻熟把握 Dreamweaver 中表格的基本操作方法；難點2明白網(wǎng)頁設計中CSS樣式表的作用和設置方法；教學課堂講授、案例講解

7、與指導方法教學運算機機房時間備注環(huán)境一、教學過程及內(nèi)容提要安排引入1、回 顧 上 次 課 所 學 習 的 內(nèi) 容 ： 網(wǎng) 頁 設 計 基 礎 理 論 知 識 ,約 4 分鐘Dreamweaver 軟件使用初步；教2、提出問題：對Word 中表格操作仍嫻熟嗎CSS是什么如何設置網(wǎng)頁中各種元素的顯示成效？學過3、Dreamweaver 中 表 格 的 使 用 和約 6 分鐘同學懂得程二、告知同學課堂任務設本 次 課 所 學 習 的 主 要 內(nèi) 容 是計Dreamweaver 創(chuàng)建 CSS樣式表；三、逐步演示講解分析教學內(nèi)容1、網(wǎng)頁中表格的作用：2、（1）內(nèi)容組織和定位；但約 30 分鐘同學摸索3、

8、（2）網(wǎng)頁排版；4、表格布局和Div 布局區(qū)分：5、各有優(yōu)勢；6、表格：簡潔,好用,學起來很簡潔上手；各種瀏覽器都支持！7、基本上不會變形；但是代碼冗余較多,保護起來也不怎么便利；約 10 分鐘同學實踐DIV+CSS 優(yōu)點：代碼冗余小,所以網(wǎng)站打開速度快一些；保護起來特別便利；但是要兼容IE6 IE7 火狐等瀏覽器的話,開頭學就會很頭疼這個問題的；往往在 IE6 里面看著整個網(wǎng)頁是好的,是到了 IE7 或者火狐里面就全亂了；8、舉薦：用 div 做框架, table用來儲存數(shù)據(jù)；約 15 分鐘同學懂得9、Dreamweaver 中表格的基本操作：約 35 分鐘同學實踐10、（1）表格和單元格的

9、選擇及屬性設置；11、（2）行和列的添加和刪除；12、（3）單元格的合并和拆分；13、（4）表格的嵌套；約 15 分鐘同學懂得14、實例演示講解：使用表格制作一像素細線；約 40 分鐘同學實踐15、操作步驟：16、（1 插入 1 行 1 列表格；17、（2 設置單元格背景顏色；18、（3 設置單元格高度為1；19、（4 轉(zhuǎn)到代碼視圖；20、（5 把單元格中的 刪除；約 40 分鐘總結(jié)21、輔導同學實訓操作；22、Dreamweaver 中 CSS樣式表的使用：約 5 分鐘23、（1）CSS樣式表文件的創(chuàng)建；24、（2）創(chuàng)建 CSS樣式：網(wǎng)頁鏈接樣式2；25、（3）創(chuàng)建 CSS樣式：網(wǎng)頁凹下鏈接

10、樣式；26、（4）創(chuàng)建 CSS樣式：類鏈接樣式；27、（5）創(chuàng)建 CSS樣式：濾鏡樣式；28、輔導同學進行 CSS樣式實訓操作；29、案例演示講解：個人主頁首頁布局設計30、（1）創(chuàng)建網(wǎng)頁；31、（2）設置網(wǎng)頁屬性；32、（3）使用表格布局網(wǎng)頁（上中下型）；33、（4 使用 Photoshop 制作頁面頭部 Banner 圖片；34、（5）制作導航欄漸變背景圖片；35、（6）制作頁面主體（左側(cè)公告跑馬燈成效和友情鏈接,右側(cè)資訊速遞及圖片列表） ；36、（7）頁面底部設計；四、布置并輔導同學完成課堂作業(yè)；五、六、課堂小結(jié)本次課主要內(nèi)容：1、Dreamweaver 網(wǎng)頁表格基本使用方法；2、Dre

11、amweaver 創(chuàng)建 CSS樣式；后記授課老師：網(wǎng)頁美工設計課程教案課時：授課班級 ：地點：章節(jié)Dreamweaver 中圖像的使用；網(wǎng)頁字體設計；內(nèi)容表單設計制作；教學3把握 Dreamweaver 中圖形圖像的使用和屬性設置方法；目標4把握網(wǎng)頁表單的設計技巧；重點3嫻熟把握 Dreamweaver 中圖像熱點鏈接的創(chuàng)建方法；難點4把握用戶注冊表單的設計方法和技巧；教學課堂講授、案例講解與指導方法教學運算機機房教學過程及內(nèi)容提要時間備注環(huán)境七、引入安排約 4 分鐘教4、回憶上次課所學習的內(nèi)容：Dreamweaver 表格的使用和屬性設約 10 分鐘同學懂得置, Dreamweaver 中創(chuàng)

12、建 CSS的方法；學5、點評上周作業(yè)；約 5 分鐘過6、提出問題：什么是熱點鏈接網(wǎng)站的注冊頁面是如何制作的？程7、告知同學課堂任務設八、計本次課所學習的主要內(nèi)容是Dreamweaver 中圖像的使用和網(wǎng)頁表同學懂得單的設計；九、逐步演示講解分析教學內(nèi)容約 10 分鐘同學懂得37、網(wǎng)頁中支持的圖像格式：jpg 、 gif 、gif動畫、 bmp、png38、網(wǎng)頁中圖像使用原就：約 10 分鐘同學實踐39、（1）盡量小,對較大的圖片文件進行適當?shù)膲嚎s和切割；40、（2）應當選擇與網(wǎng)站主題有關(guān)聯(lián)性的圖片；41、（3）對于網(wǎng)站的標志圖片, 主體應當清晰可見, 圖形的含義最約 10 分鐘同學實踐42、好

13、簡潔明白 , 圖片內(nèi)所含的文字應當清晰且簡潔辨認；約 10 分鐘同學懂得（4）背景圖片只是用來襯托圖片主題的, 切忌過于花哨；約 10 分鐘約 10 分鐘同學實踐43、（5）圖片顏色應當與頁面整體配色和諧；44、Dreamweaver 中圖像的使用：45、（1）插入圖像；46、（2）設置圖像屬性；約 20 分鐘同學懂得47、（3）添加圖像熱點鏈接；約 5 分鐘48、輔導同學實訓操作；49、實例演示： Dreamweaver 中變換圖像的創(chuàng)建方法- 創(chuàng)建導航約 15 分鐘條；50、同學實踐輔導同學完成實例實訓操作；51、網(wǎng)頁字體設計：52、（1）文字樣式；53、（2）大小；約 10 分鐘54、（

14、3）顏色約 15 分鐘55、（4）其它屬性；約 5 分鐘56、實例講解：內(nèi)容具體頁的創(chuàng)建；約 10 分鐘57、輔導同學完成實例實訓操作；58、Dreamweaver 中網(wǎng)頁表單設計制作：59、（1）網(wǎng)頁表單的作用；60、（2）常見表單頁類型；61、實例演示：創(chuàng)建用戶注冊表單頁；約 10 分鐘總結(jié)62、（1）制定插入表單的頁面位置；約 10 分鐘63、（2）插入表單；約 20 分鐘64、（3）在表單中插入表格為表單控件布局；65、（4）插入文字標簽；約 1 分鐘66、（5）插入表單各種控件并設置表單控件的屬性；67、（6）使用 CSS美化表單控件；68、Dreamweaver 中的層的使用方法及

15、其實例講解；69、輔導同學實訓練習；70、Dreamweaver 中行為的添加方法和使用技巧：71、（1）交換圖像；72、（2）彈出信息；73、（3）打開瀏覽器窗口；74、（4）播放聲音；75、（5）轉(zhuǎn)變屬性；76、（6）顯示 - 隱匿層；77、（7）轉(zhuǎn)到 URL.78、輔導同學實訓練習；79、綜合實例演示講解：運用Dreamweaver 中的層和行為來制作網(wǎng)頁下拉菜單式導航條：80、輔導同學實訓練習；十、布置課堂作業(yè)并輔導同學完成作業(yè)實訓：十一、個人主頁用戶表單設計；十二、十三、課堂小結(jié)本次課主要內(nèi)容：1、Dreamweaver 中圖像的使用方法和技巧；2、Dreamweaver 中字體的設

16、計；3、Dreamweaver 中表單頁面的設計制作；后 記授課老師：網(wǎng)頁美工設計課程教案課時：授課班級 ：地點：章節(jié)Photoshop 基本使用方法和技巧內(nèi)容5熟識 Photoshop 軟件界面；教學目標6把握 Photoshop 軟件的基本操作方法；重點5把握 Photoshop 軟件界面基本操作方法和技巧；難點6把握 Photoshop 中的圖片合成和修復的應用方法；教學課堂講授、案例講解與指導方法教學運算機機房環(huán)境教教學過程及內(nèi)容提要時間備注安排學十四、引入約 4 分鐘過8、回憶上次課所學習的內(nèi)容：網(wǎng)頁字體設計,表單頁設計制作；約 10 分鐘程9、點評上周作業(yè)；設10、提出問題：網(wǎng)頁中

17、的圖像是怎么處理的是否用過什么圖像編輯計軟件？11、同學懂得十五、告知同學課堂任務Photoshop 基本使用方法和技巧；約 2 分鐘本次課所學習的主要內(nèi)容是約 5 分鐘約 10 分鐘十六、逐步演示講解分析教學內(nèi)容約 15 分鐘同學實踐81、Photoshop 軟件介紹；82、Photoshop 軟件界面介紹；同學實踐83、Photoshop 基本操作方法：84、（1）首選參數(shù)設置；約 10 分鐘同學懂得85、（2）工具欄的使用；約 10 分鐘同學實踐86、（3）圖像顯示比例設置；約 15 分鐘87、（4）單位標尺設置；88、（5）歷史記錄面板的使用；89、（6）其它工具面板基本操作；90、輔

18、導同學實訓操作；約 20 分鐘同學懂得91、實例演示講解：圖層的基本操作方法；92、輔導同學實訓操作；約 20 分鐘同學實踐93、變換圖像方法：縮放、旋轉(zhuǎn)、斜切、扭曲、透視、變形、裁剪；94、操作步驟：95、（1）打開素材；96、（2）選擇相應區(qū)域；97、（3）選擇變換相應命令；約 20 分鐘同學懂得98、（4）在圖片相應區(qū)域進行操作；99、（5）儲存并退出；約 30 分鐘100、輔導同學實訓操作；101、Photoshop 應用實例講解：圖片合成；操作步驟：（1）導入所需圖片素材；約 35 分鐘同學實踐（2）新建 Photoshop 文件；（3）選取矩形選框工具選取導入素材的部分區(qū)域；約 2

19、 分鐘總結(jié)（4）復制并粘貼到新建文件中并設置邊沿羽化成效；（5）同法處理其它素材；（6）調(diào)整圖像整體顏色成效；（7）導出最終圖像；102、指導同學完成課堂實訓設計實例；103、幾種修飾修復圖像工具的使用及其實例操作演示講解：104、仿制圖章工具、 污點修復畫筆工具、修復畫筆工具、 修補工具、紅眼工具、模糊工具、減淡 / 加深工具、海綿工具；105、操作步驟：106、（1）打開素材；107、（2）選擇對應工具；108、（3）設置相關(guān)屬性；109、（4）在圖片相應區(qū)域進行操作；110、（5）儲存并退出；111、指導同學完成課堂實訓設計實例；112、十七、課堂小結(jié) 本次課主要內(nèi)容：1、Photosh

20、op 軟件的基本操作方法；2、Photoshop 圖片合成方法；3、幾種修飾修復圖像工具的使用；后 記授課老師：網(wǎng)頁美工設計課程教案課時：授課班級 ：地點：章節(jié)Photoshop 進階使用內(nèi)容7圖像的選取和摳圖實例操作演示講解；教學目標8把握 Photoshop 中濾鏡和蒙板的使用方法和技巧；重點7熟識 Photoshop 中幾種常用濾鏡的使用方法；難點8懂得圖層蒙板的作用,把握圖層蒙板的使用方法和技巧；教學課堂講授、案例講解與指導方法教學運算機機房教學過程及內(nèi)容提要時間備注環(huán)境安排約 2 分鐘教十八、引入約 10 分鐘同學懂得12、回憶上次課所學習的內(nèi)容：Photoshop軟件的基本操作方法

21、、Photoshop 圖片合成方法、幾種修飾修復圖像工具的使用；學13、點評上周作業(yè)；約 1 分鐘14、提出問題：什么濾鏡什么是蒙板濾鏡和蒙版有什么用濾鏡和蒙過板怎么用？程設15、約 20 分鐘十九、告知同學課堂任務計本次課所學習的主要內(nèi)容是Photoshop 高級應用,包括濾鏡和蒙板的使用、摳圖方法、顏色調(diào)整；同學實踐二十、逐步演示講解分析教學內(nèi)容約 20 分鐘同學實踐113、圖像的選取和摳圖實例操作演示講解：約 10 分鐘114、（1）快速選擇工具；115、（2）魔棒工具；116、（3）魔術(shù)橡皮擦工具；117、（4）鋼筆工具；118、（5）抽出濾鏡；119、同學實訓課堂實例；120、幾種調(diào)

22、整圖像顏色的方法及其實例操作演示講解：121、（1）灰度圖像成效；約 30 分鐘同學實踐122、（2）色相飽和度調(diào)整；約 30 分鐘123、操作步驟：124、 1）選擇圖像或者圖像區(qū)域；125、 2）執(zhí)行【圖像】| 【調(diào)整】 | 【色相 / 飽和度】命令；126、 3 調(diào)整數(shù)值；127、 4）確定并儲存圖像；128、 其它顏色調(diào)整步驟類似 129、（3）反相成效；約 20 分鐘130、（4）黑白圖像成效；131、（5）漸變顏色成效；約 15 分鐘132、（6）調(diào)整圖像亮度和對比度；同學實踐133、同學實訓課堂實例；約 10 分鐘134、Photoshop 濾鏡的使用方法及其實例操作演示講解：1

23、35、（1）風格化；136、（2）描邊；約 30 分鐘總結(jié)137、（3）模糊；138、（4）素描；139、（5）紋理；約 2 分鐘140、（6）像素化；141、（7）渲染；142、像素畫濾鏡應用實例演示：143、1）選擇圖片對象或區(qū)域（通道）；144、2）執(zhí)行【濾鏡】| 【像素化】 | 【馬賽克】命令；145、3）調(diào)整屬性值；146、4）確定并儲存；147、同學實訓課堂實例；148、Photoshop 圖層蒙板的使用及其實例操作演示講解；149、（1）蒙板的概念；150、（2）蒙板作用；151、（3）蒙板使用方法；152、（4）蒙板應用實例；153、Photoshop 動作及批處理圖像方法：1

24、54、（1）Photoshop 動作的使用方法；155、（2）Photoshop 批處理命令的使用及實例演示；二十一、布置課堂作業(yè)并輔導同學完成作業(yè)實訓；二十二、二十三、課堂小結(jié) 本次課主要內(nèi)容：1、Photoshop 摳圖方法；2、Photoshop 濾鏡的應用；3、Photoshop 蒙板的使用；后 記授課老師：網(wǎng)頁美工設計課程教案課時：授課班級 ：地點：網(wǎng)頁背景圖案的制作章節(jié)LOGO設計制作LOGO；內(nèi)容Banner 設計制作教學9把握網(wǎng)頁各種圖標的設計制作方法；目標10把握 LOGO和 Banner 常用的方法和技巧；重點9把握網(wǎng)頁背景圖案常用的設計方法和技巧；難點10能夠運用所學學問

25、設計出具有深刻內(nèi)涵的的網(wǎng)站教學課堂講授、案例講解與指導方法教學運算機機房教學過程及內(nèi)容提要時間備注環(huán)境安排約 3 分鐘二十四、引入教16、回憶上次課所學習的內(nèi)容：Photoshop摳圖方法, Photoshop約 10 分鐘同學懂得濾鏡的應用, Photoshop 蒙板的使用；學17、點評上周作業(yè)；約 25 分鐘過18、提出問題：網(wǎng)站LOGO有什么用 LOGO圖標的設計制作有哪些方程法和技巧設19、計二十五、告知同學課堂任務本次課所學習的主要內(nèi)容是網(wǎng)站LOGO設計制作,網(wǎng)頁Banner 和導航菜單的設計制作方法；二十六、逐步演示講解分析教學內(nèi)容156、常見網(wǎng)頁背景圖案設計制作：約 30 分鐘同

26、學實踐157、（1）斜線圖案：158、操作步驟：同學懂得159、 1）新建 4 4 大小、透亮背景圖像；約 3 分鐘同學懂得160、 2）放大圖像至3200%以便利設置線條；161、 3 調(diào)整顏色,使用畫筆工具填充線條路徑；162、 4）將繪制好的圖形定義為圖案儲存下來；約 3 分鐘同學實踐163、 5）使用填充命令將圖案平鋪到指定區(qū)域；164、 其它顏色調(diào)整步驟類似 約 20 分鐘165、（2）立體圖案：（制作方法略） ；166、（3）文字圖案：（制作方法略） ；167、（4）漸變背景：（制作方法略） ；168、課堂實例練習及輔導；169、網(wǎng)站 LOGO的作用：約 30 分鐘同學懂得170、

27、（1）LOGO是與其它網(wǎng)站鏈接以及讓其它網(wǎng)站鏈接的標志和門約 4 分鐘戶；171、（2）LOGO是網(wǎng)站形象的重要表達；約 20 分鐘同學實踐172、（3）LOGO能使受眾便于選擇；173、一個好的 LOGO應具備的條件：約 20 分鐘同學實踐174、（1）符合國際標準；175、（2）精致、特殊；約 30 分鐘同學實踐176、（3）與網(wǎng)站的整體風格相融；177、（4）能夠表達網(wǎng)站的類型、內(nèi)容和風格；約 2 分鐘總結(jié)178、網(wǎng)站 LOGO設計制作常見方法及其實例操作演示講解：179、（1）線條的使用；180、（2）圖形的使用；181、（3）文字的使用；182、（4）漸變色的使用；183、課堂實例練

28、習及輔導；184、網(wǎng)頁 Banner 設計應當遵循的原就：185、（1）主題明確；186、（2）與整個頁面相和諧；187、（3）順應用戶的瀏覽習慣；188、（4）能吸引點擊；189、網(wǎng)頁 Banner 的設計制作方法及其實例操作演示講解：190、（1）靜態(tài) Banner；191、（2）動態(tài) Banner；192、課堂實例練習及輔導；二十七、布置課堂作業(yè)并輔導同學完成作業(yè)實訓；二十八、設計個人主頁網(wǎng)站首頁 Logo 和 Banner ；二十九、三十、課堂小結(jié)本次課主要內(nèi)容：1、常見網(wǎng)頁背景圖案設計制作；2、網(wǎng)站 LOGO的設計方法；3、網(wǎng)頁 Banner 的設計制作方法；后記授課老師：網(wǎng)頁美工設

29、計課程教案課時：授課班級 ：地點：章節(jié)網(wǎng)頁按鈕設計制作網(wǎng)頁欄目框設計制作內(nèi)容教學11把握網(wǎng)頁各種圖標的設計制作方法；目標12把握使用欄目框美化網(wǎng)頁方法；重點1把握網(wǎng)頁常見按鈕和小圖標的設計制作方法；難點2網(wǎng)頁欄目框的設計技巧及其表現(xiàn)力的實現(xiàn)；教學課堂講授、案例講解與指導方法教學運算機機房教學過程及內(nèi)容提要時間分備注環(huán)境配三十一、引入教20、回憶上次課所學習的內(nèi)容：網(wǎng)站LOGO設計制作,網(wǎng)頁Banner約 2 分鐘和導航菜單的設計制作方法；約 10 分鐘21、點評上周作業(yè)；22、提出問題：網(wǎng)頁中常見按鈕有哪些類型美麗的水晶按鈕是怎么學制作的？過程23、約 12 分鐘同學懂得設三十二、告知同學課堂

30、任務計本次課所學習的主要內(nèi)容是網(wǎng)頁按鈕設計制作和使用欄目框美化網(wǎng)頁的方法；三十三、逐步演示講解分析教學內(nèi)容1.網(wǎng)頁中按鈕設計理論：；約 40 分鐘同學實踐2.（1）按鈕的類型：有提交功能的“ 真按鈕” 和“ 偽按鈕”3.（2）按鈕的功能：實現(xiàn)提交和標明當前操作；4.（3）按鈕的表現(xiàn)形式：系統(tǒng)標準按鈕和使用圖片自制的按鈕；5.（4）按鈕的位置：簡潔找到、畫面的中心位置；6.（5）按鈕上面的文字表述：言簡意賅,直接明白；7.（6）按鈕的尺寸：適中；8.（7）與其他元素關(guān)系：讓其充分通透；9.（8）留意鼠標滑過的成效：增強按鈕的點擊感；10.網(wǎng)頁常見幾種按鈕的設計制作方法及其實例操作演示分步講解：1

31、1.（1）方形按鈕；約 40 分鐘同學懂得12.簡要步驟：13. 1 繪制矩形邊框；約 35 分鐘同學實踐14. 2）填充顏色：純色或漸變色；15. 3）添加文字；16.（2）圓形按鈕：（步驟略）；約 40 分鐘同學實踐17.（3）斜角型按鈕： （步驟略）；18.（4）橢圓型按鈕： （步驟略）；約 20 分鐘總結(jié)19.（5）水晶按鈕按鈕：約 1 分鐘20.簡要步驟：21. 1 繪制矩形邊框；22. 2）填充漸變色；23. 3）添加文字；24. 4）添加高光層；25. 5）設置模糊邊框；26.課堂實例練習及輔導；27.常見幾種網(wǎng)頁欄目框及其設計制作實例；28.（1）矩形；29.（2）圓角矩形；3

32、0.（3）滑動門型；31.（4）圖標修飾型（回形針） ；32. 課堂實例練習及輔導；三十四、布置課堂作業(yè)并輔導同學完成作業(yè)實訓；三十五、美化個人主頁按鈕和欄目框；三十六、三十七、課堂小結(jié)本次課主要內(nèi)容：1、網(wǎng)頁按鈕設計制作；2、使用欄目框美化網(wǎng)頁方法；后記授課老師：網(wǎng)頁美工設計課程教案課時：授課班級 ：地點：章節(jié)Flash 軟件介紹內(nèi)容Flash 繪圖基礎景物和場景繪制教學熟識 Flash 軟件界面并把握使用Flash 進行繪制各種圖形的方法；目標13明白 Flash 軟件的特點；重點難點14嫻熟使用 Flash 工具欄繪制各種圖形；教學課堂講授、案例講解與指導方法教學運算機機房教學過程及內(nèi)容

33、提要時間備注環(huán)境安排約 1 分鐘三十八、引入教24、回憶上次課所學習的內(nèi)容：網(wǎng)頁按鈕設計制作和使用欄目框美約 3 分鐘同學懂得化網(wǎng)頁的方法；學25、提出問題：網(wǎng)絡上常聽到的閃客指的是什么Flash 軟件有什么過特點 Flash 能做什么？程26、設三十九、告知同學課堂任務計本次課所學習的主要內(nèi)容是明白Flash 及 Flash 工具欄的基礎操作；四十、逐步演示講解分析教學內(nèi)容193、Fireworks軟件介紹；約 15 分鐘同學實踐194、Fireworks的特殊功能：195、（1）可以輸出SWF和 Illustrator7文件；196、（2）與 Dreamweaver 緊密的協(xié)作；約 5 分

34、鐘同學實踐197、（3）答應加入Photoshop 濾鏡；198、（4）可以直接編輯點陣圖；199、（5）更便利的Roll over；約 5 分鐘200、（6）即時預覽；201、（7）可以讀入Photoshop 文件；202、（8）供應 GIF 編輯環(huán)境；203、（9）供應全新的按鈕制作工具；204、（10）供應圖形與文字的樣式庫（Style ）；205、Fireworks軟件界面和常用工具及其基本操作方法206、Flash 軟件介紹約 10 分鐘同學實踐207、Flash 軟件的主要特點：208、（1）Flash 軟件安裝便利,適用場合廣泛；約 15 分鐘209、（2）Flash 制作動畫時

35、間短,學習起來簡潔上手；約 10 分鐘同學實踐210、（3）Flash 生成的文件體積??；約 10 分鐘211、（4）有強大的交互性；約 10 分鐘212、（5）使用矢量圖形和流式播放技術(shù)；約 10 分鐘213、（6）有強大的動畫編輯功能；約 10 分鐘214、（7）動畫成效生動活潑,形象直觀；約 10 分鐘215、Flash 常見的表現(xiàn)形式：約 15 分鐘216、（1）網(wǎng)絡動畫：常見于網(wǎng)頁的片頭；同學實踐217、（2）MTV：在各排行榜中數(shù)量最多；218、（3）網(wǎng)絡廣告： Flash 廣告是當今網(wǎng)絡廣告界的時尚；總結(jié)219、（4）交互網(wǎng)站：可實現(xiàn)純flash網(wǎng)站,但是不利于搜尋引擎約 30

36、分鐘登錄；220、（5）賀卡：是初學者練手的較好選擇,能帶來小小的收入約 40 分鐘221、（6）動畫短片：是Flash 大獎賽的主要形式；約 1 分鐘222、（7）交互嬉戲：將產(chǎn)品廣告做到嬉戲中；223、Flash 軟件界面介紹：軟件界面布局和工具欄的簡潔使用；224、輔導同學完成課堂實訓；225、Flash 中層的基本操作方法；226、使用 Flash 工具欄繪制圖形一：五角星；227、輔導同學完成課堂實訓；228、使用 Flash 工具欄繪制圖形二：大紅燈籠；229、輔導同學完成課堂實訓；230、使用 Flash 工具欄繪制圖形三：水晶按鈕；231、簡要步驟：232、（1）繪制按鈕邊框；

37、233、（2）填充漸變顏色；234、（3）繪制按鈕高光部分；235、（4）繪制按鈕模糊邊框；236、輔導同學完成課堂實訓；237、使用 Flash 工具欄繪制圖形四：QQ企鵝；四十一、布置課堂作業(yè)并輔導同學完成作業(yè)實訓；四十二、四十三、課堂小結(jié) 本次課主要內(nèi)容：1、熟識 Flash 軟件界面；2、嫻熟把握 Flash 工具欄的使用方法；后 記授課老師：網(wǎng)頁美工設計課程教案課時：授課班級 ：地點：章節(jié)Flash 動畫基礎,動畫補間動畫；外形補間動畫內(nèi)容教學嫻熟把握Flash 中幾種基本類型動畫的的設計制作方法和技巧；目標15明白 Flash 動畫實現(xiàn)的原理；重點難點16把握幾種類型動畫的設計方法

38、；教學課堂講授、案例講解與指導方法教學運算機機房教學過程及內(nèi)容提要時間備注環(huán)境安排約 2 分鐘四十四、引入教27、回憶上次課所學習的內(nèi)容：Fireworks軟件的使用、 Flash及約 2 分鐘同學懂得Flash 工具欄的使用；學28、提出問題：動畫實現(xiàn)的原理是什么Flash 中的動畫有什么特點過Flash 動畫有哪些類型？程29、設四十五、告知同學課堂任務計本次課所學習的主要內(nèi)容是明白Flash動畫的特點、學習Flash約 20 分鐘幾種基礎動畫的設計制作方法；四十六、逐步演示講解分析教學內(nèi)容33.Flash 實現(xiàn)的原理；約 10 分鐘同學實踐34.Flash 中的幀及其操作：約 20 分鐘

39、35.（1）幀的類型；36.（2）幀的創(chuàng)建；37.（3）幀的選擇；約 30 分鐘同學懂得38.（4）幀的移動；39.（5）幀的復制；約 24 分鐘同學實踐40.（6）幀的刪除；41.Flash 中的元件和實例介紹；42.基礎動畫及其實例講解：43.（1）位移動畫；約 25 分鐘同學懂得44.（2）旋轉(zhuǎn)動畫；同學實踐約 10 分鐘45.（3）縮放動畫；46.（4）淡出淡入動畫；47.輔導同學完成課堂實訓；48.Flash 動畫補間動畫實例：球體下落成效；約 15 分鐘同學實踐49.簡要步驟：50.（1）創(chuàng)建新文件；約 40 分鐘總結(jié)51.（2）繪制場景物體元件：地面、球體、桌子；約 2 分鐘52

40、.（3）設置球體在桌子上滾動的動畫；53.（4）設置球體下落地面后彈起的動畫；54.（5）預覽、儲存；55.輔導同學完成課堂實訓；56.Flash 外形補間動畫實例：變換文字成效；57.簡要步驟：58.（1）創(chuàng)建新文件；59.（2）繪制場景文字；60.（3）設置文字變形動畫成效；61.（4）預覽、儲存；62. 輔導同學完成課堂實訓；四十七、布置課堂作業(yè)并輔導同學完成作業(yè)實訓；四十八、破殼而出；四十九、五十、課堂小結(jié) 本次課主要內(nèi)容：1、Flash 中的幀及其操作；2、Flash 動畫補間動畫；3、Flash 外形補間動畫；后 記授課老師：網(wǎng)頁美工設計課程教案課時：授課班級 ：地點：素材導入章節(jié)

41、 內(nèi)容教學 目標 重點 難點 教學引導線動畫 遮罩動畫使同學把握Flash8 中引導線動畫和遮罩動畫的基本制作方法；17把握 Flash8 中引導線動畫和遮罩動畫的條件和方法；18把握 Flash8 中使用引導線動畫和遮罩動畫制作復雜動畫的方法和技巧；課堂講授、案例講解與指導方法教學運算機機房教學過程及內(nèi)容提要時間分備注環(huán)境配約 2 分鐘五十一、引入教30、回憶上次課所學習的內(nèi)容：明白 Flash 動畫的特點和學習Flash約 10 分鐘同學懂得幾種基礎動畫的設計制作方法；學31、提出問題：什么是引導線動畫什么是遮罩動畫Flash 中如何實過現(xiàn)對象沿著某條指定路徑進行移動？程32、設五十二、告

42、知同學課堂任務計本次課所學習的主要內(nèi)容是Flash8 中引導線動畫和遮罩動畫的基同學實踐約 15 分鐘本制作方法；約 15 分鐘同學懂得五十三、逐步演示講解分析教學內(nèi)容238、Flash8 中素材的導入：；約 20 分鐘同學實踐239、（1）圖片文件；240、（2）聲音文件；241、（3）視頻文件；242、輔導同學完成課堂實訓；約 10 分鐘同學懂得243、Flash8 引導線動畫及其實例：過山車；約 16 分鐘同學實踐244、簡要步驟：245、（1）繪制車元件；246、（2）繪制場景山外形；247、（3）繪制引導線；約 15 分鐘同學懂得248、（4）設置車的引導線動畫；約 25 分鐘同學實

43、踐249、（5）預覽、儲存；250、輔導同學完成課堂實訓；251、Flash8 遮罩動畫及其實例一：電影文字；252、簡要步驟：同學懂得253、（1）創(chuàng)建文字元件；約 30 分鐘同學作業(yè)254、（2）創(chuàng)建圖片元件；255、（3）設置遮罩動畫；256、（4）預覽、儲存；257、輔導同學完成課堂實訓；258、Flash8 遮罩動畫實例二：水波蕩漾；259、簡要步驟：260、（1）導入素材并將素材打散；約 40 分鐘261、（2）復制水面部分并轉(zhuǎn)換其為原件；約 2 分鐘總結(jié)262、（3）創(chuàng)建波紋元件；263、（4）略微增加水面部分原件的高度（關(guān)鍵點）264、（5）調(diào)整各圖層位置并設置遮罩動畫；265

44、、（6）預覽、儲存；266、輔導同學完成課堂實訓；267、Flash8 遮罩動畫實例三：衛(wèi)星繞地球；268、簡要步驟：269、（1）導入素材；270、（2）繪制圓形；271、（3）設置地球自轉(zhuǎn)動畫元件；272、（4）繪制橢圓引導線路徑；273、（5）創(chuàng)建衛(wèi)星元件；274、（6）設置衛(wèi)星元件的引導線動畫；275、（7）創(chuàng)建遮擋部分的遮罩；276、（8）預覽、儲存；五十四、布置課堂作業(yè)并輔導同學完成作業(yè)實訓；五十五、衛(wèi)星繞地球；五十六、五十七、課堂小結(jié)本次課主要內(nèi)容：1、素材導入；2、引導線動畫；3、遮罩動畫；后記授課老師：網(wǎng)頁美工設計課程教案課時：授課班級 ：地點：章節(jié)商城網(wǎng)站設計案例-首頁商城

45、網(wǎng)站設計案例-欄目頁和具體頁內(nèi)容期末大作業(yè)輔導教學把握商城網(wǎng)站設計制作的方法；目標重點 難點 教學19商城網(wǎng)站規(guī)劃設計；20商城網(wǎng)站設計制作細節(jié)表現(xiàn)；課堂講授、案例講解與指導方法教學運算機機房教學過程及內(nèi)容提要時間分備注環(huán)境配約 2 分鐘五十八、引入教33、回憶上次課所學習的內(nèi)容：Flash8 中基礎動畫的制作方法；約 40 分鐘同學懂得34、提出問題：商城網(wǎng)站設計應當包括哪些部分有哪些特點學五十九、告知同學課堂任務過本次課所學習的主要內(nèi)容是商城網(wǎng)站設計案例；同學實踐程約 50 分鐘同學懂得六十、逐步演示講解分析教學內(nèi)容設約 20 分鐘同學實踐277、簡要設計商城網(wǎng)站的首頁；計約 30 分鐘同

46、學實踐278、輔導同學完成課堂實訓；約 56 分鐘279、簡要設計商城網(wǎng)站的欄目頁；280、輔導同學完成課堂實訓；六十一、布置并輔導同學完成期末大作業(yè)：依據(jù)所學學問和技能,設計制作一個任意類型靜態(tài)網(wǎng)站作品,所使用軟件不限；要求：六十二、（ 1）網(wǎng)站整體結(jié)構(gòu)清晰,導航便利；六十三、（ 2）頁面布局合理、簡潔流暢,顏色搭配和諧統(tǒng)一；約 2 分鐘總結(jié)六十四、（ 3）網(wǎng)站要設計富有肯定意義的LOGO；六十五、（ 4）要有 Flash 動畫和 GIF 動畫,有至少 樣式；2 種以上超級鏈接六十六、（ 5）至少 7 個欄目,網(wǎng)站總頁面數(shù)量 30 個；六十七、（ 6）有用戶注冊或者類似功能的表單頁面；六十八

47、、（ 7）獨立設計完成 ；六十九、（ 8）最終一次課提交并點評（全部源文件一起提交）；七十、課堂小結(jié) 本次課主要內(nèi)容：商城規(guī)劃網(wǎng)站設計；后 記授課老師：網(wǎng)頁美工設計課程教案課時：授課班級 ：地點：章節(jié)企業(yè)網(wǎng)站設計案例內(nèi)容把握企業(yè)網(wǎng)站設計制作的方法；教學目標重點 難點 教學21企業(yè)網(wǎng)站規(guī)劃設計；22企業(yè)網(wǎng)站設計制作細節(jié)表現(xiàn)；課堂講授、案例講解與指導方法教學運算機機房教學過程及內(nèi)容提要時間分備注環(huán)境配約 2 分鐘七十一、引入教35、回憶上次課所學習的內(nèi)容：Flash8 中基礎動畫的制作方法；約 40 分鐘同學懂得36、提出問題：企業(yè)網(wǎng)站設計應當包括哪些部分有哪些特點學七十二、告知同學課堂任務過本次課所學習的主要內(nèi)容是企業(yè)網(wǎng)站設計案例；約 50 分鐘同學實踐七十三、逐步演示講解分析教學內(nèi)容程281、簡要設計企業(yè)網(wǎng)站的首頁：設282、1 考慮網(wǎng)站的內(nèi)容和布局；計283、2 打算網(wǎng)站主體顏色；284、3 設計網(wǎng)站 Logo；約 30 分鐘同學懂得285、4 設計網(wǎng)站導航條；約 60 分鐘同學實踐286、5 設計頁面各模塊；約 3 分鐘總結(jié)287、6 設計頁面底部；288、輔導同學完成課堂實訓；289、簡要設計企業(yè)網(wǎng)站的欄目頁；七十