《Dreamweaver網(wǎng)頁設計》教案

1、教案 2012 2013學年第1學期課程名稱 Dreamweaver網(wǎng)頁制作 授課對象 全校各專業(yè)學生 授課教師 周 改 云 職 稱 講 師 教材版本 dreamweaver網(wǎng)頁制作實用教程 張新成 繆亮編著 參 考 書1.Dreamweaver 經(jīng)典范例教程2.dreamweaver網(wǎng)頁設計與制作平頂山學院教務處印制第1章 網(wǎng)頁設計基礎教學目標與要求熟記站標、導航條、廣告條、按鈕等網(wǎng)頁構成要素，以及網(wǎng)頁、網(wǎng)站、IP地址、域名、網(wǎng)址等概念；了解網(wǎng)頁的本質(zhì)和網(wǎng)頁的布局類型和HTML文檔的基本結構，熟練掌握網(wǎng)站建設的基本流程。教學重點重點：站標、導航條、廣告條、網(wǎng)頁、網(wǎng)站、IP地址、域名、網(wǎng)址等概

2、念，以及網(wǎng)站建設的流程教學難點難點： IP地址、域名、網(wǎng)址，HTML文檔的基本結構及其常見標簽教學方法提問、啟發(fā)、圖示、情景教學、案例、課堂討論教學課時2課時第1章 網(wǎng)頁設計基礎教學提示導入課程：大家會輸入文字、制作和處理圖像、設計動畫，如何把這些作品放到internet中，讓更多的人去查閱和欣賞呢？-DW就可以制作網(wǎng)頁。1.網(wǎng)頁的構成要素和組成元素n 網(wǎng)頁的構成要素：站標、導航條、廣告條、標題欄和按鈕；n 網(wǎng)頁的組成元素：文字、圖片、動畫（gif、flash）、表單（交互功能）、音頻、視頻、超鏈接、表格、框架、導航等。2.網(wǎng)頁相關知識簡介n 基本概念： 網(wǎng)頁的本質(zhì) 網(wǎng)頁、網(wǎng)站、主頁、互聯(lián)網(wǎng)

3、動態(tài)網(wǎng)頁、靜態(tài)網(wǎng)頁 IP地址、域名、網(wǎng)址（url）、瀏覽器等概念n 網(wǎng)頁布局 網(wǎng)頁布局的相關概念 常見的布局類型n 網(wǎng)站管理與網(wǎng)頁制作相關軟件 制作和管理網(wǎng)頁工具； 制作和優(yōu)化網(wǎng)頁圖像工具； 制作網(wǎng)頁動畫工具； 其中Dreamweaver、 fireworks、 flash這三個軟件合稱為網(wǎng)頁“三劍客”。 其他小工具軟件。n HTML語言 HTML的概念 HTML文檔的基本結構 幾個常見的html標簽： html、head、title、style、script、link、meta、body、img、p、font等。n XHTML語言簡介 n 腳本語言簡介 3.網(wǎng)頁的設計理念和配色方案n 網(wǎng)頁的

4、設計理念n 色彩的三要素n 網(wǎng)頁中的色彩心理與網(wǎng)頁表現(xiàn)n 色彩搭配應遵循的原則4.網(wǎng)站的開發(fā)流程 網(wǎng)站需求分析 設計制作網(wǎng)站頁面 空間和域名申請 測試和發(fā)布網(wǎng)站 網(wǎng)站推廣 制作頁面第二階段：創(chuàng)建站點，設計制作各級頁面規(guī)劃網(wǎng)站準備素材定義站點設置頁面屬性第一階段：網(wǎng)站需求分析第三階段：申請空間和域名第四階段：測試和發(fā)布網(wǎng)站第五階段：網(wǎng)站推廣5.典型網(wǎng)站分析n 頁面結構n 色彩運用以提問的方式引入課程采用課堂討論教學法，打開幾個典型的網(wǎng)頁讓同學們討論總結構成要素和組成元素。打開一個搜狐主頁，保存成不同的類型，讓大家看保存的效果，加深對網(wǎng)頁本質(zhì)的理解；先打開一個網(wǎng)頁的源文件，結合網(wǎng)絡常識，詳細講解網(wǎng)

5、頁的定義，然后略講網(wǎng)站和主頁的概念。并提醒同學理解并記憶這些概念。以注冊和登錄郵箱為例，對比講解動態(tài)網(wǎng)頁和靜態(tài)網(wǎng)頁的特點和區(qū)別。以平頂山學院和搜狐網(wǎng)站的IP地址與域名為例，簡要講述這兩個概念。通過查看分析知名網(wǎng)站的網(wǎng)址引入url的定義和組成，其它概念略講。提醒學生理解并記憶上述概念。打開一網(wǎng)頁（詳細講解網(wǎng)頁布局效果的教程）讓學生討論、分析總結布局類型。根據(jù)學生特點簡要講解ps、flash、fw等軟件在網(wǎng)頁設計中的功能。 打開搜狐主頁的源代碼，讓學生認識一下html語言及其結構，然后分別用記事本和dw創(chuàng)建2個最簡單的網(wǎng)頁，讓學生細看其源代碼，并詳細講解8個基本標簽及其結構關系，最后根據(jù)時間酌情講

