dreamweaver入門基礎(chǔ)

我相信每個(gè)做網(wǎng)頁設(shè)計(jì)的都了解過DW吧。而DW其實(shí)非常適合新手，上手容易操作簡單。就像ps一樣功能強(qiáng)大。所以對于小白來說可能其強(qiáng)大的功能讓我們不知道如何去入門了。而下面小編就為大家分享下dreamweaver入門基礎(chǔ)吧。

dreamweaver入門(2004版本):功能簡介：

Macromedia Dreamweaver MX 2004 (簡稱DW MX 2004)，是Macromedia 最新開發(fā)的的HTML編輯器，用于對Web站點(diǎn)、Web頁和 Web應(yīng)用程序進(jìn)行設(shè)計(jì)、編碼和開發(fā)。 DW MX 2004 包含有一個(gè)嶄新、簡潔、高效的界面，且性能也得到了改進(jìn)。此外，還包含了眾多新增的功能，改善了軟件的易用性并使您無論處于設(shè)計(jì)環(huán)境還是編碼環(huán)境都可以方 便地生成頁面。

【DW MX 2004 MX 2004 的新功能簡介】

▲簡潔高效的設(shè)計(jì)和開發(fā)界面：界面更易于使用，可使您的工作效率和工作質(zhì)量均得到提高。

▲“插入”欄的改進(jìn)：簡潔高效的新外觀，占用更少的工作區(qū)空間。還新增加了一個(gè)“收藏”類別，您可以對“插入”欄進(jìn)行自定義，將最常使用的對象放置在該欄上。

▲表格編輯可視化：在表格中進(jìn)行列調(diào)整操作時(shí)能看到實(shí)際效果。

▲用戶界面改進(jìn)：可得到最大的可用工作區(qū)，更清晰地顯示上下文和焦點(diǎn)，更易于使用和更具邏輯性。

▲起始頁：使您能夠訪問最近使用過的文件，創(chuàng)建新文件和訪問DW MX 2004資源。起始頁會在您啟動DW MX 2004 或尚未打開文檔時(shí)顯示。

▲保存桌面選項(xiàng)：使您可以選擇當(dāng)您重新啟動DW MX 2004 時(shí)重新打開您上一次使用的文檔。

▲完全支持 Unicode：DW MX 2004支持 Internet Explorer所支持的所有文本編碼方式。您可以使用幾乎所有您的系統(tǒng)中安裝的語言字體，DW MX 2004 會正確地顯示和保存這些字體。

▲安全 FTP：使您能夠完全加密所有文件傳輸。

▲新式的頁面布局和設(shè)計(jì)環(huán)境。

▲增強(qiáng)的 CSS 功能：提供了一個(gè)更為精巧的方法來進(jìn)行樣式設(shè)計(jì)及提高設(shè)計(jì)交互性。

▲動態(tài)跨瀏覽器驗(yàn)證：在您保存文檔時(shí)自動檢查當(dāng)前文檔的跨瀏覽器兼容性問題。

本教程針對DW MX 2004簡體中文版進(jìn)行討論，供學(xué)習(xí)網(wǎng)頁制作創(chuàng)建靜態(tài)網(wǎng)站的朋友們參考。因本人水平有限，不當(dāng)之處在所難免，歡迎批評指正。

【圖象處理軟件】

Photoshop：制作圖文并茂的網(wǎng)頁，需要處理圖片， PS 是最好的圖象處理軟件。最新版為Photoshop CS(俗稱8.0)版本。對初學(xué)者來說稍微專業(yè)了。您可以使用簡單易學(xué)、功能強(qiáng)大的的 Photoshop Elements(即：PSE)，對于網(wǎng)頁圖片文件制作PSE就足夠用了。。

Fireworks：最新為 MX 2004版本，網(wǎng)頁制作三劍客之一。能和DW無縫鏈接。該軟件請您自行收集下載。

Flash： 最新為 MX 2004版本，網(wǎng)頁制作三劍客之一。網(wǎng)上最火的動畫制作軟件。該軟件請您自行收集下載。

Ulead GIF Animator：友立公司開發(fā)的功能強(qiáng)大的GIF動畫軟件。該軟件請您自行收集下載。

【其他軟件】

CuteFTP：是專業(yè)的FTP上傳軟件，用于往服務(wù)器端上傳文件用。 Dreamweaver MX 2004 有此功能，而且功能強(qiáng)大。但是，不少人還是習(xí)慣用專業(yè)的FTP軟件。該軟件請您自行收集下載。

最終您還需要有一個(gè)網(wǎng)絡(luò)空間。以便您的大作讓更多的人瀏覽。

dreamweaver入門(2004版本):窗口布局：

窗口布局

