dreamweaver第九章使用布局模式設(shè)計網(wǎng)頁

1、前面我們介紹了用表格進行網(wǎng)頁布局定位的方法，它是通過直接設(shè)定表格的參數(shù)來實現(xiàn)的，對于簡單的情況，這種方法還可以勝任，如果布局很復(fù)雜，用手工直接設(shè)定表格就會變成一件極其繁瑣的工作，甚至變成“不可能完成任務(wù)”。因此Dreamweaver 為用戶提供了方便的手段創(chuàng)建和控制網(wǎng)頁頁面的布局，而本質(zhì)仍然是通過表格來實現(xiàn)的。為了簡化使用表格來創(chuàng)建頁面布局的過程，Dreamweaver提供了布局視圖。在布局視圖下，用戶可以使用表格作為潛在的結(jié)構(gòu)來設(shè)計自己的網(wǎng)頁布局，并且可以避免原來使用表格帶來的缺陷。例如可以在網(wǎng)頁上輕松地畫出單元格，然后定制和移動這些單元格到需要的任何地方。創(chuàng)建的布局可以有固定的寬度或者可以

2、占滿整個瀏覽器窗口。要使用布局視圖，必須首先從切換Dreamweaver的標(biāo)準(zhǔn)視圖模式切換到布局視圖模式。 首先觀察Dreamweaver的“插入”面板中的“布局”頁。在默認(rèn)情況下，文檔窗口是以標(biāo)準(zhǔn)模式顯示的，也就是在Dreamweaver的以前版本中見到的樣子。當(dāng)按下按鈕后，就切換到了布局視圖模式。如果選擇菜單命令“查看表格模式布局模式”也可以達到相同目的。要切換回標(biāo)準(zhǔn)模式，只要單擊按鈕就可以了。進入布局視圖模式之后，和兩個按鈕就會由灰色的禁止?fàn)顟B(tài)變?yōu)橛行顟B(tài)。它們都是用于創(chuàng)建布局的。按鈕用于創(chuàng)建布局表格，按鈕用于創(chuàng)建布局單元格。使用布局視圖來進行網(wǎng)頁的劃分和定位的關(guān)鍵就是在頁面中創(chuàng)建表格以

3、及表格中的單元格，因此布局表格和布局單元格這兩個概念十分重要。如果已經(jīng)在Dreamweaver的標(biāo)準(zhǔn)視圖中創(chuàng)建了表格，然后切換到布局視圖，那么剛才創(chuàng)建的表格將會變成空白的布局單元格。如果這些單元格不符合要求，那么在創(chuàng)建新的布局單元格之前，必須把這些空白單元格刪除。9.1 理解布局表格的基本原理當(dāng)切換到了布局視圖模式之后，就可以在網(wǎng)頁中添加布局表格和布局單元格了，但用戶不必先創(chuàng)建布局表格，然后在里面創(chuàng)建布局單元格。例如，用戶可以在網(wǎng)頁的頂部繪制一個單獨的單元格作為菜單條，在頁面右邊繪制一個單元格作為子菜單，在它的旁邊繪制一個單元格作為頁面的內(nèi)容顯示區(qū)。創(chuàng)建了布局單元格之后，會自動創(chuàng)建布局表格以容

4、納剛剛創(chuàng)建的布局單元格。在頁面中創(chuàng)建了第一個布局表格后，就不能在它的外面再創(chuàng)建布局表格和布局單元格了。在一個布局表格之中可以創(chuàng)建多個布局單元格，還可以在布局表格中再創(chuàng)建多個布局表格來取得更好的頁面效果。但是，不能在布局單元格中創(chuàng)建布局表格。需要注意的是，在一個布局表格中，無論是創(chuàng)建布局單元格還是布局表格，都不能相互重疊。在布局視圖模式下，布局表格的下方會出現(xiàn)一條綠色的指示條，它會顯示表格中每一列的寬度。如果要關(guān)閉它，就可以使用菜單命令“查看可視化助理隱藏所有”。在布局視圖模式下，可以在頁面中繪制布局單元格和表格。如果是先創(chuàng)建布局單元格，則會自動創(chuàng)建一個布局表格作為它的容器，布局單元格總是存在于

