Dreamweaver8.0教案

1、第 1講 第 1、2課時（第 1 周）課 題： 課 時：2學時教學目標： 了解本課程的教學目的、把握本課程的學習方法 教學重點： 課程的教學內容體系 教學難點： 課程的學習方法 教學方法： 教 具： 黑板 教學過程:一、 自我介紹1、 個人簡介2、 個人學習工作方式方法介紹二、 課程簡介1、 課程的主要特點：dreamweaver是網頁設計的可視化設計軟件，容易上手，技術點不算多，但要靈活運用。2、 課程的重要性：網絡班的必修課，是網站設計的入門課程。3、 課程的教學目標、任務、重點、難點：4、 本教材的內容體系，教學安排。三、 學習方法學習本課程，宜采用任務驅動法，循序漸進。四、 關于本課程

2、的考證本課程是一門高新考試課程，可以安排技能考證，一般為第二學期考。第 2 講 第 3、4課時（第 1 周）課 題： 主頁欣賞之頁面元素分析 課 時：2學時教學目標： 正確認識主頁的基本構成、掌握主頁建設的要求 教學重點： 網頁頁面的基本構成要素 教學難點： 正確分析一張網頁的構成 教學方法： 討論法、比較法 教 具： 多媒體 教學過程:一、課程引入 隨著網絡生活的發(fā)展，網頁設計不僅是內容的呈現(xiàn)和技術的表征，豐富的媒體技術及精湛的藝術表現(xiàn)也賦予了網頁很強的生命力，網頁設計已成為現(xiàn)代藝術設計的重要組成部分。二、新授1、頁面的構成要素 1）表現(xiàn)主題 2) 網站名稱和CI形象 3) 設計風格 4）版

3、式設計 5）色彩運用 6) 網頁導航 7）視聽元素2、頁面欣賞 請大家欣賞幾張網頁（亦可看書上P3的圖片），然后分析網頁中的要素，回答以下問題：（1） 從網頁或圖片中尼可以知道該網頁的主題是什么？（2） 網站名稱是什么？（3） 網站的設計風格有哪些特點？3、講解、分析頁面 A、主題鮮明：通過文字或表現(xiàn)手法能很快識別主題是什么。 B、網站名稱簡介：容易記憶 C、色彩搭配合理：風格一致，視覺美觀 D、布局合理：符合人的視覺焦點，按照網站的特點布局三、作業(yè) 請大家回去后對書本上的P9圖1-4-1圖1-4-4根據(jù)上課的分析方法給予欣賞，給出分析報告。第 3 講 第 5、6課時（第 1 周）課 題： 網

4、頁版式、色彩的運用 課 時：2學時教學目標： 了解幾種常見的布局格式、掌握網頁色彩的基本概念 教學重點： 色彩的基本概念 教學難點： 色彩的感覺 教學方法： 講授法 教 具： 多媒體 教學過程:一、 復習1、網頁的構成要素2、作業(yè)講解二、 新授1、網頁的常見布局格式 1）T型 2）口型 3）三型 4）對比結構 5）POP結構2、版式設計的要求：整體和諧，兼顧美學的連續(xù)、漸變、對稱、比例、平衡、調和、律動、統(tǒng)一、完整等。3、色彩的運用1）色彩的要素：色相、飽和度、明度2）色彩的三基色：R、G、B3）色彩的感覺4）色彩的搭配 原則：必須適合主題，色彩不超過3種，跳躍式色彩搭配，對比明顯。配色方案：

5、暖色調、冷色調、相近色、對比色調。三、 作業(yè)結合自己的網頁設計思考色彩的運用。第 4 講 第 7、8課時（第 2 周）課 題： 網站的基本概述 課 時：2學時教學目標： 正確區(qū)分網站和網頁、認識dreamweaver 教學重點： 網站的基本概念 教學難點： 網站和網頁的區(qū)別和聯(lián)系 教學方法： 演示法、講授法 教 具： 多媒體 教學過程:一、基本概念理解（一）、網頁：網頁是計算機連接網絡時瀏覽器窗口中顯示的一個頁面，是計算機網絡最基本的信息單位,它實際是一個文件,存放在世界某個角落的某一臺計算機中,當我們在瀏覽器輸入網址后,網頁文件會被傳送到你的計算機,這樣就可以利用網頁來訪問計算機了。 網頁分

6、類：（1）靜態(tài)網頁:網頁中包含文字、圖片、動畫、視音頻。（2）動態(tài)網頁:網頁中包含文字、圖片、動畫、視音頻以及交互功能.u （兩者的主要區(qū)別:是否包含交互功能）網站：是眾多網頁的集合。（二）、網頁的基本構成元素：包含圖片，文字，超級鏈接，動畫，表單，視頻音頻等元素中的一種或多種 （三）、網頁的頁面設計：（1）、網頁布局：包括標題欄，頁眉區(qū)，導航區(qū)，正文區(qū)、頁腳。（2）、配色原則：網頁設計要達到賞心悅目的目的，需要注意色彩的搭配與風格的設計。（3）、版面編排 （四）網站設計的原則 （） 網站主題和內容明確。（） 網頁色調和諧，布局清晰。（） 網站方便易用，提供有效的導航條，使人很容易從每一頁上訪

