第2篇 靜態網頁制作篇

第3章 快速掌握Dreamweaver CS5設計基本網頁

本章導讀

Dreamweaver CS5提供了更加完善的網頁編輯功能，并在管理站點方面有了很大的改善。它提供了非常完善的站點管理機制，創建完Dreamweaver站點以后，就可以輕松地創建和管理站點中的文件或文件夾。文本是網頁中最重要的元素，是網頁的主體，負責傳達信息。雖然利用多媒體的影音效果也可以達到同樣的目的，但是網頁文字的優勢很難被取代。Dreamweaver提供了強大的文本處理和網頁設計功能，可以很容易地運用文本設計網頁。

內容要點

◎ 熟悉Dreamweaver CS5

◎ Dreamweaver CS5的工作界面

◎ 創建和管理站點

◎ 掌握插入文本

◎ 掌握使用列表

◎ 掌握在網頁中插入文件頭部內容

◎ 插入日期

◎ 插入水平線

◎ 創建本地站點實例

◎ 創建基本文本網頁實例

學習流程

3.1 Dreamweaver CS5簡述

Dreamweaver CS5是一款專業的HTML編輯器，用于對Web站點、Web頁和Web應用程序進行設計、編碼和開發。無論直接編寫HTML代碼的駕馭感還是偏愛在可視化編輯環境中工作，Dreamweaver都會提供幫助良多的工具，豐富你的Web創作體驗。Dreamweaver的設計和整合功能以CSS為基礎，強大而穩定，可幫助設計和開發人員輕松地創建并管理任何站點。

利用Dreamweaver中的可視化編輯功能，可以快速創建Web頁面而無須編寫任何代碼。可以查看所有站點元素或資源，并將它們從易于使用的面板直接拖到文檔中。可以在Fireworks或其他圖形應用程序中創建和編輯圖像，然后將它們直接導入Dreamweaver，從而優化開發工作流程。Dreamweaver還提供了其他工具，可以簡化向Web頁中添加Flash資源的過程。

為迎合現代網站的開發要求，Dreamweaver在動態網站建設的功能上做了很大的改進。在界面功能的設計方面，Dreamweaver對使用方便性也做了相當大的調整，給用戶耳目一新的感覺。

若要從使用Dreamweaver CS5的經驗中最大程度地獲益，應了解Dreamweaver工作區背后的基本概念，并且了解如何選擇選項、如何使用檢查器和面板，以及如何設置最適合工作風格的首選參數。Dreamweaver CS5的工作界面如圖3-1所示，包括菜單欄、文檔工具欄、文檔窗口、屬性面板和面板組。

3.2 Dreamweaver CS5的工作界面

Dreamweaver CS5是Dreamweaver CS4的升級版本，較前一版本在界面和功能上都有較大幅度的改進，尤其是在編輯窗口方面有了很大的改變，下面就來認識它的工作界面。

3.2.1 菜單欄

標題欄下方顯示的是菜單欄，它包括“文件”、“編輯”、“查看”、“插入”、“修改”、“格式” “命令”、“站點”、“窗口”和“幫助”10個菜單項，如圖3-2所示。

● 文件：用來管理文件，包括創建和保存、導入與導出、預覽和打印文件等。

● 編輯：用來編輯文本，包括撤銷與恢復、復制與粘貼、查找與替換、首選參數設置和快捷鍵設置等。

● 查看：用來查看對象，包括代碼的查看、網格線與標尺的顯示、面板的隱藏及工具欄的顯示等。

● 插入：用來插入網頁元素，包括插入圖像、多媒體、AP Div、框架、表格、表單、電子郵件鏈接、日期、特殊字符及標簽等。

● 修改：用來實現對頁面元素修改的功能，包括頁面元素、面板、快速標簽編輯器、鏈接、表格、框架、導航條、對象的對齊方式、層與表格的轉換、模板、庫及時間軸等。

● 格式：用來對文本進行操作，包括字體、字形、字號、字體顏色、HTML/CSS樣式、段落格式化、擴展、縮進、列表、文本的對齊方式和檢查拼寫等。