Dreamweaver MX 2004 提供了將全部元素置于一個(gè)窗口中的集成工作區(qū)。在集成工作區(qū)中，全部窗口和面板集成在一個(gè)應(yīng)用程序窗口中。您可以選擇面向設(shè)計(jì)人員的布局或面向手工編碼人 員需求的布局。首次啟動 Dreamweaver 時(shí)，會出現(xiàn)一個(gè)工作區(qū)設(shè)置對話框(如下圖)：

您可以從中選擇一種工作區(qū)布局。如果您不熟悉編寫代碼，請您選擇“設(shè)計(jì)者”。如果您以后想更改工作區(qū)，可以使用編輯菜單“首選參數(shù)”對話框切換到一種不同的工作區(qū)。編輯菜單“首選參數(shù)”對話框如下圖：

【欄目說明】

“插入”欄(如下圖)：包含用于將各種類型的“對象”(如圖像、表格和層)插入到文檔中的按鈕。每個(gè)對象都是一段 HTML 代碼，允許您在插入它時(shí)設(shè)置不同的屬性。例如，您可以通過單擊“插入”欄中的“表格”按鈕插入一個(gè)表格。也可以不使用“插入”欄而使用“插入”菜單插入對 象。

“文檔”窗口 顯示您當(dāng)前創(chuàng)建和編輯的文檔。

“屬性檢查器”(如下圖)： 用于查看和更改所選對象或文本的各種屬性。

“面板組”(如下圖) 是分組在某個(gè)標(biāo)題下面的相關(guān)面板的集合。若要展開一個(gè)面板組，請單擊組名稱左側(cè)的展開箭頭;若要取消停靠一個(gè)面板組，請拖動該組標(biāo)題條左邊緣的手柄。

“文件”面板(如下圖) 使您可以管理您的文件和文件夾，無論它們是 Dreamweaver 站點(diǎn)的一部分還是在遠(yuǎn)程服務(wù)器上。“文件”面板還使您可以訪問本地磁盤上的全部文件，類似于 Windows 資源管理器。

Dreamweaver MX 2004提供了多種此處未說明的其他面板、檢查器和窗口。若要打開其它面板，請使用“窗口”菜單。

dreamweaver入門(2004版本):菜單概述：

菜單概述

本節(jié)提供 Dreamweaver MX 2004中各菜單的簡要說明。下圖為菜單條：

以下分別敘述菜單選項(xiàng)：

文件菜單編輯菜單

“文件”菜單　包含“新建”、“打開”、“保存”、“保存全部”，還包含各種其他命令，用于查看當(dāng)前文檔或?qū)Ξ?dāng)前文檔執(zhí)行操作，例如“在瀏覽器中預(yù)覽”和“打印代碼”。

“編輯”菜單　包含選擇和搜索命令，例如“選擇父標(biāo)簽”和“查找和替換”。“編輯”菜單還提供對DW菜單中“首選參數(shù)”的訪問。

查看菜單插入菜單

“查看”菜單　使您可以看到文檔的各種視圖(例如“設(shè)計(jì)”視圖和“代碼”視圖)，并且可以顯示和隱藏不同類型的頁面元素和 DW工具及工具欄。

“插入”菜單提供“插入”欄的替代項(xiàng)，用于將對象插入您的文檔。

修改菜單文本菜單

“修改”菜單 使您可以更改選定頁面元素或項(xiàng)的屬性。使用此菜單，您可以編輯標(biāo)簽屬性，更改表格和表格元素，并且為庫項(xiàng)和模板執(zhí)行不同的操作。

“文本”菜單使您可以輕松地設(shè)置文本的格式。

命令菜單站點(diǎn)菜單

“命令”菜單　提供對各種命令的訪問;包括一個(gè)根據(jù)您的格式首選參數(shù)設(shè)置代碼格式的命令、一個(gè)創(chuàng)建相冊的命令等。

“站點(diǎn)”菜單　提供用于管理站點(diǎn)以及上傳和下載文件的菜單項(xiàng)。

窗口菜單幫助菜單

“窗口”菜單　提供對 DW中的所有面板、檢查器和窗口的訪問。

“幫助”菜單　提供對 Dreamweaver 文檔的訪問，包括關(guān)于使用 Dreamweaver 以及創(chuàng)建 Dreamweaver 擴(kuò)展功能的幫助系統(tǒng)，還包括各種語言的參考材料。

除了菜單欄菜單外，Dreamweaver 還提供多種右鍵顯示上下文菜單，您可以利用它們方便地訪問與當(dāng)前選擇或區(qū)域有關(guān)的有用命令。若要顯示上下文菜單，右擊窗口中的某一項(xiàng)。

dreamweaver入門(2004版本):常用工具欄：