5、布局表格中。默認(rèn)情況下，由Dreamweaver自動創(chuàng)建的布局表格的寬度和文檔窗口的寬度相同，可以調(diào)整它的大小，也可以使它能夠自動實現(xiàn)大小放縮。繪制布局單元格具體的操作步驟如下。（1）在布局視圖模式下，在“插入”面板的“布局”頁中單擊繪制布局單元格按鈕，這樣光標(biāo)就會變成十字的形狀（）。（2）將光標(biāo)移到想要繪制單元格的初始位置，然后拖動鼠標(biāo)來創(chuàng)建這個布局單元格。要創(chuàng)建多個單元格，不必每次都點擊繪制布局單元格按鈕，只需在繪制的過程中按住Ctrl鍵即可。這樣單元格就會以藍色的輪廓、白色的背景顯示在頁面上。藍色是布局單元格的默認(rèn)輪廓線顏色，可以通過設(shè)置改為其他的顏色。在單元格的外面會產(chǎn)生一個灰色背景的

6、矩形區(qū)域，這就是Dreamweaver自動生成的布局表格。每個單元格的尺寸都會在布局表格的列的底部區(qū)域顯示出來。網(wǎng)頁頁面布局中所有的單元格都可以不采用同樣的尺寸或者寬度，例如可以將單元格調(diào)整為相同的行高，但是有不同的寬度。繪制布局表格具體的操作步驟如下。（1）在布局視圖模式下，在“插入”面板的“布局”頁中單擊繪制布局表格按鈕，這樣光標(biāo)就會變成十字的形狀（）。（2）將光標(biāo)移到想要繪制的表格的初始位置，然后拖動鼠標(biāo)來創(chuàng)建這個布局表格。 如果這是網(wǎng)頁中的第一個表格，它將自動被放置在頁面的左上方。要創(chuàng)建多個表格，不必每次都單擊繪制布局表格按鈕，只需在繪制的過程中按住“Ctrl”鍵即可。這樣表格就會以綠

7、色的輪廓顯示在頁面上。綠色是布局表格的默認(rèn)輪廓線顏色，可以通過設(shè)置改為其他的顏色。每個表格的尺寸都會在列的底部區(qū)域顯示出來。表格不可以相互重疊。頁面布局可以分成多個列和行，并且不會發(fā)生重疊的情況。 用戶可以在頁面布局上的空白區(qū)域中繪制一個布局表格，或者在一個已經(jīng)存在的布局表格中繪制作為嵌套的布局表格，也可以圍繞已經(jīng)存在的布局單元格和表格繪制新的表格。 如果頁面中已經(jīng)包含了內(nèi)容，那么布局表格只可以在內(nèi)容的下方繪制。為布局單元格添加內(nèi)容在布局視圖中，可以在布局單元格中添加各種內(nèi)容，例如文本、圖片以及其他多媒體對象。加入的方法和在Dreamweaver標(biāo)準(zhǔn)視圖中添加內(nèi)容一樣。單擊選擇要添加內(nèi)容的單元

8、格，然后就可以在其中添加內(nèi)容了。內(nèi)容只能在布局單元格中添加，所以必須先創(chuàng)建布局單元格。頁面中灰色的部分是不可以添加任何內(nèi)容的，除非在這些區(qū)域中插入了布局單元格。當(dāng)在單元格中添加了大于單元格面積的內(nèi)容后，它會自動擴大以放置插入的內(nèi)容。當(dāng)單元格變大之后，它旁邊的單元格也會受到影響。在布局中的每個單元格和表格都可以被移動或者重新設(shè)置大小，這樣就可以方便地調(diào)整頁面的布局了。重新設(shè)置單元格的大小具體的操作步驟如下。（1）單擊單元格的邊框或者是按下“Ctrl”鍵，然后單擊單元格的任何地方，這樣單元格會出現(xiàn)把柄。（2）拖動這些把柄中的任何一個就可以調(diào)整單元格的大小。當(dāng)新繪制的單元格的邊框與旁邊的單元格的邊框

9、的間距小于8個像素時，會自動地附著到已經(jīng)存在的單元格旁。布局單元格不能相互重疊，單元格的大小至少要能容納其中的內(nèi)容。移動單元格具體的操作步驟如下。（1）單擊單元格的邊框。（2）拖動這個單元格到頁面上所需放置的地方，也可以使用鍵盤上的箭頭按鈕來調(diào)整單元格的位置，而且每次移動1個像素，當(dāng)同時按住“Shift”鍵時每次可移動10個像素。調(diào)整表格大小具體的操作步驟如下。（1）單擊表格左上角的按鈕，這時在表格的四周會出現(xiàn)把柄。（2）拖動這些把柄中的任何一個來調(diào)整選擇的表格的大小。如果兩個邊框的間距小于8個像素，表格就會自動地附著到已經(jīng)存在的表格和單元格旁。移動一個布局表格具體的操作步驟如下。（1）單擊表

