我相信每個做網(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 包含有一個嶄新、簡潔、高效的界面,且性能也得到了改進(jìn)。此外,還包含了眾多新增的功能,改善了軟件的易用性并使您無論處于設(shè)計(jì)環(huán)境還是編碼環(huán)境都可以方 便地生成頁面。
【DW MX 2004 MX 2004 的新功能簡介】
▲簡潔高效的設(shè)計(jì)和開發(fā)界面:界面更易于使用,可使您的工作效率和工作質(zhì)量均得到提高。
▲“插入”欄的改進(jìn):簡潔高效的新外觀,占用更少的工作區(qū)空間。還新增加了一個“收藏”類別,您可以對“插入”欄進(jìn)行自定義,將最常使用的對象放置在該欄上。
▲表格編輯可視化:在表格中進(jìn)行列調(diào)整操作時能看到實(shí)際效果。
▲用戶界面改進(jìn):可得到最大的可用工作區(qū),更清晰地顯示上下文和焦點(diǎn),更易于使用和更具邏輯性。
▲起始頁:使您能夠訪問最近使用過的文件,創(chuàng)建新文件和訪問DW MX 2004資源。起始頁會在您啟動DW MX 2004 或尚未打開文檔時顯示。
▲保存桌面選項(xiàng):使您可以選擇當(dāng)您重新啟動DW MX 2004 時重新打開您上一次使用的文檔。
▲完全支持 Unicode:DW MX 2004支持 Internet Explorer所支持的所有文本編碼方式。您可以使用幾乎所有您的系統(tǒng)中安裝的語言字體,DW MX 2004 會正確地顯示和保存這些字體。
▲安全 FTP:使您能夠完全加密所有文件傳輸。
▲新式的頁面布局和設(shè)計(jì)環(huán)境。
▲增強(qiáng)的 CSS 功能:提供了一個更為精巧的方法來進(jìn)行樣式設(shè)計(jì)及提高設(shè)計(jì)交互性。
▲動態(tài)跨瀏覽器驗(yàn)證:在您保存文檔時自動檢查當(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軟件。該軟件請您自行收集下載。
最終您還需要有一個網(wǎng)絡(luò)空間。以便您的大作讓更多的人瀏覽。
dreamweaver入門(2004版本):窗口布局:
窗口布局
Dreamweaver MX 2004 提供了將全部元素置于一個窗口中的集成工作區(qū)。在集成工作區(qū)中,全部窗口和面板集成在一個應(yīng)用程序窗口中。您可以選擇面向設(shè)計(jì)人員的布局或面向手工編碼人 員需求的布局。首次啟動 Dreamweaver 時,會出現(xiàn)一個工作區(qū)設(shè)置對話框(如下圖):
您可以從中選擇一種工作區(qū)布局。如果您不熟悉編寫代碼,請您選擇“設(shè)計(jì)者”。如果您以后想更改工作區(qū),可以使用編輯菜單“首選參數(shù)”對話框切換到一種不同的工作區(qū)。編輯菜單“首選參數(shù)”對話框如下圖:
【欄目說明】
“插入”欄(如下圖):包含用于將各種類型的“對象”(如圖像、表格和層)插入到文檔中的按鈕。每個對象都是一段 HTML 代碼,允許您在插入它時設(shè)置不同的屬性。例如,您可以通過單擊“插入”欄中的“表格”按鈕插入一個表格。也可以不使用“插入”欄而使用“插入”菜單插入對 象。
“文檔”窗口 顯示您當(dāng)前創(chuàng)建和編輯的文檔。
“屬性檢查器”(如下圖): 用于查看和更改所選對象或文本的各種屬性。
“面板組”(如下圖) 是分組在某個標(biāo)題下面的相關(guān)面板的集合。若要展開一個面板組,請單擊組名稱左側(cè)的展開箭頭;若要取消?恳粋面板組,請拖動該組標(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)菜單
“命令”菜單 提供對各種命令的訪問;包括一個根據(jù)您的格式首選參數(shù)設(shè)置代碼格式的命令、一個創(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)指針滾動到一個按鈕上時,會出現(xiàn)一個工具提示,其中含有該按鈕的名稱! ∧承╊悇e具有帶彈出菜單的按鈕。從彈出菜單中選擇一個選項(xiàng)時,該選項(xiàng)將成為該按鈕的默認(rèn)操作。例如,如果從“圖像”按鈕的彈出菜單中選擇“圖像 占位符”,下次單擊“圖像”按鈕時,Dreamweaver 會插入一個圖像占位符。每當(dāng)從彈出菜單中選擇一個新選項(xiàng)時,該按鈕的默認(rèn)操作都會改變。
“插入”欄按以下的類別進(jìn)行組織:
“常用”類別使您可以創(chuàng)建和插入最常用的對象,例如圖像和表格。
“布局”類別使您可以插入表格、div 標(biāo)簽、層和框架。您還可以從三個表格視圖中進(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ù)器語言的頁面,這些類別中的每一個都提供了服務(wù)器代碼對象,您可以將這些對象插入“代碼”視圖中。
“應(yīng)用程序”類別使您可以插入動態(tài)元素,例如記錄集、重復(fù)區(qū)域以及記錄插入和更新表單。
“Flash 元素”類別使您可以插入 Flash 元素。
“收藏”類別使您可以將“插入”欄中最常用的按鈕分組和組織到某一常用位置。
文檔工具欄
文檔工具欄中包含按鈕,這些按鈕使您可以在文檔的不同視圖間快速切換:“代碼”視圖、“設(shè)計(jì)”視圖、同時顯示“代碼”和“設(shè)計(jì)”視圖的拆分視圖。
工具欄中還包含一些與查看文檔、在本地和遠(yuǎn)程站點(diǎn)間傳輸文檔有關(guān)的常用命令和選項(xiàng)! ∫韵聦x項(xiàng)進(jìn)行說明:
顯示代碼視圖 僅在“文檔”窗口中顯示“代碼”視圖。
顯示代碼視圖和設(shè)計(jì)視圖 在“文檔”窗口的一部分中顯示“代碼”視圖,而在另一部分中顯示“設(shè)計(jì)”視圖。當(dāng)選擇了這種組合視圖時,“視圖選項(xiàng)”菜單中的“在頂部查看設(shè)計(jì)視圖”選項(xiàng)變?yōu)榭捎。請使用該選項(xiàng)指定在“文檔”窗口的頂部顯示哪種視圖。
顯示設(shè)計(jì)視圖 僅在“文檔”窗口中顯示“設(shè)計(jì)”視圖。
標(biāo)題 允許您為文檔輸入一個標(biāo)題,它將顯示在瀏覽器的標(biāo)題欄中。如果文檔已經(jīng)有了一個標(biāo)題,則該標(biāo)題將顯示在該區(qū)域中。
沒有瀏覽器/檢查錯誤 使您可以檢查跨瀏覽器兼容性。
文件管理 顯示“文件管理”彈出菜單。
在瀏覽器中預(yù)覽/調(diào)試 在瀏覽器中預(yù)覽或調(diào)試文檔。從彈出菜單中選擇一個瀏覽器。
刷新設(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)容。比如:單擊 可以選擇文檔的整個正文。
窗口大小 彈出菜單(僅在“設(shè)計(jì)”視圖中可見)用來將“文檔”窗口的大小調(diào)整到預(yù)定義或自定義的尺寸。
“窗口大小”彈出菜單的右側(cè)是頁面的文檔大小和估計(jì)下載時間。
dreamweaver入門(2004版本):定義站點(diǎn):
設(shè)置站點(diǎn)
Web 站點(diǎn)是一組具有如相關(guān)主題、類似的設(shè)計(jì)、鏈接文檔和資源。Dreamweaver MX 2004 是一個站點(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ū)А钡牡谝粋界面,要求您為站點(diǎn)輸入一個名稱。
在文本框中,輸入一個名稱以在 Dreamweaver MX 2004中標(biāo)識該站點(diǎn)。該名稱可以是任何所需的名稱。
單擊“下一步”。出現(xiàn)向?qū)У南乱粋界面,詢問您是否要使用服務(wù)器技術(shù)。
選擇“否”選項(xiàng),指示目前該站點(diǎn)是一個靜態(tài)站點(diǎn),沒有動態(tài)頁。
單擊“下一步”。出現(xiàn)向?qū)У南乱粋界面,詢問您要如何使用您的文件。
選擇標(biāo)有“編輯我的計(jì)算機(jī)上的本地副本,完成后再上傳到服務(wù)器(推薦)”的選項(xiàng)。 在站點(diǎn)開發(fā)過程中有多種處理文件的方式,初學(xué)網(wǎng)頁制作的朋友請選擇此選項(xiàng)。
單擊該文本框旁邊的文件夾圖標(biāo)。 隨即會出現(xiàn)“選擇站點(diǎn)的本地根文件夾”對話框。
單擊“下一步”, 出現(xiàn)向?qū)У南乱粋界面,詢問您如何連接到遠(yuǎn)程服務(wù)器。從彈出式菜單中選擇“無”。 您可以稍后設(shè)置有關(guān)遠(yuǎn)程站點(diǎn)的信息。目前,本地站點(diǎn)信息對于開始創(chuàng)建網(wǎng)頁已經(jīng)足夠了。單擊“下一步”,該向?qū)У南乱粋屏幕將出現(xiàn),其中顯示您的設(shè)置概要。
單擊“完成”完成設(shè)置。 隨即出現(xiàn)“管理站點(diǎn)”對話框,顯示您的新站點(diǎn)。單擊“完成”關(guān)閉“管理站點(diǎn)”對話框。
現(xiàn)在,已經(jīng)為您的站點(diǎn)定義了一個本地根文件夾。下一步,可以編輯自己的網(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ū)界面(一個空白頁):
您可以在這個空白頁添加表格和輸入文本進(jìn)行編輯。如果您要向頁面添加圖片或其它元素,應(yīng)先保存這個空白頁。選擇“文件”>“另存為”,在“另存為”對話框中,瀏覽到站點(diǎn)本地根文件夾下。填入文件名,保存退出。
dreamweaver基礎(chǔ)教程:頁面的總體設(shè)置:
我們已經(jīng)描繪了小屋的藍(lán)圖,從現(xiàn)在開始,為我們的小屋添磚加瓦吧。打開01.html,制作一個圖文混排的簡單頁面。
一、頁面的總體設(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è)置標(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)移到超級鏈接的地方就會變成手型。
〖提示〗你也可以手工在鏈接輸入框中輸入地址。給圖片加上超級鏈接的方法和文字完全相同。
如果超級鏈接指向的不是一個網(wǎng)頁文件。而是其他文件例如zip、exe文件等等,單擊鏈接的時候就會下載文件。
超級鏈接也可以直接指向地址而不是一個文件,那么單擊鏈接直接跳轉(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)多個局部區(qū)域指向不同的網(wǎng)頁鏈接。比如一張中國地圖的圖片,單擊了不同的省跳轉(zhuǎn)到不同的網(wǎng)頁?牲c(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)的情況下域中總有四個選項(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ū)鏈接:使你的鏈接更靈活更有個性。
dreamweaver入門(2004版本):表格設(shè)計(jì):
表格設(shè)計(jì)
表格是現(xiàn)代網(wǎng)頁制作的一個重要組成部分。表格之所以重要是因?yàn)楸砀窨梢詫?shí)現(xiàn)網(wǎng)頁的精確排版和定位。本節(jié)教程我們分為兩步來進(jìn)行。首先看表格操作的一個實(shí)例。然后來看一些表格操作的基本方法。在開始制作表格之前,我們首先對表格的各部分的名稱做一個介紹。
一張表格橫向叫行,縱向叫列。行列交叉部分就叫做單元格。
單元格中的內(nèi)容和邊框之間的距離叫邊距。單元格和單元格之間的距離叫間距。整張表格的邊緣叫做邊框。
下面看看我們使用表格制作的頁面的實(shí)例
這幅頁面的排版格式,如果用以前我們所講的對齊方式是無法實(shí)現(xiàn)的。因此我們需要用到表格來做。實(shí)際上是用兩行兩列的表格來制作。
1、 在插入欄中選擇按鈕或“插入”菜單>選“表格”。系統(tǒng)彈出表格對話框。這些參數(shù)我們都已經(jīng)認(rèn)識了。行:2。列:2。其余的參數(shù)都保留其默認(rèn)值。。
2、 在編輯視圖界面中生成了一個表格。表格右、下及右下角的黑色點(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)每個字回車一次。如果需要調(diào)整格子的大小。只需要鼠標(biāo)的光標(biāo)移動到邊框上拖拽即可。
6、 在右邊上下單元格內(nèi)分別插入圖片和文本。頁面的基本樣子有了。
7、 光標(biāo)移動到表格的邊框上單擊。表格周圍出現(xiàn)調(diào)整框,表示選中整張表格。然后,在屬性面板中將“邊框”值設(shè)置適合的值,如果為0,邊框在編輯狀態(tài),為虛線顯示,瀏覽時就看不見了。
一個符合要求的頁面在表格的幫助下做好了。
通過上面的操作我們對于表格有了一個初步的認(rèn)識。還要提示一點(diǎn),對整幅表格操作和對一個單元格操作的時候,相應(yīng)的屬性面板是不同的。
表格顏色設(shè)置,選擇整幅表格后,利用屬性面板的顏色選擇器設(shè)置背景色。單元格也可單獨(dú)設(shè)置。鼠標(biāo)在需要設(shè)置的單元格點(diǎn)一下,其余操作同上。
下面我們就來看看這些屬性面板的區(qū)別。
表格的屬性面板,要出現(xiàn)這個面板必須先選中整幅表格,方法上面已經(jīng)提到過了。您可以在眾多選項(xiàng)中填入需要的參數(shù)。
選中了單元格之后屬性面板就發(fā)生如下變化了。選擇行或者列都屬于選中單元格。
對表格操作的幾種常用方式:
合并:將選中的連續(xù)單元格合并成為一個單元格。
分割:將一個單元格分割成若干單元格。
水平對齊方式:分為(左)(中)(右)三種。
垂直對齊方式:分為(頂)(居中)(居底)(基線對齊)
表格還可以增加或者刪除行或者列。在一個單元格中單擊鼠標(biāo)右鍵。在右鍵菜單中選擇表格選項(xiàng)>>選擇“插入行或列”。系統(tǒng)會彈出對話框如下。
在對話框里填入數(shù)據(jù)即可。最后要說的是選中表格中的各種元素的方法:
選中一行,把光標(biāo)移到該行的最左邊單元格的左面,光標(biāo)會變成箭頭狀。單擊就可以選中一行。
選中一列,把光標(biāo)移到該列的最上邊單元格的上面,光標(biāo)會變成箭頭狀,然后單擊可以選中一列。
選中整張表格,把光標(biāo)移到表格的左上角或右邊框或下邊框線上。單擊即可選中整幅表格。選中的表格會在周圍出現(xiàn)一個黑框表示整張表格選中了。
選中單元格。單元格可以同時選中多個。選擇連續(xù)的單元格,光標(biāo)先選中的一個單元格,按shift鍵不放,選取最后一個單元格。選不連續(xù)的單元格。按住Ctrl鍵,點(diǎn)取所需要的單元格即可。
我們對于表格的使用就講到這里,表格是網(wǎng)頁制作的基本技術(shù),只有通過不斷實(shí)踐才能充分掌握。
dreamweaver入門(2004版本):框架技術(shù):
框架技術(shù)
在瀏覽網(wǎng)頁的時候,我們常常會遇到這樣的一種導(dǎo)航結(jié)構(gòu)。就是超級連接做在左邊單擊以后鏈接的目標(biāo)出現(xiàn)在右面;蛘咴谏线厗螕翩溄又赶虻哪繕(biāo)頁面出現(xiàn)在下面。要做出這樣的效果,必須使用框架。為了更好的理解什么是框架。我們畫一張示意圖來進(jìn)行討論。
這是一個左右結(jié)構(gòu)的框架。事實(shí)上這樣的一個結(jié)構(gòu)是由三個網(wǎng)頁文件組成的。首先外部的框架是一個文件,圖中我們用index.htm命名?蚣苤凶筮吤麨锳,指向的是一個網(wǎng)頁A.htm。右邊命名為B,指向的是一個網(wǎng)頁B.htm。
下面我們就來從頭開始制作一個框架。(以左右框架結(jié)構(gòu)為例)
1、點(diǎn)“文件”菜單>新建,彈出“新建文檔”
或在插入欄>布局>選"框架:左框架"
Dreamweaver MX 2004生成一個空白的框架頁面,
2、選擇「窗口」菜單>“框架”,彈出“框架”面板。從框架面板可知,系統(tǒng)對左右框架生成命名。左框架名為:leftFrame,右框架名為:mainFrame,當(dāng)然您可以通過框架屬性面板對框架重新命名,了解這一點(diǎn)非常重要。創(chuàng)建超級鏈接時,要依據(jù)它正確控制指向的頁面。
3、保存框架。選擇“文件”菜單點(diǎn)擊“保存全部”。系統(tǒng)彈出對話框。這時,保存的是一個框架結(jié)構(gòu)文件。我們按照慣例都命名為index.htm。
保存的時候如果虛線框籠罩的是周圍一圈就是保存框架結(jié)構(gòu)。
虛線籠罩在右邊就是保存框架中右邊網(wǎng)頁。
虛線籠罩在左邊就是保存框架中左邊的網(wǎng)頁:
三個頁面保存完畢。
4、下面我們要實(shí)現(xiàn)按左邊的超級鏈接,對應(yīng)的頁面出現(xiàn)在右邊。在左邊的頁面中做上超級鏈接。指向一個已經(jīng)存在的頁面。注意做好鏈接以后,要在目標(biāo)欄中設(shè)置為mainFrame。
6、設(shè)置完畢,保存全部,按F12預(yù)覽網(wǎng)頁。鏈接指向的頁面出現(xiàn)在右邊框架中。
7、重復(fù)以上步驟,把左框架所有的鏈接做完,一個簡單的網(wǎng)站導(dǎo)航結(jié)構(gòu)創(chuàng)建完成。
框架有很多優(yōu)點(diǎn),但是若理解不很透徹,容易搞混。如果您的網(wǎng)站頁面不多,可以創(chuàng)建一個不使用框架的Web頁面來完成框架的功能。例如,如果您想讓導(dǎo)航條顯示在頁面的左側(cè)或頂部,既可以使用框架頁面,也可以在每一頁包含該導(dǎo)航條而不使用框架。
[dreamweaver入門基礎(chǔ)]