“插入”欄“插入”欄包含用于創(chuàng)建和插入對象(如表格、層和圖像)的按鈕。當(dāng)鼠標(biāo)指針滾動到一個(gè)按鈕上時(shí)，會出現(xiàn)一個(gè)工具提示，其中含有該按鈕的名稱。　　某些類別具有帶彈出菜單的按鈕。從彈出菜單中選擇一個(gè)選項(xiàng)時(shí)，該選項(xiàng)將成為該按鈕的默認(rèn)操作。例如，如果從“圖像”按鈕的彈出菜單中選擇“圖像 占位符”，下次單擊“圖像”按鈕時(shí)，Dreamweaver 會插入一個(gè)圖像占位符。每當(dāng)從彈出菜單中選擇一個(gè)新選項(xiàng)時(shí)，該按鈕的默認(rèn)操作都會改變。

“插入”欄按以下的類別進(jìn)行組織：

“常用”類別使您可以創(chuàng)建和插入最常用的對象，例如圖像和表格。

“布局”類別使您可以插入表格、div 標(biāo)簽、層和框架。您還可以從三個(gè)表格視圖中進(jìn)行選擇：“標(biāo)準(zhǔn)”(默認(rèn))、“擴(kuò)展表格”和“布局”。當(dāng)選擇“布局”模式后，您可以使用 Dreamweaver 布局工具：“繪制布局單元格”和“繪制布局表格”。

“表單”類別包含用于創(chuàng)建表單和插入表單元素的按鈕。

“文本”類別使您可以插入各種文本格式設(shè)置標(biāo)簽和列表格式設(shè)置標(biāo)簽。

“HTML”類別使您可以插入用于水平線、頭內(nèi)容、表格、框架和腳本的 HTML 標(biāo)簽。

“服務(wù)器代碼”類別僅適用于使用特定服務(wù)器語言的頁面，這些類別中的每一個(gè)都提供了服務(wù)器代碼對象，您可以將這些對象插入“代碼”視圖中。

“應(yīng)用程序”類別使您可以插入動態(tài)元素，例如記錄集、重復(fù)區(qū)域以及記錄插入和更新表單。

“Flash 元素”類別使您可以插入 Flash 元素。

“收藏”類別使您可以將“插入”欄中最常用的按鈕分組和組織到某一常用位置。

文檔工具欄

文檔工具欄中包含按鈕，這些按鈕使您可以在文檔的不同視圖間快速切換：“代碼”視圖、“設(shè)計(jì)”視圖、同時(shí)顯示“代碼”和“設(shè)計(jì)”視圖的拆分視圖。

工具欄中還包含一些與查看文檔、在本地和遠(yuǎn)程站點(diǎn)間傳輸文檔有關(guān)的常用命令和選項(xiàng)。　　以下對選項(xiàng)進(jìn)行說明：

顯示代碼視圖　僅在“文檔”窗口中顯示“代碼”視圖。

顯示代碼視圖和設(shè)計(jì)視圖　在“文檔”窗口的一部分中顯示“代碼”視圖，而在另一部分中顯示“設(shè)計(jì)”視圖。當(dāng)選擇了這種組合視圖時(shí)，“視圖選項(xiàng)”菜單中的“在頂部查看設(shè)計(jì)視圖”選項(xiàng)變?yōu)榭捎谩Ｕ埵褂迷撨x項(xiàng)指定在“文檔”窗口的頂部顯示哪種視圖。

顯示設(shè)計(jì)視圖　僅在“文檔”窗口中顯示“設(shè)計(jì)”視圖。

標(biāo)題　允許您為文檔輸入一個(gè)標(biāo)題，它將顯示在瀏覽器的標(biāo)題欄中。如果文檔已經(jīng)有了一個(gè)標(biāo)題，則該標(biāo)題將顯示在該區(qū)域中。

沒有瀏覽器/檢查錯(cuò)誤　使您可以檢查跨瀏覽器兼容性。

文件管理　顯示“文件管理”彈出菜單。

在瀏覽器中預(yù)覽/調(diào)試　在瀏覽器中預(yù)覽或調(diào)試文檔。從彈出菜單中選擇一個(gè)瀏覽器。

刷新設(shè)計(jì)視圖　當(dāng)您在“代碼”視圖中進(jìn)行更改后刷新文檔的“設(shè)計(jì)”視圖。

視圖選項(xiàng)　允許您為“代碼”視圖和“設(shè)計(jì)”視圖設(shè)置選項(xiàng)。

狀態(tài)欄

狀態(tài)欄提供與您正創(chuàng)建的文檔有關(guān)的其它信息　　標(biāo)簽選擇器 顯示環(huán)繞當(dāng)前選定內(nèi)容的標(biāo)簽的層次結(jié)構(gòu)。單擊該層次結(jié)構(gòu)中的任何標(biāo)簽以選擇該標(biāo)簽及其全部內(nèi)容。比如：單擊 可以選擇文檔的整個(gè)正文。

