第一篇：Dreamweaver教案

第一課 軟件簡介與設置 1.1課程介紹 本課程主要內容

①內容提要/學習目標 ②軟件演示 ③實例操作步驟

本課程的三個特色欄目

①網頁色彩搭配； ②HTML基礎；

③名詞解釋

1.2(軟件)基礎知識 內容提要：

①起始頁的使用及相關設置；

②軟件界面概覽(菜單，工具，面板等)； ③“插入”工具欄顯示模式的切換； ④文檔窗口的工具欄和狀態欄； ⑤如何設置，存儲和管理界面布局。

學習目標：

①了解Dreamweaver軟件的作用，基本界面布局，以及各功能區的應用范圍；

②了解控制軟件界面和文檔的基本方法。

第二篇：Dreamweaver教案補充

1、Dreamweaver 這是Macromedia公司的出品的一款“所見即所得”的網頁編輯工具。與 Frontpage不同，Deamweaver采用的是Mac機浮動面版的設計風格，對于初學者來說可能會感到不適應。但當你習慣了其操作方式后，就會發現Dreamweaver的直觀性與高效性是Frontpage所無法比擬的。

Dreamweaver對于DHTML（動態網頁）的支持特別好，可以輕而易舉地做出很多眩目的互動頁面特效。插件式的程序設計使得其功能可以無限的擴展。Dreamweaver與Flash、Firework 并稱為 Macromedia的網頁制作三劍客，由于是同一公司的產品，因而在功能上有著一個非常緊密的結合。因此，說Dreamweaver是高級網頁制作的首選并不為過。

2、Dreamweaver 8 的功能

Dreamweaver 可以完全自定義。您可以創建您自己的對象和命令，修改快捷鍵，甚至編寫 JavaScript 代碼，用新的行為、屬性檢查器和站點報告來擴展 Dreamweaver 的功能。

Dreamweaver 8 包括許多新增功能，使您只需花費最少的時間和精力便可生成 Web 站點和應用程序。Dreamweaver 使復雜的技術變得簡單而方便，以幫助您達到事半功倍的效果。

下面是 Dreamweaver 8 中的一些主要新增功能： “縮放”工具和輔助線 可視化 XML 數據綁定 新的 CSS 樣式面板 CSS 布局的可視化 代碼折疊 “編碼”工具欄 后臺文件傳輸

“插入 Flash 視頻”命令

3、設計網站的基本步驟。

(1)網站的規劃與設計。首先確定網站的方向和功能，然后是申請便于記憶的域名和租用穩定的空間，接著收集相關資料，最后將整個網站的結構畫成結構圖。

(2)布局與編排網頁。在網頁布局的過程中，應該遵循平衡、對比、空白等原則。在設計網頁時需要考慮網頁的主題、網頁的命名、網站的標志、色彩的搭配、字體的選擇等問題。

(3)填充網頁內容。輸入文字和其它網頁元素，比如聲音、動畫、圖像和其它形式的媒體，以便使網頁內容更加充實。

(4)建立動態網站。動態網站是目前最流行的Web發展趨勢，建立動態站點需要為網頁加入Web應用程序并實現與數據庫的連接。

(5)測試和發布站點。在發布Web站點之前，用戶應該確認所有文本和圖形都放在正確的位置，且所有的鏈接都能操作正確。測試Web站點的一種方法是通過檢查內部和外部的鏈接來確認目標文件是否存在。

完成測試以后，根據服務商提供的資料，用戶可以將站點發布到服務器上，并對站點進行定期更新，以保證站點內容新穎。

4、網頁設計的基本理念。

（1）下載速度問題，下載響應速度越快越好。

（2）能適應不同瀏覽器及分辨率，網頁布局、內容不應出現紊亂。（3）合理的版面布局，應做到圖文并茂。（4）精美的網站標志，讓人記住你。（5）注重色彩搭配，給人以藝術的享受。（6）網頁內容便于瀏覽，要有導航功能。（7）網頁內容要精彩，讓人感覺到有吸引力。

（8）簡約、美觀，不應過于追求頁面的華麗。

5、網頁的整體風格設計的基本原則。

（1）網站標志要放在醒目位置，如左上角，而且要保持不變。（2）最好能夠有一句反映網站精髓的標語，并能動態顯示。

（3）導航部分應該放在每一張網頁的相同位置，便于訪問者瀏覽網站的全部內容。

（4）確定主體顏色，并注意顏色搭配要讓人感覺舒服，不要太刺眼，也不能不突出需要強調的內容。（5）頁面的布局是風格的一個重要標志。不要忘記考慮主頁的可擴充性，以方便將來再添加欄目。（6）內容結構越簡單越好，分類要簡而精。一切都為訪問者能夠最快地找到訪問的資料而考慮。

