本文章介紹如何在 macromedia dreamweaver 8 中創建基于表格的頁面布局。頁面布局將確定您的頁面在瀏覽器中會如何顯示，例如，顯示菜單、圖像和 macromedia flash 內容將如何放置。表格是用于在 html 頁上顯示表格式數據以及對文本和圖形進行布局的強有力的工具。您可以使用表格快速輕松地創建布局。在本教程中，您將在一個新的 dreamweaver 文檔中創建若干表格。這些表格的行和單元格實際上用作您將在以后添加的內容的"容器框"。

　　檢查設計草樣

　　通常，創建 web 站點并不是以打開 dreamweaver 并立即對頁面進行布局開始的。創建 web 站點的初始工作從紙張或圖形編輯應用程序(如 macromedia fireworks)開始。圖形設計人員通常會畫出 web 站點綜合圖形的草圖(也稱為"草樣")，以便向客戶展示并確保站點的初始構思能讓客戶滿足。

　　設計草樣由客戶要求其 web 站點具有的任意數目的頁面元素組成。例如，客戶可能會提出:"頁面頂端要有徽標，要有能鏈接到其它頁面的導航功能，有用于聯機存儲的部分和可以插入視頻剪輯的位置。"根據這些討論，設計人員開始對站點布局進行規劃，并制作滿足客戶要求的示例頁面草圖。

　　本教程向您提供為 cafe townsend(一個需要制作 web 站點的虛構餐館)設計的、完整的和符合要求的設計草樣。作為 web 設計人員，您需要對草樣進行轉換，使之最終形成可以使用的 web 頁面(通常需要其他圖形設計人員與 flash 開發人員的幫助)。

　　您可以看到，圖形設計人員已經向您提供了 web 頁面設計草樣，其中包括一些內容區域和圖形方案。在下面的部分，您將使用 dreamweaver 展示此設計。

　　您也可以打開原始草樣文件以便在計算機屏幕上查看該設計草樣。可以在 cafe_townsend 文件夾(在教程:設置站點和項目文件中已將該文件夾復制到了硬盤上)的 fireworks_assets 文件夾中找到設計草樣 homepage-mockup.jpg。在創建頁面時，還可以打印草樣以便隨時查看。

　　創建并保存新頁面

　　建立站點并檢查設計草樣后，您就可以開始創建 web 頁面了。首先您將創建一個新頁面，并將它保存到您的 web 站點的本地根文件夾 cafe_townsend 中。該頁面最終將成為虛構餐館 cafe townsend 的主頁。

　　假如您尚未創建本地根文件夾 cafe_townsend，則必須先完成創建，然后再繼續。

　　在 dreamweaver 中，選擇"文件">"新建"。

　　在"新建文檔"對話框的"常規"選項卡上，從"類別"列表中選擇"基本頁"，從"基本頁"列表中選擇"html"，然后單擊"創建"。

　　選擇"文件">"另存為"。

　　在"另存為"對話框中，瀏覽至定義為站點的本地根文件夾的 cafe_townsend 文件夾并打開該文件夾。

　　在教程:設置站點和項目文件中，您在名為 local_sites 的文件夾中創建了此文件夾。

　　在"文件名"文本框中輸入 index.html，然后單擊"保存"。

　　文件名即出現在應用程序窗口頂部的標題欄中。

　　在新文檔頂部的"文檔標題"文本框中，鍵入 cafe townsend。

　　這就是頁面的標題(與文件名不同)。站點訪問者在 web 瀏覽器中查看頁面時將在瀏覽器窗口的標題欄中看到此標題。

　　選擇"文件">"保存"來保存該頁面。

　　插入表格

　　接下來，您將添加一個表格，用于放置文本、圖形和 macromedia flash 資源。

　　在頁面上單擊一次，在頁面左上角放置插入點。|||

　　選擇"插入">"表格"。

　　在"插入表格"對話框中，執行下面的操作:

　　在"行數"文本框中，輸入 3。

　　在"列數"文本框中，輸入 1。

　　在"表格寬度"文本框中，輸入 700。

　　在"表格寬度"彈出式菜單中，選擇"像素"。

