資源簡介

課件100張PPT。教學參考清華大學“信息技術教學一條龍”實驗教材編寫組第３單元第２單元第４單元 第１單元清華大學“大、中、小學一條龍教學研究”實驗教材 信息技術系列
《信息技術》 八年級 下冊第 1 課第 3 課第 2 課第 5 課第 6 課第 7 課第 8 課第 9 課第 10 課第 12 課第 13 課第 14 課教學參考 第 1 單元第 2 單元第 3 單元第 4 單元清華大學“大、中、小學一條龍教學研究”實驗教材編寫組第 4 課第 11 課第 15 課第16 課 一、單元概述
在本單元中，我們從生成簡單網頁入手，理解網頁設計的基礎知識；然后規劃站點，了解網站建設的開發流程；最后利用Dreamweaver CS5創建站點，并制作首頁。
二、學習目標
本單元是學生初次接觸用于制作網站的軟件Dreamweaver CS5，因此首先讓學生在欣賞網站的同時了解網頁設計與網站制作的基本常識是必要的，在進行軟件介紹的時候重點強調網頁編輯軟件的優越性，另外要讓學生明確的是：在著手創建網站之前，必須要先對網站進行站點規劃，最后通過創建“安全自護我能行”為題的網站使學生經歷“規劃網站 →創建站點→編輯首頁”的網站初步建設過程。
通過本單元循序漸進的學習過程，學生將按部就班地掌握：使用HTML語言編寫的代碼生成網頁、用IE瀏覽器預覽網頁、網站的開發流程、創建站點、創建首頁、規劃素材文件、為頁面添加網頁標題和背景色 、使用表格初步布局
第1單元 初建網站網頁 、調整表格、設置網頁背景圖像、插入Flash動畫并設置參數、插入普通文本和特殊字符、保存網頁等知識與技能。
在教學過程中要盡可能地利用學生已有的知識技能分析并解決新的問題，例如網頁中的背景色調整、表格設置與調整、插入文本、保存網頁等，其操作方法與Office系列軟件和上學期學過的Flash 軟件具有較大的相似程度，此時教師可以引導學生知識遷移、自行探索發現解決問題的方法，而教師則可將注意力集中在更需要關注的學生身上，最大限度地提高課堂效能，將問題在課上給予解決。
教師在布置單元任務或課堂任務的時候，要鼓勵學生不完全模仿范例，而是利用素材進行網頁的創意和設計，爭取留給學生更多的空間去發揮創意。
在進行評價的時候要對創意部分及時給予鼓勵，充分利用各種方式對學生作品進行展示，引導不同層次的學生之間形成良性競爭，從而在班級教學中創造出和諧上進的學習氛圍，對信息技術教學產生推動作用，充分體現“學生為主體，教師為主導”的教學理念。
三、重點難點 教學重點
1．掌握互聯網、網頁與首頁、網站等網頁設計與網站制作的基本知識。
2．學會使用HTML代碼在記事本工具中制作網頁并且通過用IE瀏覽器預覽網頁。
3．了解網站的開發流程，能夠圍繞網站主題設計組織結構圖。
4．熟悉Dreamweaver CS5的工作界面。
5．掌握創建站點、規劃素材文件的方法。
6．學會創建首頁、設置網頁標題和背景色、保存網頁及在IE中預覽網頁。
7．能夠根據網頁內容對頁面進行合理的表格布局，并調整表格屬性。
8．能夠靈活地將圖像、Flash動畫、文本和特殊字符插入到頁面中，并且通過“屬性檢查器”設置以上網頁元素的屬性。
教學難點
1．HTML語言的結構，標簽和屬性的含義。
2．通過觀察文檔圖標和擴展名判斷該文檔調用的啟動軟件。
3. 能夠根據網站主題的需要，搜集并整理相關素材，去粗取精、去偽存真。
4. 通過“窗口”菜單和面板組對工作界面進行自由布局安排，打造適合自己使用的軟件環境。
5. 使用“標簽選擇器”來選擇網頁元素，以設置其屬性。
6. 利用像素和百分比兩種度量單位來控制網頁元素的尺寸。
四、學時安排
本單元共4課，總計4學時，每課占用1學時。
（一）本課教學目標
1．掌握互聯網、網頁與首頁、網站等網頁設計與網站制作的基本知識。
2．學會使用記事本作為網頁編輯工具來編輯HTML代碼并生成網頁。
3．掌握瀏覽網頁的方法并理解網頁編輯工具與瀏覽工具之間的關系。
（二）教學設計與教學建議
1．課堂引入分析
在當前的社會生活中，網絡正在發揮著越來越重要的作用，大量制作精美、功能強大的網站出現在互聯網上。對于學生來說，制作個人網站也正在成為一種流行時尚。
通過本教材的學習可以輕松幫助學生入門，并逐步親手打造屬于自己的個性十足的網站。 第1課 新手入門在本課的引入設計中，教師可以這樣設計：
首先打開IE瀏覽器，在地址欄中輸入網址，打開一個范例網站的首頁，單擊首頁中的動畫、超文本、圖片等網頁元素，可以分別鏈接到網站中的其他頁面中。在操作過程中教師提出問題，引導學生思考互聯網、網站、網頁、首頁等術語的含義，以及它們之間的關系，嘗試讓學生體會瀏覽器和網頁的關系，從而將網站設計與網頁制作的基本知識進行概括總結并明確落實到每個學生身上。
在進行教學的時候，一定要讓學生認識到已有知識的重要性，充分利用已經具備的技能去嘗試解決新問題，從而變被動學習為主動探究。
教師可引導學生充分利用教材中的“視野拓展”和“創作天地”板塊進行自學，這實際上是在實施分層教學，以鞏固本課的知識技能為主，適當地進行補充，讓部分基礎較好的同學在完成基本任務之后也能有事可做，給學生創造出提高的空間。
作為網站制作的起始課，教師要切實地關注每個學生，尤其是在以前的學習過程中表現出學習能力較弱的學生，要確保每個學生都有一個好的開始，都能將第一個網頁作品保存到教師指定的位置（本地磁盤或網絡中的指定目錄）。
教師應對所有完成保存網頁任務的學生進行及時地評價與鼓勵，保護學生的學習積極性。另外，對完成基本任務并有所創新的同學重點表揚，鼓勵學生主動學習，有計劃地營造良性競爭的氛圍。 2．重點內容分析
（1）網頁設計與網站制作的基本知識是本課的教學重點
在本課中通過欣賞站點，使學生了解和掌握互聯網、網頁與首頁、網站、IE瀏覽器的基本含義，并且能夠明確它們相互之間的關系。
學生在學習網站制作之前已經接觸過網站，瀏覽過各式各樣的網頁，因此教師在完成此教學任務的時候，可以充分利用學生已有基礎，不必完全進行講授式教學，可以結合啟發、設問等方法，使學生盡可能地自己總結出相關知識。
（2）使用記事本作為網頁編輯工具來編輯HTML代碼并生成網頁是本課的難點
在進行此部分教學的時候，可以先借助學生已有技能，啟動記事本，復制并粘貼素材文件中提供的HTML代碼，命名并保存文件，然后在瀏覽器中進行預覽。
對于HTML代碼部分，教師可以嘗試通過修改屬性值的方法，引導學生探索標簽的含義及其與屬性值的對應關系，這也同時是對“創作天地”板塊中的練習進行提示的過程，然后通過分析此HTML實例，講解HTML語言的基本結構，對基本的 、、標簽進行初步介紹，鼓勵有余力的同學通過“視野拓展”板塊進行自學，并獨立完成“創作天地”中的練習。通過教師演示引導學生思考擴展名對文件的影響，既包括其對文件圖標的影響，也包括調用應用程序的影響，從而引出程序關聯的知識進行補充講解，見圖1.1和圖1.2。
(3) 保存并上傳文件
本課是學生第一次上傳網頁作業，因此要著力于培養學生的學習習慣，尤其是在保存作業至本次磁盤之后，一定要盡可能地讓學生將文件上傳到網絡中的指定位置，并且能夠給予學生查看其它學生作業的權限，這不僅便于教師評價，更便于學生之間互評。
學生可以通過比較作品的差異看到自己的學習處于整個集體中的位置，從而反思自身作品，迸發靈感，獲得動力進行二次創作，對于整個班級的激勵將會產生更多的富有創意的優秀作品。學生還可以隨時查看上傳作業的情況，作為調整自身作業完成進度的參考。（三）教學補充
本課對HTML語言進行了簡單的介紹，在“視野拓展”和“創作天地”板塊中都安排了此部分的內容。
教師可以補充一些簡單的HTML標簽和屬性，提供給有興趣的學生作為提高練習使用，也為今后更好地使用“標簽選擇器”選擇對象打下基礎。
如：