6、網頁色彩如何搭配。

網頁的色彩是樹立網站形象的關鍵之一，網頁的色彩處理得好，可以錦上添花，達到事半功倍的效果。色彩總的應用原則應該是“總體協調，局部對比”，也就是網頁的整體色彩效果應該是和諧的，只有局部的、小范圍的地方可以有一些強烈色彩的對比。在色彩的運用上，可以根據網頁內容的需要，分別采用不同的主色調，并注意以下色彩搭配的原理：

(1)色彩的鮮明性：網頁的色彩要鮮艷，容易引人注目。

(2)色彩的獨特性：要有與眾不同的色彩，使人印象強烈。

(3)色彩的合適性：色彩和表達的內容氣氛相適合。如用粉色體現女性站點的柔性。

(4)色彩的聯想性：不同色彩會產生不同的聯想，藍色想到天空，黑色想到黑夜，紅色想到喜事等，選擇色彩要和網頁的內涵相關聯。

一個網站的標準色彩應盡量控制在三種色彩以內，不要將所有顏色都用到。背景和前文的對比盡量要大，(絕對不要用花紋繁復的圖案作背景)，以便突出主要文字內容。

7、Dreamweaver的三種視圖方式

在代碼視圖中可以直接編輯網頁的源代碼；而設計視圖能方便我們更好地美化網頁，更合理地布局網頁；同時顯示代碼視圖和設計視圖讓我們能夠更好地理解源代碼，提高編程能力。

8、什么是HTML？

HTML是Hypertext Markup Language的縮寫，即超文本標記語言，是www.tmdps.cn就是一個域名。從技術上講，域名只是一個Internet中用于解決地址對應問題的一種方法。

11、ftp協議（文件傳輸協議）

是 Internet 上用來傳送文件的協議，它是為了我們能夠在 Internet 上互相傳送文件而制定的文件傳送標準，規定了 Internet 上文件如何傳送。也就是說，通過 FTP 協議，我們就可以跟 Internet 上的 FTP 服

務器進行文件的上傳（Upload）或下載（Download）等動作。

12、統一資源定位符(Uniform Resource Locator, URL)

包含如何訪問 Internet 上的資源的明確指令，也就是Internet文件在網上的地址。

URL的一般格式為：

Access-method://host:port/path/filename 例如：http://www.tmdps.cn/ 為 Microsoft 網站的萬維網 URL 地址。

Access-method，訪問Internet資源的方法或是訪問的協議類型，可以是下表之一： http 通過 http 訪問該資源。格式 http:// ftp 通過 FTP訪問資源。格式 FTP:// file 資源是本地計算機上的文件。格式file:// gopher 通過 Gopher 協議訪問該資源。

mailto 資源為電子郵件地址，通過 SMTP 訪問。格式 mailto: MMS 通過 支持MMS（流媒體）協議的播放該資源。（代表軟件：Windows Media Player）格式 MMS:// ed2k 通過 支持ed2k（專用下載鏈接）協議的P2P軟件訪問該資源。（代表軟件：電驢）格式 ed2k:// Flashget 通過 支持Flashget:（專用下載鏈接）協議的P2P軟件訪問該資源。（代表軟件：快車）格式 Flashget:// thunder 通過 支持thunder（專用下載鏈接）協議的P2P軟件訪問該資源。（代表軟件：迅雷）格式 thunder:// news 通過 NNTP 訪問該資源。

host，主機，指定的服務器的域名系統(DNS)主機名或 IP 地址。

port，指出被訪問的Internet資源所在的服務器端口號，整數，可選，省略時使用方案的默認端口，如http的默認端口為80。

path，路徑，由零或多個“/”符號隔開的字符串，一般用來表示主機上的一個目錄或文件地址，可選。

filename，指出被訪問的Internet資源名稱，可選。

13、鏈接的幾種路徑以及它們的不同：

絕對路徑是包含服務器協議的完全路徑，是一種與源地址文件無關的路徑形式。

文檔相對的路徑是指與當前文檔所在的文件夾相對的路徑，它使用源地址文件和目標地址文件之間的位置來表示路徑，只要整個站點的結構和文件的位置不變，改變站點的路徑不會影響路徑的正確性。

根相對路徑是指從站點根文件夾到被鏈接文檔經由的路徑。一個根相對路徑以前斜杠開頭，它代表站點根文件夾。

常用的鏈接有：文本鏈接；圖片鏈接及圖像熱點鏈接；郵件鏈接、下載鏈接以及其他鏈接；錨點鏈接及空鏈接。

只含有“#”的那種鏈接是空鏈接。

第三篇：DREAMWEAVER電子教案

第1章 初識Dreamweaver安裝、下載方法.一、教學目的：學習原DR的安裝、下載方法.二、教學重點：概述和安裝