7、問到網站的任何部分,最好在每一個網頁同樣的位置上都有相同的導航條。（）避免長文本頁面,每一個網頁的高度不能超過三倍的瀏覽器高度，避免使用過大的圖像，不要使用橫滾動條。（） 避免錯誤鏈接，保證鏈接有效。二、Dreamweaver 8.0功能介紹DREAMWEAVER 8.0操作界面（一）工作區(qū)的組成結構：（二）、Dreamweaver面板和面板組：（三）菜單欄中各個菜單的基本作用：u 文件：包括對文件的各種操作。u 編輯：包含了對文件的拷貝，粘貼，查找與替換等命令。u 查看：使用查看菜單可以查看文檔的相關內容。u 插入：用于將對象插入文檔中。包括圖片<img>標記、flash動畫、視

8、頻、表格、超級鏈接、日期、水平線等：39屬性可以在屬性面板中進行可視化設置u 修改：可以使用修改菜單更改選定頁面元素的屬性。u 文本：可以設置文本的格式，如段落格式，字體等。（重點介紹編輯字體列表）文本環(huán)繞排版及停止文本環(huán)繞 40看40u 命令：提供各種命令的訪問。u 站點：提供用于管理站點以及上傳和下載文件的菜單項，可以創(chuàng)建站點和對 已有站點進行編輯u 窗口：提供對Dreamweaver中的所有面板，檢查器和窗口的訪問。u 幫助：提供了對Dreamweaver文檔的訪問。第 5 講 第 9、10課時（第 2 周）課 題： Dreamweaver基礎 課 時：2學時教學目標：了解Dreamwe

9、aver的基本工作界面 教學重點： Dreamweaver各工作區(qū)及各控件功能 教學難點： 各控件功能 教學方法： 演示法、講授法 教 具： 多媒體電腦 教學過程:一、Dreamweaver介紹 Dreamweaver MX 2004 是一款專業(yè)的 HTML 編輯器，用于對 Web 站點、Web 頁和 Web 應用程序進行設計、編碼和開發(fā)。利用 Dreamweaver 中的可視化編輯功能，可以快速地創(chuàng)建頁面而無需編寫任何代碼?？梢圆榭此姓军c元素或資源并將它們從易于使用的面板直接拖到文檔中?？梢栽贔ireworks 或其他圖形應用程序中創(chuàng)建和編輯圖像，然后將它們直接導入 Dreamweaver

10、，或者添加 Flash 對象，從而優(yōu)化開發(fā)工作流程。二、Dreamweaver 工作區(qū)使用Dreamweaver 工作區(qū)可以查看文檔和對象屬性。工作區(qū)還將許多常用操作放置于工具欄中，使用它可以快速更改文檔。工作區(qū)布局在 Windows 中，Dreamweaver 提供了一個將全部元素置于一個窗口中的集成布局。在集成的工作區(qū)中，全部窗口和面板都被集成到一個更大的應用程序窗口中。Dreamweaver 工作區(qū)元素“插入”欄包含用于將各種類型的“對象”（如圖像、表格和層）插入到文檔中的按鈕。每個對象都是一段 HTML 代碼，允許在插入它時設置不同的屬性?！拔臋n”工具欄包含各種按鈕，它們提供各種“文檔

11、”窗口視圖（如“設計”視圖和“代碼”視圖）的選項、各種查看選項和一些常用操作（如在瀏覽器中預覽）。“標準”工具欄（在默認工作區(qū)布局中不顯示）包含來自“文件”和“編輯”菜單中的一般操作的按鈕“文檔”窗口顯示當前創(chuàng)建和編輯的文檔。屬性檢查器用于查看和更改所選對象或文本的各種屬性。每種對象都具有不同的屬性。標簽選擇器位于“文檔”窗口底部的狀態(tài)欄中，它顯示環(huán)繞當前選定內容的標簽的層次結構。單擊該層次結構中的任何標簽可以選擇該標簽及其全部內容。面板組是組合在一個標題下面的相關面板的集合。若要展開一個面板組，應單擊組名稱左側的展開箭頭；若要取消?？恳粋€面板組，應拖動該組標題欄左邊緣的手柄?！拔募泵姘蹇梢?/p>

12、管理文件和文件夾，無論它們屬于 Dreamweaver 站點的一部分還是位于遠程服務器上。后記：學生能比較快掌握軟件的使用。第 6 講 第 11、12課時（第 2 周）課 題： 定義一個站點 課 時：2學時教學目標：學會設置Dreamweaver站點 教學重點： 設置 Dreamweaver 站點 教學難點： 設置 Dreamweaver 站點 教學方法： 演示法 教 具： 多媒體電腦 教學過程:（一）、定義一個站點 在正式開始制作網頁之前，最好先定義一個新網站，這是為了更好地利用站點窗口對站點文件進行管理，也可以盡可能的減少一些錯誤的出現(xiàn)，如路徑出錯，鏈接出錯。我提倡的做法是：建立一個文件夾

13、用于存放網站的所有文件，再在文件內建立幾個文件夾，將文件分類，如圖片文件放在images文件夾內，HTML文件放在站點文件夾內。文件的命名也是非常重要的，不要隨便亂起些名字，最好做到一看文件的名字就知道是什么內容的網頁文件。提倡用英文或者拼音給文件命名，不要使用中文的名字，因為有的瀏覽器對中文支持不太好，有可能出現(xiàn)鏈接的錯誤。 定義站點的步驟：、 啟動dreamweaver 8.0中，在菜單欄中選擇站點>管理站點。 在彈出的管理站點對話框中，點擊新建 。 接下來需要給站點起一個名字，輸入您網站的名字，可以定義中文名。這里起名為dreamweaver學習網站,按下一步2、按下一步按鈕，選擇

