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

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

3、于編寫和編輯 HTML、JavaScript、服務器語言代碼以及任何其他類型代碼的手工編碼環境。“代碼和設計”視圖使您可以在單個窗口中同時看到同一文檔的“代碼”視圖和“設計”視圖。 屬性面板并不是將所有的屬性加載在面板上，而是根據我們選擇的對象來動態顯示對象的屬性屬性面板的狀態完全是隨當前在文檔中選擇的對象來確定的。例如，當前選擇了一幅圖像，那么屬性面板上就出現該圖像的相關屬性；如果選擇了表格，那么屬性面板會相應的變化成表格的相關屬性。屬性面板的界面如圖2-8所示。 “文檔窗口”的底部的狀態欄提供了與你正在創建的文檔的有關其他信息。“文檔”窗口底部的狀態欄提供與你正創建的文檔有關的其它信息。標

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

5、持的測以確定頁面有沒有目標瀏覽器不支持的tags或或CSS結構。結構。動態跨瀏覽器有效性檢測功能可以自動核對動態跨瀏覽器有效性檢測功能可以自動核對tags或或CSS規則規則是否適應目前的主瀏覽器。是否適應目前的主瀏覽器。3.使用內置的圖形編輯程序讓開發更加節省時間。圖像的剪使用內置的圖形編輯程序讓開發更加節省時間。圖像的剪切、縮放等一系列的輔助性的圖象編輯功能可以使用內嵌的切、縮放等一系列的輔助性的圖象編輯功能可以使用內嵌的Macromedia Fireworks 技術。技術。4.在設計模式下允許開發者可以不用固定的瀏覽器預覽數據，在設計模式下允許開發者可以不用固定的瀏覽器預覽數據，而利用而利

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

7、式，樣式下拉列表中內置了所有可用樣式的預覽顯示。內置了所有可用樣式的預覽顯示。 通過頁面屬性對話框（通過頁面屬性對話框（ “修改修改”菜單菜單 “頁面屬性頁面屬性” ）獲取更多改變頁面控制屬性（如標題、鏈接等）。獲取更多改變頁面控制屬性（如標題、鏈接等）。6.運用完整的集成開發環境來開發運用完整的集成開發環境來開發HTML、XHTML、XML、ASP、ASP.NET、JSP、PHP和和Macromedia Cold Fusion站點。通過站點。通過Macromedia插件中心可以獲取插件中心可以獲取800多個免費插多個免費插件來制定和擴展你的開發環境。件來制定和擴展你的開發環境。7.所有傳輸的

8、文件完全加密，并阻止越權存取你的信息、文所有傳輸的文件完全加密，并阻止越權存取你的信息、文件內容、用戶名和口令。件內容、用戶名和口令。8.從從Microsoft Word和和Excel中直接拷貝粘帖內容到中直接拷貝粘帖內容到Dreamweaver中，同時保留字體、顏色和中，同時保留字體、顏色和CSS樣式。完全樣式。完全支持支持Unicode，支持使用和，支持使用和chu存任何字體以及編碼（包括存任何字體以及編碼（包括雙字節字符）。雙字節字符）。9.使用改進后的使用改進后的ASP.NET對象和屬性檢測工具構建對象和屬性檢測工具構建Microsoft ASP.NET Web forms.10.重新

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

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

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

12、需要啟動其它的圖像處理軟工具，在編輯網頁圖片時，不需要啟動其它的圖像處理軟件，提高了工作效率。件，提高了工作效率。圖片剪切圖片剪切2.亮度的調節亮度的調節 3.銳化銳化 在在Dreamweaver中中,站點這個術語既可以是站點這個術語既可以是Web站站點點,也可以指屬于也可以指屬于Web站點的文檔在本地存儲的位置。當站點的文檔在本地存儲的位置。當開始考慮創建開始考慮創建Web站點時，為了確保站點的成功，應該按站點時，為了確保站點的成功，應該按照一系列的規劃步驟進行。即使創建個人的主頁，只有朋照一系列的規劃步驟進行。即使創建個人的主頁，只有朋友和家人看見，仔細規劃站點也是有用的。友和家人看見，仔