三、教學過程

1.1 Dreamweaver MX概述

1、直觀的新工作區

2、更加強大的模板

3、廣泛的代碼庫

4、新服務器技術

5、幫助初學者起步的示例內容

6、XML和WEB標準支持

7、改進的級聯樣式表（CSS）

8、高性能的新編碼功能

9、高性能的新編碼功能

10、優化COLDFUSION MX開發環境

使用 Dreamweaver 工作區

一、教學目的：認識DR的界面，了解各面板的組成，菜單的組成。

二、教學重點：各面板的組成。

三、教學過程：

選擇工作區布局（僅適用于 Windows）在 Windows 中首次啟動 Dreamweaver 時，會出現一個對話框讓選擇一種工作區布局。如果以后改變了主意，可以使用“參數選擇”對話框切換到一種不同的工作區。

選擇工作區布局：

選擇下列布局之一： Dreamweaver MX 工作區

HomeSite/代碼編寫者樣式的 Dreamweaver MX 工作區 Dreamweaver 4 工作區

在選擇一種工作區后切換到另一種工作區：

Dreamweaver MX 工作區

浮動工作區布局（Windows 和 Macintosh）狀態欄

“文檔”窗口底部的狀態欄提供與正創建的文檔有關的其他信息。調整“文檔”窗口的大小

將“文檔”窗口的大小調整為預定義的大?。?/p>

向“窗口大小”彈出式菜單中添加新的大?。?/p>

將“文檔”窗口最大化（僅適用于 Windows 集成工作區）：

使用快速啟動條

快速啟動條顯示在狀態欄中，包含用以打開和關閉各種面板、檢查器和窗口的按鈕。

若要顯示快速啟動條，請在“面板”參數選擇中啟用“在面板和啟動器中顯示圖標”選項?？梢灾付ㄔ诳焖賳訔l中顯示哪些項目。

使用文檔工具欄

? “顯示代碼視圖

?

“顯示代碼視圖和設計視圖” ?

“顯示設計視圖

? “標題”

? “文件管理”

? “在瀏覽器中預覽/調試”

?

“換行符”在插入點處插入一個換行符。還可以按下 Shift+Enter(Windows)“不換行空格”在插入點處插入一個不換行的空格()。“左引號”、“右引號”和“破折線”在插入點處插入標點符號?！坝㈡^符號”、“歐元符號”和“日元符號”在插入點處插入貨幣符號。“版權”、“注冊商標”和“商標”在插入點處插入相應的符號。“其它字符”

第二單元 文本的編輯與基本操作

一、教學目的：學習網頁的組成對象 設計要素 文本的字體大小顏色，段落的格式，基本的編輯命令。

二、學教重點：文本編輯的基本操作

三、教學過程：

網頁的組成比報紙和雜志復雜的多，因為它包含圖、聲、文、動畫、控件等多媒體，另一大特點有超級鏈接。

1、文字

標題：一般為圖形 尺寸 系統默認大小

樣式：一般少用下劃線

字體：一般為系統默認大小

顏色：以顏色來強調文章的重點

2、圖形

一般為GIF 和 JPG 格式

3、超級鏈接

站內鏈接 和站外鏈接 網頁的設計要素

不同瀏覽器的顯示效果 網絡的傳輸速度 屏幕的分辨率 顏色的顯示

網頁的基本操作 創建網頁

文件――新建――對話框 打開文件類型 HTML SHTM SHTML XML文件

庫文件LBI 模板文件 DWT

樣式表文件 CSS 微軟服務器端文件 ASP JAVA 服務器端文件 PHP文件 TXT文件

CFM模板文件

JSF

fireworks文件 LASSO 打開當前站點文件

從站點面板中打開 或 通過菜單－文件－打開命令 打開最近使用的文件

文件菜單下列出的文件名 從WORD中導入文件

先在WORD中將文件保存為HTML 文件 然后在DR 中 文件－導入－WORDHTML

還可打開后用命令－清除 保存網頁 另存為模板 輸入文本

直接輸入 使用剪貼板

用ENTER 相當于插入

用SHIFT＋ENTER 相當于插入
改變字體樣式 改變字號

要使字體不隨瀏覽器的字體設置而改變就要用到層疊樣式（CSS Style）文本的顏色 選擇文字

然后用下列兩種方式 ? 用文字屬性面板中調整 ? ?

單擊調色板中的右上角要將字體改為默認值點

按鈕或菜單文本――顏色

上機練習：

段 落 格 式

創新新段落：

ENTER 分段落

在段落

格式下拉菜單選擇一種格式 對齊段落：

居中對齊 左對齊 右對齊

縮進段落

取消縮進

或菜單 或選擇段落后右擊彈出菜單

項目符號： 每個段落前加一個項目符號 用