14、是否使用服務器技術。因為實例建立的是一個靜態(tài)站點，就選擇“否，我不想使用服務器技術”。3、按下一步按鈕，因為要傳到網上的虛擬主頁空間，就要選擇“編輯我的計算機上的本地副本，完成后再傳到服務器上”。4、按下一步，選擇要定義的本地根文件夾,這里選擇D或E盤中你的文件夾，點“選擇”按鈕，因為沒有使用遠程服務器，就選擇“無”。按下一步5、按完成按鈕，一個站點就定義好了。6、打開文件面板（窗口文件），在您的站點文件中新建三個文件夾，用于存放與站點有關的圖片等文件，分別是命名為images、txt、others。新建五個網頁文件，分別命名為：index.html、kcjs.html、kcxx.html、y

15、xzp.html、sczy.html打開D盤看看你剛剛建立網站的文件。u 素材文件名和網頁文件名必須用英文或英文狀態(tài)下的數(shù)字，不能使用中文練習1：在dreamweaver 中定義一個站點，文件夾放在D 盤的目錄下。第 7 講 第 13、14課時（第 3 周）課 題： 圖像應用基礎及圖像的插入 課 時：2學時教學目標： 了解網頁支持的圖像格式、掌握圖像的插入方法教學重點： 插入圖像 教學難點： 不同格式的圖像的區(qū)別 教學方法： 講授法演示法比較法啟發(fā)法 教 具： 多媒體電腦 教學過程:引 入 在一張網頁當中，如果全部是文字內容而沒有圖片將顯得很呆板，我們可以拿兩個網頁來對比一下，一個是純文字的，

16、一個是適當?shù)囊雸D片的，注意觀察他們的區(qū)別。正 課3.1.1 圖像應用基礎 1、常用Web圖像格式常用的Web網頁圖像格式包括：n GIFn JPEGn PNGGIF（Graphics Interchange Format，圖形交換格式）格式的特點：n 無損壓縮n 最多256色n 能夠使用透明色JPEG（Joint Photographic Expert Group，聯(lián)合圖形專家組）格式的特點：n 有損壓縮n 沒有顏色限制n 可以控制壓縮比PNG（Portable Network Graphics，可移植的網絡圖形）格式的特點：n 無損壓縮n 沒有顏色限制n 支持透明度2、常用圖像處理軟件n

17、Windows 畫圖n 照片編輯器n PhotoShop n PhotoDrawn Fireworksn Freehandn CorelDrawn Illustratorn Visio3、使用網頁圖像的要點n 確保文件較小 使圖像具有所需的像素大小 采用正確的格式進行優(yōu)化處理n 控制圖像的數(shù)量和質量 重復使用圖像n 合理使用動畫3.1.2 在網頁中插入圖像1插入一般圖像（1）將光標放到要插入圖像的位置。 （2）選擇“插入”>“圖像”命令，或單擊“常用”子面板上的“圖像” 按鈕，從下拉列表中選擇“圖像”，或按Ctrl+Alt+I組合鍵。從彈出的“選擇圖像源” 對話框中選擇一幅圖片。（3）單

18、擊“確認”按鈕。2插入交互圖像（1）將光標放到要插入圖像的位置， 選擇“插入”>“圖像對象”>“鼠標經過圖像”命令，或單擊“常用”子面板上的“圖像” 按鈕，從下拉列表中選擇“鼠標經過圖像”，打開“插入鼠標經過圖像”對話框。 （2）在“圖像名稱”文本框中輸入圖像的名稱 。（3）單擊“原始圖像”右側的“瀏覽”按鈕，打開“原始圖像”對話框，從中選擇一幅圖 。（4）在“替換文本”文本框中輸入交互文本；在“按下時，前往的URL”文本框中輸入鏈接地址。（5）單擊“確定”按鈕，即插入圖片。實例上機操作本節(jié)中的圖像插入操作，制作輪換圖像特效。小 結本課主要介紹了網頁圖片的格式、特點及圖像的插入操作

19、。教學后記：第 8 講 第 15、16課時（第 3 周）課 題： 設置與編輯圖像、應用外部圖像編輯器 課 時：2學時教學目標：熟練掌握圖像的屬性設置方法、理解掌握調用外部編輯器編輯網頁圖像教學重點： 網頁圖像的屬性設置 教學難點： 外部編輯器的參數(shù)設置 教學方法： 講授法演示法比較法啟發(fā)法 教 具： 多媒體電腦 教學過程:復習1、 網頁支持的圖像格式2、 網頁圖像的插入操作3、 制作輪換圖像正 課3.2 設置與編輯圖像4.2.1 調整圖像大小 1、選擇圖片后通過拖動圖像邊緣的方塊可以調整圖像的大小 2、通過屬性面板設置圖像的大小4.2.2 設置圖像屬性選擇圖像，窗口中出現(xiàn)圖像屬性面板，通過該面

20、板即可設置圖像屬性。圖像的屬性面板如圖所示：3.3 應用外部圖像編輯器1設置外部編輯器參數(shù)（1）單擊“編輯”>“參數(shù)選擇”命令，打開“參數(shù)選擇”對話框，在“分類”列表框中選擇“文件類型/編輯器”選項。（2）單擊“擴展名”列表框上的“+”按鈕，可添加圖像格式，例如JPG、GIF等。如果“擴展名”列表框中存在圖像格式，可以直接調用。（3）單擊“編輯器”列表框上的“+”按鈕，打開“選擇外部編輯器”對話框，從中選擇支持所編輯的圖像類型的圖形軟件，單擊“打開”按鈕。 （4）單擊“設為主要”按鈕，可將當前的編輯器設為基本編輯器，設置完成后，選中要編輯的圖像，單擊屬性面板上的“編輯”按鈕，就會自動運行