　　在"邊框粗細"文本框中，輸入 0。

　　在"單元格邊距"文本框中，輸入 0。

　　在"單元格間距"文本框中，輸入 0。

　　單擊"確定"。

　　一個三行一列的表格即出現在文檔中。該表格的寬度為 700 像素，邊框、單元格邊距和單元格間距均為 0。

　　關于表格的更多信息 表格是用來在 html 頁上顯示表格式數據以及對文本和圖形進行布局的強有力工具。表格由一行或多行組成;每行又由一個或多個單元格組成。當您創建包含多個單元格的多行表格時，這些單元格形成列。從技術上來說，一個單元格是水平行中的一個區域，而一列是由這些單元格區域垂直堆積而成的。

　　當選定了表格或表格中有插入點時，dreamweaver 會顯示表格寬度和表格選擇器(由綠色線條指示)中的每個表格列的列寬。

　　寬度旁邊是表格標題菜單與列標題菜單的箭頭。使用菜單可以快速訪問一些與表格相關的常用命令。還可以通過選擇"查看">"可視化助理">"表格寬度"來啟用或禁用寬度和菜單的顯示。

　　表格可以具有邊框，表格的單元格可以具有邊距、間距或同時具有邊距和間距。單元格邊距是指單元格內容和單元格邊界之間的像素數。單元格間距是指相鄰的表格單元格之間的像素數。

　　假如您沒有明確指定單元格邊距和單元格間距的值，則大多數瀏覽器按單元格邊距設置為 1、單元格間距設置為 2 來顯示表格。若要確保瀏覽器顯示的表格沒有邊距和間距，請將單元格邊距和單元格間距設置為0。

　　單擊一次該表格右側取消對它的選擇。

　　選擇"插入">"表格"以插入另一個表格。

　　在"插入表格"對話框中，對第二個表格執行下面的操作:

　　在"行數"文本框中，輸入 1。

　　在"列數"文本框中，輸入 3。

　　在"表格寬度"文本框中，輸入 700。

　　在"表格寬度"彈出式菜單中，選擇"像素"。

　　在"邊框粗細"文本框中，輸入 0。

　　在"單元格邊距"文本框中，輸入 0。

　　在"單元格間距"文本框中，輸入 0。

　　單擊"確定"。

　　第二個表格(該表格具有一行三列)即出現在第一個表格下方。

　　單擊該表格右側取消對它的選擇。

　　通過選擇"插入">"表格"，然后在"插入表格"對話框中輸入以下值來插入第三個表格:

　　在"行數"文本框中，輸入 1。

　　在"列數"文本框中，輸入 1。

　　在"表格寬度"文本框中，輸入 700。

　　在"表格寬度"彈出式菜單中，選擇"像素"。

　　在"邊框粗細"文本框中，輸入 0。

　　在"單元格邊距"文本框中，輸入 0。

　　在"單元格間距"文本框中，輸入 0。

　　單擊"確定"。

　　第三個表格(該表格具有一行一列)即出現在第二個表格下方。

　　|||

　　單擊該表格右側取消對它的選擇。您的頁面現在應如下所示:

　　注重插入表格后可能會看到表格選擇器(由綠色線條指示)。通過在表格外單擊，通常可以隱藏表格選擇器。也可以通過選擇"查看">"可視化助理">"表格寬度"禁用表格選擇器。

　　設置表格屬性

　　現在將使用"擴展表格"模式設置具體的表格屬性，"擴展表格"模式是用于臨時添加表格的單元格邊距和間距并增加表格邊框以簡化編輯的一種功能。非凡需要指出的是，它使您能夠精確地放置插入點，而不會意外選擇錯誤的表格或其它表格內容。

　　注重在"擴展表格"模式下完成對表格屬性的設置后，應總是返回到"標準"模式。"擴展表格"模式不屬于所見即所得環境，因此某些操作(如調整大小)不會得到預期的結果

　　選擇"查看">"表格模式">"擴展表格模式"。

　　注重假如出現"開始使用擴展表格模式"對話框，請單擊"確定"。

　　在第一個表格的第一行內單擊一次。