利用 插入分隔線

列表下拉選擇各種不同的情況

修改分隔線的屬性

改變長度 改變高度

改變對齊方式

插入特殊字符和符號

菜單插入｜特殊字符｜

彈出子菜單，進行所需要的項目選擇

其中包括：

換行符 SHIFT＋RETURN 不換行空格 CTREL＋SHIFT＋SPACE

用于行首 插入符號

E－mail 地址鏈接

插入｜電子郵件鏈接｜

其效果將看到“歡迎聯系”字樣并帶下劃線 可以發送郵件 插入日期時間：

插入注釋文字

基本編輯命令 撤銷和重復操作 查找和替換

移動和復制

直接用鼠標拖動

使用CUT

COPY

PASTE

靈活使用HISTORY 面板 SHIFT＋F10

表示當前剛完成的操作

重放按鈕 復制到剪帖板按鈕保存命令按鈕

彈出菜單按鈕可清除歷史記錄等操作

上機練習，重復上述操作，記錄快捷鍵

作業：做一個文字型的小網頁，將學到的知識運用在上面。

第3單元網頁中的圖像鏈接

教學目的：掌握網頁中插入圖像、修改屬性、插入交互圖像以及創建交互圖像的方法。教學重點：插入圖像、控制圖像 創建鏈接、插入交互圖像的方法。插入圖像操作：

1.在“文檔”窗口中，將插入點放置在您要顯示圖像的地方，然后執行以下操作之一： o 在“插入”欄的“常用”類別中，單擊“圖像”圖標。

在“插入”欄的“常用”類別中，將“圖像”圖標拖入“文檔”窗口中（或者，如果您正處理代碼，則拖入“代碼”視圖窗口中）。

o 選擇“插入”>“圖像”。

o 將圖像從“資源”面板（“窗口”>“資源”）拖到“文檔”窗口中的所需位置；然后跳到第 3 步。o 將圖像從“站點”面板拖到“文檔”窗口中的所需位置；然后跳到第 3 步。o 將圖像從桌面拖到“文檔”窗口中的所需位置；然后跳到第 3 步。

2.在出現的對話框中執行下列操作之一： o 選擇“文件系統”以選擇一個圖形文件。o 選擇“數據源”以選擇一個動態圖像源文件。3.瀏覽以選擇您要插入的圖像或內容源文件。o

如果您正在一個未保存的文檔中工作，則 Dreamweaver 生成一個對圖像文件的 file:// 引用。將文檔保存到站點中的任何位置后，Dreamweaver 將該引用轉換為文檔相對路徑。4.在屬性檢查器（“窗口”>“屬性”）中，設置該圖像的屬性。設置圖像屬性

1.設置以下任一選項： o 使用縮略圖下面的文本域設置名稱，以便在使用 Dreamweaver 行為（例如“交換圖像”）或腳本撰寫語言（例如 JavaScript 或 VBScript）時可以引用該圖像。o “寬”和“高”以像素為單位指定圖像的寬度和高度。o

“源文件”指定圖像的源文件。單擊文件夾圖標以瀏覽到源文件，或者鍵入路徑。

“鏈接”指定圖像的超鏈接。將“指向文件”圖標拖到“站點”面板中的某個文件，單擊文件夾圖標瀏覽到站點上的某個文檔，或手動鍵入 URL。有關創建鏈接的信息，“對齊”對齊同一行上的圖像和文本。

“替代”指定只顯示文本的瀏覽器或已設置為手動下載圖像的瀏覽器中代替圖像顯示的替代文本。對于使用語音合成器（用于只顯示文本的瀏覽器）的有視覺障礙的用戶，將大聲讀出該文本。在某些瀏覽器中，當鼠標指針滑過圖像時也會顯示該文本?！暗貓D名稱”和“熱點工具”允許您標注和創建客戶端圖像地圖?！按怪边吘唷焙汀八竭吘唷毖貓D像的邊緣添加邊距（以像素為單位）?！按怪边吘唷毖貓D像的頂部和底部添加邊距?！八竭吘唷毖貓D像左側和右側添加邊距?！澳繕恕敝付ㄦ溄拥捻搼斣谄渲休d入的框架或窗口。_blank，將鏈接的文件載入一個未命名的新瀏覽器窗口中。

_parent，將鏈接的文件載入含有該鏈接的框架的父框架集或父窗口中。如果含有該鏈接的框架不是嵌套的，則在瀏覽器全屏窗口中載入鏈接的文件。

_self，將鏈接的文件載入該鏈接所在的同一框架或窗口中。此目標為默認值，因此通常不需要指定它。

_top，在整個瀏覽器窗口中載入所鏈接的文件，因而會刪除所有框架?！斑吙颉笔且韵袼貫閱挝坏膱D像邊框的寬度。默認為無邊框。