21、該編輯工具并打開圖像。 2啟用外部編輯器啟用外部編輯器的方法兩種：一是在圖片上單擊鼠標右鍵，打開快捷菜單，單擊“編輯”>“瀏覽”命令，并選擇一個編輯器；二是選擇要編輯的圖像，然后單擊屬性面板上的“編輯”按鈕。 小 結本課介紹了如何在Dreamweaver中對圖像進行編輯和調用外部編輯器編輯圖像的方法。作 業(yè) 新建一張空白網頁，在網頁中插入一張圖片，將圖片的大小設置為500x400px，調用photoshop處理圖片，使圖像的灰度加大。第 9講 第 17、18課時（第 3 周）課 題： 創(chuàng)建圖像的特殊效果 課 時：2學時教學目標：深入理解網頁圖像的應用、熟悉常見圖像特效的制作方法教學重點：

22、 繪制圖像地圖區(qū)域 教學難點： 綜合運用圖層編輯圖像 教學方法： 講授法演示法比較法啟發(fā)法 教 具： 多媒體電腦 教學過程:復習： 調整大小圖像的編輯操作有 設置屬性外部編輯正 課 3.4 創(chuàng)建圖像的特殊效果3.4.1 制作網站相冊 如果要制作相冊，必須保證計算機中裝入了FIREWORKS網頁圖像處理軟件。首先要將所有相冊的原圖保存在一個文件夾中將源圖像保存在一個文件夾中，但這個文件夾必須以英文或數(shù)字命名，若有中文將制作失??！ 制作網站相冊的操作方法如下：（1） 打開文檔窗口（2） 在文檔窗口中執(zhí)行“命令”|“創(chuàng)建網站相冊”命令，打開“創(chuàng)建網站相冊”對話框，如圖所示：（3） 根據(jù)提示完成該對話

23、框的設置。其中相冊標題、源圖像文件夾、目標文件夾必須設置。3.4.2 制作輪換圖像請使用極域電子教室預覽效果（442.scm）?；騾⒄?.3節(jié)中介紹。3.4.3 繪制圖像地圖區(qū)域 在南雄市地圖上將南雄職中標注并添加鏈接或添加圖層以介紹南雄職中的概況。提示：使用圖像屬性面板中的繪制熱點工具在地圖的相應區(qū)域繪制，再在他邊上繪制圖層，最后通過行為面板對圖層的顯示-隱藏進行處理。實例： 1、學生上機制作“我的相冊“ 2、制作輪換圖像 3、在南雄地圖上標注“三影塔“，并對其解釋。小 結本課主要學習一些圖像效果的制作，涉及到圖像的插入操作、屬性設置、命令及繪制熱點區(qū)域地圖。作業(yè)： 1、在Macromedi

24、a Dreamweaver MX中，可以在 或 中將圖像插入文檔。 A標準視圖 B.代碼視圖 C.“設計”視圖 D.布局視圖 E.”代碼“視圖 2、網頁可以支持的圖像格式有 。A.GIF B.BMP C.PSP D.PSD E.PNG F.JIEG 3、在計算機領域中，圖像分為 和 兩大類。 4、GIF格式的圖像采用的是 壓縮格式第 10講 第 19、20課時（第 4 周）課 題： 文本的基本操作 課 時：2學時教學目標： 掌握頁面屬性、文本屬性的設置 教學重點： 文本屬性的設置 教學難點： 文本格式化 教學方法： 演示法、講授法 教 具： 多媒體電腦 教學過程:一、  復

25、習引入 1輸入文本 2回車鍵的作用 3如何輸入換行符：Shift+ENTER，或者是對象面板à符號 4換行符對應的HTML標記<br> 二、設置頁面屬性 1打開頁面屬性對話框：右擊頁面，選擇頁面屬性（page properties） 2設置標題顯示（Title）： 3設置頁面背景（Background image）：選擇背景圖像，注意路徑 4設置背景顏色Background： 5設置本頁面中文字的顏色Text：在沒有設置其它的字體顏色前，這個文字顏色發(fā)生作用，一旦對具體的文字設置顏色，這個設置就不起作用了 6設置鏈接的各種顏色（Visited Links、Active L

26、inks、Links） 7設置頁面邊界（Left Top ）：使內容與邊框沒有空隙 8設置文檔字符集（Document Encoding）：gb2312 9設置向導圖片（Tracing Image）：用于設計時，下面的滑動條用于設置這個圖片的透明度（Transparent） 三、設置文本屬性 1格式（Format）： （1） 樣式：段落（Paragraph），標題（Heading1）、預先格式化的（preformatted） *預先格式化的：可以輸入空格，可以按文本原來的樣子排列，缺點是不能實現(xiàn)自動換行 （2）字體：Default Font （3）大?。篠ize （4）顏色： （5）其它：加粗