6、解其它幾個常見標簽。簡要講解這兩個概念，然后創(chuàng)建一個網(wǎng)頁，復制無縫循環(huán)的代碼并粘貼到網(wǎng)頁的body標簽，讓學生了解腳本語言的功能。讓學生欣賞插入后的效果，吸引學生dw的相關代碼。結合上網(wǎng)的經(jīng)驗，讓學生總結網(wǎng)頁的設計理念。色彩的三要素和心理表現(xiàn)學生在上學期的ps課程中學習過，采用提問法，進行復習；然后打開幾個典型網(wǎng)站，分析其配色方案，最后總結網(wǎng)頁中色彩運用的原則。根據(jù)設計的先后順序和學生一起分析總結網(wǎng)站的開發(fā)流程，并用圖加以解釋，重點講解網(wǎng)站的需求分析，以加深學生對重點知識的掌握。采用課堂討論教學法，打開幾個典型的網(wǎng)頁讓同學們討論總結網(wǎng)站的構成要素、組成元素、布局結構和配色方案。作業(yè)布置：1.察

7、看并對比分析大型網(wǎng)站（如中國網(wǎng)、著名學校網(wǎng)、著名醫(yī)院網(wǎng)、官方網(wǎng)、科技網(wǎng)、娛樂休閑運動網(wǎng)、兒童網(wǎng)、體育網(wǎng)、著名出版社網(wǎng)、cctv網(wǎng)站、sohu、yahoo、IBM、微軟等）的風格、色彩搭配與布局。2 .察看的同時下載自己需要的文章、圖片、軟件等資源。.課后習題。提問小結：通過提問、啟發(fā)、圖示、情景教學、課堂討論等教學方法的綜合運用，提高了學生的學習興趣，從學生的反應看，授課效果很好。第2章 Dreamweaver基礎知識教學目標與要求熟悉Dreamweaver 8工作界面 ，熟記幾個常用的工具按鈕和菜單命令；熟練掌握站點的創(chuàng)建步驟，能快速規(guī)范地創(chuàng)建站點；能夠快速創(chuàng)建、打開、保存網(wǎng)頁文檔；能熟練設

8、置頁面的屬性。教學重點1.創(chuàng)建站點并組織站點的結構;2. 在站點中創(chuàng)建網(wǎng)頁3.頁面的屬性設置教學難點HTML基礎教學方法舉例為主，適當講授操作要領，提問以測試課題效果。教學課時2課時第2章 Dreamweaver基礎知識教學 提示我們一貫都是瀏覽網(wǎng)頁，想自己動手做網(wǎng)站嗎？用什么工具做網(wǎng)站？怎樣做呢？- Dreamweaver網(wǎng)頁制作工具。2.1 熟悉Dreamweaver 8工作界面 2.2 網(wǎng)站創(chuàng)建與管理 2.2.1 站點的定義、組成和結構 2.2.2 網(wǎng)頁文檔與文件夾命名規(guī)則 2.2.3創(chuàng)建本地站點的步驟2.2.4組織站點結構2.3 網(wǎng)頁文檔基本操作 新建、保存、預覽、打開、關閉2.4 基

9、本頁面屬性設置 制定文檔標題和邊距、網(wǎng)頁背景顏色和背景圖像，為網(wǎng)頁設置文本屬性、鏈接屬性和跟蹤圖像的屬性，總結頁面的使用的技巧：拋出問題，引入新課啟動dw，詳細講解插入欄、文檔標簽與“文檔”工具欄、狀態(tài)欄的作用，區(qū)分標簽檢查器、標簽選擇器、標記選擇符3個概念及其作用 詳細講解站點的定義、組成、結構，以及文件和文件夾的命名規(guī)則。演示站點的創(chuàng)建過程和步驟，著重提出保存和站點文件夾的命名。詳細講解站點結構的組織方法和原則。分別演示這幾個操作通過dw設計視圖分別創(chuàng)建1個網(wǎng)頁，分別演示文檔標題和邊距、背景顏色和背景圖像、文本和鏈接屬性，以及跟蹤圖像的屬性的設置方法和步驟，幫助學生掌握頁面的設置過程。并總

10、結頁面設置和創(chuàng)建過程中的一些使用技巧。作業(yè)：習題一第1，2, 3 題小結：本次課內(nèi)容操作性很強，經(jīng)過學生自己上臺操作，發(fā)現(xiàn)大多數(shù)學生都能創(chuàng)建并組織好一個站點，還能快速地設置網(wǎng)頁的屬性，達到了教學目標的要求。第3章 網(wǎng)頁中的基本元素教學目標與要求1.熟練操作網(wǎng)頁中的文本；2.熟練插入各種格式的圖像并設置其屬性；3.了解圖像切片的作用；4.熟練制作圖像切片，并插入到dw中教學重點1.文本對象的插入和格式設置；2.GIF、PNG和JPEG三種圖像格式 的異同點和使用環(huán)境；3.用fireworks制作網(wǎng)頁切片的方法； 教學難點1.設置文本標題；段落的設置效果；2.GIF、PNG和JPEG三種圖像格式的

11、異同點和使用環(huán)境；3.Dreamweaver 8.0中使用圖像的一些基本方法和技巧；4. 在dreamweaver中插入用fireworks制作的切片教學方法課堂講授為輔，多媒體演示為主，適當舉例，提問以測試課題效果，實驗式教學。教學課時4課時第3章網(wǎng)頁中的基本元素教學提示復習上節(jié)內(nèi)容：1 如何創(chuàng)建站點？2 如何站點結構的組織3.1網(wǎng)頁中文本的操作. 認識文本按鈕及屬性面板 思考題：根據(jù)以前所學知識說出文本的編輯和設置屬性各包括幾個方面？. 插入文本和對象n 將文本（英文、中文、數(shù)字）添加到文檔中的3種方法。n 插入特殊字符n 水平線 n 插入日期：菜單法；插入欄按鈕法n 對插入的文本也可以執(zhí)

