Dreamweaver教程

1、網(wǎng)頁(yè)設(shè)計(jì)與制作教程網(wǎng)頁(yè)設(shè)計(jì)與制作教程 Dreamweaver 8.0標(biāo)準(zhǔn)工作界面大致可以分為以下幾個(gè)區(qū)域: 標(biāo)題欄: 菜單欄： 文檔工具欄： “插入”欄： 文檔窗口： 屬性欄： 狀態(tài)欄： 浮動(dòng)面板組： 文件：用來管理文件。插入：用來插入各種元素. 修改：具有對(duì)頁(yè)面元素修改的功能。 文本：用來對(duì)文本操作。命令：所有的附加命令項(xiàng) 站點(diǎn)：用來創(chuàng)建和管理站點(diǎn) 窗口：用來顯示和隱藏控制面板以及切換文檔窗口 幫助：聯(lián)機(jī)幫助功能。 “文檔”工具欄包含各種按鈕，它們提供各種“文檔”窗口視圖（如“設(shè)計(jì)”視圖和“代碼”視圖）的選項(xiàng)、各種查看選項(xiàng)和一些常用操作（如在瀏覽器中預(yù)覽）。界面如圖2-4所示。 插入面板集成

2、了所有可以在網(wǎng)頁(yè)應(yīng)用的對(duì)象包括“插入”菜單中的選項(xiàng)。有常用、布局、表單、文本、HTML、應(yīng)用程序、Flash元素和收藏夾共8個(gè)二級(jí)菜單共167個(gè)按鈕。插入面板組其實(shí)就是圖像化了的插入指令，通過一個(gè)個(gè)的按鈕，可以很容易的加入圖像、聲音、多媒體動(dòng)畫、表格。圖層、框架、表單、Flash和ActiveX等網(wǎng)頁(yè)元素。面板的界面如圖2-5所示。 “文檔”窗口顯示當(dāng)前文檔?？梢赃x擇下列任一視圖：“設(shè)計(jì)”視圖是一個(gè)用于可視化頁(yè)面布局、可視化編輯和快速應(yīng)用程序開發(fā)的設(shè)計(jì)環(huán)境。在該視圖中，Dreamweaver 8.0顯示文檔的完全可編輯的可視化表示形式，類似于在瀏覽器中查看頁(yè)面時(shí)看到的內(nèi)容。“代碼”視圖是一個(gè)用

3、于編寫和編輯 HTML、JavaScript、服務(wù)器語(yǔ)言代碼以及任何其他類型代碼的手工編碼環(huán)境?！按a和設(shè)計(jì)”視圖使您可以在單個(gè)窗口中同時(shí)看到同一文檔的“代碼”視圖和“設(shè)計(jì)”視圖。 屬性面板并不是將所有的屬性加載在面板上，而是根據(jù)我們選擇的對(duì)象來動(dòng)態(tài)顯示對(duì)象的屬性屬性面板的狀態(tài)完全是隨當(dāng)前在文檔中選擇的對(duì)象來確定的。例如，當(dāng)前選擇了一幅圖像，那么屬性面板上就出現(xiàn)該圖像的相關(guān)屬性；如果選擇了表格，那么屬性面板會(huì)相應(yīng)的變化成表格的相關(guān)屬性。屬性面板的界面如圖2-8所示。 “文檔窗口”的底部的狀態(tài)欄提供了與你正在創(chuàng)建的文檔的有關(guān)其他信息。“文檔”窗口底部的狀態(tài)欄提供與你正創(chuàng)建的文檔有關(guān)的其它信息。標(biāo)