● 命令：收集了所有的附加命令項，包括應用記錄、編輯命令清單、獲得更多命令、插件管理器、應用源代碼格式、清除HTML/Word HTML、設置配色方案、格式化表格、表格排序等。

● 站點：用來創建與管理站點，包括站點顯示方式、新建、打開與自定義站點、上傳與下載、登記與驗證、查看鏈接和查找本地/遠程站點等。

● 窗口：用來打開與切換所有的面板和窗口，包括插入欄、“屬性”面板、站點窗口、CSS面板等。

● 幫助：內含Dreamweaver聯機幫助、注冊服務、技術支持中心和Dreamweaver的版本說明。

3.2.2 插入欄

插入欄包含用于創建和插入對象的按鈕。當鼠標移到一個按鈕上時，會出現一個工具提示，其中含有該按鈕的名稱。單擊該按鈕即可插入相應的元素，如圖3-3所示。

3.2.3 浮動面板

Dreamweaver中的面板被組織到面板組中，每個面板組都可以展開折疊，并且可以和其他面板組停靠在一起或取消停靠。面板組還可以停靠到集成的應用程序窗口中，這使得用戶能夠很容易地訪問所需的面板，如圖3-4所示。

3.2.4 “屬性”面板

“屬性”面板顯示了文檔窗口中所選中元素的屬性，并允許用戶在“屬性”面板中對元素屬性直接進行修改，選中的元素不同“屬性”面板中的內容也不同。

在“屬性”面板右側有一個三角形標記，單擊該標記可以展開屬性面板，將出現更多的擴展性，顯示較多的屬性設置內容。當展開“屬性”面板時，右下角的三角標記變為指向上方的箭頭，單擊該標記又可以重新折疊“屬性”面板，恢復原先的樣式，如圖3-5所示。

3.2.5 文檔窗口

文檔窗口如圖3-6 所示，顯示當前創建和編輯的網頁文檔。可以在設計視圖、代碼視圖、拆分視圖和實時視圖中分別查看文檔。

● 設計視圖：一個用于可視化頁面布局、可視化編輯和快速應用程序開發的設計環境。

● 代碼視圖：一個用于編寫和編輯HTML、JavaScript、服務器語言代碼的手工編碼環境。

● 拆分視圖：可以在一個窗口中同時看到同一文檔的代碼視圖和設計視圖。

● 實時視圖：與設計視圖類似，實時視圖更逼真地顯示文檔在瀏覽器中的表示形式。

3.3創建和管理站點

在制作網頁前，應該先在本地創建一個網站，用以實現整個站點。這是為了更好地利用站點對文件進行管理，也可以盡可能地減少錯誤，如路徑出錯、鏈接出錯等。新手做網頁，條理性、結構性需要加強，往往一個文件放這里，另一個文件放那里，或者所有文件都放在同一文件夾內，這樣顯得很亂。建議建立一個文件夾用于存放網站的所有文件，再在文件內建立幾個文件夾，將文件分類，如圖片文件放在images文件夾內，HTML文件放在根目錄下。如果站點比較大，文件比較多，可以先按欄目分類，在欄目里再分類。站點制作完畢后，通過測試，確保網站沒有斷鏈或其他問題的情況下，就可以上傳網站了。

3.3.1 上機練習——創建本地站點

站點是存放和管理網站所有文件的地方，每個網站都有自己的站點。在使用Dreamweaver創建網站前，必須創建一個本地站點，以便更好地創建網頁和管理網頁文件。創建本地站點的具體操作步驟如下。

（1）啟動Dreamweaver，執行“站點”|“管理站點”命令，彈出“管理站點”對話框，在對話框中單擊“新建”按鈕，如圖3-7所示。

（2）彈出“站點設置對象”對話框，在對話框中選擇“站點”選項，在“站點名稱”文本框中輸入名稱，可以根據網站的需要任意起一個名字，如圖3-8所示。

（3）單擊“本地站點文件夾”文本框右側的瀏覽文件夾按鈕，彈出“選擇根文件夾”對話框，選擇站點文件，如圖3-9所示。

（4）單擊“選擇”按鈕，選擇站點文件后如圖3-10所示。