　　在"屬性"檢查器("窗口">"屬性")的"單元格高度"文本框中輸入 90，然后按 enter 鍵 (windows) 或 return 鍵 (macintosh)。

　　注重假如未出現"單元格高度"文本框，請單擊"屬性"檢查器右下角的展開箭頭。

　　在第一個表格的第二行內單擊一次。

　　在"屬性"檢查器的"單元格高度"文本框中輸入 166，然后按 enter 鍵 (windows) 或 return 鍵 (macintosh)。

　　在第一個表格的第三行內單擊一次。

　　在"屬性"檢查器的"單元格高度"文本框中輸入 24，然后按 enter 鍵 (windows) 或 return 鍵 (macintosh)。

　　現在第一個表格中的三行應具有不同的高度。

　　接下來，您將設置第二個表格(該表格包含三列)的屬性。

　　在第二個表格的第一列內單擊一次。

　　在"屬性"檢查器的"單元格寬度"文本框中輸入 140，然后按 enter 鍵 (windows) 或 return 鍵 (macintosh)。

　　在第二個表格的第二列內單擊一次。

　　在"屬性"檢查器的"單元格寬度"文本框中輸入 230，然后按 enter 鍵 (windows) 或 return 鍵 (macintosh)。

　　將第三列的寬度設置為 330 個像素。

　　假如已打開表格選擇器("查看">"可視化助理">"表格寬度")，將能看到剛才在各個表格列上輸入的三個像素值。

　　您無需為這個表格的單元格輸入任何高度值，因為這些單元格的高度將取決于您以后添加的內容。

　　最后，在最后一個表格(該表格包含一行和一列)內單擊一次。

　　在"屬性"檢查器的"單元格高度"文本框中輸入 24，然后按 enter 鍵 (windows) 或 return 鍵 (macintosh)。

　　您的布局現在應如下所示:

　　單擊"文檔"窗口頂部的"退出擴展表格模式"鏈接，返回到"標準"模式。|||

　　保存頁面。

　　插入圖像占位符

　　圖像占位符是在預備好將最終圖形添加到 web 頁面之前使用的圖形。在對 web 頁面進行布局時圖像占位符很有用，因為通過使用圖像占位符，您可以在真正創建圖像之前確定圖像在頁面上的位置。

　　在文檔窗口中，在第一個表格的第一行內單擊一次。

　　選擇"插入">"圖像對象">"圖像占位符"。

　　在"圖像占位符"對話框中，執行下面的操作:

　　在"名稱"文本框中，鍵入 banner_graphic。

　　在"寬度"文本框中，輸入 700。

　　在"高度"文本框中，輸入 90。