4、簽選擇器顯示環(huán)繞當(dāng)前選定內(nèi)容的標(biāo)簽的層次結(jié)構(gòu)。單擊該層次結(jié)構(gòu)中的任何標(biāo)簽以選擇該標(biāo)簽及其全部?jī)?nèi)容。單擊 可以選擇文檔的整個(gè)正文。1.將世界一流水平的將世界一流水平的“設(shè)計(jì)設(shè)計(jì)”和和“代碼代碼”編輯器合二為一，編輯器合二為一，在設(shè)計(jì)窗口中精簡(jiǎn)源代碼，是用戶能夠按照工作的需要指定在設(shè)計(jì)窗口中精簡(jiǎn)源代碼，是用戶能夠按照工作的需要指定自己的用戶界面。自己的用戶界面。2.跨瀏覽器有效檢查當(dāng)保存時(shí)，自動(dòng)地檢查當(dāng)前文檔跨瀏覽跨瀏覽器有效檢查當(dāng)保存時(shí)，自動(dòng)地檢查當(dāng)前文檔跨瀏覽器的有效性（兼容性），可以指定測(cè)試瀏覽器，同時(shí)自動(dòng)檢器的有效性（兼容性），可以指定測(cè)試瀏覽器，同時(shí)自動(dòng)檢測(cè)以確定頁(yè)面有沒有目標(biāo)瀏覽器不支

5、持的測(cè)以確定頁(yè)面有沒有目標(biāo)瀏覽器不支持的tags或或CSS結(jié)構(gòu)。結(jié)構(gòu)。動(dòng)態(tài)跨瀏覽器有效性檢測(cè)功能可以自動(dòng)核對(duì)動(dòng)態(tài)跨瀏覽器有效性檢測(cè)功能可以自動(dòng)核對(duì)tags或或CSS規(guī)則規(guī)則是否適應(yīng)目前的主瀏覽器。是否適應(yīng)目前的主瀏覽器。3.使用內(nèi)置的圖形編輯程序讓開發(fā)更加節(jié)省時(shí)間。圖像的剪使用內(nèi)置的圖形編輯程序讓開發(fā)更加節(jié)省時(shí)間。圖像的剪切、縮放等一系列的輔助性的圖象編輯功能可以使用內(nèi)嵌的切、縮放等一系列的輔助性的圖象編輯功能可以使用內(nèi)嵌的Macromedia Fireworks 技術(shù)。技術(shù)。4.在設(shè)計(jì)模式下允許開發(fā)者可以不用固定的瀏覽器預(yù)覽數(shù)據(jù)，在設(shè)計(jì)模式下允許開發(fā)者可以不用固定的瀏覽器預(yù)覽數(shù)據(jù)，而利用而利

6、用LiveData窗口預(yù)覽實(shí)時(shí)數(shù)據(jù)窗口預(yù)覽實(shí)時(shí)數(shù)據(jù)。 5.功能更多的功能更多的CSS支持支持 在設(shè)計(jì)窗口中運(yùn)用重新設(shè)計(jì)的標(biāo)簽檢測(cè)工具來檢測(cè)哪個(gè)在設(shè)計(jì)窗口中運(yùn)用重新設(shè)計(jì)的標(biāo)簽檢測(cè)工具來檢測(cè)哪個(gè)CSS規(guī)則運(yùn)用與當(dāng)前的選擇。規(guī)則運(yùn)用與當(dāng)前的選擇。 即時(shí)編輯功能讓你在編輯即時(shí)編輯功能讓你在編輯CSS的同時(shí)能夠即時(shí)看到設(shè)計(jì)的同時(shí)能夠即時(shí)看到設(shè)計(jì)窗口中的變化。窗口中的變化。 使用增強(qiáng)的使用增強(qiáng)的CSS面板直接在代碼內(nèi)部定義樣式，并且可面板直接在代碼內(nèi)部定義樣式，并且可以直觀地看到以直觀地看到CSS樣式定義的位置。樣式定義的位置。 不必切換編輯方式直接選取不必切換編輯方式直接選取CSS樣式，樣式下拉列表中樣

7、式，樣式下拉列表中內(nèi)置了所有可用樣式的預(yù)覽顯示。內(nèi)置了所有可用樣式的預(yù)覽顯示。 通過頁(yè)面屬性對(duì)話框（通過頁(yè)面屬性對(duì)話框（ “修改修改”菜單菜單 “頁(yè)面屬性頁(yè)面屬性” ）獲取更多改變頁(yè)面控制屬性（如標(biāo)題、鏈接等）。獲取更多改變頁(yè)面控制屬性（如標(biāo)題、鏈接等）。6.運(yùn)用完整的集成開發(fā)環(huán)境來開發(fā)運(yùn)用完整的集成開發(fā)環(huán)境來開發(fā)HTML、XHTML、XML、ASP、ASP.NET、JSP、PHP和和Macromedia Cold Fusion站點(diǎn)。通過站點(diǎn)。通過Macromedia插件中心可以獲取插件中心可以獲取800多個(gè)免費(fèi)插多個(gè)免費(fèi)插件來制定和擴(kuò)展你的開發(fā)環(huán)境。件來制定和擴(kuò)展你的開發(fā)環(huán)境。7.所有傳輸?shù)?/p>