（5）單擊“保存”按鈕，更新站點緩存，如圖3-11所示。

（6）彈出“管理站點”對話框，其中顯示了新建的站點，如圖3-12所示。

（7）單擊“完成”按鈕，此時在“文件”面板中可以看到創建的站點文件，如圖3-13所示。

3.3.2 上機練習——管理本地站點

利用站點窗口，可以對本地站點進行創建、刪除、移動和復制等操作。

1.打開站點

當運行Dreamweaver CS5后，系統會自動打開上次退出Dreamweaver CS5時正在編輯的站點。如果想打開另外一個站點，在文檔窗口右邊的“文件”面板中左邊的下拉列表中將會顯示已定義的所有站點，如圖3-14所示。在列表中選擇需要打開的站點，即可打開已定義的站點。

2.編輯站點

在創建站點以后，可以對站點進行編輯，具體操作步驟如下。

（1）執行“站點”|“管理站點”命令，彈出“管理站點”對話框，在對話框中單擊“編輯”按鈕，如圖3-15所示。

（2）彈出“站點設置對象效果”對話框，在“高級設置”選項組中可以編輯站點的相關信息，如圖3-16所示。

（3）編輯完畢后，單擊“確定”按鈕，返回到“管理站點”對話框，單擊“完成”按鈕，即可完成站點的編輯。

3.刪除站點

如果不再需要站點，可以將其從站點列表中刪除，刪除站點的具體操作步驟如下。

（1）執行“站點”|“管理站點”命令，彈出“管理站點”對話框，在對話框中單擊“刪除”按鈕，如圖3-17所示。

（2）系統彈出提示對話框，詢問用戶是否要刪除本地站點，如圖3-18所示。單擊“是”按鈕，即可將本地站點刪除。

4.復制站點

有時候希望創建多個結構相同或類似的站點，可以利用站點的復制功能，復制站點的具體操作步驟如下。

（1）執行“站點”|“管理站點”命令，彈出“管理站點”對話框，在對話框中單擊“復制”按鈕，即可將該站點復制，新復制出的站點名稱會出現在“管理站點”對話框的站點列表中，如圖3-19所示。

（2）在“管理站點”對話框中單擊“完成”按鈕，完成對站點的復制。

3.4 插入文本

文本處理是整個網頁設計中最簡單、最容易的一部分，學習網頁設計也應該從基本的文本處理開始。只有將文本內容處理好，才能使網頁更加美觀易讀，使訪問者在瀏覽時賞心悅目，激發瀏覽的興趣。在文檔窗口中首先將光標定位在要添加文本的位置，然后輸入文本即可，也可以將其他應用程序中的文本復制到相應的位置。

3.4.1 上機練習——插入普通文本

下面通過實例講述如何在網頁中輸入文字，效果如圖3-20所示，具體操作步驟如下。

CD-ROM/實例素材/練習文件/03/3.4.1/index.htm

CD-ROM/實例素材/完成文件/03/3.4.1/index1.htm

（1）打開網頁文檔，如圖3-21所示。

（2）將光標置于要輸入文本的位置，輸入文本，如圖3-22所示。

（3）保存文檔，按【F12】鍵在瀏覽器中預覽，效果如圖3-20所示。

3.4.2 設置文本屬性

網頁中的文本有許多不同的表現形式，這是通過編輯文本實現的。在Dreamweaver CS5中的文本“屬性”面板中，可以設置文本的各項屬性。如設置字符格式、字體、文本大小、文本顏色和段落格式等。

1. 設置字體

在“字體”下拉列表中可以設置所選的文本字體，默認情況下字體是“宋體”。

（1）選中要設置屬性的文字，在“屬性”面板中的“字體”下拉列表中選擇“編輯字體列表”選項，彈出“編輯字體列表”對話框，如圖3-23所示。

（2）在對話框中的“可用字體”列表框中選擇“宋體”，單擊按鈕，添加到“選擇的字體”列表框中，如圖3-24所示。

2.設置文字大小

選擇一種合適的字號，是決定網頁美觀、布局合理的關鍵。在設置網頁時，應對文本設置相應的字號，具體操作步驟如下。