標簽Height
Width
Border
Align
Background
屬性（一）本課教學目標
1．了解網站的開發流程。
2．掌握開發個人網站的步驟。
3. 能夠根據網站主題設計網站結構。
4．熟悉Dreamweaver CS5 的工作區布局和界面環境。
5．掌握使用向導創建站點的方法與步驟。
（二）教學設計與教學建議
1．課堂引入分析
在第一課我們已經掌握了網站、網頁、網頁的組成元素等基礎知識，現在就來了解開發建設網站的過程中需要進行的工作。
在進行網站建設的時候，需要先進行需求分析，要對網站的主題、素材、規劃內容綜合考慮。第2課 輕松上路本課首先要解決的正是網站的組織結構問題，我們以“安全自護我能行”為例對網站的組織結構圖進行講解，要求學生掌握圍繞主題確定網站結構及網頁內容的方法。
規劃好站點后，就可以開始著手創建站點了。使用Dreamweaver CS5創建站點，當然要先熟悉軟件的工作環境。我們在這里只需要簡單介紹即可，因為本軟件的文檔窗口與Office系列軟件相似，面板組又和同一公司出品的Flash軟件雷同，只需要簡單地提示學生并快速演示工作區布局即可。
Dreamweaver CS5 取消了“站點定義向導”，新建站點只能通過“站點設置對象”窗口完成，但是這個窗口除了使用“新建站點”命令激活外，也可以使用“管理站點”中的“新建”按鈕激活。教師可提示學生打開“站點設置對象”窗口中的“高級設置”標簽，瀏覽其中包含的高級設置選項，推薦部分學生可以在今后的學習中嘗試使用。
2．重點內容分析
規劃網站及創建站點是本節課的教學重點，下面分別進行教學建議。
在本課講解網站開發流程之后，教師應迅速將課題引導至規劃站點上來，引導學生圍繞網站主題“安全自護我能行”展開討論，共同思考本網站應該如何規劃，依照先整體后局部，先簡單后復雜的原則去分層、分角度設計網站結構和網頁內容，讓學生體驗完整的規劃過程，以便對“創作天地”中布置的課外提高任務起到降低難度的作用。
創建站點是本課的重要內容，要求所有學生一定要掌握使用“站點”菜單的“新建站點”命令創建站點的方法，對于使用“文件”面板創建站點的方法，則可以通過提示或在今后的教學過程中演示滲透來介紹，如圖2.1所示，盡量使學生能夠熟悉如圖2.2所示的“管理站點”對話框，并且弄清楚在此對話框中的“刪除”站點并非刪除掉網站文件本身，僅僅是刪除在Dreamweaver CS5對此站點設置的信息而已。
（三）教學補充
1.切換網站
當學生使用的計算機具有磁盤保護的功能，或者在Dreamweaver CS5 中創建了多個待編輯的網站時，學生啟動軟件后，系統不會恰好打開需要編輯的站點，此時可以提示學生使用“文件”面板來打開需要的網站。其操作過程如圖2.3、2.4和2.5所示。 2.網站組成
在創建站點的過程中，教師不可避免地會遇到站點的組成問題，一般來說在Dreamweaver CS5中創建的站點分為三部分：本地站點、遠程站點和測試站點，講清楚此三部分的含義，才能正確設置站點。
本地站點：這是我們創建站點的工作目錄，用來存放網頁和素材，它可以位于學生的本地計算機，也可以位于教師配置的網絡服務器上。
遠程站點：遠程站點是用來存儲我們創建的站點文件的文件夾，這些文件用于測試、生產、協作和發布站點。如果想在不連接Internet時測試站點，可以在本地計算機上通過軟件設置的辦法去模擬Web服務器環境。
測試站點：用來測試動態頁面的站點，適用于動態網頁。
3.動態網頁和靜態網頁
至于動態網頁和靜態網頁的區別，教師可以簡單概括講解如下：
動態網頁和靜態網頁是相對的，動態網頁是指內容由站點數據庫中變化的數據來顯示的網頁，靜態網頁和動態網頁的擴展名不同，靜態網頁一般是以.htm、.html、.shtml、.xml等為擴展名，而動態網頁則是以.asp、 .jsp、 .php、.perl、.cgi等為擴展名的。教師還可以提供學生一些動態網站的地址，讓學生通過自己的實際操作去體會二者的區別。（一）本課教學目標
1．進一步熟悉Dreamweaver CS5的工作界面。
2. 掌握利用“文件”面板打開網站的方法。
3．學會根據網站素材的分類規劃網站的文件夾。
4．熟練地創建并保存網頁。
5. 掌握設置網頁標題的方法。
6. 能夠根據網頁內容使用表格恰當布局。
7. 學會設置網頁背景色及表格背景圖像。
8. 初步認識并嘗試使用標簽選擇器選擇對象。
9. 熟練地使用快捷鍵在瀏覽器中預覽網頁效果。
（二）教學設計與教學建議
1．課堂引入分析　第3課 開篇之作 當站點規劃并創建完畢之后，要進行的工作首當其沖就是制作網站的首頁。首頁作為網站的門面，對網站來說至關重要，因此我們要盡量將首頁制作的富有吸引力。
2．重點內容分析
（1）在“文件”面板中規劃站點
首頁需要使用的素材必須存放在網站中才能被它引用，所以我們要為素材建立文件夾，將不同類別的素材分門別類地存放，便于管理。
打開“文件”面板，模仿在windows中的操作，右擊網站名“安全自護我能行”，在彈出的快捷菜單中執行“新建文件夾”命令，此時文件夾名處于可編輯狀態，我們只需要直接輸入文件夾名即可完成命名，創建網頁也可以采用此方法，如圖3.1所示。與使用“新建”菜單來創建網頁相比，在“文件”面板中操作更為簡單快捷。 當需要更改網站中的網頁名或文件夾名時，可右擊網頁名或文件夾名，執行彈出的快捷中的“編輯”→“重命名”命令，或直接使用快捷鍵F2。 為素材歸類存放準備的文件夾建立完畢之后，我們要將素材存放到相應的目標文件夾中。此時可以考慮暫時脫離Dreamweaver CS5 的軟件環境，使用windows的資源管理器進行操作，這樣做的好處是可以批量復制粘貼文件，尤其是素材準備充分的情況下，能夠節省大量的時間，這種方法優于在網頁中先使用素材后再逐個保存到網站中的方法。
在教材中我們所介紹的正是此種方法。至于傳統的先使用素材后保存到指定文件夾的方法，雖然不推薦使用，但是也可以介紹給學生，其過程如圖3.2所示（此示意圖是以在網頁中插入圖像為例的）。
創建首頁的過程與創建普通網頁并無實質性的區別，系統區分首頁和普通網頁依賴于文件名，如果網頁被命名為index.html(index.htm)或者default.html(default.htm)，那么在將來發布網站的時候就會指定該網頁為首頁，此原則是由發布站點的軟件所決定的，作為使用者我們只需要遵守該原則，在Dreamweaver中將首頁命名為index.html(index.htm)，其他網頁鏈接在它下層即可。
（2）設置網頁標題
每個網頁都有標題，但是網頁的標題并不顯示在網頁文檔中，而是顯示在瀏覽器的標題欄中，如果不設置則顯示成“無標題文檔”，如圖3.3所示。 設置網頁標題并不復雜，在教材中我們介紹了使用“文檔”工具欄中的的“標題”文本框的方法來設置，然后在IE中預覽效果。如圖3.4所示。圖3.3 預覽無標題網頁 （3）設置網頁背景
更改首頁的背景色，屬于設置網頁的頁面屬性，既可以通過“屬性檢查器”的“頁面屬性”按鈕，也可以通過“修改”菜單的“頁面屬性”命令完成，彈出的對話框相同。
我們設置背景色的目的是為了讓后插入的表格的背景圖像能夠融合到整個網頁中，使畫面效果過渡自然，所以對背景顏色要求非常精確。在系統提供的色板中我們無法找到對應的顏色，用拾色器則比較復雜，因此我們采用的是輸入十六進制顏色值的方法進行設置，此方法我們在學習Flash的時候曾經講授過，此處不再贅述。
當網頁同時設置了背景顏色和背景圖像的時候，系統只會顯示背景圖像，忽略背景顏色。
（4）使用表格對頁面布局
插入表格是在網頁設計中經常采用的頁面布局方式，使用表格控制網頁元素的定位，既簡單又精確，因此掌握好表格的運用是非常重要的。
當表格用于布局的時候，通常會將邊框線設為0像素，這樣在瀏覽器中瀏覽網頁時將不會看到表格邊框線。我們在首頁中正是如此設置的，表格的邊框線在編輯狀態下顯示為虛線，在IE中預覽的時候，邊框線并不顯示。 當需要選擇表格對象（表格、行、列、單元格）的時候，我們推薦使用狀態欄中的“標簽選擇器”來進行。
需要注意的是，隨著鼠標在表格中位置的不同，“標簽選擇器”區域顯示的內容也會發生相應的變化，此時我們可單擊標簽，并觀察表格對象的選擇狀態即可判斷所選的對象是否正確。
對于如圖3.5所示的2*2的表格來說，當將插入點定位在b1單元格中時，單擊“標簽選擇器”中的，將會選擇b1單元格本身，單擊，則選中插入點所在的行，即a1和b1單元格，單擊，選中整個表格，如果單擊，那么選擇的將是整個網頁，在此過程中，“屬性檢查器”也跟隨對象的不同發生變化，這樣便于設置對象的屬性。（三）教學補充
1. 通過代碼視圖或拆分視圖設置網頁標題 2. 設置頁面屬性
在“頁面屬性”對話框中，我們僅僅設置了“外觀CSS”背景顏色一個項目，教師此時可引導學生對“外觀”類包含的“頁面字體”、“大小”、“文本顏色”進行設置，學生完全可以自己理解并自覺應用在網頁的設計上。
對“鏈接”類內容，教師可簡單介紹設置鏈接文本使用的字體、大小，顏色以及活動鏈接顏色等。（一）本課教學目標
1．鞏固選擇表格對象的方法。
2. 進一步學習設置表格對象的屬性。
3．掌握在網頁中插入Flash動畫文件，并學會設置Flash動畫的參數的方法，以控制動畫的播放效果。
4. 能夠靈活地在網頁中使用文本。
5. 初步認識并嘗試使用輔助設計工具定位網頁元素。
（二）教學設計與教學建議
1．課堂引入分析
　在首頁制作的過程中，我們已經使用表格進行了初步的布局。之所以叫做初步布局，就是因為我們還沒有根據素材的具體情況對表格進行細致而精確的調整。有時候，我們可以利用鼠標大致調整表格對象的尺寸，但絕大部分情況下，都需要使用者精確地控制表格對象的高度、寬度、比例等屬性，才能達到精確布局的目的。第4課 星光閃爍 Flash動畫在網頁中得到了廣泛的采用，它使網絡世界更加炫目，本課我們將學習使用在網頁中插入Flash動畫，并設置其屬性和參數，使之更好地起到裝飾網頁、深化主題的作用。
文本是網頁中介紹說明各種信息的基本組成元素，在網頁中使用文本并根據需要設置文本的屬性是網頁設計的重要組成部分，也是我們作為軟件使用者的基本技能。在本課中我們要學習多種方式使用文本，以及插入特殊字符等。
2．重點內容分析
（1）調整表格
在實際應用中，我們如果要設置表格對象的屬性，前提是選擇好表格對象，在前面我們已經探討過使用“標簽檢查器”選擇表格對象的方法，在本課的教材中介紹了使用Ctrl鍵搭配鼠標及使用鼠標單擊行左或列首選擇行、列的方法。
這里我們補充介紹使用表格標題和列標題選擇表格和列的方法，使學生最終能夠靈活地選擇表格對象。其操作方法如下：
將插入點定位在表格內任意位置，當表格出現表格標題及列標題菜單的時候，單擊標題菜單，執行“選擇表格”或“選擇列”命令即可，如圖4.1所示。 雖然已經為表格設置了高度和寬度，但這并不意味著表格一定以我們設置的尺寸顯示，這是由于表格中的元素尺寸超出表格尺寸造成的。例如，我們在網頁中插入一個2行1列的表格，設置表格的屬性如下：寬度100，高度200，邊框、填充和間距都為0，此時表格的尺寸和我們設置的相同，為100*200像素。如果我們將一個圖像插入第一行中，并調整圖像大小為200*100像素，此時表格的尺寸就會自動調整為200*200，保證內容得以完整顯示，如圖4.2所示。 填充：單元格中的內容與單元格邊框的距離，單位默認為像素。
間距：單元格之間或單元格與表格邊框之間的距離，單位默認為像素。
表格屬性中的“填充”和“間距”選項如果不進行設置，大多數的瀏覽器都會默認按照“填充”為1、“間距”為2來顯示表格，如果不希望如此顯示，就要設置其值。
圖4.3是分別將“填充”和“間距”設置為不同的值時表格的顯示效果。注意：為了突出顯示效果，可以預先將表格的邊框設為1個像素的實線。 （2）插入Flash動畫并設置參數
在教材中介紹了執行 “插入”→“媒體”→“Swf”命令來插入Flash動畫文件，當熟悉Dreamweaver CS5的工作界面后，我們一定會喜歡上使用“常用”工具欄中的“媒體：SWF”按鈕來插入Flash的方法，Dreamweaver會自動保留上次使用過的元素，如圖4.4所示。 （3）在網頁中使用文本
在Dreamweaver CS5 中，專門提供了一個“文本”工具欄來幫助使用者設置文本和插入特殊字符。
“文本”工具欄中的各個按鈕含義如圖4.5所示，與使用菜單命令和“屬性檢查器”搭配設置文本相比，使用工具欄顯然操作步驟少，執行速度快。
（三）教學補充
格式化表格
在Dreamweaver CS5，取消了格式化表格功能，這個功能預先定義了很多漂亮的表格樣式，適合初學者使用，我們可以通過使用低版本的Dreamweaver來完成格式化表格的操作，省去逐項設置的不便。 其具體步驟如下：
（1）啟動Dreamweaver8軟件，選中要格式化的表格，執行菜單“命令” → “格式化表格”命令。
（2）在彈出的“格式化表格”對話框中，選擇預設方案，此時可以直接使用預設方案，還可以在此對話框中選擇一個方案為基礎，再進行個人設定，創建出具有個人風格的表格，如圖4.6所示，即為自定義風格的表格設置。 圖4.6 在“格式化表格”對話框中設置自定義風格 一、單元概述
在本單元中，學習如何創建框架網頁，利用框架進行網頁的結構劃分和布局；學習如何創建網頁模板，利用模板和框架統一網站風格，提高網頁的制作效率。
二、學習目標
1. 了解框架網頁的基本結構，掌握框架網頁的制作方法，并能獨立制作框架網頁，利用框架對網頁進行結構劃分和布局。
2. 了解網頁模板的基本用途，掌握網頁模板的創建方法，并能根據網站的風格創作網頁模板。
三、重點難點
教學重點
1．了解框架的基本概念和用途。
2．掌握框架網頁的創建和保存的方法。
3．掌握用鼠標經過圖像制作導航按鈕的方法。
第2單元 框架模板 4．掌握表格的拆分、合并、嵌套等高級應用方法。
5．掌握制作外部鏈接和電子郵件鏈接的方法。
6．了解網頁模板的基本概念和用途。
7．掌握網頁模板的創建方法。
8．掌握可編輯區的添加、刪除等基本操作。
9．掌握目標的設置方法和具體意義。
教學難點
1．創建與保存框架的基本方法。
2．如何利用鼠標經過圖像制作導航按鈕。
3．創建網頁模板的基本方法。
4．掌握表格的靈活運用方法及高級應用。
5．掌握目標設置的方法和具體意義。
四、學時安排
本單元共2課，總計2學時，每課占用1學時。（一）本課教學目標
1．掌握拆分單元格的方法。
2．掌握創建與保存框架集的方法。
3．熟練掌握利用鼠標經過圖像制作網頁導航的方法。
4．掌握外部鏈接和電子郵件鏈接的制作方法。
5．掌握目標設置在網頁制作過程中的作用和方法。
（二）教學設計與教學建議
1．課堂引入分析
在進行網站制作的時候，為了有效地統一網站的風格，常常需要將頁面劃分成多個區域，將各個網頁的相同內容（如網站標題、網站導航等）固定在一個區域中，使網站導航結構清晰。利用框架可以輕松實現網頁結構劃分和布局。
演示網頁范例：給學生展示一些比較有特點的使用了框架的網頁范例，通過觀察了解網頁布局的基本規律和框架在網頁中的作用，對框架有一個初步的了解和感性認識。
第5課 統一風格 提出任務：用一節課時間，學習如何創建框架、制作框架網頁。在制作的過程中，要注意隨時保存文件。
2．重點內容分析
（1）創建和保存框架集
利用“新建文檔”的方式創建框架集，是比較直接的創建框架的方法。根據實際網頁布局的需要，可以方便地選擇框架集的樣式，從而創建合適的框架。
可以單獨保存每個框架集文件和帶框架的文檔，也可以同時保存框架集文件和框架中出現的所有文檔。保存框架集時，要特別引導學生注意和體會保存文件的順序。先存框架集文件，再保存帶框架的文檔以及框架中顯示的網頁文件。
（2）利用鼠標經過圖像制作導航按鈕
鼠標經過圖像由頁面載入時顯示的原始圖像和鼠標指針經過時顯示的圖像組成，這兩個圖像應大小相等，如果圖像大小不等，將自動調整第2個圖像的大小以匹配第1個圖像的屬性。在瀏覽器中當鼠標指針移過圖像時，圖像可以發生變化，利用鼠標經過圖像的這種特殊效果，可以制作動態網頁導航按鈕。
為了制作出效果特殊的鼠標經過圖像，所需的原始圖像和鼠標經過時顯示的圖像需要通過圖像處理工具進行制作和處理。注意引導鼓勵學生自己處理制作圖像，以彰顯學生個性，培養學生的創造能力。