“編輯”啟動您在“外部編輯器”參數選擇中指定的圖像編輯器并打開選定的圖像。有關設置外部圖像編輯器的信息，“重設大小” Control+代字號(~)

第四單元表格設計

教學目的：學習下列方法

? 在“標準”視圖中創建和修改表格 ? 向表格添加顏色

? 在“標準”視圖中設置相對寬度的表格

教學重點：能進行表格設計 教學過程：

在“標準”視圖中創建和修改表格 1.在 Dreamweaver 中，選擇“文件”>“新建”。即出現“新建文檔”對話框。

2.在“空文檔”列表中，選擇“HTML”，然后單擊“創建”以創建一個新的 HTML 文檔。3.在“文檔”工具欄的“標題”文本域中，輸入“表格設計”為文檔添加一個標題。

4.選擇“文件”>“保存”將該文檔保存到本地站點文件夾中。將其命名為 tableModify.htm。

插入表格

現在就可以在文檔中插入表格了。

1.在“文檔”窗口，將插入點放到文檔中，然后執行下列操作之一： o 選擇“插入”>“表格”。o 在插入欄的“常用”類別中，單擊“表格”圖標。

出現“插入表格”對話框。

2.在該對話框中，設置下列選項：

o 在“行數”文本框中，鍵入 2。o 在“列數”文本框中，鍵入 2。o 在“寬度”文本框中鍵入 600，然后在“寬度”文本框右邊的彈出式菜單中選擇像素。將寬度設置為 600 像素將創建一個固定寬度的表格。稍后，我們將在本教程中更詳細地討論表格寬度。

o 在“邊框”文本框中，鍵入 1 將表格和表格單元格周圍的邊框寬度設置為 1 個像素。

3.單擊“確定”。

Dreamweaver 將該表格插入到文檔中。

4.執行下列操作之一來保存文檔： o 選擇“文件”>“保存”。o 按 Ctrl+S 組合鍵

修改表格

下一步，將修改表格的布局。將在表格中添加行和列，并且學習如何合并和拆分單元格以創建所需的頁面布局。

1.在左上方的單元格中單擊，然后向下拖動直到最下面的行以選擇左邊的一列。

2.選擇“修改”>“表格”>“插入列”。現在該表格包含三列。

3.單擊左下方的單元格，然后選擇“修改”>“表格”>“插入行或列”。

即出現“插入行或列”對話框。提示： 如果想要插入特定數目的行或列，或者要選擇在表格中插入行或列的位置，請選擇“插入行或列”選項。

4.在該對話框中，設置下列選項： 對于“插入”，選擇行。在“行數”框中，鍵入 2。對于“位置”，選擇 所選之上。5.單擊“確定”。

表格即會更新?，F在的表格為四行三列。6.保存所做的更改（“文件”>“保存”）。合并和拆分單元格

通過合并和拆分單元格，可以自定義表格的設計以符合布局需要。接下來，將看到如何使用菜單選項或屬性檢查器來合并或拆分表格單元格。

1.在文檔中，將指針從左上方的單元格拖到它下面的一個單元格，以選擇表格左列的上面兩個單元格。

2.選擇“修改”>“表格”>“合并單元格”。

兩個單元格合并成一個單元格。

3.單擊第二列的第三行，然后向右向下拖動以選擇第二列和第三列中的最后兩行單元格。

4.在屬性檢查器中，單擊“合并”按鈕以合并單元格。選定的單元格合并為一個單元格。

可以拆分單個的單元格或列。

1.單擊左上方的單元格。

2.在屬性檢查器中，單擊“拆分單元格”按鈕?！安鸱謫卧瘛睂υ捒虺霈F。

3.在該對話框中，設置下列選項： o 對于“把單元格拆分”，選擇列。o 在“列數”框中，輸入 2。4.單擊“確定”。表格即被修改。

更改行高和列寬

現在調整該表格的尺寸。將要增加表格的行間距，并且調整表格列間距。

1.沿表格底部邊框移動指針直到指針變成一個邊框選擇器，然后向下拖動以調整表格大小。

如果愿意，還可以使用此方法調整表格中的其他行高。

2.沿一個列的邊框移動指針直到指針變成一個邊框選擇器，然后向左或向右拖動它以更改列寬。

3.調整完成后，保存文檔。向表格添加顏色

可以向表格的任何部分添加顏色。將首先向整個表格添加背景顏色，然后對表格中的單元格應用不同的背景顏色。最后，將更改邊框顏色。

1.在文檔中，單擊表格的任何一個單元格，然后在位于文檔窗口左下方的標簽選擇器中單擊

2.如果屬性檢查器尚未打開，則打開屬性檢查器（“窗口”>“屬性”）。屬性檢查器中出現所選表格的屬性。