（1）選中要設置字號的文本，在“屬性”面板中的“大小”下拉列表中選擇字號的大小，或者直接在文本框中輸入相應大小的字號，如圖3-25所示。

（2）彈出“新建CSS規則”對話框，在對話框中的“選擇器類型”中選擇“類”，在“選擇器名稱”中輸入名稱，在“規則定義”中選擇“僅限該文檔”，如圖3-26 所示。單擊“確定”按鈕，完成字號的設置。

3.4.3 上機練習——插入特殊字符

特殊字符包括換行符、不換行空格、版權信息、注冊商標等，這些都是網頁中經常用到的特殊符號，當在網頁中插入特殊符號時，在代碼視圖中顯示的是特殊字符的源代碼，在設計視圖中顯示的則是一個標志。

下面通過實例講述如何在網頁中插入特殊字符，效果如圖3-27所示，具體操作步驟如下。

CD-ROM/實例素材/練習文件/03/3.4.3/index.htm

CD-ROM/實例素材/完成文件/03/3.4.3/index1.htm

（1）打開網頁文檔，如圖3-28所示。

（2）將光標置于要插入特殊符號的位置，執行“插入”|“HTML”|“特殊字符”|“版權”命令，如圖3-29所示。

（3）選擇命令后，即可插入版權字符，如圖3-30所示。

（4）保存文檔，按【F12】鍵在瀏覽器中預覽，效果如圖3-27所示。

3.5 使用列表

為了更有效地排列網頁上的文字，常用設置列表的方式來呈現多行文字。列表分為項目列表和編號列表兩種，項目列表可以排列一組沒有順序的文本，而編號列表將以數字編號排列一組有順序的文本。

3.5.1 插入項目列表

項目列表中各個項目之間沒有順序級別之分，通常使用一個項目符號作為每條列表項的前綴。插入項目列表的具體操作步驟如下。

（1）打開網頁文檔，選中文本，執行“格式”|“列表”|“項目列表”命令，如圖3-31所示。

（2）選擇命令后，即可插入項目列表，如圖3-32所示。

3.5.2 插入編號列表

編號列表通常使用阿拉伯數字、英文字母、羅馬數字等符號來編排項目，各個項目之間通常有一種先后關系。

打開網頁文檔，選中文本，執行“格式”|“列表” | “編號列表”命令，插入編號列表，如圖3-33所示。

3.6 在網頁中插入文件頭部內容

文件頭標簽也就是通常說的META標簽，文件頭標簽在網頁中是看不到的，它包含在網頁中<head>...</head>標簽之間。所有包含在該標簽之間的內容在網頁中都是不可見的。

文件頭標簽主要包括標題、META、關鍵字、說明、刷新、基礎和鏈接，下面介紹常用的文件頭標簽的使用。

3.6.1 插入META信息

META對象常用于插入一些為Web服務器提供選項的標記符，方法是通過http-equiv屬性和其他各種在Web頁面中包括的、不會使瀏覽者看到的數據。設置META的具體操作步驟如下。

（1）執行“插入”|“HTML”|“文件頭標簽”|“META”命令，彈出“META”對話框，如圖3-34所示。

在“META”對話框對話框中主要有以下設置：

● 在“屬性”下拉列表中可以選擇“名稱”或“http-equiv”選項，指定META標簽是否包含有關頁面的描述信息或HTTP標題信息。

● 在“值”文本框中指定在該標簽中提供的信息類型。

● 在“內容”文本框中輸入實際的信息。

（2）設置完畢后，單擊“確定”按鈕即可。

3.6.2 設置基礎

“基礎”定義了文檔的基本URL地址，在文檔中，所有相對地址形式的URL都是相對于這個URL地址而言的。設置基礎元素的具體操作步驟如下。

（1）執行“插入”|“HTML”|“文件頭標簽”|“基礎”命令，彈出“基礎”對話框，如圖3-35所示。

在“基礎”對話框中可以設置以下參數。

● HREF：基礎URL。單擊文本框右側的“瀏覽”按鈕，在彈出的對話框中選擇一個文件，或在文本框中直接輸入路徑。