　　單擊顏色框并從顏色選擇器中選擇一種顏色。在本教程中，我們選擇了紅棕色 (#993300)。

　　保留"替換文本"文本框為空。 關于…關于替換文本的說明 替換文本是 web 頁面上的圖像的文字描述。它屬于 html 代碼，不會顯示在頁面上。對于大多數圖像，提供替換文本是很重要的，這樣使用屏幕閱讀器或只顯示文本的瀏覽器用戶就可以訪問這些圖像所提供的文本信息。而對于僅顯示 web 站點徽標的橫幅圖形，無需提供替換文本。將"圖像占位符"對話框中的"替換文本"文本框保留為空時，dreamweaver 會在 img 標簽中添加一個 alt="" 屬性。以后，假如您要向某個圖像添加替換文本，就可以選擇該圖像并在"屬性"檢查器中輸入替換文本。例如，假如以后您想更改徽標以包括電話號碼或地址，則能夠以替換文本方式提供此信息。

　　單擊"確定"。

　　圖像占位符出現在第一個表格內。圖像占位符顯示最終放置于此處的圖像的標簽和大小屬性。

　　注重當在瀏覽器中查看時，不顯示圖像占位符的標簽文字和大小文本。

　　保存頁面。 關于…關于圖像占位符 圖像占位符是在將最終圖形添加到 web 頁面之前使用的臨時圖形;它不是顯示在瀏覽器中的圖形圖像。在您發布站點之前，應該用適用于 web 的圖形文件(例如 gif 或 jpeg)替換所有添加的圖像占位符。

　　假如您有 macromedia fireworks，則可以根據 dreamweaver 圖像占位符創建新的圖形。當您選擇圖像占位符并在"屬性"檢查器中單擊"創建"按鈕時，fireworks 將打開并呈現一個新的畫布。新圖像的尺寸設置為與占位符圖像相同的大小。接著，您可以隨意創建并編輯圖像，并替換 dreamweaver 中的占位符圖像。

　　向頁面添加顏色

　　現在，您將通過設置某些表格單元格以及頁面背景的顏色，向頁面添加更多顏色。

　　在上述包含三列的表格的第一個單元格內單擊一次。

　　單擊標簽選擇器中的 標簽(單元格標簽)以選擇該單元格。

　　在"屬性"檢查器("窗口">"屬性")中，在"背景顏色"文本框內單擊一次。

　　"背景顏色"文本框位于"背景顏色"(bg) 顏色框旁。

　　注重假如未出現"背景顏色"文本框，請單擊"屬性"檢查器右下角的展開箭頭。

　　在"背景顏色"文本框中，輸入十六進制值 #993300，然后按 enter 鍵 (windows) 或 return 鍵 (macintosh)。

　　表格單元格的顏色即變為紅棕色。

　　在上述包含三列的表格的第二個單元格內單擊一次。

　　單擊標簽選擇器中的 標簽(單元格標簽)以選擇該單元格。

　　在"屬性"檢查器中，在"背景顏色"文本框內單擊一次，輸入十六進制值 #f7eedf，然后按 enter 鍵 (windows) 或 return 鍵 (macintosh)。|||

　　表格單元格的顏色即變為淺棕色。

　　重復第 5-7 步，將第三個表格單元格的顏色也更改為淺棕色。

　　設置完這三個單元格的顏色后，單擊一次表格的外部，取消選擇該表格。

　　接下來，您將通過修改頁面屬性來更改整個頁面的背景顏色。通過"頁面屬性"對話框可以設置一些頁面屬性，包括頁面字體的大小和顏色、已訪問鏈接的顏色以及頁面邊距等。

　　選擇"修改">"頁面屬性"。

　　在"頁面屬性"對話框的"外觀"類別中，單擊"背景顏色"顏色框，然后從顏色選擇器中選擇黑色 (#000000)。

　　關于…選擇顏色 在 html 中，顏色或者表示成十六進制值(如 #ff0000)或者表示為顏色名稱(如紅色)。網頁安全色是指使用 256 色模式時，無論在 windows 還是在 macintosh 系統中，在 netscape navigator 和 microsoft internet explorer 中都顯示相同的顏色。有 216 種常見顏色，而且任何結合了 00、33、66、99、cc 或 ff 對(rgb 值分別為 0、51、102、153、204 和 255)的十六進制值都代表網頁安全色。

　　在 dreamweaver 中，可以通過在相應的文本框中輸入十六進制值或從顏色選擇器中選擇顏色來選擇顏色。顏色選擇器使用 216 色 web 安全的調色板;從此調色板選擇顏色即顯示顏色的十六進制值。若要使用顏色選擇器，只需單擊顏色框并使用滴管選擇顏色。

　　您還可以使用顏色選擇器匹配顏色。例如，假如頁面上的某一圖像包含某種藍色陰影，并且您希望表格單元格的背景顏色與之匹配，那么可以選擇該表格單元格，單擊顏色框打開顏色選擇器，將滴管移動到圖像的藍色陰影上，并單擊鼠標按鈕。顏色選擇器將使用與通過滴管單擊的顏色最接近的匹配顏色來填充您選擇的區域。假如您通過這種方法選擇顏色，顏色選擇器為您選擇的顏色可能不是網頁安全色。

　　單擊"確定"。

　　頁面的背景即變為黑色。　　

　　保存您的工作。

　　您的頁面布局現已完成。該布局包含一些表格，用于放置各種資源，如圖像、文本和 flash 視頻 (flv) 文件。在下一教程中，即教程:向頁面添加內容中，您將學習如何使用 dreamweaver 提供的各種插入功能向頁面添加資源。