8、文件完全加密，并阻止越權(quán)存取你的信息、文所有傳輸?shù)奈募耆用?，并阻止越?quán)存取你的信息、文件內(nèi)容、用戶名和口令。件內(nèi)容、用戶名和口令。8.從從Microsoft Word和和Excel中直接拷貝粘帖內(nèi)容到中直接拷貝粘帖內(nèi)容到Dreamweaver中，同時(shí)保留字體、顏色和中，同時(shí)保留字體、顏色和CSS樣式。完全樣式。完全支持支持Unicode，支持使用和，支持使用和chu存任何字體以及編碼（包括存任何字體以及編碼（包括雙字節(jié)字符）。雙字節(jié)字符）。9.使用改進(jìn)后的使用改進(jìn)后的ASP.NET對(duì)象和屬性檢測(cè)工具構(gòu)建對(duì)象和屬性檢測(cè)工具構(gòu)建Microsoft ASP.NET Web forms.10.重新

9、編寫重新編寫PHP語(yǔ)法和服務(wù)器行為，包括語(yǔ)法和服務(wù)器行為，包括Master-Detail頁(yè)頁(yè)面設(shè)置模塊、用戶身份驗(yàn)證模塊等。面設(shè)置模塊、用戶身份驗(yàn)證模塊等。通過內(nèi)置的通過內(nèi)置的Flash構(gòu)件，導(dǎo)入一個(gè)構(gòu)件，導(dǎo)入一個(gè)Flash構(gòu)件就像標(biāo)簽一樣構(gòu)件就像標(biāo)簽一樣輕松。輕松。MXHTML構(gòu)件，利用構(gòu)件，利用MX組件（包括按鈕、模板）快速建組件（包括按鈕、模板）快速建立有效的用戶界面。立有效的用戶界面。改進(jìn)的表格編輯工具，修改的改進(jìn)的表格編輯工具，修改的Insert面板，高效的文件編面板，高效的文件編輯過程。更多有效地代碼編輯（如按右鍵彈出的編碼工具），輯過程。更多有效地代碼編輯（如按右鍵彈出的編碼工具

10、），更多的搜索選擇項(xiàng)并且能夠保存搜索條件，以及能夠迅速啟更多的搜索選擇項(xiàng)并且能夠保存搜索條件，以及能夠迅速啟動(dòng)屬性檢查工具。詳盡的屬性編輯，列出每個(gè)適用于當(dāng)前選動(dòng)屬性檢查工具。詳盡的屬性編輯，列出每個(gè)適用于當(dāng)前選擇項(xiàng)的可用屬性。擇項(xiàng)的可用屬性。 此外此外Dreamweaver 8.0還增加了圖片處理功能：圖片的還增加了圖片處理功能：圖片的亮度和對(duì)比度的調(diào)節(jié)、圖片的銳化效果等。亮度和對(duì)比度的調(diào)節(jié)、圖片的銳化效果等。 在在Dreamweaver 中插入一張圖片，中插入一張圖片，“屬性屬性”面板上就面板上就多了幾個(gè)與圖片相關(guān)的屬性圖標(biāo)。改變圖片的大小后，在多了幾個(gè)與圖片相關(guān)的屬性圖標(biāo)。改變圖片的大小