12、行刪除、搜索、替換、檢查拼寫（文本檢查拼寫shift+f7）等操作。. 設置文本格式 字符的樣式包括的方面及其設置方法. 設置文本標題 標題的含義與作用3. 設置段落效果 1 . 設置段落格式 .縮進段落對齊段落 （4種對齊方式）.分段與換行的相關操作和區(qū)別：.創(chuàng)建項目列表.網(wǎng)頁圖像的運用.網(wǎng)頁中圖像格式簡介 1. 圖像在網(wǎng)頁中的作用和網(wǎng)頁中常用圖像格式有：GIF 、JPEG 、PNG。2.三種圖像格式的特點和在網(wǎng)頁中的使用場合。 在Web頁上顯示圖片之前，通常需要考慮下列三個問題：.在網(wǎng)頁中使用圖像1.插入圖像：2.插入圖像占位符：注意圖像占位符的命名規(guī)則和作用3.創(chuàng)建鼠標經(jīng)過圖象（輪換圖像

13、）4. 在dw中圖像的編輯功能僅適用于GIF 和JPEG 圖像格式。 在屬性檢面板中編輯圖像，上述設置也可通過菜單實現(xiàn)：修改-圖像 用fireworks優(yōu)化圖像。熱點工具的使用和圖像熱區(qū)的添加 .設置圖文混排的效果：7.制作電子相冊：命令創(chuàng)建網(wǎng)站相冊3.2.3切片在fw中的創(chuàng)建和在dw使用打開大圖片網(wǎng)頁時，總是等待很長時間，怎樣處理才能減少圖片的下載時間呢？-做成切片。1.切片的定義和作用2.切片在fw中的創(chuàng)建方法和步驟3.在DW中插入Fireworks HTML（切片）的方法和步驟 將Fireworks HTML插入到Dreamweaver中的方法。方法1：將切片從Fireworks復制到剪

14、貼板上，然后直接粘貼到Dreamweaver文檔代碼視圖中的相應位置處。方法2：直接將Fireworks HTML插入到Dw中的操作步驟.網(wǎng)頁多媒體的運用3.3.1在網(wǎng)頁中使用視頻flash1.網(wǎng)頁中常見的視頻文件格式和插入方法；2.常見的flash文件格式和插入方法；flash文件（.fla格式）、flash影片文件（.swf格式）、flash模板文件（swt格式）、flash元素文件（.swc格式）、flash視頻文件（.flv格式）3.3.2在網(wǎng)頁中使用音頻 添加聲音需要考慮的因素：添加的的、文件大小、聲音品質(zhì)和在不同瀏覽器中的差異。1.音頻文件的格式和相應的特點：n 網(wǎng)頁中常見的音頻格

15、式有：u mid/midi格式：。u wav和aif（aiff）文件2.在網(wǎng)頁中插入音頻文件的2種方式：n 鏈接到音頻文件n 嵌入聲音文件3.4dw擴展插件1.安裝擴展插件2.使用擴展插件使用擴展插件主要有2個步驟： 先安裝插件 然后啟動dreamweaver，在相應的位置找到調(diào)用擴展的命令即可。3.在“類型”欄中顯示擴展的類型含義：類型含義對象在dw界面的“插入”工具欄調(diào)用該擴展插件命令在dw的“命令”菜單中調(diào)用擴展行為在dw的“行為”面板中調(diào)用擴展4.常用擴展插件的安裝和使用Page transitions有超級鏈接時，頁過渡（進入/退出）效果命令要選定整個頁面（即body標簽），再在命令