窗口大小 彈出菜單(僅在“設(shè)計(jì)”視圖中可見)用來將“文檔”窗口的大小調(diào)整到預(yù)定義或自定義的尺寸。

“窗口大小”彈出菜單的右側(cè)是頁面的文檔大小和估計(jì)下載時(shí)間。

dreamweaver入門(2004版本):定義站點(diǎn)：

設(shè)置站點(diǎn)

Web 站點(diǎn)是一組具有如相關(guān)主題、類似的設(shè)計(jì)、鏈接文檔和資源。Dreamweaver MX 2004 是一個(gè)站點(diǎn)創(chuàng)建和管理工具，因此使用它不僅可以創(chuàng)建單獨(dú)的文檔，還可以創(chuàng)建完整的 Web 站點(diǎn)。創(chuàng)建 Web 站點(diǎn)的第一步是規(guī)劃。為了達(dá)到最佳效果，在創(chuàng)建任何 Web 站點(diǎn)頁面之前，應(yīng)對站點(diǎn)的結(jié)構(gòu)進(jìn)行設(shè)計(jì)和規(guī)劃。決定要創(chuàng)建多少頁，每頁上顯示什么內(nèi)容，頁面布局的外觀以及頁是如何互相連接起來的。

請執(zhí)行以下操作：

啟動 Dreamweaver MX 2004：

選擇“站點(diǎn)” >“管理站點(diǎn)”(即，從“站點(diǎn)”菜單選擇“管理站點(diǎn)”)。 出現(xiàn)“管理站點(diǎn)”對話框。

在“管理站點(diǎn)”對話框中，單擊“新建”，然后從彈出式菜單中選擇“站點(diǎn)”。 出現(xiàn)“站點(diǎn)定義”對話框。

如果對話框顯示的是“高級”選項(xiàng)卡，則單擊“基本”。 出現(xiàn)“站點(diǎn)定義向?qū)А钡牡谝粋�(gè)界面，要求您為站點(diǎn)輸入一個(gè)名稱。

在文本框中，輸入一個(gè)名稱以在 Dreamweaver MX 2004中標(biāo)識該站點(diǎn)。該名稱可以是任何所需的名稱。

單擊“下一步”。出現(xiàn)向?qū)У南乱粋�(gè)界面，詢問您是否要使用服務(wù)器技術(shù)。

選擇“否”選項(xiàng)，指示目前該站點(diǎn)是一個(gè)靜態(tài)站點(diǎn)，沒有動態(tài)頁。

單擊“下一步”。出現(xiàn)向?qū)У南乱粋�(gè)界面，詢問您要如何使用您的文件。

選擇標(biāo)有“編輯我的計(jì)算機(jī)上的本地副本，完成后再上傳到服務(wù)器(推薦)”的選項(xiàng)。 在站點(diǎn)開發(fā)過程中有多種處理文件的方式，初學(xué)網(wǎng)頁制作的朋友請選擇此選項(xiàng)。

單擊該文本框旁邊的文件夾圖標(biāo)。 隨即會出現(xiàn)“選擇站點(diǎn)的本地根文件夾”對話框。

單擊“下一步”， 出現(xiàn)向?qū)У南乱粋�(gè)界面，詢問您如何連接到遠(yuǎn)程服務(wù)器。從彈出式菜單中選擇“無”。 您可以稍后設(shè)置有關(guān)遠(yuǎn)程站點(diǎn)的信息。目前，本地站點(diǎn)信息對于開始創(chuàng)建網(wǎng)頁已經(jīng)足夠了。單擊“下一步”，該向?qū)У南乱粋�(gè)屏幕將出現(xiàn)，其中顯示您的設(shè)置概要。

單擊“完成”完成設(shè)置。 隨即出現(xiàn)“管理站點(diǎn)”對話框，顯示您的新站點(diǎn)。單擊“完成”關(guān)閉“管理站點(diǎn)”對話框。

現(xiàn)在，已經(jīng)為您的站點(diǎn)定義了一個(gè)本地根文件夾。下一步，可以編輯自己的網(wǎng)頁了。

dreamweaver入門(2004版本):創(chuàng)建頁面：

頁面編輯

本節(jié)介紹如何應(yīng)用Dreamweaver MX 2004創(chuàng)建自己的網(wǎng)頁。

從頭創(chuàng)建自己的頁面，可以使用 Dreamweaver MX 2004起始頁創(chuàng)建新頁，或者可以選擇“文件” >“新建”，彈出如下對話框：