27、、傾斜 （6）對齊： 2鏈接（Link）：鏈接到文件，鏈接到地址， *相關（Relate to）：文檔（Document），站根目錄（SiteRoot） 3目標（Target）：打開鏈接的目標_blank、_self、_parent、_top 四、作業(yè) 根據(jù)示例網頁，制作一個網頁 第 11講 第 21、22課時（第 4 周）課 題： CSS樣式文件的創(chuàng)建 課 時：2學時教學目標： 理解利用CSS樣式格式化文本、理解CSS樣式的概念 教學重點： 利用CSS格式化文本 教學難點： CSS格式化文本 教學方法： 講授法、演示法 教 具： 多媒體電腦 教學過程:一、復習1、文本的輸入方法2、特殊字符的

28、插入方式3、文本列表的創(chuàng)建二、CSS樣式文件的創(chuàng)建1、創(chuàng)建新樣式 （1）CSS樣式的概念 CSS是一系列格式規(guī)則，他們控制網頁內容的外觀。 （2） 創(chuàng)建CSS樣式的方法 打開CSS樣式面板 單擊CSS樣式面板右上角的下三角形按鈕，選擇新建 設置CSS名稱、類型、定義范圍 完成，指定名稱樣式定義對話框 設置系列規(guī)則2、編輯現(xiàn)有樣式 （1）選中 （2）右擊，編輯 （3）在對話框中修改設置3、應用CSS樣式 （1）選中文本（2）打開屬性面板 （3）選中樣式屬性列表注意：有些效果在樣式面板中不能看到4、刪除樣式 （1）CSS面板中選擇要刪除的文件 （2）單擊CSS樣式面板中的刪除按鈕三、實例1、新建C

29、SS樣式，命名為P，定義在新建樣式表文件，設置字體為隸書，大小為16PX，有下劃線，對齊方式為左對齊2、在頁面內編輯一段網頁，將P樣式應用于文本。小結：1、CSS樣式的概念2、創(chuàng)建方法，應用方法3、編輯樣式后記：有了HTML樣式的操作，講解這部分內容較為輕松。第 12講 第 23、24課時（第 4 周）課 題： 表格的使用 課 時：2學時教學目標：熟悉表格的插入、合并、拆分與嵌套；表格的制作.htm 教學重點： 表格的基本操作 教學難點： 表格的合并與拆分 教學方法： 講授法、演示法 教 具： 多媒體電腦 教學過程:1、創(chuàng)建表格：第一步：在Dreamweaver 8.0中運行“插入表格”命令，

30、彈出屬性設置窗口，添入插入表格的行數(shù)、列數(shù)、表格的寬度，根據(jù)自己的需要來設置表格的相應屬性即可。小提示：表格的寬度和高度可以通過瀏覽器窗口百分比或者使用絕對像素值來定義，比如設置寬度為窗口寬度的100，那么當瀏覽器窗口大小變化的時候表格的寬度也隨之變化；而如果設置寬度為500像素，那么無論瀏覽器窗口大小為多少，表格的寬度都不會變化。第二步：點擊窗口中的“OK”按鈕之后即可在Dreamweaver 8.0中新建一個表格，而且通過窗口下部的屬性面板還可以對其進行諸如表格線條的顏色、表格的背景色、表格的背景圖片（介紹如何插入橫鋪墊、豎鋪墊、不重復的背景圖片）、色單元格的對齊方式等參數(shù)進行調整。用標簽

31、選擇器選擇表格，將光標定位在表格的第一個單元格內，可以看到狀態(tài)欄左側的標簽選擇器處顯示為“bodytabletrtd”，其中table表示表格，tr表示表格中的行，td表示單元格，現(xiàn)在td被加粗顯示，說明光標處在單元格內。單擊一下table，標簽選擇器處顯示為“bodytabletrtd”（如下圖），再看編輯區(qū)內的表格，表格周圍為一圈黑線，表示表格被選中了，四周還有幾個黑色的小方塊，是表格拖放手柄，可以用來改變表格的大小。2、基本使用（舉例說明：表格的制作.htm） 步驟：第一步：先插入一個行列的表格；第二步：選中表格中第二行第二列的單元格，接著點擊屬性模板中的“拆分單元格”按鈕，這樣就把選中

32、的單元格拆分為二個單元格，按照同樣的方法再將表格中其他需要拆分的單元格拆分。第三步：選中表格中第九行中第二列和第三列的單元格，接著點擊屬性模板中的“合并單元格”按鈕，這樣就把選中的兩個單元格合并成為一個單元格，按照同樣的方法再將表格中其他需要合并的單元格合并。第四步：將表格第九行的三個單元格全部選中，再將屬性模板中的背景顏色（Bg）一項設置為“#FFFF00”，這樣表格第一列中的單元格背景全部變?yōu)辄S色。第五步：在表格中輸入相應的文本，為了美觀可以在屬性面板中進行居中設置。第六步：為了使表格產生立體效果，可以將整個表格選中，然后在屬性面板中設定表格邊框的寬度（Border）為7，并且將邊框顏色（

33、Border color）設置為灰色即可。小提示：選取整個表格常用的方法：1把鼠標移動到表格右邊界外側，按下鼠標之后往左拖拽，這樣可以快速選取整個表格。在單元格中右擊鼠標，并且從彈出菜單中選擇“表格選擇表格”命令選取整個表格。用鼠標點擊任一個單元格，接著按兩下“CtrlA”組合按鈕選取整個表格。完成上述操作之后，我們就可以在Dreamweaver 8.0中定制出頗具專業(yè)水準的表格了。練習2、新建一個網頁，在網頁中插入一個3行3列的表格，設置表格屬性（邊框和背景顏色），試著對目標行和列進行拆分、合并及新增表格的操作。第 13講 第 25、26課時（第 5 周）課 題： 表格的選擇及數(shù)據(jù)導入導出