11、后，在圖片大小設(shè)置欄旁邊就多了一個(gè)帶箭頭的圖形按鈕圖標(biāo)，圖片大小設(shè)置欄旁邊就多了一個(gè)帶箭頭的圖形按鈕圖標(biāo)，這是快速使圖片還原到原始大小的工具。在切換到這是快速使圖片還原到原始大小的工具。在切換到Fireworks圖標(biāo)旁邊的一組圖表之中，也是一個(gè)這樣的圖圖標(biāo)旁邊的一組圖表之中，也是一個(gè)這樣的圖標(biāo)。標(biāo)。Dreamweaver 8.0同時(shí)還增加了同時(shí)還增加了“剪切剪切(Crop)”工工具（剪切圖片）、具（剪切圖片）、“亮度亮度/對(duì)比度對(duì)比度”調(diào)節(jié)工具、調(diào)節(jié)工具、“銳化銳化”工具等三個(gè)圖片處理的工具等三個(gè)圖片處理的 新功能。有了這些簡(jiǎn)單的圖片處理新功能。有了這些簡(jiǎn)單的圖片處理工具，在編輯網(wǎng)頁(yè)圖片時(shí)，不

12、需要啟動(dòng)其它的圖像處理軟工具，在編輯網(wǎng)頁(yè)圖片時(shí)，不需要啟動(dòng)其它的圖像處理軟件，提高了工作效率。件，提高了工作效率。圖片剪切圖片剪切2.亮度的調(diào)節(jié)亮度的調(diào)節(jié) 3.銳化銳化 在在Dreamweaver中中,站點(diǎn)這個(gè)術(shù)語(yǔ)既可以是站點(diǎn)這個(gè)術(shù)語(yǔ)既可以是Web站站點(diǎn)點(diǎn),也可以指屬于也可以指屬于Web站點(diǎn)的文檔在本地存儲(chǔ)的位置。當(dāng)站點(diǎn)的文檔在本地存儲(chǔ)的位置。當(dāng)開始考慮創(chuàng)建開始考慮創(chuàng)建Web站點(diǎn)時(shí)，為了確保站點(diǎn)的成功，應(yīng)該按站點(diǎn)時(shí)，為了確保站點(diǎn)的成功，應(yīng)該按照一系列的規(guī)劃步驟進(jìn)行。即使創(chuàng)建個(gè)人的主頁(yè)，只有朋照一系列的規(guī)劃步驟進(jìn)行。即使創(chuàng)建個(gè)人的主頁(yè)，只有朋友和家人看見，仔細(xì)規(guī)劃站點(diǎn)也是有用的。友和家人看見，仔

13、細(xì)規(guī)劃站點(diǎn)也是有用的。 要開發(fā)一個(gè)優(yōu)秀的網(wǎng)站，通常應(yīng)該遵循以下工作流要開發(fā)一個(gè)優(yōu)秀的網(wǎng)站，通常應(yīng)該遵循以下工作流程：首先定義開發(fā)網(wǎng)站的目的，作好網(wǎng)站的規(guī)劃工作；程：首先定義開發(fā)網(wǎng)站的目的，作好網(wǎng)站的規(guī)劃工作； 接下來對(duì)網(wǎng)站的外觀進(jìn)行設(shè)計(jì)；然后進(jìn)行實(shí)際頁(yè)面的接下來對(duì)網(wǎng)站的外觀進(jìn)行設(shè)計(jì)；然后進(jìn)行實(shí)際頁(yè)面的制作；制作； 接著再對(duì)制作的網(wǎng)站進(jìn)行測(cè)試，以確保所做的網(wǎng)站符接著再對(duì)制作的網(wǎng)站進(jìn)行測(cè)試，以確保所做的網(wǎng)站符合最初設(shè)計(jì)的目標(biāo)；合最初設(shè)計(jì)的目標(biāo)； 最后是將網(wǎng)站發(fā)布。發(fā)布網(wǎng)站后還要定期對(duì)網(wǎng)站進(jìn)行最后是將網(wǎng)站發(fā)布。發(fā)布網(wǎng)站后還要定期對(duì)網(wǎng)站進(jìn)行維護(hù)，以便及時(shí)更新網(wǎng)站內(nèi)容。維護(hù)，以便及時(shí)更新網(wǎng)站內(nèi)容。網(wǎng)站的