3.在屬性檢查器中，執行下列操作之一，在“背景顏色”文本框中選擇一種顏色： o 單擊顏色選擇器彈出式菜單，然后從顏色選擇器中選擇一種顏色。o 輸入一個十六進制的顏色值，例如 #CC9933。o 輸入一個網頁安全色名稱，如 goldenrod。將一種背景顏色應用到表格。

4.用同樣的方法可以將一種背景顏色應用到表格的單元格中。在左上方的單元格中單擊，然后在屬性檢查器的“背景顏色”文本框中選擇一種不同的顏色。5.如果需要，還可以向其他單元格中添加顏色。添加邊框顏色

現在，將設置表格邊框的顏色。邊框顏色同時應用于表格的外邊框和內邊框。

1.在文檔窗口中，選擇表格。

2.在屬性檢查器的“邊框”文本框中，使用顏色選擇器為表格選擇一種邊框顏色。

3.完成后，請保存文檔。

4.按 F12 鍵（僅限于 Windows）或者選擇“文件”>“在瀏覽器中預覽”，然后選擇一種瀏覽器以查看文檔。

在“標準”視圖中設置相對寬度的表格

1.在 Dreamweaver 中，選擇“文件”>“新建”。

2.在“新建文檔”對話框中，已經選定了“基本頁”類別；在“基本頁”列表中，雙擊“HTML”創建一個新的 HTML 文檔。文檔在文檔窗口中打開。

3.將該文件保存到本地站點文件夾。將其命名為 tableWidth。4.將插入點放置在文檔中。5.在插入欄的“常用”選項卡中，單擊“表”按鈕。6.在出現的對話框中，設置下列選項： 在“行數”文本框中，鍵入 2。在“列數”文本框中，鍵入 3。

在“寬度”文本框中，鍵入 90，并在“寬度”文本框右邊的彈出式菜單中選擇百分比。在“邊框”文本框中，輸入 1 將表格和表格單元格周圍的邊框寬度設置為 1 個像素。7.單擊“確定”。

表格即出現在文檔中。

8.單擊中間列最上方的單元格并拖動到最下方的單元格以選擇中間列。

9.在屬性檢查器中，使用顏色選擇器將一種背景顏色應用于該列。

創建其寬度基于像素的表格

現在將添加另外一個表格。其寬度基于像素的表格被設置為某個特定寬度，并且不會隨著瀏覽器窗口大小的改變而改變。

1.在剛剛插入的表格后面插入一個段落回車。2.在插入欄的“常用”選項卡中，單擊“表”按鈕。3.在出現的對話框中，設置下列選項： 在“行數”文本框中，鍵入 2。在“列數”文本框中，鍵入 3。

在“寬度”文本框中，鍵入 600，然后在“寬度”文本框右邊的彈出式菜單中選擇像素。在“邊框”文本框中，鍵入 1 將表格和表格單元格周圍的邊框寬度設置為 1 個像素。4.單擊“確定”。

表格即出現在文檔中。

5.單擊中間列的最上方單元格并向下拖動到最下方的單元格以選擇中間列。

6.在屬性檢查器中，使用顏色選擇器將一種背景顏色應用于該列。

7.按 F12 鍵（僅限于 Windows）或者選擇“文件”>“在瀏覽器中預覽”，然后選擇一種瀏覽器以查看文檔。

調整瀏覽器窗口大小以查看在瀏覽器窗口改變時，這兩個表格是怎樣變化的?；谙袼氐谋砀癖３执笮〔蛔?，而基于百分比的表格則調整大小以符合瀏覽器大小。8.文檔查看完畢后，請關閉瀏覽器窗口。9.保存文檔。創建和保存新文檔

1.在 Dreamweaver 中，選擇“文件”>“新建”。

2.在“新建文檔”對話框中，已經選定“基本頁”類別。在“基本頁”列表中選擇“HTML”，然后單擊“創建”創建一個新的 HTML 文檔。文檔在文檔窗口中打開。

3.將該文檔保存到的本地站點文件夾中，并將其命名為 tableLayout.htm。

第五單元 版面設計

1.2.3.教學目的：能輕松地設計出合理的網頁設計 教學重點：創建、布局和調整布局表格 課堂講解：

創建布局表格和布局單元格

繪制布局表格：

如果要創建多個布局表格而又不想 每次都單擊布局表格按鈕，按住CTRL 再創建。

創建布局表格時會靠近頁面邊界＜8個像時會自動對齊。取消對齊功能用按ALT鍵

繪制布局單元格： 在頁面上制作一個單元格以后，會自動創建了一個包含這個布局單元格的布局表格，在一個布局表格里可以創建幾個單元格。