34、課 時：2學時教學目標： 了解選擇表格及表格中行列的方式，了解表格數(shù)據(jù)的導入與導出方法 教學重點： 選擇表格及表格中行、列 教學難點： 數(shù)據(jù)的導入導出 教學方法： 演示法、講授法 教 具： 多媒體電腦 教學過程:一、選擇表格元素 對表格中各元素進行操作或設置屬性，同樣遵循先選中后操作的原則1.選擇整個表格 選中整張表格有三種方法n 單擊表格四個角或右邊框和底邊框n 單擊表格任意位置，選擇“修改/表格”菜單下的“選擇表格”命令n 單擊表格任意位置，然后單擊狀態(tài)欄左邊的<Table>標簽2.選擇行或列n 將鼠標移至一行的左邊距上或置于一列的頂端邊框，出現(xiàn)黑色箭頭時單擊，即選中整行或整列

35、。n 在行首單元格或列首單元格中按住鼠標橫向或縱向拖曳鼠標即可選中一行或一列3.選擇連續(xù)多個單元格n 在一個單元格中單擊并按住鼠標橫向或縱向拖曳至另一個單元格，然后釋放鼠標，即選中了鼠標所經過的單元格區(qū)域。n 單擊希望所選區(qū)域的左上角單元格，然后按住Shift鍵，單擊區(qū)域右下角單元格，即選中整個區(qū)域。4.選擇不相鄰的單元格 按住Ctrl鍵，單擊欲選定的單元格二、導入表格數(shù)據(jù) Dreamweaver MX可以插入在其他應用程序中創(chuàng)建的數(shù)據(jù)，除插入文字（Word文檔）外，也可以是表格（如Excel表格）。 選擇“文件”菜單的“導入”命令，選擇何種應用程序文檔，從對話框中選擇文件，按“打開”按鈕即將

36、所需數(shù)據(jù)導入到網頁中三.導出表格數(shù)據(jù) 表格數(shù)據(jù)可以導出到Excel中，也可導出到文本文件中。 選中需導出的表格，選擇“文件”菜單中的“導出/表格”命令，在對話框中指定定界符（在文本文件中該定界符替代制表符），按“確定”按鈕，在出現(xiàn)的對話框中輸入文件名，按“保存”按鈕即完成導出。小結：表格的這些選擇操作可以和EXCEL中的表格操作聯(lián)系起來。第 14講 第 27、28課時（第 5 周）課 題： 表格的格式化、編輯、排序 課 時：2學時教學目標： 熟練掌握表格的基本操作、掌握表格的這置技巧 教學重點： 表格的基本操作 教學難點： 表格的設置技巧 教學方法： 講授法、實例演示法 教 具： 多媒體電腦

37、教學過程:一、 設置表格的屬性1.表格的名字 2.行、列、寬度、高度3.填充和間距4.表格的對齊方式5.邊框線6.背景顏色、邊框顏色和背景圖案7.最合適列寬和行高8.查看表格高度、寬度二、 表格操作1.復制及粘貼單元格 在表中選中一個或多個單元格（必須是連續(xù)的），選擇“編輯”菜單“拷貝”命令，在目標位置選擇“編輯”菜單“粘貼”命令2.增加行和列 利用“修改”菜單下的“表格”命令中的“插入行”和“插入列”可在表格目標位置的上面或前面插入一行或一列；而“插入行和列”則會打開對話框，可選擇插入多行或多列，并可選擇插入在當前位置的上、下、前、后。3.刪除行和列 選中需刪除的行或列（可以是多行或多列），

38、選擇“修改”菜單下的“表格”命令中的“刪除行”或“刪除列”三、設置預置表格類型 Dreamweaver MX中已預先設置多種表格樣式，可將這些預先設計的格式快速用于選中的表格 選中表格，選擇“命令”菜單下的“格式化表格”命令，在打開的對話框中，選擇一種預設的表格樣式，并可對樣式細節(jié)進行設置1.行顏色 可設置兩種行顏色，并定義兩種顏色的交叉方式2.第一行 第一行一般作為列標題，可設置其對齊方式、文字樣式、文字顏色、背景顏色等。3.最左列 最左列一般可作為行標題，可設置其對齊方式，文字樣式4.邊框線 可設置表格邊框線的寬度，不設置即為0，表示無邊框線 設置完成后按“確定”或“應用”按鈕四、表格排序

39、 “命令”菜單中的“排序表格”命令可對表格數(shù)據(jù)按指定列指定排序方式升序或降序排列。 默認情況下，排序不包含第一行，一般第一行是列標題 若表格各行有相應顏色，也可設置排序后所有行的顏色不變，即跟著其排序后到相應的位置第 15講 第 29、30課時（第 5 周）課 題： 創(chuàng)建文字超鏈接 課 時：2學時教學目標：理解超鏈接的概念、了解鏈接創(chuàng)建的要求、掌握文本鏈接的創(chuàng)建方法教學重點： 創(chuàng)建文本鏈接 教學難點： 超鏈接的布局要求 教學方法： 講授法演示法比較法啟發(fā)法 教 具： 多媒體電腦 教學過程:引 入 在網站設計中，合理的安排超鏈接是非常重要的，若無超鏈接那么我們的文件必然會孤立的存在，導致用戶無法