16、菜單中找到該命令即可實現(xiàn)（效果見實例站點中guodong1.html、 guodong2.html 、 guodong3.html ）Typewriter.mxp模擬打字行為先把要添加該效果的對象放入AP元素中，然后在行為面板中找到y(tǒng)aromat|typewriter即可實現(xiàn)，文字的打印效果就顯示在AP元素中。 (guodong1.html中打印文字）Sound.mxp插入背景音樂對象要選定整個頁面（即body標簽），再在“常用”插入欄中找到sound按鈕即可實現(xiàn)Marquee.mxp滾動文字插件對象要選定整個頁面（即body標簽），再在“常用”插入欄中找到marquee按鈕即可實現(xiàn)Inser

17、t Greeting.mxp插入問候語對象把光標定位在頁面的合適位置，然后選擇“插入”欄中的“CN Insert Greeting”按鈕即可實現(xiàn)Calander.mxp對象把光標定位在頁面的合適位置，然后選擇“插入”欄中的“calander”按鈕即可實現(xiàn)Persistent layers滾動鏈接的AP元素行為先把要添加該效果的對象放入AP元素中，然后在行為面板中找到ribbers zeewolde| Persistent layers即可實現(xiàn)，一般用來顯示廣告信息。（ guodong1.html中的”送給你了“）以提問的方式復習上次課內(nèi)容結合WORD，通過復習的方式，總結dw中文本的操作； 先

18、簡要演示一下各種文本符號的插入方法，然后輸入一首小詩，調(diào)整其格式；接著復制一篇文章粘貼到dw中；最后導入一篇word文檔； 先簡要講述一下文本格式、標題、段落的設置的含義和步驟，然后讓學生走上講臺對上述插入的文本設置相應的字符格式、標題級別、段落效果，并選擇個別段落創(chuàng)建項目列表，以加深印象。通過比較法講解各圖像格式的特點舉例：在文檔中插入各種圖像對象，并設置其格式屬性。演示制作圖像熱區(qū)和圖文混排的效果；演示制作電子相冊以問題的形式引入切片的定義和作用。本內(nèi)容盡量調(diào)整在機房講解。詳細講解并演示切片在fw中制作和在dw中插入的方法與步驟。用比較法總結網(wǎng)頁中出現(xiàn)的視頻文件的格式及其特點，舉例講解視頻

19、文件的插入方法和屬性設置；用比較法總結網(wǎng)頁中出現(xiàn)的flash文件的格式及其特點，重點講解flash按鈕、flash文本和flash視頻的插入方法和屬性設置；用比較法總結網(wǎng)頁中常見的音頻文件格式及其特點。舉例演示音頻文件的插入和屬性設置，重點講解背景音樂的插入和設置。重點講解頁面過度效果、sound、marquee和滾動鏈接的AP元素4個插件的用法和設置先演示這幾個常用擴展插件的安裝和使用方法，然后讓學生上臺操作，教師指點操作過程和方法 擴展這本分內(nèi)容安排到行為之后講解作業(yè)：1 . 填空題（1）使用屬性檢查器或【文本】菜單中的選項可以設置或更改所選文本的字體特性?？梢栽O置字體_ _（如粗體或斜體

20、）和_。（2）若要插入更多的特殊字符，請選擇_ | _ | _或在_欄中選擇_圖標，選擇一個字符，然后單擊【確定】。（3）在計算機領域中，圖像分為_和_2大類。（4）GIF圖像采用的是_壓縮格式。2 . 選擇題（1）在網(wǎng)頁中連續(xù)輸入空格的方法是_。 A連續(xù)按空格鍵 B按下Ctrl鍵再連續(xù)按空格鍵 C轉(zhuǎn)換到中文的全角狀態(tài)下連續(xù)按空格鍵 D按下Shift鍵再連續(xù)按空格鍵（2）網(wǎng)頁通?？梢灾С值膱D像格式有_。 AGIF BBMP CAVI DPSD EPNG FJPEG。3.簡答題（1）網(wǎng)頁中常用的圖像格式有哪些？各有什么特點？如果在網(wǎng)頁中添加動畫格式的浮動廣告，采用何種格式？為什么？電子相冊，應該

21、用哪種格式最好？ (2)如何創(chuàng)建鼠標變換圖像和圖像熱點？4.操作題： 搜集自己的喜愛的圖片，制作一個電子相冊。小結：本章內(nèi)容較多，但交簡單，需要邊講解邊對比總結，通過對比總結和學生上臺操作演示，從學生上機的作業(yè)來看，授課效果很好。第4章 使用表格與布局表格布局網(wǎng)頁教學目標與要求1.了解表格和布局表格在網(wǎng)頁布局中的作用；2.掌握表格和布局表格的插入方法和基本編輯方法；3.掌握表格和布局表格、單元格和布局單元格的屬性設置；4.通過對表格和布局表格的學習，提高學生學習網(wǎng)頁制作的興趣，增強學生的審美觀教學重點1 表格的插入方法、基本編輯方法與應用；2 布局表格和布局單元格的繪制方法、屬性設置與應用教學

22、難點1.表格和單元格的屬性設置與應用；2.布局表格和布局單元格的繪制與屬性設置教學方法多媒體演示，案例教學，任務驅(qū)動，引導教學；提問式教學。教學課時2學時第4章 使用表格與布局表格布局網(wǎng)頁教學提示用表格控制文字、圖片、動化等對象的位置，使網(wǎng)頁的布局緊湊又整齊美觀。常用的頁面設計布局類型有：表格、布局表格和AP元素三種，本章著重講解如何使用表格和布局表格布局頁面。4.1.表格模式1.dw中表格的3種模式 2.模式切換的操作方式：查看-表格模式-標準模式/布局模式/表格擴展模式。3.模式的區(qū)別與注意事項：n 只有在“設計”視圖中才可切換到“布局”模式；n 在不同模式下，工具欄的各個按鈕作用不同；n

23、 在布局模式中不能像布局表格的空白區(qū)域插入內(nèi)容，只能創(chuàng)建布局單元格，布局單元格才是承載具體內(nèi)容的容器。4.2使用表格布局網(wǎng)頁1表格的作用2.表格的組成部分 表格的行、列、單元格、邊距、間距、邊框3.表格的標記n 標記、標記、標記n 三者的對應位置關系4.表格的基本操作n 表格的插入、選擇、刪除、大小調(diào)整；n 單元格的選擇、合并、拆分、大小調(diào)整；n 表格在“擴展表格”模式和“標準”模式下的應用5.嵌套表格 n 表格嵌套的作用n 創(chuàng)建嵌套表格的操作方法。6.導入和導出表格數(shù)據(jù)、7. 表格布局網(wǎng)頁的應用實例8. 表格布局的缺點4.3布局表格布局網(wǎng)頁1.繪制布局表格繪制布局表格的注意事項： 2.繪制布

24、局單元格繪制布局單元格的注意事項：3.設置布局表格和布局單元格的屬性和參數(shù)4.在布局單元格中添加內(nèi)容 5.課堂實例用布局表格布局網(wǎng)站主頁展示一個布局合理、美觀的網(wǎng)頁，激起學生的學習興趣。簡要講解并3種表格模式的作用，重點演示不同模式下按鈕的使用回顧word和excel中講過的有關表格的概念和基本操作，引入dw中表格的概念和基本操作。重點講解表格的屬性設置含義。插入一個表格，并在每個格中插入不同的內(nèi)容，然后切換到代碼視圖，讓學生識記三個標簽。逐一演示表格的各個基本操作。重點講解創(chuàng)建嵌套表格的原因打開一個示例網(wǎng)頁，讓學生上講臺比照著制作出相同效果討論總結表格布局的缺點重點演示并總結繪制布局表格和布

25、局單元格的注意事項。演示設置布局表格和單元格的屬性；在設置好屬性的布局單元格中添加文章、圖像和多媒體。先和學生一起分析左側網(wǎng)頁的操作思路和主要步驟，然后讓學生上臺操作，以加深印象。作業(yè)：課堂作業(yè)：1.敘述3種模式的概念及切換方法。2.說出表格和布局表格的作用3.敘述“表格擴展模式”的作用4.什么是間隔圖像？書面作業(yè)：課后習題。小結：通過與學生熟悉的word中表格的操作對照講解，本章的講解顯得較輕松；讓學生上臺操作，提高了學生的學習積極性和主動性，教學效果較好。第5章 使用框架布局網(wǎng)頁教學目標與要求了解框架網(wǎng)頁的概念；熟練創(chuàng)建、保存框架網(wǎng)頁，并設置框架和框架集的屬性；框架中超級鏈接的創(chuàng)建和目標屬

26、性設置教學重點熟練創(chuàng)建保存框架網(wǎng)頁，并設置框架和框架集的屬性；框架中超級鏈接的創(chuàng)建和目標屬性設置教學難點框架網(wǎng)頁的概念和保存；框架中超級鏈接的創(chuàng)建和目標屬性設置教學方法多媒體演示為主，適當舉例，人體媒體結合式教學，課堂講授，師生互動，提問式教學。教學課時2學時第5章 框架網(wǎng)頁教學提示5.1框架和框架集的概念、結構和應用1.基本概念l 框架網(wǎng)頁、框架集、框架l 框架和框架集的關系2框架網(wǎng)頁的結構 3.認識框架面板：4.框架網(wǎng)頁的應用：通常用于導航。5.框架網(wǎng)頁的優(yōu)缺點5.2 創(chuàng)建和保存框架與框架集5.2.1 使用預設的框架集1.創(chuàng)建新的空預設框架的具體操作步驟。修改框架名稱必須以字母開頭，可以包

27、含數(shù)字、下劃線（_）；但不允許是javascript中的保留字（如top或navigator）、連字符（-）、句點、空格和；而且區(qū)分大小寫。2.創(chuàng)建預設的框架集并在某一框架中顯示現(xiàn)有文檔5.2.2 創(chuàng)建和編輯框架1.創(chuàng)建框架2.刪除框架3.建立嵌套的框架集4.保存框架和框架集5.3設置框架及框架集的屬性1.選擇框架：通過“框架”面板來選擇框架和子框架。2.設置框架屬性n 框架的背景顏色可以在頁面屬性中進行設置n 在框架的屬性面板中進行設置框架的的名稱、源文件、鏈接、邊距、滾動、邊框和能否調(diào)整大小等。 3.設置框架集屬性：邊框、邊框大小和邊框顏色。5.4設置框架集中的超級鏈接5.4.1在框架網(wǎng)頁

28、中建立超鏈接5.4.2框架網(wǎng)頁中設置超級鏈接的目標打開方式1.相對鏈接目標：_blank 、_top 、_parent、_self2.絕對鏈接目標：mainframe、Leftframe、Rightframe、Topframe。5.6課堂實例制作一個框架網(wǎng)頁通過看看和分析知名網(wǎng)站使用框架的布局效果，引入框架和框架集的概念舉例演示框架的創(chuàng)建和保存操作打開框架面板，查看并總結框架和框架集的屬性設置及其含義演示框架中的超級鏈接效果舉例演示框架網(wǎng)頁的設計與制作作業(yè)：1.使用框架的優(yōu)點是什么？ 2.課后習題小結：本章介紹了框架網(wǎng)頁的創(chuàng)建、保存和屬性設置，著重講解了框架網(wǎng)頁的中超級鏈接的創(chuàng)建和目標設置，內(nèi)

29、容較少，授課效果較好。第6章 AP元素的創(chuàng)建和使用教學目標與要求理解AP元素的作用；熟記AP元素的命名原則和特點；掌握繪制AP元素和插入AP元素的方法和區(qū)別；熟練設置AP元素的屬性；靈活、合理地使AP元素隨心所欲的布局頁面內(nèi)容。教學重點AP元素的作用；AP元素的插入和繪制；AP元素的屬性設置；AP元素的特點；AP元素的應用教學難點AP元素的作用；AP元素的屬性設置；AP元素的應用教學方法多媒體演示為主，適當舉例，人體媒體結合式教學，課堂講授，師生互動，提問式教學。教學課時2課時第6章AP元素的創(chuàng)建和使用教學提示大家 在瀏覽網(wǎng)頁時，注意到滾動的廣告圖片了嗎？-它是使用AP元素做出來的效果。6.1

30、應用AP元素布局網(wǎng)頁6.1.1AP元素的概述1、AP元素的應用：布局網(wǎng)頁；制作簡單動畫；設計特效等。2、AP元素的定義、AP元素的特點、AP元素的分類、AP元素的優(yōu)缺點、AP元素面板。6.1.2創(chuàng)建AP元素1.在首選參數(shù)對話框中設置AP元素的參數(shù)，可設置AP元素嵌套和顯示AP元素錨記。2.插入AP元素與繪制AP元素3.繪制AP元素和插入AP元素的差別4.AP元素的html代碼5.AP元素的絕對定位（一般是默認設置）和相對定位6.1.3.AP元素屬性詳解1.單個AP元素的屬性：AP元素編號、左和上、寬和高、Z 軸、背景圖像、背景顏色、剪輯、可見性、溢出：2.多個AP元素的屬性：6.1.4AP元素

31、的基本操作激活AP元素、選擇AP元素、調(diào)整AP元素大小、移動AP元素、對齊AP元素、吸附AP元素到網(wǎng)格6.1.5嵌套AP元素6.1.6.AP元素和表格的相互轉(zhuǎn)換6.2 課堂實例用AP元素布局網(wǎng)站首頁拋出問題，引入新課強調(diào)AP元素在頁面布局中的作用演示AP元素的繪制要領；選擇AP元素，讓學生觀察的屬性，并詳細講解各屬性的設置含義。演示AP元素的各種操作綜合舉例作業(yè)：課后習題上機作業(yè)：使用AP元素、表格和css排版網(wǎng)站首頁小結：本章著重講解AP元素的創(chuàng)建、命名和屬性設置，讓學生親自上臺制作案例，加深了對新知識的印象。上機時發(fā)現(xiàn)學生基本都能完成操作任務，總體感覺授課效果較好。第7章超級鏈接教學目標與

32、要求了解超級鏈接的路徑和鏈接結構；熟記超級鏈接目標打開方式的設置含義；熟練掌握超級鏈接的4種創(chuàng)建方法；能快速完成5種特殊超級鏈接的創(chuàng)建方法和步驟。教學重點1.超級鏈接的各種創(chuàng)建步驟2.超級鏈接目標打開方式的設置含義3.超級鏈接的4種創(chuàng)建方法4. 5種特殊超級鏈接的創(chuàng)建方法和步驟教學難點1.超級鏈接的路徑2.超級鏈接目標打開方式的設置含義教學方法多媒體演示為主，適當舉例，人體媒體結合式教學，課堂講授，師生互動，提問式教學。教學課時2課時第7章 超級鏈接教學提示大家已經(jīng)會創(chuàng)建不同內(nèi)容的網(wǎng)頁了，怎樣把這些分散的網(wǎng)頁組合成一個統(tǒng)一的整體，讓瀏覽者只打開主頁就能訪問到其它各個面呢？-需要創(chuàng)建超級鏈接。7

33、.1超級鏈接的定義和目標選項的含義1 .超級鏈接的定義2.屬性檢查器的“目標”彈出菜單中各個選項的含義：_blank、_parent、_self、_top。3：創(chuàng)建一個完整的超級鏈接必須考慮的4個方面： 鏈接的載體 鏈接的目標 鏈接的路徑 鏈接目標的打開方式7.2超級鏈接的路徑 在dreamweaver中有三種類型的鏈接路徑： 絕對路徑、文檔相對路徑、站點根目錄相對路徑。7.3超級鏈接的分類按照鏈接路徑的不同，網(wǎng)頁中超鏈接一般分為內(nèi)部鏈接、錨點鏈接、外部鏈接3種類型。 按照使用對象的不同，網(wǎng)頁中的鏈接又可以分為以下幾種：文本超鏈接、圖像超鏈接、電子郵件鏈接、錨點鏈接、軟件下載鏈接、多媒體文件鏈

34、接、空鏈接等。7.4超級鏈接的創(chuàng)建方法1. 使用屬性檢查器中鏈接后的文本框創(chuàng)建各種各樣的超級鏈接；2.使用屬性檢查器中的瀏覽文件圖標創(chuàng)建各種各樣的超級鏈接；3.使用“指向文件”圖標創(chuàng)建超級鏈接；4.使用菜單中的“超級鏈接”命令創(chuàng)建超級鏈接；7.5幾種特殊的超級鏈接詳解1錨記鏈接2創(chuàng)建腳本鏈接3給圖像熱區(qū)加上超級鏈接 4創(chuàng)建電子郵件超鏈接 5創(chuàng)建空鏈接7.6超級鏈接的基本操作：更新、修改、檢查 7.7超級鏈接的結構7.8總結創(chuàng)建超級鏈接的5點建議 拋出問題，引入新課。（2分鐘）打開幾個典型網(wǎng)站的主頁，讓大家分析超級鏈接的功能，進而引入超級鏈接的定義、分類和目標列表的設置。讓學生討論總結創(chuàng)建超級鏈

35、接的注意事項（20分鐘）通過舉例和配圖講解鏈接路徑的類型和在創(chuàng)建超級鏈接時路徑的書寫方法（20分鐘）采用討論法，讓學生討論總結超級鏈接的分類。（8分鐘）舉例講解各種方法下超級鏈接的創(chuàng)建方法和創(chuàng)建步驟，并總結各種方法的使用情況（25分鐘）借助上面講過的創(chuàng)建方法，讓學生上臺操作實踐，創(chuàng)建各種類型的超級鏈接。根據(jù)情況不部分內(nèi)容調(diào)整到機房講解。（30分鐘）簡要講述超級鏈接的修改與更新操作。（15分鐘）結構較為簡單（15分鐘）總結并提出建議。（10分鐘）作業(yè)：1.敘述超級鏈接的定義 2.說出超級鏈接的路徑3.說出超級鏈接的4種創(chuàng)建方法。小結：本章內(nèi)容較多，超級鏈接的路徑較難理解；其他內(nèi)容相對容易，且操作

36、性較強，易掌握，學生基本都能創(chuàng)建各種類型的超級鏈接，總體感覺授課效果還好。第8章交互（行為、圖AP元素和時間軸的綜合運用，以及javascript）教學目標與要求1. 熟練地應用行為，能夠隨心所欲地制作出具交互功能的網(wǎng)頁；2. 掌握時間軸的概念和基本用法；3. 通過對行為的學習應用，增加網(wǎng)頁設計的特殊效果，提高學生對學習網(wǎng)頁制作的興趣，培養(yǎng)大家的動手操作能力。4. 了解java腳本的基本用法教學重點1.行為的概念和創(chuàng)建，2.使用DW內(nèi)置的行為3.AP元素、行為和時間軸的綜合運用教學難點1.使用DW內(nèi)置的行為；2.高級行為的應用；3.AP元素、行為和時間軸的綜合運用教 學 方 法多媒體演示為主，

37、適當舉例，人體媒體結合式教學，課堂講授，師生互動，提問式教學；任務驅(qū)動、引導教學、理論與操作緊密結合。教 學 課 時4課時第8章交互（行為、圖AP元素和時間軸的綜合運用，以及js）教學提示問題：大家已經(jīng)會在網(wǎng)頁中的特殊效果如：彈出消息、檢查表單、設置導航文本、鼠標的花瓣、棉花糖、下雪了、禮花綻放等，這樣的動態(tài)網(wǎng)頁是如何制作的呢？使用行為就可以實現(xiàn)。8.1.1初步認識行為1、DW行為的引出 2、行為的概念3、與行為相關的三個重要部分：對象、事件和動作。4、認識行為面板8.1.2行為的創(chuàng)建、修改和更新 創(chuàng)建行為的三個步驟 修改行為 更新行為 8.1.3使用DW內(nèi)置的行為 dw8.0自帶的行為主要有

38、:1.彈出消息 2、“播放聲音”實例3、跳轉(zhuǎn)菜單和跳轉(zhuǎn)菜單開始 4、打開瀏覽器窗口5、交換圖象與恢復交換圖象 6、控制shockshave或flash7、設置導航欄圖像 8、設置文本9、顯示彈出菜單（下拉菜單） 10、顯示和隱藏AP元素11、拖動AP元素 12、滾動鏈接的AP元素8.1.4高級行為的應用1、插入滾動字幕示例：文本自動向上循環(huán)滾動，鼠標放到上面還會暫停2、下載安裝擴展插件3、下載網(wǎng)頁特效，適當修改相關代碼，再把代碼放到代碼視圖的具體位置。 舉例：花瓣、棉花糖。8.2AP元素、行為和時間軸的綜合運用1.時間軸面板2、時間軸和圖AP元素的綜合運用（1）滾動字幕 （2）網(wǎng)頁浮動動畫（3

39、）設置文字的陰影效果（4）幻燈片效果（5）控制圖像播放動畫 （6）制作滾動的折疊菜單（7）具有預覽功能的電子相冊效果8.3在網(wǎng)頁中應用javascript1.認識代碼片段面板2.應用代碼片段3.應用舉例拋出問題，導入新課舉出幾個典型的帶有行為的網(wǎng)頁顯示行為的應用，進而引出行為的作用和相關概念（25分鐘）舉例講解行為的創(chuàng)建步驟。（10分鐘）演示常用的DW內(nèi)置行為的操作步驟和要領，部分調(diào)整在機房講解；（30分鐘）本部分為選講內(nèi)容。舉例講解高級行為的應用；重點講解4種擴展插件的安裝和應用效果。（30分鐘）舉典型實例演示AP元素和行為綜合應用效果（40分鐘）引入特效代碼，舉例講解js在Dw中的應用。（

40、20分鐘）作業(yè)：課后習題、題小結：通過舉例，詳細講解了AP元素、時間軸和行為的綜合運用。本節(jié)的內(nèi)容較多，步驟也繁瑣。通過視頻演示和實際操作演示，加深對行為的理解，加強了學生的實際操作能力。希望同學們下去自己多多練習。學完本章，大家應該能靈活的制作出較為簡單的具有特殊效果的動態(tài)網(wǎng)頁。第9章cssAP元素疊樣式表教學目標與要求1.了解css的概念及樣式類型2.熟練掌握css的屬性設置、能熟練操作（創(chuàng)建、導入、導出）cssAP元素疊樣式表；3.css和表格、css和div的綜合運用教學重點css的概念及樣式類型；Css的創(chuàng)建及屬性設置；css和表格的綜合運用教學難點Css的創(chuàng)建及屬性設置；css和表

41、格、css和div的綜合運用教學方法多媒體演示為主，課堂講授，師生互動，案例教學。教學課時4課時第9章cssAP元素疊樣式表教學提示打開一個沒有應用樣式設置的預先準備好的網(wǎng)頁，先讓學生觀察設計視圖中的效果，然后在IE中預覽，讓學生總結顯示效果的變化，這是怎么回事呢？-沒有使用樣式。9.1css基礎1. css樣式表的基本概念n 樣式、cascading和cssn Css可能改變的性質(zhì)n 外部css樣式表的擴展名是.css。2.css的5個優(yōu)點：3. css面板v 打開css面板的3種方法v css面板中的按鈕和功能 adobe建議用css面板作為創(chuàng)建和編輯css的主要工具。用戶可以自己創(chuàng)建AP

42、元素疊樣式表，還可以dw附帶的AP元素疊樣式表 4.樣式表類型（理解即可）選擇器有三種（常見）類型，可以創(chuàng)建4種不同選擇器類型的樣式：（1）自定義css規(guī)則（類樣式），命名規(guī)則（2）html標簽樣式表（3）對于高級樣式（也稱ID、偽類選擇器）9.2 CSS規(guī)則詳解在“規(guī)則對話框”中，我們可以通過類型、背景、區(qū)塊、方框、邊框、列表、定位和擴展項的設置，來美化頁面。在定義某個CSS樣式時，不需要對每一個項都進行設置，需要什么效果，就選擇相應的項進行設置。9.3創(chuàng)建新的CSS規(guī)則9.4應用CSS樣式9.4.1各種樣式表的應用l 應用自定義CSS樣式，有下列3種方法l 對于html標簽樣式和高級樣式，

43、定義僅對該文檔后，會自動應用到相應的文檔中。l 對于外部的css樣式表：在樣式面板中選擇附件樣式表按鈕，打開“鏈接外部樣式表”對話框，可以鏈接外部的CSS樣式文件。l 清除樣式:選中要清除樣式的對象,設置成“無”樣式即可。l 使用范例css樣式表9.4.2應用舉例（參看課本p131-139示例）1.課堂實例用CSS格式化文本2.課堂實例用CSS控制表格3.用CSS控制列表4.用CSS控制背景5.用CSS控制區(qū)塊6.CSS樣式濾鏡的應用9.5 編輯CSS規(guī)則和CSS樣式編輯CSS規(guī)則：在樣式面板中直接雙擊進行修改。編輯CSS樣式：在樣式列表中選中需要編輯的規(guī)則的名稱，直接單擊“編輯樣式”按鈕，在

44、彈出的“CSS規(guī)則定義”對話框中修改相應的設置。9.6 CSS樣式的三種存放方式（1）直接插入 （叫內(nèi)部標簽）： （2）嵌樣式 （ 也叫嵌入式）：位于html文件頭（標簽）的style標簽內(nèi)。（3）鏈接到已創(chuàng)建的外部文件.css （統(tǒng)一風格）：這類樣式表要保存在站點的common文件夾，而在html的中引用。 9.7關于沖突的CSS規(guī)則1、不沖突則共同顯示。2.當內(nèi)部的規(guī)則和外部的規(guī)則沖突時，內(nèi)部規(guī)則優(yōu)先顯示。3、如果應用于同一文本的兩種規(guī)則的屬性發(fā)生沖突，則按就近原則顯示。4、如果有直接沖突，則自定義 CSS 規(guī)則優(yōu)先顯示。 拋出問題，引入新課打開幾個典型的應用css的網(wǎng)頁，讓大家分析css

45、的優(yōu)點，進而引入css的定義、類型。 打開樣式面板，演示各按鈕的作用；打開css樣式創(chuàng)建的對話框，通過創(chuàng)建過程的選擇講解css的類型。通過舉例詳細講解css規(guī)則的各項設置內(nèi)容。先演示css創(chuàng)建的具體步驟，然后讓學生上臺操作演練。先講解應用的方法，然后通過大量舉例講解各種樣式的創(chuàng)建和應用 。舉了4個例子，分別是類樣式、偽類樣式、ID樣式、標簽樣式。打開代碼視圖，觀察各種樣式在代碼中的顯示位置和顯示方式。舉特例講解各種沖突解決的規(guī)則。讓學生學會在代碼視圖中修改或刪除不需要的樣式。最后總結本章所學知識，讓學生對樣式表靈活運用。作業(yè)：1、什么是cssAP元素疊樣式表？簡述使用css樣式的優(yōu)點。2、cs

46、s的類型、背景、區(qū)塊、方框、邊框、列表、定位、擴展分別可以定義什么樣的設置？3制作實例.小結：本章前一部分理論較多，且窗體的節(jié)的相關概念較難理解；后一部分操作性較強，易掌握，學生基本都能完成操作任務，總體感覺授課效果還好。第10章（1）管理和使用站點資源與庫項目教學目標與要求靈活使用和管理站點資源、庫和模板，提高網(wǎng)頁制作的速度和效率。教學重點資源面板的使用教學難點庫的管理、創(chuàng)建和編輯教 學 方 法任務驅(qū)動、引導教學，學生自學為主，教師講授為輔，簡單演示教 學 課 時1課時第10章（1）管理和使用站點資源與庫項目教學提示10(1).1資源和庫的概念和作用10(1).2站點資源面板1.打開資源面板的方式 2. 站點資源的資源分類 3 站點資源的類型 4.查看和選取資源 5.添加資源 6. 刷新資源