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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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