3．歸納提高分析
（1）表格的高級應用
　 在本課的任務中，表格被廣泛應用，在規則表格的基礎上，通過合并單元格制作不規則的表格，以實現網頁布局的特殊需要。
① 合并單元格
選中需要合并的單元格，通過以下四種方法可以實現：
a. 執行“修改” → “表格” → “合并單元格”命令。
b. 在選中的單元格上右擊，執行“表格” → “合并單元格”命令。
c. 按下組合鍵CTRL+ALT+M。
d. 單擊“屬性檢查器”中的“合并所選單元格，使用跨度”按鈕 。
② 設置單元格背景
結合插入圖像和設置單元格背景，可以實現如教材圖5.18所示的圖像表格效果。用作表格邊框的圖像文件，需要利用圖像處理工具進行加工處理，以符合頁面布局的需要。
（2）目標設置
　 屬性檢查器中的“目標”用來設置超鏈接的打開方式，共有4個選項可供選擇。
目標設置部分不太容易理解，在講解的同時可配以直觀有效的例子加以說明。
（三）教學補充
1．創建框架
創建框架除了利用新建文檔的方式以外，還可以通過以下方法創建。
（1）使用預定義的框架集
將插入點放置在文檔中。在“插入”欄的“布局”類別中，單擊“框架”按鈕上的下拉箭頭，然后選擇預定義的框架集，如圖5.1所示。
框架集圖標提供應用于當前文檔的每個框架集的可視化表示形式。框架集圖標的藍色區域表示當前文檔，而白色區域表示將顯示其他文檔的框架。 （2）設計框架集
　　在創建框架集或使用框架前，執行“查看” →“可視化助理” →“框架邊框”命令，使框架邊框在“文檔”窗口的“設計”視圖中可見。執行“修改” →“框架集”命令，然后從子菜單選擇拆分項（例如“拆分左框架”或“拆分右框架”）。 Dreamweaver 將窗口拆分成幾個框架。如果打開一個現有的文檔，它將出現在其中一個框架中。 圖5.1 預定義框架集 2. 在文檔窗口中選擇框架和框架集
　　在“文檔”窗口的“設計”視圖中，在選定了一個框架后，其邊框被虛線環繞；在選定了一個框架集后，該框架集內各框架的所有邊框都被淡顏色的虛線環繞。
（1）在“文檔”窗口中選擇框架
　　在“設計”視圖中，按住 Alt 鍵的同時單擊框架內部，在框架周圍顯示一個選擇輪廓。
（2）在“文檔”窗口中選擇框架集
在“設計”視圖中，單擊框架集的某一內部框架邊框，（要執行這一操作，框架邊框必須是可見的；如果看不到框架邊框，則執行“查看” →“可視化助理” →“框架邊框”命令以使框架邊框可見。） 在框架集周圍顯示一個選擇輪廓。
（3）選擇不同的框架或框架集
要在當前選定內容的同一層次級別上選擇下一框架（框架集）或前一框架（框架集），按住 Alt鍵的同時按下左箭頭鍵或右箭頭鍵，使用這些鍵，可以按照框架和框架集在框架集文件中定義的順序依次選擇這些框架和框架集。
要選擇父框架集（包含當前選定內容的框架集），可以在按住 Alt鍵的同時按上箭頭鍵。要選擇當前選定框架集的第一個子框架或框架集（即，按在框架集文件中定義順序中的第一個），可以在按住 Alt鍵的同時按下箭頭鍵 。（一）本課教學目標
1．掌握合并單元格及插入嵌套表格的方法。
2．了解模板的概念和用途。
3．學會創建網頁模板。
4．掌握定義、編輯可編輯區域的基本方法。
5．能夠根據網站的需要創建網頁模板。
（二）教學設計與教學建議
1．課堂引入分析
在進行大量的頁面制作的時候，很多頁面會用到相同的布局、圖片和文字等元素。為了避免一次次地重復勞動，可以將具有相同版面結構的頁面制作成模板，然后基于模板創建新的網頁，最后根據需要對頁面進行改動，加入個性化的內容。第6課 事半功倍 演示模板范例：給學生展示一些比較有特點的網頁模板，激發學生對模板的興趣和認識，對網頁模板有一個初步的了解和感性認識。
提出任務：用一節課時間，學習如何創建網頁模板。
2．重點內容分析
（1）模板的概念和用途
模板可以被理解成一種網頁模型，利用這個模型能夠方便地做出很多頁面，使用模板可以避免重復地在每個頁面輸入或修改相同的部分，等網站改版的時候，只要改變模板的設計，就能自動更改所有基于這個模板創建的網頁。模板文件的擴展名為.dwt，存放在網站根目錄的Templates文件夾中。　 （2）創建模板文件
　　利用“資源”面板可以直接創建模板文件，這是一種最直接最直觀的方式，如圖6.1所示。
　　建議教師引導學生采用這種方式創建模板文件，這樣對于整個網站的資源構架會有個一個逐步的了解，對于“資源”面板的用途也逐一掌握。圖6.1 資源面板 （3）定義可編輯區
　　可編輯區域是基于模板的文檔中的未鎖定區域，它是模板用戶可以編輯的部分。模板創作者可以將模板的任何區域指定為可編輯的，要讓模板生效，它應該至少包含一個可編輯區域，否則，將無法編輯基于該模板的頁面。
　　可以把圖像、文本、表格等頁面元素設置成可編輯區，也可把整個表格及表格里的內容設置成一個可編輯區，還可以把某個單元格及內容設置成一個可編輯區，但不能把幾個不同的單元格及內容設置為同一個編輯區。　　可編輯區域在模板中由高亮顯示的矩形邊框圍繞，該邊框使用在首選參數中設置的高亮顏色，如圖6.2所示。該區域左上角的選項卡顯示該區域的名稱。如果在文檔中插入空白的可編輯區域，則該區域的名稱會出現在該區域內部。這一點，教師可通過對比的方式給學生解釋清楚。圖6.2 可編輯區 （4）表格的高級應用
　在本課的任務中，表格被廣泛應用，在規則表格的基礎上，通過拆分單元格和插入嵌套表格的方式，實現網頁布局的特殊需要。
① 拆分單元格
選中需要拆分的單元格，通過以下四種方法可以實現：
a. 執行“修改” → “表格” → “拆分單元格”命令。
b. 在選中的單元格上右擊，執行“表格” → “拆分單元格”命令。
c. 按下組合鍵CTRL+ALT+S。
d. 單擊“屬性檢查器”中的“拆分單元格為行或列”按鈕 。
② 插入嵌套表格
為了更好地布局網頁，在表格中還可以嵌套新的表格。總表格負責整體的排版，嵌套表格負責各個子欄目的排版，并插入到總表格的相應位置中。總表格的高度和寬度一般使用像素值，嵌套表格一般使用百分比，以避免嵌套表格的高度和寬度與總表格發生沖突。（三）教學補充
1．創建模板文件的其他方法
除了利用“資源”面板新建模板文件的方式以外，還可以通過以下方法創建。
（1）“新建文檔”的方式
執行“文件” →“新建”命令，打開“新建文檔”對話框，如圖6.3所示。選擇“空白頁”類別中的“HTML模板”，單擊“創建”按鈕即可。 （2）“另存為模板”的方式
打開已經制作好的網頁文件，執行“文件” →“另存為模板”命令，打開“另存為模板”對話框，如圖6.4所示。在“站點”下拉列表框中選擇要保存模板的站點，在“另存為”文本框中輸入模板的文件名，單擊“保存”按鈕即可。圖6.3 “新建文檔”對話框圖6.4 “另存為模板”對話框 2．模板區域的類型
創建模板時，可編輯區域和鎖定區域都可以更改。但是，在基于模板的文檔中，模板用戶只能在可編輯區域中進行更改；無法修改鎖定區域。共有四種類型的模板區域：
（1）可編輯區域是基于模板的文檔中的未鎖定區域；它是模板用戶可以編輯的部分。模板創作者可以將模板的任何區域指定為可編輯的。要讓模板生效，它應該至少包含一個可編輯區域；否則，將無法編輯基于該模板的頁面。
（2）重復區域是文檔中設置為重復的布局部分。例如，可以設置重復一個表格行。通常重復部分是可編輯的，這樣模板用戶可以編輯重復元素中的內容，同時使設計本身處于模板創作者的控制之下。在基于模板的文檔中，模板用戶可以根據需要使用重復區域控制選項添加或刪除重復區域的副本。
（3）可選區域是用戶在模板中指定為可選的部分，用于保存有可能在基于模板的文檔中出現的內容（如可選文本或圖像）。在基于模板的頁面上，模板用戶通常控制是否顯示內容。
（4）可編輯標簽屬性使用戶可以在模板中解鎖標簽屬性，以便該屬性可以在基于模板的頁面中編輯。例如，可以“鎖定”在文檔中出現的圖像，但讓模板用戶將對齊設為左對齊、右對齊或居中對齊。 一、單元概述
在本單元中，我們將綜合運用框架和模板創建網頁，通過制作“日常生活”篇和“校園內外”篇中的網頁，學習使用“鼠標經過圖像”制作導航欄進行站內導航，對錨記鏈接、水平線、圖像熱點超鏈接等編輯網頁的常用技巧加以應用，并運用滾動字幕、CSS樣式和層布局及美化網頁。
二、學習目標
通過前面2個單元的學習，學生已經具備了一些網站制作和網頁設計的基本知識，掌握了一定的網站編輯技能。本單元的內容都是網頁制作過程中較為常用的技巧，知識點多而繁雜，因此要在此單元的教學中注重能力的培養，而不是將注意力停留在學生具體學會了哪個命令、那個面板的使用上。
知識：使用使用“鼠標經過圖像”制作導航欄，插入水平線，制作錨點鏈接，制作圖像熱點鏈接，使用滾動字幕，應用CSS樣式和層布局。
技能：通過模板創建網頁，在網頁上應用模板，用多種方法創建相似網頁，將網頁從模板中分離，正確設置框架網頁中的鏈接目標。
在學生的學習過程中，動員學生通過動手實踐操作來理解本單元的內容，不妨多采用小組討論和自學的方式，使學生深入地體會到軟件設計的理念及內部聯系，從而起到舉一反三的積極作用。
第3單元 編輯網頁 三、重點難點
教學重點
1．掌握應用模板創建網頁的方法，能夠通過鼠標的形狀變化分辨可編輯區域和鎖定區域。
2．熟悉“資源”面板的使用。
3．能夠制作導航按鈕實現站內導航。
4．靈活地使用水平線分隔網頁元素。
5．學會使用錨記鏈接、圖像熱點鏈接，掌握網頁內部、網站內外等跳轉。
6．綜合利用滾動字幕和AP Div元素（層），增強網頁表現力。
7．應用CSS樣式表和層美化網頁。
教學難點
1．套用和分離模板，綜合運用多種方式快速生成網頁。
2．根據需要正確設置鏈接對象的目標框架。
3. 使用滾動字幕制作動態標題，與AP Div元素（層）的搭配使用。
4. CSS樣式表的導入導出應用。
四、學時安排
本單元共5課，總計5學時，每課占用1學時。
（一）本課教學目標
1．掌握利用模板創建網頁的方法。
2．熟練運用“鼠標經過圖像”制作導航欄進行站內導航。
3．理解鏈接對象的目標框架的含義。
（二）教學設計與教學建議
1．課堂引入分析
　在第2單元中，我們設計了模板和框架，本課主要任務就是應用框架和模板打造風格統一的網頁，使它們真正地發揮作用，加快我們制作網頁的速度。
　在教學中，引導學生觀察使用常規方法編輯的網頁和基于模板創建網頁的異同，并對鼠標指針形狀的變化引起重視。第7課 駕輕就熟 學生在進行探索嘗試新知識的時候，經常會出現操作錯誤，當計算機彈出窗口或對話框對使用者進行提示時，很多學生會下意識地關閉提示信息，忽略掉系統“善意”的“提醒”，缺乏人機交互的意識，這將導致學生完全寄希望于教師或他人的指導，造成自身的時間浪費及教師的分身無術，最終導致課堂效率低下和學生能力發展停滯不前。
如要解決上述情況，需要教師針對此種情況進行專門的強化訓練，引導學生重視計算機提供的反饋信息，遵循計算機的工作方式，只有如此才能駕馭它，使之順從地為我們服務。也許我們不能完全避免出現問題，但是能否利用工具靈活快速地解決問題則是衡量現代人信息素養的重要標準。
當應用模板創建網頁后，制作導航欄成為勢在必行的工作。導航欄的重要性眾所周知，制作方法也多種多樣，本課我們要介紹的是使用動感十足又操作簡單的“鼠標經過圖像”來充當導航欄按鈕。
在Dreamweaver CS5中我們可以不必使用Flash軟件而直接使用多張靜態圖片來制作具有動態效果的導航按鈕。 2．重點內容分析
（1）應用模板創建網頁
應用模板在本課是首次接觸，模板設計好后，要利用它來創建網頁或將其應用于現有的網頁上，才能發揮其減少工作量的作用。應用模板的步驟并不復雜，但是要建立模板也是一種“資源”的理念，才能利用好模板，制作出具有“換膚”效果的網頁。
在本課的“視野拓展”中，我們介紹了將已經制作好導航欄的“日常生活”頁面轉為模板的方法，通過這個操作，日常生活篇中的“交通出行”、“生活用電”和“家務勞動”頁都可以利用這個新模板來創建，從而直接繼承了導航欄按鈕、標題等內容，甚至導航欄的鏈接也都是設置好的，非常方便。圖7.1 利用module2.dwt創建網頁需要注意的問題是：當我們將應用模板module.dwt創建的頁面保存到Templates中時，所有繼承元素能夠正確的顯示，此時拖動頁面到rcsh文件下，圖像的相對路徑會自動改變，因此顯示確保正確，但是如果我們直接將用模板創建的頁面存入到rcsh文件夾下，則會出現路徑錯誤，找不到圖像素材。圖7.2 利用模板module2.dwt創建的網頁未保存時的狀態圖7.3 網頁保存到Templates中后，正確顯示的頁面狀態
（2）“鼠標經過圖像”的使用
在Dreamweaver CS5中，取消了舊版本中提供的Flash按鈕功能，如果需要使用的話，也可以打開舊版本的軟件進行編輯，提供40余種Flash按鈕的樣式，我們只需要選擇樣式，輸入按鈕顯示文本并設置鏈接就可以使用。
如果我們創建的鼠標經過圖像按鈕并不用來進行站內導航，僅僅用來裝飾或者與Internet中的資源鏈接，那么將“插入鼠標經過圖像”對話框中的“鏈接”文本框保持空白或輸入如http://www.sohu.com格式的URL地址，在瀏覽器中單擊按鈕時可以實現超鏈接跳轉。
另外，在此對話框中，還有“替換文本”設置，在這里我們輸入文本“交通出行”，一旦制作鼠標經過圖像按鈕的源圖像丟失或者路徑不正確，不能正確在瀏覽器中顯示時候，瀏覽器將會顯示出“交通出行”文本來替換按鈕。圖 7.4 替換文本在IE中的作用（三）教學補充
更新模板
模板的功能就是把網頁布局和內容分離，這樣相同布局的網頁可以通過模板創建，因此能極大地提高工作效率。
當對模板更新后，所有通過模板創建網頁和應用此模板的網頁都可以隨之更新，因此我們就可以利用此功能在短時間內重新設計網站并對大量的網頁進行修改。
圖7.5 “更新模板文件”對話框 具體步驟如下：
（1）打開已有的網頁模板，進行修改。
（2）執行“文件” →“保存”命令保存模板，系統彈出如圖7.5所示的“更新模板文件”對話框，提示是否更新。 （3）單擊“更新”按鈕，系統彈出如圖7.6所示的“更新頁面”對話框，在“查看”下拉列表中選擇“文件使用”選項 ，在“更新”項目中確保選中了“模板”復選框。單擊“開始”按鈕，Dreamweaver CS5將按照指示更新文件。如果選中了“顯示記錄”復選框，系統將提供它試圖更新的文件的信息，包括它們是否成功更新的信息。 （一）本課教學目標
1．靈活地使用水平線分隔網頁元素。
2．學會插入命名錨記以創建錨點鏈接。
3. 掌握電子郵件、網頁內指定位置、網站內文件、因特網資源等多種超級鏈接目標的設置方法。
（二）教學設計與教學建議
1．課堂引入分析
當初步制作“交通出行”網頁后，可以看出本頁包含的內容很多，不同主題的文字和圖片羅列在一起，頁面比較長，瀏覽起來不是很方便，因此我們考慮使用水平線分隔元素，并為頁面添加錨點鏈接，實現網頁的局部跳轉，快速地將訪問者帶到特定主題或者網頁頂部，使用這種方法，還可以指向不同頁面的指定位置。第8課 自由穿梭 2．重點內容分析
（1）插入水平線
水平線對于組織信息很有用。插入水平線，操作比較簡單，執行菜單“插入”→HTML →“水平線”命令就可以插入默認屬性的水平線，其寬度為100%，自動填滿所在的單元格，高度默認為2個像素，呈現灰色，帶有陰影。另外，還可以打開“插入”工具欄中的HTML工具欄，單擊“水平線”按鈕插入水平線，如圖8.1所示。
在水平線的“屬性檢查器”面板中，可以設置水平線的寬度、高度、對齊方式、是否帶有陰影，應用的CSS樣等，如要設置水平線的顏色可使用“快速標簽編輯器”按鈕 或在“拆分”視圖中通過添加代碼操作。
寬和高：以像素為單位或以頁面尺寸百分比的形式指定水平線的寬度和高度。 對齊：指定水平線的對齊方式（“默認”、“左對齊”、“居中對齊”或“右對齊”）。僅當水平線的寬度小于瀏覽器窗口的寬度時，該設置才適用。
陰影：指定繪制水平線時是否帶陰影。取消選擇此選項系統將使用純色繪制水平線。
需要注意的是，水平線的有些設置在編輯窗口無法直接看到效果，需要在IE瀏覽器中預覽，例如圖8.2所示的為2條不同屬性設置的水平線在編輯窗口中的狀態和IE瀏覽器中預覽效果的對比。這2條水平線屬性如下：
寬：100像素
高：3像素
水平線A：居中對齊，帶陰影
水平線B：右對齊，無陰影，顏色#ff3300 （2）創建錨記鏈接
在教材中我們將創建錨點鏈接分為兩個步驟：命名錨記和鏈接錨記。
在進行鏈接錨記的時候，我們采用是在“屬性檢查器”的“鏈接”文本框中輸入錨記名稱的方法，這就要求我們記住各個錨記對應的主題內容才能操作，否則還需要單擊相應的錨記名稱，通過該錨記的“屬性檢查器”找到錨記名。其實，在進行鏈接設置的時候，錨記也可以像文件一樣，直接被鼠標選擇作為鏈接目標，其步驟如下：
① 選擇要添加鏈接的主題文本，如“非機動車交通安全”。
② 單擊“屬性檢查器”中的“<>HTML按鈕”，再單擊“鏈接”文本框后的“指向文件”按鈕 ，直接拖動按鈕到頁面上，此時將會出現黑色的箭頭，我們將此箭頭拖動到需要鏈接的錨記即可，如圖8.3所示。（一）本課教學目標
1．理解圖像熱點超鏈接的含義。
2. 學會繪制各種形狀的熱區，并為之設置鏈接目標。
3．將網頁與所應用的模板分離，使之成為可以自由編輯的普通網頁。
（二）教學設計與教學建議
1．課堂引入分析
在Dreamweaver CS5中，我們可以用多種方式綜合使用圖像，為網站增添生命力，同時加深瀏覽者對網站的良好印象。第9課 按圖索驥 本課我們繼續介紹應用圖像的方式：圖像熱點超鏈接。同一個圖像的不同部分分別制作為熱區，單擊這些區域，就可以可以鏈接到不同的鏈接目標，這就是圖像熱點超鏈接。
2．重點內容分析
（1）圖像熱點超鏈接
在“家務勞動”頁面中，我們插入了一張尺寸較大的圖像，圖像的不同區域代表不同的主題內容，我們要為此圖像設置局部圖像鏈接，制作出“一圖多鏈”的效果。在Dreamweaver 中，這種被分為多個區域（或稱“熱區”）的圖像就稱為“圖像地圖”。 在圖像上繪制熱區之后，觀察此圖像的“屬性檢查器”，在“地圖”文本框中自動出現Map，如圖9.1所示。這是系統自動為圖像地圖分配的名稱，我們也可以自己定義圖像地圖的名稱便于記憶。當同一網頁中使用多個圖像地圖時，要確保每個地圖都有唯一名稱。 本圖像地圖包含3個熱區，它們鏈接的目標既有命名錨記，也有新創建的網頁，其對應鏈接關系和目標框架如圖9.2所示。（2）網頁與模板分離
當網頁通過執行“修改”→“模板”→“從模板中分離”命令與模板分離之后，網頁保留了原來的全部內容，只是把原來模板限定的不可編輯區域轉換為可以編輯的區域，網頁在編輯區域如圖9.3所示的提示將會消失。 （三）教學補充
（1）將模板應用于現有文檔
當網頁與模板分離后，還可以重新選擇模板加以應用。 操作步驟：
（1） 打開要應用模板的網頁。
（2） 執行“修改” → “模板” → “應用模板到頁”命令， 即會出現“選擇模板”對話框。如圖9.4所示。 （3）從列表中選擇一個模板并單擊“選定”按鈕。
如果文檔中存在不能自動指定到模板區域的內容，將出現“不一致的區域名稱”對話框，如圖9.5所示。
此對話框用于將文檔中的內容指定給模板區域，若要將現有內容指定給新文檔中的可編輯區域，請執行以下操作： ① 在“將內容移動到新區域”彈出式菜單中，執行以下操作之一：
■在新模板中選擇一個要將現有內容移動到其中的區域。
■選擇“不在任何地方”可將該內容從文檔中刪除。
② 若要將所有未解決的內容移到選定的區域，單擊“用于所有內容”按鈕。
③ 單擊“確定”按鈕應用模板，或單擊“取消”按鈕取消將模板應用到文檔的操作。 （2）圖像查看器
在Dreamweaver的舊版本中，能夠制作圖片自動切換的圖像查看器，在制作圖像查看器之前，先要準備素材圖片，對3種格式圖像的支持是最好的，它們是GIF、JPEG和PNG。但是IE瀏覽器只能部分支持PNG圖像的顯示，所以我們最好選用GIF和JPEG格式的圖像制作圖像檢查器。
我們不僅可以通過執行“插入”→“媒體”→“圖像查看器”命令的方法插入圖像檢查器，還可以直接單擊“Flash元素”工具欄中的“圖像查看器”按鈕，如圖9.6所示。
圖像查看器的制作過程也是制作swf格式的Flash動畫文件的過程，我們在“Flash元素”面板中設置的參數直接影響此動畫文件的效果。
在“窗口”菜單中，我們會發現其實并沒有“Flash元素”命令，如果打開“標簽檢查器”面板，然后在編輯窗口中單擊創建好的圖像查看器的圖標，那么“標簽檢查器”面板會自動變為“Flash元素”面板，再此設置圖像查看器的參數就可以了。 （一）本課教學目標
1．掌握綜合運用多種軟件制作導航欄的方法。
2. 學會使用marquee標簽制作滾動字幕。
3. 初步掌握使用層來進行布局。
（二）教學設計與教學建議
1．課堂引入分析
從本課開始制作網站的“校園內外”篇，共包含欄目介紹頁面、“體育健身”、“集體活動”、“校內實踐”和“野外拓展”5個頁面。
在標題部分，我們將會學習用滾動字幕來實現動態效果，同時為了更好的控制頁面的布局，學習使用層來作為容器精確定位多種對象。第10課 左右逢源 2．重點內容分析
（1）綜合多種方法制作導航條按鈕
導航條所需的按鈕圖像要事先準備好，為了看出導航條按鈕的動態效果，我們至少要為每個按鈕準備2張圖像，用來在彈起狀態和鼠標懸停在按鈕上時進行切換，制作這些圖像，使用Photoshop和AAAlogo等軟件搭配是比較好的選擇，可以顯著降低我們的工作量，并能獲得效果較好的圖像。如果能夠使用Flash來制作按鈕，那么網頁就能更加精美。另外，因特網上也提供了很多在線工具來幫助我們快捷的完成按鈕的設計，只需要選擇喜歡的樣式并輸入需要的文字就能直接輸出指定格式的按鈕圖像了。例如，右圖10.1所示就是一個在線的按鈕工具。
圖10.1 按鈕工廠頁面 （2）使用marquee標簽制作滾動字幕
教材中已經詳盡的介紹了marquee標簽制作滾動字幕的方法，插入marquee標簽后，要在“標簽檢查器”中設置好屬性，那么不論是文字還是圖像（包括多張）的滾動就不在話下了。
設置好屬性后，注意觀察代碼視圖，此時字幕部分的代碼如下圖10.2所示，對照“標簽檢查器”中的屬性和教材提供的屬性列表，我們可以輕松看懂這些代碼，它表示字幕將先向右再向左以兩個方向滾來滾去，滾動速度是3，滾動停頓時間是1毫秒。標題文字應用的樣式是ys02（關于樣式的內容我們在下節課集中介紹）。 圖10.2 設置滾動字幕后的代碼視圖 圖10.3 設置圖片滾動后的代碼視圖 （3）使用AP Div 元素布局網頁
教材中我們使用“布局工具欄中”的“繪制AP Div”工具創建新的絕對定位層元素，另外還有一種比較常用的方法，是通過執行“插入” →“布局對象” →AP Div命令插入層。
（三）教學補充
插入日期、時間
我們經常在網頁上看到最近一次修改網頁的時間，這說明網頁是在不斷更新的，從而吸引訪問者再次光顧。Dreamweaver 提供了一個方便的日期對象，可以以多種格式插入當前日期。其具體操作步驟如下： 圖10.4 “插入日期”對話框（1）打開網頁，將插入點設置在要插入時間的位置上。
（2） 執行“插入” → “日期”命令，打開如圖10.4所示的“插入日期”對話框。 （3） 在此對話框中，分別設置星期格式、日期格式和時間格式，并且注意要選中“儲存時自動更新”復選框，這樣才會不斷更新時間、日期。
（4）切換到代碼窗口，可以看出在body標簽內，增加了一句代碼，它的含義就是按照指定格式顯示并更新當前系統日期和時間。
（5）調整日期時間的文字顯示格式
刪除插入的“日期時間”：單擊設計窗口中的日期時間顯示部分，會發現整個區域一起被選中，而不是普通字符的閃爍插入點狀態，此時直接單擊鍵盤上的Delete刪除即可，相應的代碼窗口內容也會自動刪除。
圖10.5 插入日期時間后的代碼窗口（一）本課教學目標
1．掌握通過屬性檢查器創建CSS樣式的方法
2. 理解運用多種方式進行編輯樣式、套用樣式、導出樣式表文件、應用外部樣式表的原理及基本方法。
3. 了解使用AP Div層和樣式表美化網頁的方法。
（二）教學設計與教學建議
1．課堂引入分析
網頁內容較多的情況下，分別為各種元素設定樣式屬性比較麻煩，為了能夠快速高效地控制網頁樣式，我們將在本節課重點介紹CSS樣式表的功能和使用方法。
第11課 最佳搭檔 2．重點內容分析
（1）CSS樣式表的基本語法
教材中，我們沒有對語法多做介紹，僅是按照網頁的需求進行了簡單的樣式表創建和基礎編輯，但是了解一些基本語法，對于提高網頁編輯水平還是非常必要的。
CSS的基本語法由三部分構成：選擇器、屬性和屬性值。 selector {property: value}
下面這行代碼的作用是將 h1 元素內的文字顏色定義為紅色，同時將字體大小設置為 14 像素。在這個例子中，h1 是選擇器，color 和 font-size 是屬性，red 和 14px 是值。
h1 {color:red; font-size:14px;}
這就是一條完整的聲明，h1代表定義的最大標題。（2）用菜單命令創建CSS樣式表 打開文檔設計視圖，在需要插入樣式的地方，執行“格式”→“CSS樣式”→“新建”命令，彈出如圖11.1所示的對話框，這與使用屬相檢查器中單擊“目標規則”區域選擇“<新CSS規則>”，再單擊下方的“編輯規則”按鈕后的效果相同。適合已經存在CSS規則后，仍然需要重新建立新規則的情況下采用此方法。 圖11.1 使用“屬性檢查器”新建規則的方法 （3）建立標簽樣式
在教材中，我們使用屬性檢查器為文本設置CSS規則，當設置“選擇器類型”時，我們選中的是“標簽（重新定義HTML元素）”，這就是建立標簽樣式，我們選擇“p”標簽來定義CSS樣式。
在HTML中，標簽