從各種預(yù)先設(shè)計(jì)的頁面布局中選擇一種。比如：選擇“基本頁”HTML，點(diǎn)擊創(chuàng)建按鈕。Dreamweaver MX 2004即展開工作區(qū)界面(一個(gè)空白頁)：

您可以在這個(gè)空白頁添加表格和輸入文本進(jìn)行編輯。如果您要向頁面添加圖片或其它元素，應(yīng)先保存這個(gè)空白頁。選擇“文件”>“另存為”，在“另存為”對話框中，瀏覽到站點(diǎn)本地根文件夾下。填入文件名，保存退出。

dreamweaver基礎(chǔ)教程:頁面的總體設(shè)置：

我們已經(jīng)描繪了小屋的藍(lán)圖，從現(xiàn)在開始，為我們的小屋添磚加瓦吧。打開01.html，制作一個(gè)圖文混排的簡單頁面。

一、頁面的總體設(shè)置

1、設(shè)置頁面的頭內(nèi)容

頭內(nèi)容再瀏覽器中是不可見的，但是卻攜帶著網(wǎng)頁的重要信息，如關(guān)鍵字、描述文字等，還可以實(shí)現(xiàn)一些非常重要的功能，如自動刷新功能。

鼠標(biāo)左鍵單擊插入工具欄最左邊按鈕旁的下拉小三角，在彈出菜單中選擇“HTML”項(xiàng)，出現(xiàn)“文件頭”按鈕，點(diǎn)開下拉菜單，就可以進(jìn)行頭內(nèi)容的設(shè)置了。

設(shè)置標(biāo)題，網(wǎng)頁標(biāo)題可以是中文、英文或符號，顯示在瀏覽器的標(biāo)題欄中。我們直接在設(shè)計(jì)窗口上方的標(biāo)題欄內(nèi)輸入或更改，就可以完成網(wǎng)頁標(biāo)題的編輯了。

插入關(guān)鍵字，關(guān)鍵字用來協(xié)助網(wǎng)絡(luò)上的搜索引擎尋找網(wǎng)頁。要想讓更多的人看見你的網(wǎng)站，這項(xiàng)要好好填哦^_^單擊上圖所示的“關(guān)鍵字”項(xiàng)，彈出“關(guān)鍵字”對話框，填入關(guān)鍵字即可。

插入META，META標(biāo)記用于記錄當(dāng)前網(wǎng)頁的相關(guān)信息，如編碼，作者，版權(quán)等，也可以用來給服務(wù)器提供信息。單擊上圖所示的“META”項(xiàng)，彈出“META”對話框，在“屬性”欄選擇“名稱”屬性，在“值”文本框中輸入相應(yīng)的值，可以定義相應(yīng)的信息。

author—作者信息，copyright—版權(quán)聲明，generator—網(wǎng)頁編輯器。

2、設(shè)置頁面屬性

單擊“屬性欄”中的“頁面屬性”按鈕，打開的“頁面屬性”對話框。

設(shè)置外觀，“外觀”是設(shè)置頁面的一些基本屬性。我們可以定義頁面中的默認(rèn)文本字體、文本字號、文本顏色、背景顏色和背景圖像等。我們設(shè)置頁面的所有邊距為0。

設(shè)置鏈接，“鏈接”選項(xiàng)內(nèi)是一些與頁面的鏈接效果有關(guān)的設(shè)置。“鏈接顏色”定義超鏈接文本默認(rèn)狀態(tài)下的字體顏色，“變換圖像鏈接”定義鼠標(biāo)放在鏈接上 時(shí)文本的顏色，“已訪問鏈接”定義訪問過的鏈接的顏色，“活動鏈接”定義活動鏈接的顏色。“下劃線樣式”可以定義鏈接的下劃線樣式。

設(shè)置標(biāo)題，“標(biāo)題”用來設(shè)置標(biāo)題字體的一些屬性。如下圖所示，在左側(cè)“分類”列表中選擇“標(biāo)題”，這里的標(biāo)題指的并不是頁面的標(biāo)題內(nèi)容，而是可以應(yīng)用 在具體文章中各級不同標(biāo)題上的一種標(biāo)題字體樣式。我們可以定義“標(biāo)題字體”及6種預(yù)定義的標(biāo)題字體樣式，包括粗體、斜體、大小和顏色。按自己的喜歡的風(fēng)格 設(shè)置吧。

dreamweaver入門(2004版本):超級鏈接：

超級鏈接

作為網(wǎng)站肯定有很多的頁面，如果頁面之間彼此是獨(dú)立的，那么網(wǎng)頁就好比是孤島，這樣的網(wǎng)站是無法運(yùn)行的。為了建立起網(wǎng)頁之間的聯(lián)系我們必須使用超級鏈接。稱“超級鏈接”，是因?yàn)樗�什么都能鏈接，如：網(wǎng)頁、下載文件、網(wǎng)站地址、郵件地址……等等。下邊我們就來討論怎樣在網(wǎng)頁中創(chuàng)建超級鏈接。

