1、第1章 網頁設計基礎教學目標與要求熟記站標、導航條、廣告條、按鈕等網頁構成要素，以及網頁、網站、IP地址、域名、網址等概念；了解網頁的本質和網頁的布局類型和HTML文檔的基本結構，熟練掌握網站建設的基本流程。教學重點重點：站標、導航條、廣告條、網頁、網站、IP地址、域名、網址等概念，以及網站建設的流程教學難點難點： IP地址、域名、網址，HTML文檔的基本結構及其常見標簽教學方法提問、啟發、圖示、情景教學、案例、課堂討論教學課時2課時第1章 網頁設計基礎教學提示導入課程：大家會輸入文字、制作和處理圖像、設計動畫，如何把這些作品放到internet中，讓更多的人去查閱和欣賞呢？-DW就可以制作網

2、頁。1.網頁的構成要素和組成元素n 網頁的構成要素：站標、導航條、廣告條、標題欄和按鈕；n 網頁的組成元素：文字、圖片、動畫（gif、flash）、表單（交互功能）、音頻、視頻、超鏈接、表格、框架、導航等。2.網頁相關知識簡介n 基本概念：Ø 網頁的本質Ø 網頁、網站、主頁、互聯網Ø 動態網頁、靜態網頁Ø IP地址、域名、網址（url）、瀏覽器等概念n 網頁布局Ø 網頁布局的相關概念Ø 常見的布局類型n 網站管理與網頁制作相關軟件 Ø 制作和管理網頁工具；Ø 制作和優化網頁圖像工具；Ø 制作網頁動畫工具；

3、Ø 其中Dreamweaver、 fireworks、 flash這三個軟件合稱為網頁“三劍客”。Ø 其他小工具軟件。n HTML語言Ø HTML的概念Ø HTML文檔的基本結構Ø 幾個常見的html標簽： html、head、title、style、script、link、meta、body、img、p、font等。n XHTML語言簡介 n 腳本語言簡介 3.網頁的設計理念和配色方案n 網頁的設計理念n 色彩的三要素n 網頁中的色彩心理與網頁表現n 色彩搭配應遵循的原則4.網站的開發流程 網站需求分析 設計制作網站頁面 空間和域名申請 測試

4、和發布網站 網站推廣 制作頁面第二階段：創建站點，設計制作各級頁面規劃網站準備素材定義站點設置頁面屬性第一階段：網站需求分析第三階段：申請空間和域名第四階段：測試和發布網站第五階段：網站推廣5.典型網站分析n 頁面結構n 色彩運用以提問的方式引入課程采用課堂討論教學法，打開幾個典型的網頁讓同學們討論總結構成要素和組成元素。打開一個搜狐主頁，保存成不同的類型，讓大家看保存的效果，加深對網頁本質的理解；先打開一個網頁的源文件，結合網絡常識，詳細講解網頁的定義，然后略講網站和主頁的概念。并提醒同學理解并記憶這些概念。以注冊和登錄郵箱為例，對比講解動態網頁和靜態網頁的特點和區別。以平頂山學院和搜狐網站

5、的IP地址與域名為例，簡要講述這兩個概念。通過查看分析知名網站的網址引入url的定義和組成，其它概念略講。提醒學生理解并記憶上述概念。打開一網頁（詳細講解網頁布局效果的教程）讓學生討論、分析總結布局類型。根據學生特點簡要講解ps、flash、fw等軟件在網頁設計中的功能。 打開搜狐主頁的源代碼，讓學生認識一下html語言及其結構，然后分別用記事本和dw創建2個最簡單的網頁，讓學生細看其源代碼，并詳細講解8個基本標簽及其結構關系，最后根據時間酌情講解其它幾個常見標簽。簡要講解這兩個概念，然后創建一個網頁，復制無縫循環的代碼并粘貼到網頁的body標簽，讓學生了解腳本語言的功能。讓學生欣賞插入后的效

6、果，吸引學生dw的相關代碼。結合上網的經驗，讓學生總結網頁的設計理念。色彩的三要素和心理表現學生在上學期的ps課程中學習過，采用提問法，進行復習；然后打開幾個典型網站，分析其配色方案，最后總結網頁中色彩運用的原則。根據設計的先后順序和學生一起分析總結網站的開發流程，并用圖加以解釋，重點講解網站的需求分析，以加深學生對重點知識的掌握。采用課堂討論教學法，打開幾個典型的網頁讓同學們討論總結網站的構成要素、組成元素、布局結構和配色方案。作業布置：1.察看并對比分析大型網站（如中國網、著名學校網、著名醫院網、官方網、科技網、娛樂休閑運動網、兒童網、體育網、著名出版社網、cctv網站、sohu、yaho