40、瀏覽或影響頁面美觀。通過本章的學習，我們將系統(tǒng)的了解各種鏈接的設置，包括文本鏈接、圖像鏈接、電子郵件鏈接等。正 課3.5.1 創(chuàng)建文字超鏈接3.5.1.1 超鏈接簡介超鏈接能夠使多個孤立的網頁之間產生一定的相互聯(lián)系，從而使單獨的網頁形成一個有機的整體。1. 什么是超鏈接 所謂的超鏈接是指從一個網頁指向一個目標的連接關系，這個目標可以是另一個網頁，也可以是相同網頁上的不同位置，還可以是一個圖片、一個電子郵件地址、一個文件，甚至是一個應用程序。2.超鏈接的分類 按照鏈接路徑的不同，網頁中超鏈接一般分為以下3種類型： 內部鏈接、錨點鏈接和外部鏈接。 如果按照使用對象的不同，網頁中的鏈接又可以分為：文

41、本超鏈接、圖像超鏈接、E-mail鏈接、錨點鏈接、多媒體文件鏈接、空鏈接等。 3. 合理安排超鏈接采用什么結構的鏈接會直接影響到網頁的布局。在這里給大家一些設計鏈接的建議。 ·避免孤立文件的存在：應該避免存在孤立的文件，這樣能使將來在修改和維護鏈接時有清晰的思路。 ·在網頁中避免使用過多的超級鏈接：在一個網頁中設置過多超鏈接會導致網頁的觀賞性不強，文件過大。如果避免不了過多的超鏈接，可以嘗試使用下拉列表框、動態(tài)鏈接等一些鏈接方式。 ·網頁中的超鏈接不要超過4層：鏈接層數(shù)過多容易讓人產生厭煩的感覺，在力求做到結構化的同時，應注意鏈接避免超過4層。 ·頁面較

42、長時可以使用書簽：在頁面較長時，可以定義一個書簽，這樣能讓瀏覽者方便地找到想要的信息。 · 設置主頁或上一層的鏈接：有些瀏覽者可能不是從網站的主頁進入網站的，設置主頁或上一層的鏈接，會讓瀏覽者更加方便地瀏覽全部網頁。3.5.1.2 建立文本超鏈接1、網站中的文檔路徑 絕對路徑：即完全路徑 根目錄相對的路徑：是從當前站點的根目錄開始的路徑。 檔相對的路徑：是指和當前文檔所在的文件夾相對的路徑。2、創(chuàng)建文本超鏈接創(chuàng)建文本超鏈接的操作如下： 在網頁上選擇需要添加超鏈接的文本，此時屬性面板成為文本屬性面板； 在屬性面板上指定文字的鏈接目標。 確定完鏈接目標之后，在“Link”文本框中出現(xiàn)文字

43、的鏈接目標。在“Target”下拉列表框中選擇目標文件打開的方式。 3、編輯文本超鏈接 設置文本鏈接的狀態(tài)：通過屬性面板下的“頁面屬性”，在打開的對話框中對鏈接前后的狀態(tài)設置。4、刪除文本超鏈接 要刪除一個文本超鏈接很容易，先用鼠標選定文本對象，將光標定位于屬性面板的“Link”文本框中，用“BackSpace”鍵或“Delete”鍵，將其顯示的超鏈接對象文件名刪除，再回車，或選擇“Modify”|“Remove Link”命令，都可以刪除超鏈接而保留原文本對象。小 結本節(jié)從超鏈接的概念、種類、注意點等方面總括了制作鏈接的基礎，有了這些理論，那么我們就可以開展文本鏈接的創(chuàng)建了。教學后記：第 1

44、6講 第 31、32課時（第 8 周）課 題： 創(chuàng)建圖片超鏈接、錨點鏈接 課 時：2學時教學目標： 理解掌握圖像鏈接和錨點鏈接的應用范圍及定義方法教學重點： 錨點鏈接的創(chuàng)建與應用 教學難點： 定義錨點 教學方法： 講授法演示法 教 具： 多媒體電腦 教學過程:復習 1、超鏈接的定義 2、超鏈接創(chuàng)建的注意點（5點） 3、文本鏈接創(chuàng)建方法正 課3.5.2 圖片的鏈接1、設置圖片鏈接的操作方法是：（1）選擇要創(chuàng)建鏈接的圖片。（2）單擊屬性面板上“鏈接”右邊的“瀏覽文件”按鈕，從打開的“選擇文件”對話框中選擇鏈接對象。（3）單擊“確定”按鈕。2、圖像上創(chuàng)建鏈接 我們可以在圖像的某個區(qū)域創(chuàng)建鏈接，通過繪

45、制熱點區(qū)域可以實現(xiàn)。3.5.3 創(chuàng)建錨點鏈接3.5.3.1 創(chuàng)建錨點（1）將光標放到要插入錨點的位置，執(zhí)行下列操作方法之一：（2） 選擇“插入”>“命名錨記”命令，或 單擊“常用”面板上的“命令錨點”按鈕，打開“命令錨點”對話框。（3）在“錨點名稱”文本框中輸入錨點的名稱，名稱最好用英文，單擊“確定”按鈕，即可在插入點位置插入錨點 。6.3.2 鏈接到指定錨點（1）選擇要作為鏈接的文字。（2）如果要鏈接的目標錨點位于當前文檔中，則在屬性面板的“鏈接”文本框中輸入“#”，然后輸入鏈接的錨點的名稱；如果要鏈接的目標錨點位于其他文檔中，則先輸入該文檔的URL地址和名稱，然后輸入“#”，再輸入錨