和

代表的是段落的開始和結束，那么定義標簽p的CSS樣式，就代表本文檔中，所有的段落都應該按照編輯后的規則來顯示。如果設置 HTML 的樣式，選擇器通常將是某個 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
（4）建立類樣式
類選擇器允許以一種獨立于文檔元素的方式來指定樣式，可以單獨使用，也可以與其他元素結合使用。 圖11.2 代碼窗口中的樣式表代碼 標簽p樣式類ys01樣式，text-indent設置為30px，代表首行縮進30個像素 在教材中，我們通過“CSS樣式”面板創建的樣式“ys01”，就是一種類選擇器樣式。
觀察下圖所示的代碼界面，能夠清晰地看到目前設置的標簽p的樣式和類ys01樣式。
下面，我們以教材中xynw.html網頁中文本應用上述2種樣式為實例進行深入分析，感受應用樣式的不同之處和各自特點。
圖11.3 僅僅貼入無格式文本后的情況 圖11.4 把文本分段后，p標簽樣式發揮作用后的情況 我們將文檔用“選擇性粘貼”中的“僅文本”選項將文本貼入到頁面中，如圖11.3所示，可以看出，此時文本保持默認狀態，兩種樣式都沒有起作用。 我們按照原文段落，將文本輸入回車劃分為3個段落，此時如圖11.4所示，每段文本的代碼視圖中增加了p標簽，瞬間應用了p樣式，字體、顏色等都按照p樣式定義的方式發生了改變。 圖11.5 套用ys01樣式后的情況 選中3段文本，打開CSS樣式面板，右擊“ys01”樣式，在彈出菜單中執行“套用”命令，此時如圖11.5所示，段落實現了首行縮進30個像素，同時在代碼窗口中標簽p后面增加了 “class=ys01”的字樣，表示對這個p標簽套用ys01樣式。 選擇器類型除了“標簽”和“類”外，還另外有“ID”和“復合內容”，在這里就不多做介紹了，可以建議感興趣的同學查看網絡資源。 （三）教學補充
設置網頁的刷新
定義了自動刷新的頁面，頁面在被訪問者經過一段時間的延遲會自動刷新或轉到另一個網頁。
設置網頁自動刷新的操作步驟如下：
（1）打開要設置自動刷新的網頁。
（2）執行“插入” →HTML →“文件頭標簽” →“刷新”命令，打開“刷新”對話框，如圖11.6所示。
（3）在“延遲”文本框中輸入延遲時間，在“操作”區域選擇“轉到URL”單選按鈕，并在其后面的文本框中設置要轉到頁面的路徑和名稱即可，既可以是網站內的相對路徑，也可以因特網中某個頁面。
圖11.6 “刷新”對話框 一、單元概述
在本單元中，我們將利用交換圖像行為制作具有動態效果的導航欄，并應用其他行為和層為網頁添加動態效果；學習在網頁中添加多媒體內容制作多媒體網頁；學習制作表單網頁。最后測試整個網站的鏈接，完成網站的發布工作。
二、學習目標
1. 了解行為在網頁中的作用，能初步應用行為和層，為網頁添加各種動態效果。
2. 掌握如何在網頁中添加聲音、視頻等多媒體內容，制作多媒體網頁。
3. 能夠利用表單制作簡單的交互網頁。
4. 能夠測試整個站點，掌握如何利用Dreamweaver將網站上傳到遠程文件夾。第4單元 網頁特效
三、重點難點
教學重點
1．理解行為、事件、動作、對象等基本概念的含義。
2．掌握應用“交換圖像”行為制作動態導航按鈕的方法。
3．掌握應用“彈出信息”行為制作彈出對話框效果的方法。
4．掌握應用“設置狀態欄文本”行為為導航欄添加提示信息的方法。
5．掌握應用“打開瀏覽器窗口”行為制作彈出網頁窗口效果的方法。
6．掌握在網頁中插入FLV格式視頻文件的方法。
7．掌握利用插件在網頁中插入背景音樂的方法。
8. 掌握制作表單網頁的方法。
9．了解測試網站鏈接，修復斷掉的鏈接的方法。
10．掌握配置遠程信息（本地／網絡，FTP）的方法。
11．掌握利用Dreamweaver上傳文件的方法。教學難點
1．應用“交換圖像”行為制作動態導航按鈕。
2．應用“彈出信息”行為制作彈出對話框效果。
3．應用“設置狀態欄文本”行為為導航欄添加提示信息。
4．應用“打開瀏覽器窗口”行為制作彈出網頁窗口效果。
5．在網頁中插入FLV格式視頻文件。
6．利用插件在網頁中插入背景音樂。
7. 制作表單網頁的方法。
8．配置遠程信息（本地／網絡，FTP）。
9．利用Dreamweaver上傳文件。
四、學時安排
本單元共5課，總計5學時，每課占用1學時。
（一）本課教學目標
1．了解行為、事件、動作的含義。
2．掌握應用“交換圖像”行為制作導航按鈕的方法。
3．掌握應用“彈出信息”行為制作彈出對話框的方法。
4．掌握應用“設置狀態欄文本”行為為導航欄添加提示信息的方法。
（二）教學設計與教學建議
1．課堂引入分析
前面的課程很少涉及到動態的網頁效果，基本上都是靜態的網頁內容，本課主要應用行為為網頁添加各種動態效果。動態特效的運用，使得網頁制作變得更有意思。學生可以發揮和想象的空間也比較多，因此在課堂的引入部分，教師可以這樣設計：第12課 一觸即發 展示各種利用行為制作的動態效果網頁，請學生欣賞，對比前面制作的網頁，簡單討論后引出行為的概念。
教師要注意鼓勵學生利用已有的知識技能解決問題，引導學生發現操作中的相似或相似之處，利用知識的遷移解決類似問題。在講解事件、動作概念的時候，結合具體的網頁實例進行，利于學生理解。
2．重點內容分析
（1）應用“交換圖像”制作動態導航按鈕
應用交換圖像行為制作的導航按鈕，其效果與前面學過的“鼠標經過圖像”相似。其實，鼠標經過圖像也是通過交換圖像行為實現的，打開行為面板，可以很直觀地看到系統自動添加的行為。因此，在講解如何應用該行為之前，可以先分析鼠標經過圖像，結合行為面板分析事件、動作，以便于學生再次理解這些概念，并能掌握。
對于觸發動作的事件，可以讓學生在行為面板中進行嘗試設置，體驗其中的不同，幫助理解行為、事件、動作之間的關系。 （2）應用“彈出信息”行為制作彈出對話框
這個動作發生在某種事件發生時，彈出一個對話框，給用戶一些信息，這個對話框只有一個“確定”按鈕。如圖12.1所示 （3）應用“設置狀態欄文本”行為為導航按鈕添加提示信息
“設置狀態欄文本”行為能使頁面在瀏覽器左下方的狀態欄上顯示一些信息，如：提示鏈接內容、顯示歡迎信息、滾動字幕等。本課中應用該行為為導航按鈕添加提示鏈接內容信息。
通過設置狀態欄文本行為的應用，引導學生了解，狀態欄也是網頁制作中可以發揮的一片空間。可以通過應用行為或者編寫代碼的方式在狀態欄中實現各種動態效果。 彈出信息行為默認的事件是onClick，在本課中瀏覽網頁時，如果單擊標題區域的“逃生急救”文字，會自動彈出如圖所示的信息對話框，單擊“確定”按鈕可關閉該窗口。圖12.1 彈出對話框（三）教學補充
事件
事件是瀏覽器生成的消息，指示該頁的訪問者執行了某種操作。 不同的頁面元素，所能發生的事件不盡相同，常見的事件還有以下一些，參見表12.1。
表12.1 常見的事件表（一）本課教學目標
1．能夠應用“打開瀏覽器窗口”行為制作彈出窗口。
2．掌握利用插件在網頁中插入背景音樂的基本方法。
3．掌握在網頁中插入FLV視頻格式文件的基本方法。
（二）教學設計與教學建議
1．課堂引入分析
在網頁中除了使用文本和圖像元素表達信息以外，還可以添加各種類型的多媒體內容，以豐富網頁的效果，使網頁更生動。本課的主要任務是制作多媒體網頁，因此在課堂的引入部分，教師可以這樣設計：第13課 影音視聽 對比展示普通網頁和多媒體網頁，引導學生討論多媒體網頁與普通網頁的區別以及多媒體網頁的優勢和特點。
多媒體內容是網上比較流行的元素，正是在網頁中添加了多媒體元素，才使得網頁變得更加生動，更加吸引瀏覽者。
2．重點內容分析
（1）應用“打開瀏覽器窗口”行為制作彈出窗口
要實現彈出窗口的效果，首先需要制作彈出的網頁。教師一定要引導學生先完成要彈出的窗口，再往下做。如果要急于看到這種行為實現的效果，也可以利用已經存在的網頁或者新建一個空白網頁代替。
“打開瀏覽器窗口”行為必須應用在標簽上，因此基于模板創建的網頁必須從模板中分離才行。基于模板創建的網頁從模板中分離的網頁 (2) 在網頁中插入FLV格式視頻文件　　
利用插入FLV.…命令，可以將FLV格式視頻文件直接嵌入網頁中，但只有當瀏覽者所使用的瀏覽器安裝了Adobe Flash Player 插件，視頻才可以正常播放。 在“插入FLV”對話框中，必須通過檢測大小或者手動輸入寬度和高度值，否則無法正常插入視頻文件，系統會彈出如圖13.1所示的提示信息。圖13.1 提示信息 插入FLV”對話框中，“自動播放”復選框用于指定在頁面打開時是否播放視頻，默認情況下為不選狀態。“自動重新播放”復選框用于指定播放控件在視頻播放完之后是否返回到起始位置，默認情況下為不選狀態。 (3)利用“插件”在網頁中插入背景音樂　　
利用插件可以將音頻文件直接嵌入網頁中，但只有當瀏覽者所使用的瀏覽器安裝了相應的插件（如RealPlayer插件、 Windows Media Player插件），音頻才可以正常播放。對于這一點，必須讓學生明確，瀏覽器只所以能夠顯示網頁上的動畫、聲音、視頻以及各種效果，主要是因為安裝了能夠支持這些元素正常顯示的插件。　 利用插件插入的音、視頻文件，需要通過設置相應的參數控制其播放，如圖13.3所示。
其中：Autostart 表示自動播放
Loop 表示循環播放 另外，要讓學生清楚，利用插件不僅可以插入音頻文件，還可以插入視頻文件，其操作方法與插入音頻文件相同。
插件在網頁中只顯示圖標，而不顯示所插入文件的內容，如圖13.2所示。圖13.2 插件圖標圖13.3 設置參數（三）教學補充
1 ．插入Shockwave影片
可以使用 Dreamweaver 將 Shockwave 影片插入到文檔中。Shockwave 作為 Web上用于交互式多媒體的 Macromedia 標準，是一種經壓縮的格式，使得在 Macromedia Director 中創建的多媒體文件能夠被快速下載，而且可以在大多數常用瀏覽器中進行播放。
（1）在“文檔”窗口中，將插入點放置在要插入 Shockwave 影片的地方，執行“插入” →“媒體” →“Shockwave（S）”命令。
（2）在顯示的對話框中，選擇一個影片文件。
（3）在屬性檢查器中，設置影片的寬度和高度。