10、格左上角的按鈕，這時在表格的四周會出現(xiàn)把柄。（2）拖動這個表格到頁面上所需放置的地方，也可以使用鍵盤上的箭頭鍵來調(diào)整表格的位置，而且每次移動1個像素，當(dāng)同時按住“Shift”鍵時每次可移動10個像素。 最外面的布局表格不能移動。在布局視圖中可以有兩種設(shè)定寬度的方式：固定寬度和自動伸展。在列底部區(qū)域顯示了寬度數(shù)值。固定寬度是一個指定的十進制數(shù)值，例如300（像素）。自動伸展設(shè)置了寬度可以根據(jù)窗口的寬度而自動調(diào)整。使用了自動伸展命令，布局將總是能夠填滿瀏覽器窗口。 例如，假設(shè)布局中在頁面左邊有一個菜單條，它的標(biāo)題在頂部，它的主要內(nèi)容在頁面的右邊，則可以設(shè)置左邊的列為固定的寬度，指定右邊的主要內(nèi)容區(qū)

11、域是自動伸展。當(dāng)瀏覽器窗口寬度不同，中間地圖的位置也在變化，這說明地圖所在的列寬度不是固定的，而是自動拉伸的。設(shè)置自動伸展寬度設(shè)置自動伸展寬度有兩種方法。（1）單擊要設(shè)為自動伸展寬度的列底部的數(shù)字（也就是顯示了該列寬度的數(shù)值），然后在出現(xiàn)的（允許自動伸展命令）菜單（以后我們把這個菜單稱為該列的底部菜單）中選擇“列設(shè)置為自動伸展”。（2）選擇該列，然后在屬性面板中選擇自動伸展選項。當(dāng)設(shè)置了一個列為自動伸展寬度后，Dreamweaver會自動將其余所有列設(shè)為固定寬度，并且會在固定寬度的列中插入空白圖片，從而控制布局。在一個布局表格中，最多只有一個列可以被設(shè)置為自動伸展寬度。如果一個布局表格的某一列

12、已經(jīng)被設(shè)為自動伸展，這時又將另一列設(shè)為自動伸展列，那么原來的自動伸展列將自動變?yōu)楣潭▽挾攘?。設(shè)置固定寬度列對于剛剛創(chuàng)建的布局表格和布局單元格而言，表格中的列都是根據(jù)初始條件設(shè)置的寬度，例如用鼠標(biāo)拖拽出的寬度。在HTML文件中設(shè)置了寬度，但沒有加空白圖片，那么在瀏覽器中顯示的時候，就會根據(jù)實際情況顯示，很可能不是設(shè)置的寬度。這時在該列的底部，可以看到在寬度數(shù)值兩邊是綠色單線。如果使用了空白圖片，就可以使得該列的寬度在顯示時不發(fā)生改變。對于已經(jīng)被設(shè)為自動伸展的列來說，在該列的底部菜單中選擇“列設(shè)置為固定寬度”命令，就可以把該列轉(zhuǎn)換為固定寬度的列。這時在該列的底部，可以看到在寬度數(shù)值兩邊是綠色雙線。

13、9.2 使用布局表格制作頁面在本節(jié)中，我們首先使用Fireworks軟件制作必要的圖形，然后輸出為圖片文件，并在Dreamweaver使用者圖片文件，構(gòu)成一個簡單的網(wǎng)頁。設(shè)計頁面圖形由于本課程的重點是學(xué)習(xí)Dreamweaver，而不是Fireworks，因此這里僅僅使用Fireworks的一些最基本的功能，進行一下非常簡單的設(shè)計工作。如果有興趣的讀者可以參考相關(guān)的資料和書籍，以便更深入地掌握Fireworks的工作。例外，需要指出的是，如果讀者對fireworks不熟悉，也可以使用Photoshop等其他的圖形圖像軟件，只要能達到目的就可以了。在這里，我們設(shè)計的內(nèi)容包括了三個部分，分別針對頁面