【頁面之間的超級連接】

在網(wǎng)頁中，單擊了某些圖片、有下劃線或有明示鏈接的文字就會跳轉(zhuǎn)到相應(yīng)的網(wǎng)頁中去。

1、在網(wǎng)頁中選中要做超級鏈接的文字或者圖片。

2、在屬性面板中單擊黃色文件夾圖標(biāo)，在彈出的對話框里選中相應(yīng)的網(wǎng)頁文件就完成了。做好超級鏈接屬性面板出現(xiàn)鏈接文件顯示。(如下圖)

3、按F12預(yù)覽網(wǎng)頁。在瀏覽器里光標(biāo)移到超級鏈接的地方就會變成手型。

〖提示〗你也可以手工在鏈接輸入框中輸入地址。給圖片加上超級鏈接的方法和文字完全相同。

如果超級鏈接指向的不是一個(gè)網(wǎng)頁文件。而是其他文件例如zip、exe文件等等，單擊鏈接的時(shí)候就會下載文件。

超級鏈接也可以直接指向地址而不是一個(gè)文件，那么單擊鏈接直接跳轉(zhuǎn)到相應(yīng)的地址。例如，在鏈接框里寫上www.xxx.net那么，單擊鏈接就可以跳轉(zhuǎn)到讀書屋網(wǎng)站。

【郵件地址的超級連接】

在網(wǎng)頁制作中，還經(jīng)常看到這樣的一些超級鏈接。單擊了以后，會彈出郵件發(fā)送程序，聯(lián)系人的地址也已經(jīng)填寫好了。這也是一種超級鏈接。制作方法是：在編輯狀態(tài)下，先選定要鏈接的圖片或文字(比如：歡迎您來信賜教!)，在插入欄點(diǎn)或點(diǎn)插入菜單選“電子郵件鏈接”彈出如下對話框，填入E-Mail地址即可。

提示：還可以選中圖片或者文字，直接在屬性面板鏈接框中填寫“mailto：郵件地址”。(如下圖)

創(chuàng)建完成后，保存頁面，按F12預(yù)覽網(wǎng)頁效果。

【制作圖片上的超級鏈接】

注意，我們這里所說的圖片上的超級鏈接是指在一張圖片上實(shí)現(xiàn)多個(gè)局部區(qū)域指向不同的網(wǎng)頁鏈接。比如一張中國地圖的圖片，單擊了不同的省跳轉(zhuǎn)到不同的網(wǎng)頁。可點(diǎn)的區(qū)域就是熱區(qū)。為了演示制作效果下面的中國地圖我加了一些鏈接，你可以用鼠標(biāo)測試。鼠標(biāo)移動到省份的熱區(qū)，會顯示提示，如果有預(yù)先設(shè)置的網(wǎng)站，點(diǎn)擊會進(jìn)入對方的網(wǎng)站。

【制作方法】

1、首先插入圖片。單擊圖片，用展開的屬性面板上的繪圖工具在畫面上繪制熱區(qū)。

2、屬性面板改換為熱點(diǎn)面板如圖：鏈接輸入框：填入相應(yīng)的鏈接。替代框：填入你的提示文字說明。目標(biāo)框：不作選擇則默認(rèn)在新瀏覽器窗口打開。

3、保存頁面， 按F12預(yù)覽，用鼠標(biāo)在設(shè)置的熱區(qū)檢驗(yàn)效果。

提示：對于復(fù)雜的熱區(qū)圖形我們可以直接選擇多邊形工具來進(jìn)行描畫。替代框填寫了說明文字以后，光標(biāo)移上熱區(qū)就會顯示出相應(yīng)的說明文字。

超級鏈接屬性面板中的目標(biāo)選項(xiàng)。

“目標(biāo)”我們稱它為目標(biāo)區(qū)。也就是超級鏈接指向的頁面出現(xiàn)在什么目標(biāo)區(qū)域。默認(rèn)的情況下域中總有四個(gè)選項(xiàng)。

①_blank ：單擊鏈接以后，指向頁面出現(xiàn)在新窗口中。

②_parent：用指向頁面替換他外面所在的框架結(jié)構(gòu)。

③_self：　將連接頁面顯示在當(dāng)前框架中。

④_top：　 跳出所有框架，頁面直接出現(xiàn)在瀏覽器中。

【小結(jié)】本節(jié)教程主要探討創(chuàng)建頁面的鏈接。

1、內(nèi)部鏈接：鏈接到本站點(diǎn)的其他文檔。

2、外部鏈接：鏈接到本站點(diǎn)以外的其他文檔。