7、o、IBM、微軟等）的風格、色彩搭配與布局。2 .察看的同時下載自己需要的文章、圖片、軟件等資源。.課后習題。提問小結：通過提問、啟發、圖示、情景教學、課堂討論等教學方法的綜合運用，提高了學生的學習興趣，從學生的反應看，授課效果很好。第2章 Dreamweaver基礎知識教學目標與要求熟悉Dreamweaver 8工作界面 ，熟記幾個常用的工具按鈕和菜單命令；熟練掌握站點的創建步驟，能快速規范地創建站點；能夠快速創建、打開、保存網頁文檔；能熟練設置頁面的屬性。教學重點1.創建站點并組織站點的結構;2. 在站點中創建網頁3.頁面的屬性設置教學難點HTML基礎教學方法舉例為主，適當講授操作要領，提

8、問以測試課題效果。教學課時2課時第2章 Dreamweaver基礎知識教學 提示我們一貫都是瀏覽網頁，想自己動手做網站嗎？用什么工具做網站？怎樣做呢？- Dreamweaver網頁制作工具。2.1 熟悉Dreamweaver 8工作界面 2.2 網站創建與管理 站點的定義、組成和結構 網頁文檔與文件夾命名規則 創建本地站點的步驟組織站點結構2.3 網頁文檔基本操作 新建、保存、預覽、打開、關閉2.4 基本頁面屬性設置 制定文檔標題和邊距、網頁背景顏色和背景圖像，為網頁設置文本屬性、鏈接屬性和跟蹤圖像的屬性，總結頁面的使用的技巧：拋出問題，引入新課啟動dw，詳細講解插入欄、文檔標簽與“文檔”工具

9、欄、狀態欄的作用，區分標簽檢查器、標簽選擇器、標記選擇符3個概念及其作用 詳細講解站點的定義、組成、結構，以及文件和文件夾的命名規則。演示站點的創建過程和步驟，著重提出保存和站點文件夾的命名。詳細講解站點結構的組織方法和原則。分別演示這幾個操作通過dw設計視圖分別創建1個網頁，分別演示文檔標題和邊距、背景顏色和背景圖像、文本和鏈接屬性，以及跟蹤圖像的屬性的設置方法和步驟，幫助學生掌握頁面的設置過程。并總結頁面設置和創建過程中的一些使用技巧。作業：習題一第1，2, 3 題小結：本次課內容操作性很強，經過學生自己上臺操作，發現大多數學生都能創建并組織好一個站點，還能快速地設置網頁的屬性，達到了教學

10、目標的要求。第3章 網頁中的基本元素教學目標與要求1.熟練操作網頁中的文本；2.熟練插入各種格式的圖像并設置其屬性；3.了解圖像切片的作用；4.熟練制作圖像切片，并插入到dw中教學重點1.文本對象的插入和格式設置；2.GIF、PNG和JPEG三種圖像格式 的異同點和使用環境；3.用fireworks制作網頁切片的方法； 教學難點1.設置文本標題；段落的設置效果；2.GIF、PNG和JPEG三種圖像格式的異同點和使用環境；3.Dreamweaver 8.0中使用圖像的一些基本方法和技巧；4. 在dreamweaver中插入用fireworks制作的切片教學方法課堂講授為輔，多媒體演示為主，適當舉

11、例，提問以測試課題效果，實驗式教學。教學課時4課時第3章網頁中的基本元素教學提示復習上節內容：1 如何創建站點？2 如何站點結構的組織3.1網頁中文本的操作. 認識文本按鈕及屬性面板 思考題：根據以前所學知識說出文本的編輯和設置屬性各包括幾個方面？. 插入文本和對象n 將文本（英文、中文、數字）添加到文檔中的3種方法。n 插入特殊字符n 水平線 n 插入日期：菜單法；插入欄按鈕法n 對插入的文本也可以執行刪除、搜索、替換、檢查拼寫（文本檢查拼寫shift+f7）等操作。. 設置文本格式 字符的樣式包括的方面及其設置方法. 設置文本標題 標題的含義與作用3. 設置段落效果 1 . 設置段落格式

12、.縮進段落對齊段落 （4種對齊方式）.分段與換行的相關操作和區別：.創建項目列表.網頁圖像的運用.網頁中圖像格式簡介 1. 圖像在網頁中的作用和網頁中常用圖像格式有：GIF 、JPEG 、PNG。2.三種圖像格式的特點和在網頁中的使用場合。 在Web頁上顯示圖片之前，通常需要考慮下列三個問題：.在網頁中使用圖像1.插入圖像：2.插入圖像占位符：注意圖像占位符的命名規則和作用3.創建鼠標經過圖象（輪換圖像）4. 在dw中圖像的編輯功能僅適用于GIF 和JPEG 圖像格式。Ø 在屬性檢面板中編輯圖像，上述設置也可通過菜單實現：修改-圖像Ø 用fireworks優化圖像。熱點工具