14、的頂部和底部的內(nèi)容。在頁面的頂部，左側(cè)是一個圖形標(biāo)志，右側(cè)是一個橫條，里面可以放置一些圖形或者文字內(nèi)容，在頁面的底部，則是一個圓角矩形，將來作為底部單元格背景，然后可以用文字來顯示版權(quán)信息等內(nèi)容。分割以及輸出圖形Fireworks軟件是一個專門以網(wǎng)頁設(shè)計為目標(biāo)的圖形圖像設(shè)計軟件，因此它由一些非常方便的輔助功能。例如，在上面設(shè)計好了一個圖形以后，我們需要把它輸出為三個獨立的圖片文件，以放置在網(wǎng)頁的不同位置上。Fireworks提供了非常方便的圖像分割和輸出功能，通過使用“切片”工具，可以對圖像進行分割，然后可以輸出為三個獨立的文件。9.3 圖像背景化首先來完成頁面頂部的設(shè)計（1）打開“布局”按鈕

15、下的菜單列表，選擇“常用”命令，回到常用的圖標(biāo)屬性欄中。（2）然后將文本光標(biāo)置入到第一個單元格中，單擊“插入”欄內(nèi)的“圖像”按鈕。在彈出的對話框中選擇相對應(yīng)的圖像。（3）然后繼續(xù)在旁邊的單元格內(nèi)插入圖像，使兩個圖片對應(yīng)地放置到單元格的位置上。（4）接下來處理底部的單元格，這里要注意，如果仍然像上面的方法，直接把圖形插入到底部的單元格中，那么就無法在上面輸入文字了，因為這個圖片是作為單元格中的內(nèi)容存在的，因此這里就需要用到“圖像背景化”的操作了，也將就是說，要把這個圖片變成單元格的背景，而不是單元格中的內(nèi)容。一種方法是直接把圖片以單元格背景的方式插入網(wǎng)頁，將文本光標(biāo)置入，接著打開屬性面板。單擊“

16、背景”選框后面的“單元格背景URL”按鈕。在彈出的“選擇圖像源文件”對話框中為該單元格選擇相對應(yīng)的圖像。另一種方法是，先向插入普通圖片那樣，在單元格中插入圖片，這樣可以先使設(shè)計師確認(rèn)頁面效果無誤，然后再把圖像的地址復(fù)制表格單元格的背景框中，然后把圖片刪除。完成單元格背景圖像的選擇后，此時光標(biāo)仍然停留在單元格內(nèi)，可以直接到該單元格內(nèi)輸入相關(guān)的文字信息。例如在這里可以輸入一些版權(quán)信息相關(guān)的文字內(nèi)容。制作正文區(qū)域在制作好頁面的底部以后，頁面中間的部分還空著，中間部分的左側(cè)將來會放置一個導(dǎo)航條，而右側(cè)部分則放置正文內(nèi)容。這里先來制作正文區(qū)域，這里同樣用到了“圖形背景化”的操作，但是與制作頁面底部的操作

17、還有所不同。正文區(qū)域和底部的區(qū)別在于，底部單元格的高度是固定的，而正文區(qū)域的高度應(yīng)該是可變的，因為將來我們需要在正文區(qū)域放置內(nèi)容，而事先我們并不能確定會放置多少文正內(nèi)容，可能會比較長，也可能會比較短，因此我們應(yīng)該使這個區(qū)域可以自動地適應(yīng)高度的變化，這就利用背景圖像的一個特性“平鋪”。為了和整體頁面的風(fēng)格一致，這里仍然使用圓角矩形來制作一個正文區(qū)域。有了前面的經(jīng)驗，這里制作起來應(yīng)該就不困難了。先在Fireowrks中，制作一個圓角矩形，然后從上到下切分為三個部分，然后在網(wǎng)頁中，正文內(nèi)容部分插入一個表格，這個表格從上到下分為三個單元格，上下兩個單元格中分別放置圖形中對應(yīng)的部分就可以了，而中間的部分，有兩種處理方法。一種方法是直接把這個單元格的背景設(shè)置為和上下一致的藍色，這樣是很方便的處理方法。這種方法的缺點是，只能把背景色設(shè)置為某種單一的顏色，如果希望以某種圖形作為背景，比如一些淺顏色的條紋作為背景就不行了。因此，如果需要以圖形作為背景，就要先設(shè)計好這個圖形，并保證這個圖形平鋪起來仍然沒有“接縫”，就可以就是把中間的圖形現(xiàn)在Fireworks中設(shè)計好，然后以背景的方式引入到單元格中，既會產(chǎn)生能夠適應(yīng)表格高度變化的圖形