3、E-Mail鏈接：單擊該鏈接，可以打開瀏覽者的郵件系統(tǒng)。

4、圖片熱區(qū)鏈接：使你的鏈接更靈活更有個(gè)性。

dreamweaver入門(2004版本):表格設(shè)計(jì)：

表格設(shè)計(jì)

表格是現(xiàn)代網(wǎng)頁制作的一個(gè)重要組成部分。表格之所以重要是因?yàn)楸砀窨梢詫?shí)現(xiàn)網(wǎng)頁的精確排版和定位。本節(jié)教程我們分為兩步來進(jìn)行。首先看表格操作的一個(gè)實(shí)例。然后來看一些表格操作的基本方法。在開始制作表格之前，我們首先對表格的各部分的名稱做一個(gè)介紹。

一張表格橫向叫行，縱向叫列。行列交叉部分就叫做單元格。

單元格中的內(nèi)容和邊框之間的距離叫邊距。單元格和單元格之間的距離叫間距。整張表格的邊緣叫做邊框。

下面看看我們使用表格制作的頁面的實(shí)例

這幅頁面的排版格式，如果用以前我們所講的對齊方式是無法實(shí)現(xiàn)的。因此我們需要用到表格來做。實(shí)際上是用兩行兩列的表格來制作。

1、 在插入欄中選擇按鈕或“插入”菜單>選“表格”。系統(tǒng)彈出表格對話框。這些參數(shù)我們都已經(jīng)認(rèn)識了。行：2。列：2。其余的參數(shù)都保留其默認(rèn)值。。

2、 在編輯視圖界面中生成了一個(gè)表格。表格右、下及右下角的黑色點(diǎn)是調(diào)整表格的高和寬的調(diào)整柄。當(dāng)光標(biāo)移到點(diǎn)上就可以分別調(diào)整表格的高和寬。移到表格的邊框線上也可以調(diào)整。

3、 在表格的第一格按住左鍵不放，向下拖拽選中二格單元格。

然后在展開的屬性面板中選擇合并單元格按鈕。將表格的單元格合并。如果要分割單元格，則可以用合并單元格按鈕右邊的按鈕。

4、 用鼠標(biāo)拖拽表格的邊框調(diào)整到適當(dāng)?shù)拇笮　?/p>

5、 單擊左邊的單元格，然后輸入“攝影作品賞析”文字，并調(diào)整大小，因是豎排應(yīng)每個(gè)字回車一次。如果需要調(diào)整格子的大小。只需要鼠標(biāo)的光標(biāo)移動到邊框上拖拽即可。

6、 在右邊上下單元格內(nèi)分別插入圖片和文本。頁面的基本樣子有了。

7、 光標(biāo)移動到表格的邊框上單擊。表格周圍出現(xiàn)調(diào)整框，表示選中整張表格。然后，在屬性面板中將“邊框”值設(shè)置適合的值，如果為0，邊框在編輯狀態(tài)，為虛線顯示，瀏覽時(shí)就看不見了。

一個(gè)符合要求的頁面在表格的幫助下做好了。

通過上面的操作我們對于表格有了一個(gè)初步的認(rèn)識。還要提示一點(diǎn)，對整幅表格操作和對一個(gè)單元格操作的時(shí)候，相應(yīng)的屬性面板是不同的。

表格顏色設(shè)置，選擇整幅表格后，利用屬性面板的顏色選擇器設(shè)置背景色。單元格也可單獨(dú)設(shè)置。鼠標(biāo)在需要設(shè)置的單元格點(diǎn)一下，其余操作同上。

下面我們就來看看這些屬性面板的區(qū)別。

表格的屬性面板，要出現(xiàn)這個(gè)面板必須先選中整幅表格，方法上面已經(jīng)提到過了。您可以在眾多選項(xiàng)中填入需要的參數(shù)。

選中了單元格之后屬性面板就發(fā)生如下變化了。選擇行或者列都屬于選中單元格。

對表格操作的幾種常用方式：

合并：將選中的連續(xù)單元格合并成為一個(gè)單元格。

分割：將一個(gè)單元格分割成若干單元格。

水平對齊方式：分為(左)(中)(右)三種。

垂直對齊方式：分為(頂)(居中)(居底)(基線對齊)

表格還可以增加或者刪除行或者列。在一個(gè)單元格中單擊鼠標(biāo)右鍵。在右鍵菜單中選擇表格選項(xiàng)>>選擇“插入行或列”。系統(tǒng)會彈出對話框如下。

在對話框里填入數(shù)據(jù)即可。最后要說的是選中表格中的各種元素的方法：

選中一行，把光標(biāo)移到該行的最左邊單元格的左面，光標(biāo)會變成箭頭狀。單擊就可以選中一行。