● 目標：在其下拉列表中選擇打開鏈接文檔的框架集。這里共包括以下4個選項。

空白：將鏈接的文檔載入一個新的、未命名的瀏覽器窗口。

父：將鏈接的文檔載入包含該鏈接的框架的父框架集或窗口。如果包含鏈接的框架沒有嵌套，則相當于_top，鏈接的文檔將被載入整個瀏覽器窗口。

自身：將鏈接的文檔載入鏈接所在的同一框架或窗口。此目標是默認的，所以通常不需要指定它。

頂部：將鏈接的文檔載入整個瀏覽器窗口，從而刪除所有框架。

（2）在對話框中進行相應的設置，單擊“確定”按鈕，設置基礎。

3.6.3 插入關鍵字

關鍵字也就是與網頁的主題內容相關的簡短而有代表性的詞匯，這是給網絡中的搜索引擎準備的。關鍵字一般要盡可能地概括網頁內容，這樣瀏覽者只要輸入很少的關鍵字，就能最大程度地搜索網頁。插入關鍵字的具體操作步驟如下。

（1）執行“插入”|“HTML”|“文件頭標簽”|“關鍵字”命令，彈出“關鍵字”對話框，如圖3-36所示。

（2）在“關鍵字”文本框中輸入一些值，單擊“確定”按鈕即可。

3.6.4 插入說明文字

插入說明的具體操作步驟如下。

（1）執行“插入”|“HTML”|“文件頭標簽”|“說明”命令，彈出“說明”對話框，如圖3-37所示。

（2）在“說明”文本框中輸入一些值，單擊“確定”按鈕即可。

3.6.5 設置刷新

設置網頁的自動刷新特性，使其在瀏覽器中顯示時，每隔一段指定的時間，就跳轉到某個頁面或是刷新自身。插入刷新的具體操作步驟如下。

（1）執行“插入”|“HTML”|“文件頭標簽”|“刷新”命令，彈出“刷新”對話框，如圖3-38所示。

在“刷新”對話框中可以進行以下設置。

● 在“延遲”文本框中輸入刷新文檔要等待的時間。

● 在“操作”區域中，可以選擇重新下載頁面的地址。選擇“轉到URL”單選按鈕時，單擊文本框右側的“瀏覽”按鈕，在彈出的“選擇文件”對話框中選擇要重新下載的Web頁面文件。選擇“刷新此文檔”單選按鈕時，將重新下載當前的頁面。

（2）設置完畢后，單擊“確定”按鈕即可。

3.7 插入其他對象

在網頁中除了插入文本外，還可以插入時間和水平線等其他的對象。

3.7.1 上機練習——插入日期

當需要在網頁的指定位置插入準確的日期資料時，可以執行“插入”|“日期”命令來實現。添加日期的好處是：既可以選用不同日期格式，規范而準確地表達日期，同時該命令還可以設置自動更新，讓網頁顯示當前最新的日期和時間。

CD-ROM/實例素材/練習文件/03/3.7.1/index.htm

CD-ROM/實例素材/完成文件/03/3.7.1/index1.htm

下面通過實例講述如何在網頁中插入日期，效果如圖3-39所示，具體操作步驟如下。

（1）打開練習網頁文檔，如圖3-40所示。

（2）將光標置于要插入日期的位置，執行“插入”|“日期”命令，如圖3-41所示。

（3）選擇命令后，彈出“插入日期”對話框，在對話框中的“星期格式”下拉列表中選擇“星期四”，在“日期格式”列表框中選擇“1974年3月7日”，在“時間格式”文本框中輸入“22:18”，勾選“儲存時自動更新”復選框，如圖3-42所示。

（4）單擊“確定”按鈕，插入日期，將“對齊”設置為右對齊，如圖3-43所示。

（5）保存文檔，按【F12】鍵在瀏覽器中預覽，效果如圖3-39所示。

3.7.2 上機練習——插入水平線

很多網頁在其下方會顯示一條水平線，以分割網頁主題內容和底端的版權聲明等，根據設計的需要，也可以在網頁任意位置加入水平線，達到區分網頁中不同內容的目的。