13、的使用和圖像熱區的添加 .設置圖文混排的效果：7.制作電子相冊：命令創建網站相冊切片在fw中的創建和在dw使用打開大圖片網頁時，總是等待很長時間，怎樣處理才能減少圖片的下載時間呢？-做成切片。1.切片的定義和作用2.切片在fw中的創建方法和步驟3.在DW中插入Fireworks HTML（切片）的方法和步驟 將Fireworks HTML插入到Dreamweaver中的方法。方法1：將切片從Fireworks復制到剪貼板上，然后直接粘貼到Dreamweaver文檔代碼視圖中的相應位置處。方法2：直接將Fireworks HTML插入到Dw中的操作步驟.網頁多媒體的運用在網頁中使用視頻flash

14、1.網頁中常見的視頻文件格式和插入方法；2.常見的flash文件格式和插入方法；flash文件（.fla格式）、flash影片文件（.swf格式）、flash模板文件（swt格式）、flash元素文件（.swc格式）、flash視頻文件（.flv格式）在網頁中使用音頻 添加聲音需要考慮的因素：添加的的、文件大小、聲音品質和在不同瀏覽器中的差異。1.音頻文件的格式和相應的特點：n 網頁中常見的音頻格式有：u mid/midi格式：。u wav和aif（aiff）文件2.在網頁中插入音頻文件的2種方式：n 鏈接到音頻文件n 嵌入聲音文件3.4dw擴展插件1.安裝擴展插件2.使用擴展插件使用擴展插件

15、主要有2個步驟： 先安裝插件 然后啟動dreamweaver，在相應的位置找到調用擴展的命令即可。3.在“類型”欄中顯示擴展的類型含義：類型含義對象在dw界面的“插入”工具欄調用該擴展插件命令在dw的“命令”菜單中調用擴展行為在dw的“行為”面板中調用擴展4.常用擴展插件的安裝和使用Page transitions有超級鏈接時，頁過渡（進入/退出）效果命令要選定整個頁面（即body標簽），再在命令菜單中找到該命令即可實現（效果見實例站點中guodong1.html、 guodong2.html 、 guodong3.html ）Typewriter.mxp模擬打字行為先把要添加該效果的對象放入