46、點名稱。注意點：在鏈接錨點時，應注意以下事項： 在#和錨點名之間不要留有空格，否則鏈接會失敗。 在不同文件夾中為錨點創(chuàng)建鏈按時，其文件名后綴必定是“htm”，而不能寫成“html”，否則鏈接也會失敗。 符號#必須是半角符號，而不能為全角符號。實例（1）插入命名書簽：在文檔正文中的第一章節(jié)、第二章節(jié)、第三章節(jié)處分別插入命名標記，并對其命名。 （2）創(chuàng)建命名書簽鏈接：為文章添加一個目錄，然后分別在目錄的對應章節(jié)處添加超鏈接，使其與命名書簽鏈接起來。 （3）鏈接的設置與更改：修改書簽名，然后修改鏈接。小 結錨點鏈接使本課的重點，它包括了命名標記和鏈接書簽兩個部分；而圖像鏈接多要注意繪制熱點區(qū)域，在熱

47、點區(qū)域上對圖像創(chuàng)建鏈接等操作。第 17講 第 33、34 課時（第 8 周）課 題：創(chuàng)建電子郵件鏈接、創(chuàng)建下載文件超鏈接、創(chuàng)建空鏈接 課 時：2學時教學目標：了解各鏈接的使用條件、掌握鏈接的設置方法教學重點： 設置鏈接 教學難點： 下載文件鏈接的使用條件 教學方法： 演示法比較法 教 具： 多媒體電腦 教學過程:引 入 在我們的網頁中，通常為了與用戶溝通，及時反饋信息，要添加用戶發(fā)送電子郵件的鏈接；站點里經常有些大的文件要根據(jù)用戶的需要選擇下載查看；或者我們創(chuàng)建鏈接目的僅僅是為了解決一些創(chuàng)作目的，比如為文本添加行為等；這些特殊的需要，我們怎樣實現(xiàn)呢？正 課3.5.4 創(chuàng)建電子郵件超鏈接1、創(chuàng)建

48、電子郵件鏈接如下： 將光標置于網頁中要添加E-mail鏈接的地方，或選中文字，通過對象面板“Common”類上的“Insert Email Link”按鈕，彈出“Insert Email Link”對話框。如果未選中文字，可以在“Text”文本框中添加所需文字；如果已經選中超鏈接文字，將會在“Text”文本框中自動顯示。然后在“E-mail”文本框中輸入你的E-mail地址，單擊“OK”按鈕，就可以了。 2、實例 創(chuàng)建電子郵件鏈接：在正文的“和我聯(lián)系”處插入電子郵件鏈接，電子郵件地址為：guest;3.5.5 創(chuàng)建文件下載鏈接如果想讓網站提供文件下載的功能，就必須建立下載文件超鏈接。實現(xiàn)文件下

49、載的功能很簡單，只需加入連接到文件的超鏈接就可以了。操作方法為：選中要設置下載鏈接的文本 執(zhí)行“窗口”|“屬性”命令，打開屬性面板 瀏覽選擇文件（瀏覽器不能直接打開的文件） 完成。3.5.6 創(chuàng)建空鏈接空鏈接是一個未指定目標的鏈接，Dreamweaver2004的行為面板中列出了許多行為，這些行為相當于使用JavaScript編寫的程序或函數(shù)，要想對文本設置行為，首先為文本建立空鏈接，這樣行為才有效。 為文本建立超鏈接時，只要先在文檔窗口選定文本，然后在屬性面板中的“鏈接”欄中輸入一個數(shù)值符“#”即可。建立空鏈接的目的就是為了應用行為，其他情況下不必建立空鏈接。 小 結本課主要介紹了幾種特殊鏈

50、接的創(chuàng)建方法與應用范圍。作 業(yè)1、 下列關于在一個文檔中可以創(chuàng)建的鏈接類型，說法正確的是：（ ）A. 鏈接到其他文檔或文件的鏈接。請參見鏈接文件和文檔。B. 命名錨記鏈接，此類鏈接可跳轉至文檔內的特定位置。C. 電子郵件鏈接，此類鏈接可新建一個收件人地址已經填好的空白電子郵件。D. 空鏈接和腳本鏈接，此類鏈接能夠在對象上附加行為，或創(chuàng)建執(zhí)行JavaScript代碼的鏈接。2、 Macromedia Dreamweaver MX提供多種創(chuàng)建超文本鏈接的方法，可創(chuàng)建到 的鏈接。A文檔 B.圖像 C.多媒體文件 D.可下載文件3、 鏈接的路徑分為: 、 、 三類。分析鏈接的種類，并比較各自的特點和運用范圍。小結：第 18講 第 35、36課時（第 8 周）課 題： 課程表的制作 課 時：2學時教學目標：知識與技能：了解表格相關概念和相關標記。過程與方法：掌握在網頁中插入表格，對表格的各組成元素進行選取的方法掌握插入、刪除行或列，合并、拆分單元格的方法；掌握一些表格制作的常用設計技巧；情感與價值觀：培養(yǎng)學生主動思考問題的習慣和自主學習的能力。教學重點：在網頁中插入表格，對表格的各組成元素進行選取、插入、刪除行或列，合并、拆分單元格。教學難點：對表格的各組成元素進行選取、插入、刪除行或列，合并、拆分單元格。教法：任務驅動法學法：閱讀，記錄