下面通過實例講解如何在網頁中插入水平線，效果如圖3-44所示，具體操作步驟如下。

CD-ROM/實例素材/練習文件/03/3.7.2/index.htm

CD-ROM/實例素材/完成文件/03/3.7.2/index1.htm

（1）打開網頁文檔，如圖3-45所示。

（2）將光標置于要插入水平線的位置，執行“插入”|“HTML”|“水平線”命令，如圖3-46所示。

（3）選擇命令后，即可插入水平線，如圖3-47所示。

（4）選中插入的水平線，執行“窗口”|“屬性”命令，打開“屬性”面板，可以設置水平線的屬性，如圖3-48所示。

水平線“屬性”面板中主要有以下參數。

● 寬：在其文本框中輸入水平線的寬度值，默認單位是像素，也可以選擇百分比。

● 高：在其文本框中輸入水平線的高度值，它的單位只能是像素。

● 對齊：在其下拉列表中包括4種對齊方式，分別是“默認”、“左對齊”、“居中對齊”和“右對齊”，表示水平線在表格內的不同對齊方式，可根據需要進行選擇。

● 陰影：勾選此復選框，則水平線將產生陰影效果。

（5）選中插入的水平線，打開代碼視圖，在代碼視圖中輸入color="#FFCC99"，設置水平線的顏色，如圖3-49所示。

（6）保存文檔，按【F12】鍵在瀏覽器中預覽，效果如圖3-44所示。

3.8 實例精講

本章主要講述了基本文本網頁的創建，創建站點、輸入文本、設置文本格式、創建項目列表和編號列表、設置頭信息等，下面通過兩個實例鞏固一下本章所學知識。

實例1——創建本地站點實例

站點是存放和管理網站中所有文件的地方，每個網站都有自己的站點。在使用Dreamweaver創建網站前，必須創建一個本地站點，以便更好地創建網頁和管理網頁文件。創建本地站點的具體操作步驟如下。

（1）啟動Dreamweaver，執行“站點”|“管理站點”命令，彈出“管理站點”對話框，在對話框中單擊“新建”按鈕，如圖3-50所示。

（2）彈出“站點設置對象”對話框，在對話框中選擇“站點”選項，在“站點名稱”文本框中輸入名稱，可以根據網站的需要任意起一個名字，如圖3-51所示。

（3）單擊“本地站點文件夾”文本框右側的瀏覽文件夾按鈕，彈出“選擇根文件夾”對話框，選擇站點文件，如圖3-52所示。

（4）單擊“選擇”按鈕，選擇站點文件后如圖3-53所示。

（5）單擊“保存”按鈕，更新站點緩存，如圖3-54所示。

（6）彈出“管理站點”對話框，其中顯示了新建的站點，如圖3-55所示。

（7）單擊“完成”按鈕，在“文件”面板中可以看到創建的站點文件，如圖3-56所示。

實例2——創建基本文本網頁實例

本章主要講述了創建網頁文本的基本知識，下面通過實例講解如何創建圖3-57所示的基本文本網頁的效果，具體操作步驟如下。

CD-ROM/實例素材/練習文件/03/3.8.2/index.htm

CD-ROM/實例素材/完成文件/03/3.8.2/index1.htm

（1）打開網頁文檔，如圖3-58所示。

（2）將光標置于相應的位置，輸入文字，如圖3-59所示。

（3）將光標置于文字開頭，按住鼠標的左鍵向下拖動至文字結尾，選中所有的文字，如圖3-60所示。

（4）打開“屬性”面板，單擊“字體”右邊的下拉列表，彈出“新建CSS規則”對話框，在對話框的“選擇器名稱”中輸入名稱，如圖3-61所示。

（5）單擊“確定”按鈕，設置字體，如圖3-62所示。

（6）在“大小”下拉列表中選擇合適的字體大小，如圖3-63所示。

（7）單擊“顏色”按鈕，在彈出的顏色列表中選擇字體的顏色，如圖3-64所示。

（8）單擊“保存”按鈕，保存文檔，按【F12】鍵在瀏覽器中預覽，效果如圖3-57所示。