14、規(guī)劃主要包括以下內(nèi)容：網(wǎng)站的規(guī)劃主要包括以下內(nèi)容： 1.確定網(wǎng)站的主題和名稱確定網(wǎng)站的主題和名稱 網(wǎng)站主題是指用戶建立網(wǎng)站所要包含的主要內(nèi)容?，F(xiàn)在網(wǎng)網(wǎng)站主題是指用戶建立網(wǎng)站所要包含的主要內(nèi)容?，F(xiàn)在網(wǎng)站的主題很多，這一步是整個(gè)網(wǎng)站規(guī)劃環(huán)節(jié)最重要的。一站的主題很多，這一步是整個(gè)網(wǎng)站規(guī)劃環(huán)節(jié)最重要的。一般來說，確定網(wǎng)站主題時(shí)要遵循以下原則：般來說，確定網(wǎng)站主題時(shí)要遵循以下原則： 主題鮮明、小而精。一個(gè)網(wǎng)站必須有一個(gè)明確的主主題鮮明、小而精。一個(gè)網(wǎng)站必須有一個(gè)明確的主題，在主題范圍內(nèi)做到內(nèi)容大而全、精而深。題，在主題范圍內(nèi)做到內(nèi)容大而全、精而深。 主題是自己最擅長(zhǎng)的最感興趣的。找準(zhǔn)一個(gè)自己最主題是自己

15、最擅長(zhǎng)的最感興趣的。找準(zhǔn)一個(gè)自己最趕興趣的內(nèi)容做深、做透。趕興趣的內(nèi)容做深、做透。 體現(xiàn)自己的個(gè)性。把自己的興趣、愛好盡情的發(fā)揮出體現(xiàn)自己的個(gè)性。把自己的興趣、愛好盡情的發(fā)揮出來，突出自己的個(gè)性，辦出自己的特色。來，突出自己的個(gè)性，辦出自己的特色。 2.搜集資料搜集資料 確定網(wǎng)站的主題后，要圍繞主題開始搜集資料。資料確定網(wǎng)站的主題后，要圍繞主題開始搜集資料。資料既可以從圖書、報(bào)紙、光盤、多媒體上獲得，也可以從網(wǎng)既可以從圖書、報(bào)紙、光盤、多媒體上獲得，也可以從網(wǎng)上搜集；然后再把搜集的材料去粗取精，去偽存真，作為上搜集；然后再把搜集的材料去粗取精，去偽存真，作為自己制作網(wǎng)頁(yè)的素材。自己制作網(wǎng)頁(yè)的素

16、材。 3.規(guī)劃站點(diǎn)規(guī)劃站點(diǎn) 規(guī)劃站點(diǎn)就像設(shè)計(jì)一座大樓一樣，只有圖紙?jiān)O(shè)計(jì)好了，規(guī)劃站點(diǎn)就像設(shè)計(jì)一座大樓一樣，只有圖紙?jiān)O(shè)計(jì)好了，才能建成一座漂亮的樓房。在規(guī)劃網(wǎng)站時(shí)，首先要把網(wǎng)站才能建成一座漂亮的樓房。在規(guī)劃網(wǎng)站時(shí)，首先要把網(wǎng)站的內(nèi)容一一列舉出來，根據(jù)內(nèi)容列出一個(gè)結(jié)構(gòu)化的藍(lán)圖，的內(nèi)容一一列舉出來，根據(jù)內(nèi)容列出一個(gè)結(jié)構(gòu)化的藍(lán)圖，根據(jù)實(shí)際情況設(shè)計(jì)各個(gè)頁(yè)面之間的鏈接。網(wǎng)站的規(guī)劃內(nèi)容根據(jù)實(shí)際情況設(shè)計(jì)各個(gè)頁(yè)面之間的鏈接。網(wǎng)站的規(guī)劃內(nèi)容有：確定網(wǎng)站點(diǎn)題材，確定網(wǎng)站的名稱，確定網(wǎng)站的框架有：確定網(wǎng)站點(diǎn)題材，確定網(wǎng)站的名稱，確定網(wǎng)站的框架等。等。 4.欄目的設(shè)置欄目的設(shè)置 合理的設(shè)計(jì)網(wǎng)站的欄目和板快，一般要注意以