13、細規劃站點也是有用的。 要開發一個優秀的網站，通常應該遵循以下工作流要開發一個優秀的網站，通常應該遵循以下工作流程：首先定義開發網站的目的，作好網站的規劃工作；程：首先定義開發網站的目的，作好網站的規劃工作； 接下來對網站的外觀進行設計；然后進行實際頁面的接下來對網站的外觀進行設計；然后進行實際頁面的制作；制作； 接著再對制作的網站進行測試，以確保所做的網站符接著再對制作的網站進行測試，以確保所做的網站符合最初設計的目標；合最初設計的目標； 最后是將網站發布。發布網站后還要定期對網站進行最后是將網站發布。發布網站后還要定期對網站進行維護，以便及時更新網站內容。維護，以便及時更新網站內容。網站的

14、規劃主要包括以下內容：網站的規劃主要包括以下內容： 1.確定網站的主題和名稱確定網站的主題和名稱 網站主題是指用戶建立網站所要包含的主要內容。現在網網站主題是指用戶建立網站所要包含的主要內容。現在網站的主題很多，這一步是整個網站規劃環節最重要的。一站的主題很多，這一步是整個網站規劃環節最重要的。一般來說，確定網站主題時要遵循以下原則：般來說，確定網站主題時要遵循以下原則： 主題鮮明、小而精。一個網站必須有一個明確的主主題鮮明、小而精。一個網站必須有一個明確的主題，在主題范圍內做到內容大而全、精而深。題，在主題范圍內做到內容大而全、精而深。 主題是自己最擅長的最感興趣的。找準一個自己最主題是自己

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

16、材。 3.規劃站點規劃站點 規劃站點就像設計一座大樓一樣，只有圖紙設計好了，規劃站點就像設計一座大樓一樣，只有圖紙設計好了，才能建成一座漂亮的樓房。在規劃網站時，首先要把網站才能建成一座漂亮的樓房。在規劃網站時，首先要把網站的內容一一列舉出來，根據內容列出一個結構化的藍圖，的內容一一列舉出來，根據內容列出一個結構化的藍圖，根據實際情況設計各個頁面之間的鏈接。網站的規劃內容根據實際情況設計各個頁面之間的鏈接。網站的規劃內容有：確定網站點題材，確定網站的名稱，確定網站的框架有：確定網站點題材，確定網站的名稱，確定網站的框架等。等。 4.欄目的設置欄目的設置 合理的設計網站的欄目和板快，一般要注意以

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

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

19、主菜單等最重則是：突出重點、平衡和諧，將網站標志、主菜單等最重要的模塊放在最顯眼、最突出的位置。同時還要注意其它要的模塊放在最顯眼、最突出的位置。同時還要注意其它也面和首頁的風格一致性，要有返回首頁的鏈接。也面和首頁的風格一致性，要有返回首頁的鏈接。 8. 圖像的運用圖像的運用 網頁上不能只有文字，必須適當地增加一些圖像，使用網頁上不能只有文字，必須適當地增加一些圖像，使用圖像一般要注意以下事項：圖像一般要注意以下事項： 圖像為主頁的內容服務，不要讓整個頁面花花綠綠，圖像為主頁的內容服務，不要讓整個頁面花花綠綠，喧賓奪主。喧賓奪主。 圖像要兼顧大小美觀。圖片不僅要好看，還要在保圖像要兼顧大小美觀。圖片不僅要好看，還要在保證圖片質量的情況下盡量縮小圖片的大小。單張圖像不要證圖片質量的情況下盡量縮小圖片的大小。單張圖像不要超過超過30KB。 合理地使用合理地使用JPG和和GIF格式。一般來說，顏色格式。一般來說，顏色 較少較少的（在的（在256色以內的）圖像把它處理成色以內的）圖像把