本次課開始我們要設計留言板的主頁面了。復雜的頁面一般都要先用表格布局，我們就從留言板主頁面的表格布局開始學習。除了表格布局，利用層布局頁面也是一種選擇。但層的兼容性和可控制性就比表格差多了，本次課也要討論Dreamweaver MX中有關(guān)層布局，以及層和表格相互轉(zhuǎn)換的知識。
首先讓我們先看看留言板站點主頁面將來大概是個什么摸樣。單擊這里打開頁面效果，具體設計步驟如下：
1、創(chuàng)建主頁面新文檔（main.asp）
這個主頁面將來是個包含ASP腳本的動態(tài)頁面。所以它的類型是動態(tài)腳本頁面文檔，文件擴展名是asp。你可以選擇以下兩種方法中的任意一種創(chuàng)建它：
●執(zhí)行“文件/新建”命令，在彈出的新建文檔對話框中做如圖1所示的操作。保存文檔時，文件命名為main。
圖1 新建ASP VBScript動態(tài)文檔
●打開站點面板，在留言板站點本地視圖下面的窗口中右鍵單擊站點名，在彈出的快捷菜單中執(zhí)行“新建文件”命令，然后將文件名的主文件名改為main。
2、創(chuàng)建表格
在Dreamweaver MX中創(chuàng)建表格有兩種模式，一種是在標準視圖下插入表格，一種是在布局視圖下直接畫表格。
▲在標準視圖下插入表格：
“標準”視圖是默認的 Dreamweaver MX設計視圖。若要在“標準”視圖中創(chuàng)建表格，可以使用“插入表格”命令。Dreamweaver將根據(jù)您在“插入表格”對話框中選擇的選項創(chuàng)建一個表格，如圖2所示。
圖2 插入表格和定義表格
在本例中我們插入兩個表格：一個是1行1列，寬度是755像素。另一個是3行3列，寬度是600像素。
▲在布局視圖下繪制表格：
在“布局”視圖中，可以繪制布局單元格或布局表格以定義文檔的設計區(qū)域。這給了我們更大的靈活性，想一想在頁面上畫表格的滋味吧！
我們需要在插入欄中切換到布局標簽下，并單擊布局視圖，如圖3所示。單擊繪制布局表格或單元格按鈕以后就可以用鼠標直接繪制了。
圖3 布局視圖
3、編輯表格
通過合并和拆分單元格以及插入行和列，可以很容易地修改初始表格結(jié)構(gòu)以創(chuàng)建更復雜的設計。我們還可以使表格的邊框變得不可見，然后用表格單元格（在表格中每一行與列的交叉處所創(chuàng)建的框）來控制 Web頁中文本和圖像的位置。當觀眾在瀏覽器中查看頁面時就不會看到設計的基礎結(jié)構(gòu)。這些都是對表格的編輯。通常情況下，表格編輯在標準視圖下進行。
●關(guān)于表格和單元格的選中常有兩種方法：
①用鼠標直接指向表格選中它們。用鼠標指向表格的邊框或者是內(nèi)部，根據(jù)鼠標的狀態(tài)來判斷選中整個表格、某一行還是某個單元格。
?、谠诒砀裰械娜我庖粋€單元格單擊鼠標，然后在標簽檢查器選擇相應的標簽，以實現(xiàn)選中表格或者單元格的目的，如圖4所示。
圖4 通過標簽檢查器選擇表格
●關(guān)于表格的尺寸基于百分比還是基于像素：
◇基于百分比的表格會根據(jù)瀏覽器窗口寬度的變化而伸展或收縮。（例如，如果您指定表格使用 75% 的寬度，則不管瀏覽器窗口有多大，表格都會伸展以填充 75% 的水平間距。這在某些情況下會很有用，例如，在調(diào)整窗口大小時確保導航菜單總能顯示。
◇基于像素的表格被設置為某個特定寬度，并且不會隨著瀏覽器窗口大小的改變而改變。一般我們在用表格布局頁面時，喜歡采用基于像素的表格，這樣設計出來的頁面更精確。本課實例就是用基于像素的表格布局頁面的。
●關(guān)于調(diào)整布局單元格大小有兩種方法：
◇用鼠標直接移動到單元格的邊框，拖動鼠標調(diào)整單元格的大小。
◇在屬性面板直接輸入單元格的寬和高，來精確的控制調(diào)整單元格的大小。
●表格和單元格的其它屬性的設置都可以在屬性面板中完成。
4、使用層進行布局
◇用層進行頁面布局，給設計者更大的靈活性。因為可以這樣說，你可以將層放在頁面上你想讓它占據(jù)的任何位置。如圖5是創(chuàng)建層和在層面板管理層的示意圖。
圖5 創(chuàng)建層和在層面板管理層
◇雖然用層進行布局給設計者更大的靈活性，但用層布局缺乏更大的兼容性，在不同的瀏覽器中看到的結(jié)果可能是不一樣的，甚至在一些瀏覽器中根本就不支持你的層。當然我們可以將層轉(zhuǎn)換為表格（表格是最兼容的頁面元素了），但是我還是建議不用層布局為好，比如重疊的層就不能轉(zhuǎn)換為表格。我們可以這樣進行層和表格之間的互相轉(zhuǎn)換：執(zhí)行“修改/轉(zhuǎn)換/層到表格”或者“修改/轉(zhuǎn)換/表格到層”就可以實現(xiàn)層和表格之間的互換了。
▲用表格布局頁面是設計網(wǎng)頁的基礎，表格的布局是很靈活的，大家要多練習，嘗試不同的布局變化，這樣才能找到和掌握更多的規(guī)律。