17、下事項(xiàng)：合理的設(shè)計(jì)網(wǎng)站的欄目和板快，一般要注意以下事項(xiàng)： 突出主題。把主題欄目放在最顯眼的地方，讓訪問突出主題。把主題欄目放在最顯眼的地方，讓訪問者更快、更鮮明地知道你的網(wǎng)站所要表現(xiàn)的內(nèi)容。者更快、更鮮明地知道你的網(wǎng)站所要表現(xiàn)的內(nèi)容。 設(shè)計(jì)一個(gè)設(shè)計(jì)一個(gè)“最近更新最近更新”的藍(lán)目。的藍(lán)目。 5.目錄結(jié)構(gòu)設(shè)計(jì)目錄結(jié)構(gòu)設(shè)計(jì) 目錄結(jié)構(gòu)設(shè)計(jì)一般要注意以下事項(xiàng)：目錄結(jié)構(gòu)設(shè)計(jì)一般要注意以下事項(xiàng)： 按照欄目?jī)?nèi)容建立子目錄。按照欄目?jī)?nèi)容建立子目錄。 每個(gè)目錄下分別為圖像創(chuàng)建一個(gè)目錄每個(gè)目錄下分別為圖像創(chuàng)建一個(gè)目錄image。 目錄的層次不呢感太深，最好少于目錄的層次不呢感太深，最好少于5層。層。 盡量使用意義明

18、確的非中文目錄（一般用拼音）。盡量使用意義明確的非中文目錄（一般用拼音）。 6.顏色搭配顏色搭配 合理地應(yīng)用色彩是非常關(guān)鍵的，不同的色彩搭配產(chǎn)生合理地應(yīng)用色彩是非常關(guān)鍵的，不同的色彩搭配產(chǎn)生不同的效果，并能夠影響訪問者的情緒。色彩搭配要遵循不同的效果，并能夠影響訪問者的情緒。色彩搭配要遵循和諧、均衡、重點(diǎn)突出的原則。和諧、均衡、重點(diǎn)突出的原則。 7.版面布局版面布局 網(wǎng)頁(yè)頁(yè)面的版面布局是不可忽視的。要合理地運(yùn)用空網(wǎng)頁(yè)頁(yè)面的版面布局是不可忽視的。要合理地運(yùn)用空間，使網(wǎng)頁(yè)疏密有致，井井有條。版面布局一般遵循的原間，使網(wǎng)頁(yè)疏密有致，井井有條。版面布局一般遵循的原則是：突出重點(diǎn)、平衡和諧，將網(wǎng)站標(biāo)志、

19、主菜單等最重則是：突出重點(diǎn)、平衡和諧，將網(wǎng)站標(biāo)志、主菜單等最重要的模塊放在最顯眼、最突出的位置。同時(shí)還要注意其它要的模塊放在最顯眼、最突出的位置。同時(shí)還要注意其它也面和首頁(yè)的風(fēng)格一致性，要有返回首頁(yè)的鏈接。也面和首頁(yè)的風(fēng)格一致性，要有返回首頁(yè)的鏈接。 8. 圖像的運(yùn)用圖像的運(yùn)用 網(wǎng)頁(yè)上不能只有文字，必須適當(dāng)?shù)卦黾右恍﹫D像，使用網(wǎng)頁(yè)上不能只有文字，必須適當(dāng)?shù)卦黾右恍﹫D像，使用圖像一般要注意以下事項(xiàng)：圖像一般要注意以下事項(xiàng)： 圖像為主頁(yè)的內(nèi)容服務(wù)，不要讓整個(gè)頁(yè)面花花綠綠，圖像為主頁(yè)的內(nèi)容服務(wù)，不要讓整個(gè)頁(yè)面花花綠綠，喧賓奪主。喧賓奪主。 圖像要兼顧大小美觀。圖片不僅要好看，還要在保圖像要兼顧大小美觀。圖片不僅要好看，還要在保證圖片質(zhì)量的情況下盡量縮小圖片的大小。單張圖像不要證圖片質(zhì)量的情況下盡量縮小圖片的大小。單張圖像不要超過超過30KB。 合理地使用合理地使用JPG和和GIF格式。一般來說，顏色格式。一般來說，顏色 較少較少的（在的（在256色以內(nèi)的）圖像把它處理成色以內(nèi)的）圖像把