組件繪制嵌套的布局表格：在一個表格里繪制另一個布局表格，稱為布局表格的嵌套，在一個表格里可以創建多個嵌套布局表格

使用輔助網格線：菜單中

查看｜網格｜網格設置 顯示網格 CTRL＋ALT＋G 捕捉網格 SHIFT＋ALT＋CTRL＋G 在布局單 元格中添加內容：添加文本、添加圖像、調整布局 表格和布局單元格

單擊單元格的邊框，或按住CTRL單擊單元格中的任何位置，在布局單元格中的邊框上會出現控制柄。拖動控制柄就可以改變布局單元格的大小。

移動布局單元格：1是選定，2是拖動或用方向鍵 每按一次移動一個像素。按住SHIFT鍵每按一次可移動10個像素。

設置布局單元格：選定單元格在屬性面板中設置

設置布局表格：選定后在屬性面板中設置

設置自動伸展寬度 設置指定寬度 使用間隔圖

第六單元 框

架一、二、三、教學目的：學習框架集，框架集中保存及關聯文件。教學重點：框架集的基本概念和基本操作 課堂講解：

1、框架的作用

2、創建框架方法 用菜單方法

用拖動框架任一角，或一邊。按ALT拖動邊

框架拖出另一邊合并

4、插入預定義框架集

5、嵌套的框架集

保存框架集文件

CTRL＋S 只能保存當前頁面。保存框架 保存全部

一定要搞清楚框架集和各框架的名字于其對應的關系。

框架與框架的屬性

邊框 屬性 框架集命名

確定框架的大小 設置框架集的邊框 改變框架背景的顏色

使用鏈接控制框架的內容

空白小結：能利用框架更好地規劃頁面 作業：利用框架作一網頁

上級

自身

頂部

第7單元層的運用

一、教學目的：創建層，層的參數選擇和屬性設置，層的操作，改變層的堆棧順序，改變層的可見性，層與表格。

二、教學重點：層的運用

三、課堂講解：

打開“層”面板，請選擇“窗口”>“其他”>“層”。F2

創建層：

設置層的可見性 層的名稱

創建嵌套層：嵌套層是其代碼包含在另一個層中的層。嵌套通常用于將層組織在一起。嵌套層隨其父層一起移動，并且可以設置為繼承其父級的可見性。

1.層的屬性設置：設置以下任一選項：

層 ID 用于指定一個名稱，以便在“層”面板和 JavaScript 代碼中標識該層。請輸入一個名稱。只應使用標準的字母數字字符，而不要使用空格、連字符、斜杠或句號等特殊字符。每個層都必須有它自己的唯一名稱。

左和上（左側和頂部）指定層的左上角相對于頁面（如果嵌套，則為父層）左上角的位置。寬和高指定層的寬度和高度。

層的移動與對齊： 選擇層。

選擇“修改”>“對齊”，然后選擇一個對齊選項。

調整層大小：當處理頁面布局時，可以對層進行選擇、移動、大小調整和對齊。在對一個層進行移動、大小調整或對齊之前，必須先選擇該層。

若要防止在對層進行移動和大小調整時使層相互重疊，請使用“防止重疊”選項 層與網格對齊： 設置網格顯示和對齊，拖動層然后釋放即對齊

改變層的順序：用鼠標拖動上下位置

層與表格：可以轉變，菜單 修改｜轉變｜層到表格 表格到層 要防止層的重疊

作業：利用層作一網頁排版

第八單元使用“時間軸”面板

“時間軸”面板顯示層和圖像的屬性在一段時間內如何更改。選擇“窗口”>“其他”>“時間軸”可打開“時間軸”面板。

“時間軸”彈出式菜單指定當前在“時間軸”面板中顯示文檔的哪些時間軸。播放欄顯示當前在文檔窗口中顯示時間軸的哪一幀。

幀編號指示幀的序號?！昂笸恕焙汀安シ拧卑粹o之間的數字是當前幀編號。您可以通過設置幀的總數和每秒幀數(fps)來控制動畫的持續時間。每秒 15 幀這一默認設置是比較適當的平均速率，可用于在通常的 Windows 和 Macintosh 系統上運行的大多數瀏覽器。備注： 較快的速率可能不會提高性能。瀏覽器始終會播放動畫的每一幀，即使它們無法達到指定的幀速率。如果幀速率超過瀏覽器可以支持的速率，則將被忽略。上下文菜單包含各種與時間軸相關的命令。

“行為”通道是應該在時間軸中特定幀處執行的行為的通道。

動畫條顯示每個對象的動畫的持續時間。一個行可以包含表示不同對象的多個條。不同的條無法控制同一幀中的同一對象。關鍵幀是動畫條中已經為對象指定屬性（如位置）的幀。Dreamweaver會計算關鍵幀之間幀的中間值。小圓標記表示關鍵幀。