說明：插入的Shockwave影片，在網頁設計視圖中顯示為一個圖標而不是影片內容，如圖13.4所示。單擊屬性檢查器中的“播放”按鈕，可以播放插入的影片；單擊“參數”按鈕，可以打開“參數”對話框，設置控制影片的各項參數。
圖13.4 ShockWave影片圖標圖13.5 設置屬性檢查器（一）本課教學目標
1．理解層的含義和在網頁設計中的作用。
2．掌握實現顯示/隱藏文本效果的方法。
3．掌握實現替換文本效果的方法。
4．掌握實現拖動網頁內容效果的方法。
5. 掌握利用“效果”行為，為網頁元素添加特效的方法。
（二）教學設計與教學建議
1．課堂引入分析
普通網頁是一個二維的空間，如果在網頁中增加層，就變成了一個三維空間，借助層和行為可以豐富網頁的效果，使網頁更生動。本課的主要任務是利用層和行為為網頁增加特效，因此在課堂的引入部分，教師可以這樣設計：
展示各種利用層和行為制作的動態效果網頁，請學生欣賞，對比前面制作的網頁，簡單討論后引出層的概念。第14課 錦上添花 2．重點內容分析
Dreamweaver中的層是一種可視化操作的定位技術，層體現了網頁技術從二維空間向三維空間的延伸。層可以包含文本、圖像或其他任何可在 HTML 文檔正文中放入的內容。利用層可以在在網頁中實現各種特殊的效果，利用層還可以實現頁面的簡單排版，但是層不能在基于網頁模板創建的網頁中創建。
（1）顯示/隱藏文本
在網頁中應用“顯示-隱藏元素”行為，可以根據鼠標事件顯示或隱藏網頁中的相應元素。本課中，結合層和該行為，實現顯示和隱藏文本的效果。
在網頁中插入層，并在層中輸入文本內容，修改層的名稱為warning，設置層的可見性為hidden，默認為隱藏狀態。
在dhbj圖像對象上添加“顯示-隱藏元素”行為，在“元素”列表中選擇要改變其可見性的層“warning”，設置為“顯示”，如圖14.1所示。行為面板中設置激活該行為的事件為onMouseOver，實現鼠標移動到圖片上，顯示文本內容。 在dhbj圖像對象上添加“顯示-隱藏元素”行為，在“元素”列表中選擇要改變其可見性的層“warning”，設置為“隱藏”。行為面板中設置激活該行為的事件為onMouseOut，實現鼠標離開圖片時，隱藏文本內容。圖14.1 “顯示-隱藏元素”對話框 （2）替換文本內容
在包含層的網頁中應用“設置容器文本”行為，可以動態地改變層的文本、轉變層的顯示、替換層的內容。本課中，分別為三個報警電話文本對象添加“設置容器的文本”行為，從而實現鼠標移動到報警電話上，右側替換顯示文本內容的動態效果。 由于被替換的文本內容是通過“設置容器的文本”對話框輸入的，如圖14.2所示，因此無法對文本格式進行單獨設置。圖14.2 “設置容器的文本” （3）拖動網頁內容
結合“拖動AP 元素”行為和層， 可以實現在網頁中任意拖放網頁內容，為網頁增添交互特效。
拖動AP元素行為只能應用在網頁本身，不能應用在某個網頁元素中，因此要選中標簽再添加“拖動AP元素”行為。
設置激活“拖動AP元素”行為的事件為onLoad，意味著網頁打開就能觸發該行為。 1. 編輯層
在網頁中添加層后，可以根據網頁設計的需要，對層進行相應的編輯。
選中層，按住鼠標左鍵，可以拖放移動層的位置；可以通過拖放層周圍的8個控制點，調整層的大小，如圖14.3所示。 打開“層屬性檢查器”，如圖14.4所示。可以設置層的背景圖像或者背景顏色。 當層中的內容過多溢出時，可以選擇溢出下拉列表框中的選項設置處理方式。圖14.4 層屬性檢查器圖14.3 編輯層（三）教學補充
（一）本課教學目標
1．理解表單域與表單元素之間的關系。
2．掌握制作表單網頁的基本方法。
3．掌握在表單域插入表單元素的基本方法。
（二）教學設計與教學建議
1．課堂引入分析
網站不僅能夠給瀏覽者提供各種信息，還能與瀏覽者進行交互，從瀏覽者那里收集信息。因此在課堂的引入部分，教師可以這樣設計：
教師展示郵箱申請、賬戶注冊、填寫調查報告等具有信息交互功能的網頁，引導學生分析這類網頁的特點，引出表單網頁。
第15課 信息互動 2．重點內容分析
（1）插入表單域
每個表單都是由一個表單域和若干個表單元素組成的，插入表單域是制作表單頁的第一步。在同一個網頁中可以插入多個表單域來制作不同的表單。
執行“插入”→“表單”→“表單”命令，即可在網頁的當前光標位置插入表單域。插入表單域后，選中表單域，在“屬性檢查器”中設置表單的屬性，如圖15.1所示。圖15.1 設置表單屬性 在“動作”文本框中輸入mailto:[email protected]，表示把表單中的內容發送到指定的電子郵箱中。
“方法”用于設置表單的提交方式。GET方法，把表單數據附加到請求URL中發送；POST方法，把表單數據嵌入到HTTP請求中發送；如果選擇默認，則數據提交方式由瀏覽器決定，通常為GET方式。（2）插入單選按鈕組
單選按鈕作為一個組使用，提供彼此排斥的選項值，用戶在單選按鈕組內只能選擇一個選項。利用單選按鈕組，可以一次插入一組單選按鈕。
執行“插入”→“表單”→“單選按鈕組”命令打開“單選按鈕組”對話框，如圖15.2所示。
圖15.2 “單選按鈕組”對話框 可以通過單擊“+”、“-”按鈕來增加或者刪除單選按鈕項。 單選按鈕組的布局可以使用換行符或者表格。
單選按鈕組默認的排列方式是垂直排列，插入單選按鈕組后可以通過刪除每行后面的回車換行鍵，調整為水平排列。（3）插入復選框
復選框對每個單獨的響應進行“關閉”和“打開”狀態切換，因此用戶可以從復選框組中選擇多個選項。
執行“插入”→“表單”→“復選框”命令插入復選框。選中插入的復選框，打開“屬性檢查器”，設置復選框的屬性，如圖15.3所示。
圖15.3 設置復選框的屬性 為了區別不同的復選框，需要重命名復選框名稱；復選框屬性檢查器中的“選定值”文本框用于設置這個復選框的值；“初始狀態”用于設置復選框的初始狀態，有兩個選項——“已勾選”和“未選中”。如果選擇“已勾選”，則這個復選框初始便處于選中狀態。如果選擇“未選中”，則這個復選框初始處于未選中狀態。（一）本課教學目標
1．學會測試網站的鏈接。
2．能夠修復網站中斷掉的鏈接。
3．掌握如何配置服務器信息。
4．掌握利用Dreamweaver上傳文件的方法。
（二）教學設計與教學建議
1．課堂引入分析
安全自護我能行網站的所有網頁內容都制作完了，最后需要對整個網站進行分析、檢查和測試，以確保站點中的各項操作都能正常工作。測試完成后，可以把網站發布到互聯網上去，讓更多的人來訪問我們的網站。第16課 成果分享 2．重點內容分析
（1）測試網站——檢查網站鏈接
檢查網站中是否有斷掉的鏈接也是測試網站的一個重要項目，如果檢測到斷掉的鏈接可以即時修復鏈接。
按Ctrl＋F8組合鍵，可以直接打開“結果”面板，進行鏈接測試，如圖16.1所示。單擊“鏈接檢查器”面板（見圖16.2）中的“顯示”下拉列表框，選擇“外部鏈接”可以檢測當前網站中的所有外部鏈接；選擇“孤立文件”，可以檢測當前網站中沒有進行鏈接的文件，如果確定檢查出的文件在網站中沒有用處，可以將文件清除。
超鏈接是整個網站中所有網頁之間的橋梁和紐帶，因此超鏈接是否正確決定了網頁之間能否準確跳轉，因此要引導學生重視超鏈接測試，并能及時修復網站中有問題的鏈接。
圖16.1 結果面板圖16.2 鏈接檢查器 （2）配置服務器
與服務器連接的方式有很多種，常用的是“FTP”和“本地/網絡”兩種方式。“本地/網絡”方式主要用于設置本地計算機（本地計算機為web服務器）中的遠程文件夾。“FTP”方式主要用于設置遠程計算機中的文件夾。在本課中主要以配置“本地/網絡”方式為主，這樣也便于實現文件上傳的操作，如圖16.3所示。圖16.3 設置“本地/網絡”選項 （3）上傳文件
在本課中，由于遠程信息的訪問方式選擇的是“本地/網絡”，因此上傳文件就是將整個網站的文件上傳到本地計算機的遠程文件夾d:website中。
除了一次上傳整個站點外，還可以單獨上傳某個文件夾或文件。選中網站中的某個文件夾或文件，單擊“上傳”按鈕即可將所選的文件夾或文件上傳，網站上傳前、后窗口的顯示內容分別見圖16.4和圖16.5。
教師可以只講解其中的一種情況，鼓勵學生通過探究的方式嘗試其他上傳方式（如：逐個文件上傳、逐個文件夾上傳等）。圖16.4 網站上傳前的窗口顯示圖16.5 網站上傳后的窗口顯示（三）教學補充
1 ．設計備注
當站點中的文件越來越多時，準確了解文件夾中的內容及文件的含義顯得非常重要，利用設計備注可以對整個站點或某一文件夾甚至是某一文件增加附注信息，這樣可以時刻跟蹤管理每一個文件，方便管理站點，了解文件的開發信息等。 （1）在文件面板中選擇要設置設計備注的文件，例如選擇首頁index.html，執行“文件”→“設計備注”命令，打開如圖16.6所示的“設計備注”對話框。
（2）單擊“狀態”下拉列表框，選擇當前文件的狀態，如“草稿”、“最終版”。在“備注”文本框中填寫說明文字。單擊“插入日期”按鈕可以插入當前的日期。選中“文件打開時顯示”復選框，可以在打開文件時顯示此文件的設計備注。 圖16.6 “設計備注”對話框 2 ．檢查瀏覽器兼容性
（1）執行“文件”→“檢查頁”→“瀏覽器兼容性”命令，打開 “瀏覽器兼容性”面板。 （2）單擊面板中的 按鈕，打開如圖16.7所示的菜單，選擇“設置”命令打開如圖16.8所示的“目標瀏覽器”對話框，選擇不同的瀏覽器版本，單擊“確定”按鈕。圖16.7 “瀏覽器兼容性”面板圖16.8“目標瀏覽器”對話框 （3）單擊面板中的 按鈕，選擇菜單中的“檢查瀏覽器兼容性”命令，檢查整個站點在所選瀏覽器中能否正常顯示。

展開更多......

收起↑

<pre id="tfb94"><li id="tfb94"></li></pre>

<bdo id="tfb94"><rt id="tfb94"></rt></bdo>

<menu id="tfb94"><dl id="tfb94"></dl></menu><i id="tfb94"><acronym id="tfb94"><sub id="tfb94"></sub></acronym></i>