16、AP元素中，然后在行為面板中找到yaromat|typewriter即可實現，文字的打印效果就顯示在AP元素中。 (guodong1.html中打印文字）Sound.mxp插入背景音樂對象要選定整個頁面（即body標簽），再在“常用”插入欄中找到sound按鈕即可實現Marquee.mxp滾動文字插件對象要選定整個頁面（即body標簽），再在“常用”插入欄中找到marquee按鈕即可實現Insert Greeting.mxp插入問候語對象把光標定位在頁面的合適位置，然后選擇“插入”欄中的“CN Insert Greeting”按鈕即可實現Calander.mxp對象把光標定位在頁面的合適位置，

17、然后選擇“插入”欄中的“calander”按鈕即可實現Persistent layers滾動鏈接的AP元素行為先把要添加該效果的對象放入AP元素中，然后在行為面板中找到ribbers zeewolde| Persistent layers即可實現，一般用來顯示廣告信息。（ guodong1.html中的”送給你了“）以提問的方式復習上次課內容結合WORD，通過復習的方式，總結dw中文本的操作； 先簡要演示一下各種文本符號的插入方法，然后輸入一首小詩，調整其格式；接著復制一篇文章粘貼到dw中；最后導入一篇word文檔； 先簡要講述一下文本格式、標題、段落的設置的含義和步驟，然后讓學生走上講臺對上

18、述插入的文本設置相應的字符格式、標題級別、段落效果，并選擇個別段落創建項目列表，以加深印象。通過比較法講解各圖像格式的特點舉例：在文檔中插入各種圖像對象，并設置其格式屬性。演示制作圖像熱區和圖文混排的效果；演示制作電子相冊以問題的形式引入切片的定義和作用。本內容盡量調整在機房講解。詳細講解并演示切片在fw中制作和在dw中插入的方法與步驟。用比較法總結網頁中出現的視頻文件的格式及其特點，舉例講解視頻文件的插入方法和屬性設置；用比較法總結網頁中出現的flash文件的格式及其特點，重點講解flash按鈕、flash文本和flash視頻的插入方法和屬性設置；用比較法總結網頁中常見的音頻文件格式及其特點

19、。舉例演示音頻文件的插入和屬性設置，重點講解背景音樂的插入和設置。重點講解頁面過度效果、sound、marquee和滾動鏈接的AP元素4個插件的用法和設置先演示這幾個常用擴展插件的安裝和使用方法，然后讓學生上臺操作，教師指點操作過程和方法 擴展這本分內容安排到行為之后講解作業：1 . 填空題（1）使用屬性檢查器或【文本】菜單中的選項可以設置或更改所選文本的字體特性。可以設置字體_ _（如粗體或斜體）和_。（2）若要插入更多的特殊字符，請選擇_ | _ | _或在_欄中選擇_圖標，選擇一個字符，然后單擊【確定】。（3）在計算機領域中，圖像分為_和_2大類。（4）GIF圖像采用的是_壓縮格式。2

20、. 選擇題（1）在網頁中連續輸入空格的方法是_。 A連續按空格鍵 B按下Ctrl鍵再連續按空格鍵 C轉換到中文的全角狀態下連續按空格鍵 D按下Shift鍵再連續按空格鍵（2）網頁通常可以支持的圖像格式有_。 AGIF BBMP CAVI DPSD EPNG FJPEG。3.簡答題（1）網頁中常用的圖像格式有哪些？各有什么特點？如果在網頁中添加動畫格式的浮動廣告，采用何種格式？為什么？電子相冊，應該用哪種格式最好？ (2)如何創建鼠標變換圖像和圖像熱點？4.操作題： 搜集自己的喜愛的圖片，制作一個電子相冊。小結：本章內容較多，但交簡單，需要邊講解邊對比總結，通過對比總結和學生上臺操作演示，從學生

21、上機的作業來看，授課效果很好。第4章 使用表格與布局表格布局網頁教學目標與要求1.了解表格和布局表格在網頁布局中的作用；2.掌握表格和布局表格的插入方法和基本編輯方法；3.掌握表格和布局表格、單元格和布局單元格的屬性設置；4.通過對表格和布局表格的學習，提高學生學習網頁制作的興趣，增強學生的審美觀教學重點1 表格的插入方法、基本編輯方法與應用；2 布局表格和布局單元格的繪制方法、屬性設置與應用教學難點1.表格和單元格的屬性設置與應用；2.布局表格和布局單元格的繪制與屬性設置教學方法多媒體演示，案例教學，任務驅動，引導教學；提問式教學。教學課時2學時第4章 使用表格與布局表格布局網頁教學提示用表

22、格控制文字、圖片、動化等對象的位置，使網頁的布局緊湊又整齊美觀。常用的頁面設計布局類型有：表格、布局表格和AP元素三種，本章著重講解如何使用表格和布局表格布局頁面。4.1.表格模式1.dw中表格的3種模式 2.模式切換的操作方式：查看-表格模式-標準模式/布局模式/表格擴展模式。3.模式的區別與注意事項：n 只有在“設計”視圖中才可切換到“布局”模式；n 在不同模式下，工具欄的各個按鈕作用不同；n 在布局模式中不能像布局表格的空白區域插入內容，只能創建布局單元格，布局單元格才是承載具體內容的容器。4.2使用表格布局網頁1表格的作用2.表格的組成部分 表格的行、列、單元格、邊距、間距、邊框3.表

23、格的標記n <table>標記、<tr>標記、<td>標記n 三者的對應位置關系4.表格的基本操作n 表格的插入、選擇、刪除、大小調整；n 單元格的選擇、合并、拆分、大小調整；n 表格在“擴展表格”模式和“標準”模式下的應用5.嵌套表格 n 表格嵌套的作用n 創建嵌套表格的操作方法。6.導入和導出表格數據、7. 表格布局網頁的應用實例8. 表格布局的缺點4.3布局表格布局網頁1.繪制布局表格繪制布局表格的注意事項： 2.繪制布局單元格繪制布局單元格的注意事項：3.設置布局表格和布局單元格的屬性和參數4.在布局單元格中添加內容 5.課堂實例用布局表格布局網站主

24、頁展示一個布局合理、美觀的網頁，激起學生的學習興趣。簡要講解并3種表格模式的作用，重點演示不同模式下按鈕的使用回顧word和excel中講過的有關表格的概念和基本操作，引入dw中表格的概念和基本操作。重點講解表格的屬性設置含義。插入一個表格，并在每個格中插入不同的內容，然后切換到代碼視圖，讓學生識記三個標簽。逐一演示表格的各個基本操作。重點講解創建嵌套表格的原因打開一個示例網頁，讓學生上講臺比照著制作出相同效果討論總結表格布局的缺點重點演示并總結繪制布局表格和布局單元格的注意事項。演示設置布局表格和單元格的屬性；在設置好屬性的布局單元格中添加文章、圖像和多媒體。先和學生一起分析左側網頁的操作思

25、路和主要步驟，然后讓學生上臺操作，以加深印象。作業：課堂作業：1.敘述3種模式的概念及切換方法。2.說出表格和布局表格的作用3.敘述“表格擴展模式”的作用4.什么是間隔圖像？書面作業：課后習題。小結：通過與學生熟悉的word中表格的操作對照講解，本章的講解顯得較輕松；讓學生上臺操作，提高了學生的學習積極性和主動性，教學效果較好。第5章 使用框架布局網頁教學目標與要求了解框架網頁的概念；熟練創建、保存框架網頁，并設置框架和框架集的屬性；框架中超級鏈接的創建和目標屬性設置教學重點熟練創建保存框架網頁，并設置框架和框架集的屬性；框架中超級鏈接的創建和目標屬性設置教學難點框架網頁的概念和保存；框架中超

26、級鏈接的創建和目標屬性設置教學方法多媒體演示為主，適當舉例，人體媒體結合式教學，課堂講授，師生互動，提問式教學。教學課時2學時第5章 框架網頁教學提示5.1框架和框架集的概念、結構和應用1.基本概念l 框架網頁、框架集、框架l 框架和框架集的關系2框架網頁的結構 3.認識框架面板：4.框架網頁的應用：通常用于導航。5.框架網頁的優缺點5.2 創建和保存框架與框架集5.2.1 使用預設的框架集1.創建新的空預設框架的具體操作步驟。修改框架名稱必須以字母開頭，可以包含數字、下劃線（_）；但不允許是javascript中的保留字（如top或navigator）、連字符（-）、句點、空格和；而且區分大

27、小寫。2.創建預設的框架集并在某一框架中顯示現有文檔5.2.2 創建和編輯框架1.創建框架2.刪除框架3.建立嵌套的框架集4.保存框架和框架集5.3設置框架及框架集的屬性1.選擇框架：通過“框架”面板來選擇框架和子框架。2.設置框架屬性n 框架的背景顏色可以在頁面屬性中進行設置n 在框架的屬性面板中進行設置框架的的名稱、源文件、鏈接、邊距、滾動、邊框和能否調整大小等。 3.設置框架集屬性：邊框、邊框大小和邊框顏色。5.4設置框架集中的超級鏈接5.4.1在框架網頁中建立超鏈接5.4.2框架網頁中設置超級鏈接的目標打開方式1.相對鏈接目標：_blank 、_top 、_parent、_self2.

28、絕對鏈接目標：mainframe、Leftframe、Rightframe、Topframe。5.6課堂實例制作一個框架網頁通過看看和分析知名網站使用框架的布局效果，引入框架和框架集的概念舉例演示框架的創建和保存操作打開框架面板，查看并總結框架和框架集的屬性設置及其含義演示框架中的超級鏈接效果舉例演示框架網頁的設計與制作作業：1.使用框架的優點是什么？ 2.課后習題小結：本章介紹了框架網頁的創建、保存和屬性設置，著重講解了框架網頁的中超級鏈接的創建和目標設置，內容較少，授課效果較好。第6章 AP元素的創建和使用教學目標與要求理解AP元素的作用；熟記AP元素的命名原則和特點；掌握繪制AP元素和插

29、入AP元素的方法和區別；熟練設置AP元素的屬性；靈活、合理地使AP元素隨心所欲的布局頁面內容。教學重點AP元素的作用；AP元素的插入和繪制；AP元素的屬性設置；AP元素的特點；AP元素的應用教學難點AP元素的作用；AP元素的屬性設置；AP元素的應用教學方法多媒體演示為主，適當舉例，人體媒體結合式教學，課堂講授，師生互動，提問式教學。教學課時2課時第6章AP元素的創建和使用教學提示大家 在瀏覽網頁時，注意到滾動的廣告圖片了嗎？-它是使用AP元素做出來的效果。6.1應用AP元素布局網頁6.1.1AP元素的概述1、AP元素的應用：布局網頁；制作簡單動畫；設計特效等。2、AP元素的定義、AP元素的特點

30、、AP元素的分類、AP元素的優缺點、AP元素面板。6.1.2創建AP元素1.在首選參數對話框中設置AP元素的參數，可設置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元素的基本操作激活AP元素、選擇AP元素、調整AP元素大小、移動AP元素、對齊AP元素、吸附AP元素到網格6.1.5嵌套AP元素6.1.6

31、.AP元素和表格的相互轉換6.2 課堂實例用AP元素布局網站首頁拋出問題，引入新課強調AP元素在頁面布局中的作用演示AP元素的繪制要領；選擇AP元素，讓學生觀察的屬性，并詳細講解各屬性的設置含義。演示AP元素的各種操作綜合舉例作業：課后習題上機作業：使用AP元素、表格和css排版網站首頁小結：本章著重講解AP元素的創建、命名和屬性設置，讓學生親自上臺制作案例，加深了對新知識的印象。上機時發現學生基本都能完成操作任務，總體感覺授課效果較好。第7章超級鏈接教學目標與要求了解超級鏈接的路徑和鏈接結構；熟記超級鏈接目標打開方式的設置含義；熟練掌握超級鏈接的4種創建方法；能快速完成5種特殊超級鏈接的創建

32、方法和步驟。教學重點1.超級鏈接的各種創建步驟2.超級鏈接目標打開方式的設置含義3.超級鏈接的4種創建方法4. 5種特殊超級鏈接的創建方法和步驟教學難點1.超級鏈接的路徑2.超級鏈接目標打開方式的設置含義教學方法多媒體演示為主，適當舉例，人體媒體結合式教學，課堂講授，師生互動，提問式教學。教學課時2課時第7章 超級鏈接教學提示大家已經會創建不同內容的網頁了，怎樣把這些分散的網頁組合成一個統一的整體，讓瀏覽者只打開主頁就能訪問到其它各個面呢？-需要創建超級鏈接。7.1超級鏈接的定義和目標選項的含義1 .超級鏈接的定義2.屬性檢查器的“目標”彈出菜單中各個選項的含義：_blank、_parent、

33、_self、_top。3：創建一個完整的超級鏈接必須考慮的4個方面： 鏈接的載體 鏈接的目標 鏈接的路徑 鏈接目標的打開方式7.2超級鏈接的路徑 在dreamweaver中有三種類型的鏈接路徑： 絕對路徑、文檔相對路徑、站點根目錄相對路徑。7.3超級鏈接的分類按照鏈接路徑的不同，網頁中超鏈接一般分為內部鏈接、錨點鏈接、外部鏈接3種類型。 按照使用對象的不同，網頁中的鏈接又可以分為以下幾種：文本超鏈接、圖像超鏈接、電子郵件鏈接、錨點鏈接、軟件下載鏈接、多媒體文件鏈接、空鏈接等。7.4超級鏈接的創建方法1. 使用屬性檢查器中鏈接后的文本框創建各種各樣的超級鏈接；2.使用屬性檢查器中的瀏覽文件圖標創

34、建各種各樣的超級鏈接；3.使用“指向文件”圖標創建超級鏈接；4.使用菜單中的“超級鏈接”命令創建超級鏈接；7.5幾種特殊的超級鏈接詳解1錨記鏈接2創建腳本鏈接3給圖像熱區加上超級鏈接 4創建電子郵件超鏈接 5創建空鏈接7.6超級鏈接的基本操作：更新、修改、檢查 7.7超級鏈接的結構7.8總結創建超級鏈接的5點建議 拋出問題，引入新課。（2分鐘）打開幾個典型網站的主頁，讓大家分析超級鏈接的功能，進而引入超級鏈接的定義、分類和目標列表的設置。讓學生討論總結創建超級鏈接的注意事項（20分鐘）通過舉例和配圖講解鏈接路徑的類型和在創建超級鏈接時路徑的書寫方法（20分鐘）采用討論法，讓學生討論總結超級鏈接

35、的分類。（8分鐘）舉例講解各種方法下超級鏈接的創建方法和創建步驟，并總結各種方法的使用情況（25分鐘）借助上面講過的創建方法，讓學生上臺操作實踐，創建各種類型的超級鏈接。根據情況不部分內容調整到機房講解。（30分鐘）簡要講述超級鏈接的修改與更新操作。（15分鐘）結構較為簡單（15分鐘）總結并提出建議。（10分鐘）作業：1.敘述超級鏈接的定義 2.說出超級鏈接的路徑3.說出超級鏈接的4種創建方法。小結：本章內容較多，超級鏈接的路徑較難理解；其他內容相對容易，且操作性較強，易掌握，學生基本都能創建各種類型的超級鏈接，總體感覺授課效果還好。第8章交互（行為、圖AP元素和時間軸的綜合運用，以及java

36、script）教學目標與要求1. 熟練地應用行為，能夠隨心所欲地制作出具交互功能的網頁；2. 掌握時間軸的概念和基本用法；3. 通過對行為的學習應用，增加網頁設計的特殊效果，提高學生對學習網頁制作的興趣，培養大家的動手操作能力。4. 了解java腳本的基本用法教學重點1.行為的概念和創建，2.使用DW內置的行為3.AP元素、行為和時間軸的綜合運用教學難點1.使用DW內置的行為；2.高級行為的應用；3.AP元素、行為和時間軸的綜合運用教 學 方 法多媒體演示為主，適當舉例，人體媒體結合式教學，課堂講授，師生互動，提問式教學；任務驅動、引導教學、理論與操作緊密結合。教 學 課 時4課時第8章交互（

37、行為、圖AP元素和時間軸的綜合運用，以及js）教學提示問題：大家已經會在網頁中的特殊效果如：彈出消息、檢查表單、設置導航文本、鼠標的花瓣、棉花糖、下雪了、禮花綻放等，這樣的動態網頁是如何制作的呢？使用行為就可以實現。8.1.1初步認識行為1、DW行為的引出 2、行為的概念3、與行為相關的三個重要部分：對象、事件和動作。4、認識行為面板8.1.2行為的創建、修改和更新· 創建行為的三個步驟· 修改行為· 更新行為 8.1.3使用DW內置的行為 dw8.0自帶的行為主要有:1.彈出消息 2、“播放聲音”實例 3、跳轉菜單和跳轉菜單開始 4、打開瀏覽器窗口5、

38、交換圖象與恢復交換圖象 6、控制shockshave或flash7、設置導航欄圖像 8、設置文本9、顯示彈出菜單（下拉菜單） 10、顯示和隱藏AP元素11、拖動AP元素 12、滾動鏈接的AP元素8.1.4高級行為的應用1、插入滾動字幕示例：文本自動向上循環滾動，鼠標放到上面還會暫停2、下載安裝擴展插件3、下載網頁特效，適當修改相關代碼，再把代碼放到代碼視圖的具體位置。 舉例：花瓣、棉花糖。8.2AP元素、行為和時間軸的綜合運用1.時間軸面板2、時間軸和圖AP元素的綜合運用（1）滾動字幕 （2）網頁浮動動畫（3）設置文字的陰影效果（4）幻燈片效果（5）控制圖像播放動畫 （6）制作滾動的折疊菜單（

39、7）具有預覽功能的電子相冊效果8.3在網頁中應用javascript1.認識代碼片段面板2.應用代碼片段3.應用舉例拋出問題，導入新課舉出幾個典型的帶有行為的網頁顯示行為的應用，進而引出行為的作用和相關概念（25分鐘）舉例講解行為的創建步驟。（10分鐘）演示常用的DW內置行為的操作步驟和要領，部分調整在機房講解；（30分鐘）本部分為選講內容。舉例講解高級行為的應用；重點講解4種擴展插件的安裝和應用效果。（30分鐘）舉典型實例演示AP元素和行為綜合應用效果（40分鐘）引入特效代碼，舉例講解js在Dw中的應用。（20分鐘）作業：課后習題、題小結：通過舉例，詳細講解了AP元素、時間軸和行為的綜合運用

40、。本節的內容較多，步驟也繁瑣。通過視頻演示和實際操作演示，加深對行為的理解，加強了學生的實際操作能力。希望同學們下去自己多多練習。學完本章，大家應該能靈活的制作出較為簡單的具有特殊效果的動態網頁。第9章cssAP元素疊樣式表教學目標與要求1.了解css的概念及樣式類型2.熟練掌握css的屬性設置、能熟練操作（創建、導入、導出）cssAP元素疊樣式表；3.css和表格、css和div的綜合運用教學重點css的概念及樣式類型；Css的創建及屬性設置；css和表格的綜合運用教學難點Css的創建及屬性設置；css和表格、css和div的綜合運用教學方法多媒體演示為主，課堂講授，師生互動，案例教學。教學

41、課時4課時第9章cssAP元素疊樣式表教學提示打開一個沒有應用樣式設置的預先準備好的網頁，先讓學生觀察設計視圖中的效果，然后在IE中預覽，讓學生總結顯示效果的變化，這是怎么回事呢？-沒有使用樣式。9.1css基礎1. css樣式表的基本概念n 樣式、cascading和cssn Css可能改變的性質n 外部css樣式表的擴展名是.css。2.css的5個優點：3. css面板v 打開css面板的3種方法v css面板中的按鈕和功能 adobe建議用css面板作為創建和編輯css的主要工具。用戶可以自己創建AP元素疊樣式表，還可以dw附帶的AP元素疊樣式表 4.樣式表類型（理解即可）選擇器有三種

42、（常見）類型，可以創建4種不同選擇器類型的樣式：（1）自定義css規則（類樣式），命名規則（2）html標簽樣式表（3）對于高級樣式（也稱ID、偽類選擇器）9.2 CSS規則詳解在“規則對話框”中，我們可以通過類型、背景、區塊、方框、邊框、列表、定位和擴展項的設置，來美化頁面。在定義某個CSS樣式時，不需要對每一個項都進行設置，需要什么效果，就選擇相應的項進行設置。9.3創建新的CSS規則 9.4應用CSS樣式9.4.1各種樣式表的應用l 應用自定義CSS樣式，有下列3種方法l 對于html標簽樣式和高級樣式，定義僅對該文檔后，會自動應用到相應的文檔中。l 對于外部的css樣式表：在

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

44、放方式（1）直接插入 （叫內部標簽）： <table style=“color:red ; font-size:10pt”>（2）嵌樣式 （ 也叫嵌入式）：位于html文件頭（<head></head>標簽）的style標簽內。（3）鏈接到已創建的外部文件.css （統一風格）：這類樣式表要保存在站點的common文件夾，而在html的<head></head>中引用。 <link Rel=“stylesheet” href=“文件名.css”Type =“text/css”>9.7關于沖突的CSS規則1、不沖突則共同顯示

45、。2.當內部的規則和外部的規則沖突時，內部規則優先顯示。3、如果應用于同一文本的兩種規則的屬性發生沖突，則按就近原則顯示。4、如果有直接沖突，則自定義 CSS 規則優先顯示。 拋出問題，引入新課打開幾個典型的應用css的網頁，讓大家分析css的優點，進而引入css的定義、類型。 打開樣式面板，演示各按鈕的作用；打開css樣式創建的對話框，通過創建過程的選擇講解css的類型。通過舉例詳細講解css規則的各項設置內容。先演示css創建的具體步驟，然后讓學生上臺操作演練。先講解應用的方法，然后通過大量舉例講解各種樣式的創建和應用 。舉了4個例子，分別是類樣式、偽類樣式、ID樣式、標簽樣式。打開代碼視

46、圖，觀察各種樣式在代碼中的顯示位置和顯示方式。舉特例講解各種沖突解決的規則。讓學生學會在代碼視圖中修改或刪除不需要的樣式。最后總結本章所學知識，讓學生對樣式表靈活運用。作業：1、什么是cssAP元素疊樣式表？簡述使用css樣式的優點。2、css的類型、背景、區塊、方框、邊框、列表、定位、擴展分別可以定義什么樣的設置？3制作實例.小結：本章前一部分理論較多，且窗體的節的相關概念較難理解；后一部分操作性較強，易掌握，學生基本都能完成操作任務，總體感覺授課效果還好。第10章（1）管理和使用站點資源與庫項目教學目標與要求靈活使用和管理站點資源、庫和模板，提高網頁制作的速度和效率。教學重點資源面板的使用

47、教學難點庫的管理、創建和編輯教 學 方 法任務驅動、引導教學，學生自學為主，教師講授為輔，簡單演示教 學 課 時1課時第10章（1）管理和使用站點資源與庫項目教學提示10(1).1資源和庫的概念和作用10(1).2站點資源面板1.打開資源面板的方式 2. 站點資源的資源分類 3 站點資源的類型 4.查看和選取資源 5.添加資源 6. 刷新資源面板7.資源定位 8.管理資源面板 10(1).3創建、管理和編輯庫項目1. 3種創建庫項目的方法 創建的庫項目自動保存到站點的library文件夾中，若站點中沒有，dreamweaver則會自動創建該文件夾。庫項目的擴展名為.lbi。2.應用庫項目：在文

48、檔中應用庫項目的操作步驟3.管理庫項目：主要有修改、重命名、重建、刪除、從源文件中分離幾個方面隨堂練習：下列關于庫的說法中不正確的一項是( )A庫是一種用來存儲想要在整個網站上經常被重復使用或更新的頁面元素 B庫實際上是一段html源代碼 C在dreamweaver中,只有文字數字可以作為庫項目,而圖片腳本則不可作為庫項目 D庫可以是email地址一個表格或版權信息等.舉例說明資源和庫項目的意義演示庫項目的創建和應用作業：課后習題小結：知識總結：本章主要介紹了資源面板和庫項目的使用，學完本章應熟練應用站點資源和庫項目，提高制作網頁的效率。 第10章（2）利用模板設計網頁教學目標與要求1、學會創

49、建模板2、巧妙使用模板創建風格統一的頁面教學重點模板的創建、編輯和管理教學難點模板的創建、編輯和管理教 學 方 法任務驅動、引導教學，學生自學為主，教師講授為輔，簡單演示教 學 課 時1課時第10（2）章利用模板設計網頁教學提示如何提高做網頁的效率呢？-巧用模板。10(2).1利用模板創建網頁模板的定義、使用模板的實際意義、模板區域類型、模板的鏈接模板默認被保存在templetes文件夾中，模板的擴展名為：.dwt。10(2).2 創建模板 1. 將現有的文檔保存為模板2. 通過“資源”面板創建新的空白3.使用新建文檔對話框創建模板 10(2).3使用模板的可編輯區域 1、插入可編輯區v 定義

50、可編輯區域的兩種方法v 可編輯區域的命名規則：不可使用單引號、雙引號、尖括號(<>)、和與符號（&）注意：v 可將整個表格或某個單元格定義為可編輯區域，不可同時指定幾個單格為可編輯區域；v 將AP元素定義為可編輯區域時，用戶可以改變AP元素的位置，將AP元素上的內容定義為可編輯區域時，才可以修改AP元素上的內容。2. 刪除可編輯區域10(2).4使用可選區域1.插入可選區域2.插入可編輯的可選區域3.修改可選區域10(2).5使用重復區域10(2).6應用模板 1. 創建基于模板新頁面2. 將模板應用到現有文檔 （自學，容易出現不一致區域，建議不采用）3. 將文檔與模板分離

51、 10(2).7編輯模板10(2).8管理模板重命名模板、刪除模板、重命名可編輯區域、選擇可編輯區域舉例說明模版的作用，演示操作模板的創建，重點講解可編輯區域的插入根據已創建的模板創建新的網頁，體會模板的作用注意模板使用的注意事項作業：1、說出使用模板的使用意義。2、模板默認被保存在哪個文件夾中，模板的擴展名是什么？3、模板共有幾種模板區域類型？4、課后習題的頁面。小結：本章講了模板的意義、創建、編輯和應用幾個問題，學完本章應創建出風格一致 第12章DW 8 站點的創建、設置與管理教學目標與要求1.學會編輯設置和管理站點2.理解站點面板的設置使用3.能打開、編輯、刪除、上傳站點。教學重點創建和管理站點與站點文件教學難點編輯、設置和管理站點教學方法任務驅動、引導教學，學生自學為主，教師講授為輔，簡單演示教學課時1課時第12章DW 8 站點的創建、設置與管理教學提示12.1安裝和配置web服務器12.2創建和設置站點一、創建和設置本地站點：二、設置遠端站點以下是幾種連接服務器的方式方式1.通過ftp訪問遠端