“動畫”通道顯示用于制作層和圖像動畫的條。重命名時間軸

1.選擇“修改”>“時間軸”>“重命名時間軸”。2.在“重命名時間軸”對話框中輸入新的名稱。時間軸制作層動畫，請執行以下操作：

1.將層移至它在動畫開始時應處于的位置。2.選擇“窗口”>“其他”>“時間軸”。

3.選擇您要制作動畫的層。

4.在層中單擊會將一個閃爍的插入點放入層中，但不會選定該層。5.選擇“修改”>“時間軸”>“在時間軸上添加對象”，或者簡單地將選定層拖至“時間軸”面板中。6.一個條將出現在時間軸的第一個通道中。層的名稱將在該條中出現。7.單擊位于條末端的關鍵幀標記。8.在頁面上將層移至它在動畫結束時應處于的位置。

9.將出現一條線，它顯示文檔窗口中動畫的軌跡。10.如果要讓層沿曲線移動，請選擇其動畫條，然后按住 Ctrl 鍵并單擊(Windows)或按住 Command 鍵并單擊(Macintosh)動畫條中部的一個幀，從而在您單擊的幀處添加一個關鍵幀，或者單擊動畫條中部的一個幀并從上下文菜單中選擇“添加關鍵幀”。11.重復此步驟，定義其他關鍵幀。12.按住“播放”按鈕，預覽頁面上的動畫。

? 顯示和隱藏層，而不是更改多圖像動畫的源文件。由于新的圖像必須進行下載，所以切換圖像的源文件會降低動畫的速度。如果所有圖像都在動畫運行前在隱藏層中同時下載，將不會出現明顯的停頓，并且不會缺少圖像。? 擴展動畫條以創建更順暢的動作。如果動畫斷斷續續并且圖像在不同位置之間跳動，請拖動該層動畫條的結束幀，使動作延伸到更多的幀。通過延長動畫條，可以在運動的開始點和結束點之間創建更多的數據點，同時也會使對象更為緩慢地移動。請嘗試增加每秒幀數(fps)以提高速度，但應注意在普通系統上運行的大多數瀏覽器都不能支持超過 15 fps 的動畫速度。請在不同的系統上用不同的瀏覽器對動畫進行測試，以找到最佳的設置。? 不要制作大型位圖的動畫。制作大型圖像的動畫會導致動畫速度減慢。相反，應創建合成圖像，并移動圖像中較小的部分。例如，可以通過僅制作汽車輪胎的動畫來顯示汽車的運動。? 創建簡單的動畫。不要創建對當前瀏覽器要求過高的動畫。即使在系統或 Internet 性能降低時，瀏覽器始終會播放時間軸動畫中的每一幀。多個時間軸：

1.若要新建時間軸，請選擇“修改”>“時間軸”>“添加時間軸”。

2.若要刪除選定的時間軸，請選擇“修改”>“時間軸”>“刪除時間軸”。這將永久刪除選定時間軸中的所有動畫。

3.若要重命名選定時間軸，請選擇“修改”>“時間軸”>“重命名時間軸”，或者在“時間軸”面板的“時間軸”彈出式菜單中輸入新的名稱。

4.若要在“時間軸”面板中查看另一個時間軸，請從“時間軸”面板的“時間軸”彈出式菜單中選擇一個新的時間軸。拖動軌跡來創建時間軸：

1.選擇一個層。

2.將該層移至它在動畫開始時應處于的位置。

確保您已選定該層；如果插入點位于該層中，則說明尚未選定該層。若要選擇一個層，請單擊層標記或層的選擇柄，或者使用“層”面板。3.選擇“修改”>“時間軸”>“記錄層的軌跡”。4.在頁面上拖動層以創建軌跡。

5.當到達動畫應停止的點時釋放該層。

Dreamweaver在時間軸上添加一個動畫條，其中包含適當數量的關鍵幀。6.在“時間軸”面板中，單擊“倒帶”按鈕；然后按住“播放”按鈕預覽動畫。

第9單元行為1、2、3、教學目的：行為概述，自帶的行為使用 教學重點：行為的使用 課堂教學

行為基礎

在網頁制作中，幾乎所有的特效都是通過編寫腳本語言來實現的。通常應用較多的腳本語言有兩種：VBScript和JavaScript。其中JavaScript因為其簡單易用和眾多的支持者而在網頁制作者中最為廣泛流行。

在我們設計網頁的時候，接受事件和響應事件的對象一般就是我們在前面章節中介紹的頁面元素或瀏覽器本身。在HTML語言中，這些頁面元素是用“Tag”（HTML標記）來表示的，下面列出了我們在這一章中可能用到的HTML標記： 定義文檔正文； 定義鏈接； 定義圖像；

定義表單；