選中一列，把光標(biāo)移到該列的最上邊單元格的上面，光標(biāo)會變成箭頭狀，然后單擊可以選中一列。

選中整張表格，把光標(biāo)移到表格的左上角或右邊框或下邊框線上。單擊即可選中整幅表格。選中的表格會在周圍出現(xiàn)一個(gè)黑框表示整張表格選中了。

選中單元格。單元格可以同時(shí)選中多個(gè)。選擇連續(xù)的單元格，光標(biāo)先選中的一個(gè)單元格，按shift鍵不放，選取最后一個(gè)單元格。選不連續(xù)的單元格。按住Ctrl鍵，點(diǎn)取所需要的單元格即可。

我們對于表格的使用就講到這里，表格是網(wǎng)頁制作的基本技術(shù)，只有通過不斷實(shí)踐才能充分掌握。

dreamweaver入門(2004版本):框架技術(shù)：

框架技術(shù)

在瀏覽網(wǎng)頁的時(shí)候，我們常常會遇到這樣的一種導(dǎo)航結(jié)構(gòu)。就是超級連接做在左邊單擊以后鏈接的目標(biāo)出現(xiàn)在右面。或者在上邊單擊鏈接指向的目標(biāo)頁面出現(xiàn)在下面。要做出這樣的效果，必須使用框架。為了更好的理解什么是框架。我們畫一張示意圖來進(jìn)行討論。

這是一個(gè)左右結(jié)構(gòu)的框架。事實(shí)上這樣的一個(gè)結(jié)構(gòu)是由三個(gè)網(wǎng)頁文件組成的。首先外部的框架是一個(gè)文件，圖中我們用index.htm命名。框架中左邊命名為A，指向的是一個(gè)網(wǎng)頁A.htm。右邊命名為B，指向的是一個(gè)網(wǎng)頁B.htm。

下面我們就來從頭開始制作一個(gè)框架。(以左右框架結(jié)構(gòu)為例)

1、點(diǎn)“文件”菜單>新建，彈出“新建文檔”

或在插入欄>布局>選"框架：左框架"

Dreamweaver MX 2004生成一個(gè)空白的框架頁面，

2、選擇「窗口」菜單>“框架”，彈出“框架”面板。從框架面板可知，系統(tǒng)對左右框架生成命名。左框架名為：leftFrame，右框架名為：mainFrame，當(dāng)然您可以通過框架屬性面板對框架重新命名，了解這一點(diǎn)非常重要。創(chuàng)建超級鏈接時(shí)，要依據(jù)它正確控制指向的頁面。

3、保存框架。選擇“文件”菜單點(diǎn)擊“保存全部”。系統(tǒng)彈出對話框。這時(shí)，保存的是一個(gè)框架結(jié)構(gòu)文件。我們按照慣例都命名為index.htm。

保存的時(shí)候如果虛線框籠罩的是周圍一圈就是保存框架結(jié)構(gòu)。

虛線籠罩在右邊就是保存框架中右邊網(wǎng)頁。

虛線籠罩在左邊就是保存框架中左邊的網(wǎng)頁：

三個(gè)頁面保存完畢。

4、下面我們要實(shí)現(xiàn)按左邊的超級鏈接，對應(yīng)的頁面出現(xiàn)在右邊。在左邊的頁面中做上超級鏈接。指向一個(gè)已經(jīng)存在的頁面。注意做好鏈接以后，要在目標(biāo)欄中設(shè)置為mainFrame。

6、設(shè)置完畢，保存全部，按F12預(yù)覽網(wǎng)頁。鏈接指向的頁面出現(xiàn)在右邊框架中。

7、重復(fù)以上步驟，把左框架所有的鏈接做完，一個(gè)簡單的網(wǎng)站導(dǎo)航結(jié)構(gòu)創(chuàng)建完成。

框架有很多優(yōu)點(diǎn)，但是若理解不很透徹，容易搞混。如果您的網(wǎng)站頁面不多，可以創(chuàng)建一個(gè)不使用框架的Web頁面來完成框架的功能。例如，如果您想讓導(dǎo)航條顯示在頁面的左側(cè)或頂部，既可以使用框架頁面，也可以在每一頁包含該導(dǎo)航條而不使用框架。

[dreamweaver入門基礎(chǔ)]

【dreamweaver入門基礎(chǔ)】相關(guān)文章：

關(guān)于投資理財(cái)入門的基礎(chǔ)知識09-01

新手學(xué)化妝 淡妝入門基礎(chǔ)知識篇08-22

美白入門知識 零基礎(chǔ)也能美白05-14

建筑入門常識06-06

搭訕入門指南07-17

游泳入門技巧07-16

編程入門書籍10-17

seo入門書籍10-16

佛教入門書籍09-19

攝影入門的書籍08-05