第五章 網(wǎng)頁中布局

網(wǎng)頁設(shè)計Webnetdesign

第五章網(wǎng)頁中的布局一、表格的創(chuàng)建和應(yīng)用（1）表格的設(shè)置●表格——是用于在HTML頁上顯示表格式數(shù)據(jù)以及對文本和圖形進(jìn)行布局的強有力的工具。表格由一行或多行組成；每行又由一個或多個單元格組成。光標(biāo)在頁面上，之后單擊常用工具欄上“表格”，在彈出的對話框里進(jìn)行設(shè)置：網(wǎng)頁設(shè)計Webnetdesign行數(shù)：確定表格具有的行的數(shù)目，也就是橫著的幾行。列數(shù)：確定表格具有的列的數(shù)目，也就是豎著的幾列。表格寬度：以象素為單位或按所占瀏覽器窗口寬度的百分比來指定表格的寬度。邊框粗細(xì)：指定表格邊框的寬度（以象素為單位）。默認(rèn)為“1”象素，若要確保瀏覽器顯示的表格沒有無邊框，必將邊框粗細(xì)設(shè)置為“0”。單元格邊距：確定單元格邊框和單元格內(nèi)容之間的象素數(shù)。默認(rèn)是“1”象素，如果確定想完全沒有則設(shè)置為“0”。單元格間距：確定相鄰的表格單元格之間的象素數(shù)。默認(rèn)是“2”象素，如果想要完全沒有，則設(shè)置為“0”。頁眉:設(shè)置表格中顯示的文字的屬性.網(wǎng)頁設(shè)計Webnetdesign表格插入到頁面上之后，我們可以看見下面的屬性面板，顯示的就是當(dāng)前表格的屬性：行和列是表格中行和列的數(shù)目。寬和高是以象素為單位或按所占瀏覽器窗口寬度的百分比計算的表格寬度和高度。在這里表格的高度一般不需要做設(shè)置。填充：確定單元格邊框和單元格內(nèi)容之間的象素數(shù)。默認(rèn)是“1”象素，如果確定想完全沒有則設(shè)置為“0”。間距：確定相鄰的表格單元格之間的象素數(shù)。默認(rèn)是“2”象素，如果想要完全沒有，則設(shè)置為“0”。邊距：設(shè)置表格邊框顯示的粗細(xì)。默認(rèn)為“1”，完全沒有則設(shè)置為“0”背景顏色：設(shè)置整個表格的背景顏色。邊框顏色：設(shè)置表格邊框的顏色，默認(rèn)是灰色的而且有立體的效果。背景圖像：設(shè)置整個表格的背景圖像，如果圖片小，可以自動重復(fù)；如果圖片大，那么只顯示局部。網(wǎng)頁設(shè)計Webnetdesign2）單元格的設(shè)置●單元格——表格中的每一個小格子都叫單元格，是表格中的最小單位。把光標(biāo)放在表格的某一個單元格中，屬性面板則顯示該單元格的屬性,可以進(jìn)行設(shè)置。水平：設(shè)置單元格中的內(nèi)容水平的對齊方式，可以將內(nèi)容對齊到單元格的左側(cè)、右側(cè)或使之居中對齊。垂直：指定單元格中內(nèi)容的垂直對齊方式，可以將內(nèi)容對齊到單元格的頂端、中間、底部或基線。寬和高：以象素為單位或按占整個表格寬度或高度百分比計算的所選單元格的寬度和高度。如果要指定百分比，則在值后面使用百分比符號(%)。背景：設(shè)置該單元格的背景圖像，如果圖片小，可以自動重復(fù)；如果圖片大，那么只顯示局部。網(wǎng)頁設(shè)計Webnetdesign背景顏色：設(shè)置該單元格的背景顏色。邊框：設(shè)置該單元格的邊框顏色。不換行：可以防止換行，從而該單元格中的所有文本都在一行上。如果啟用了“不換行”，則當(dāng)您鍵入數(shù)據(jù)或?qū)?shù)據(jù)粘貼到單元格時單元格會加寬來容納所有數(shù)據(jù)。標(biāo)題：可以該的單元格格式設(shè)置為表格標(biāo)題單元格。默認(rèn)情況下，表格標(biāo)題單元格的內(nèi)容為粗體并且居中。合并單元格：可以將所選的單元格合并為一個單元格。只有當(dāng)單元格形成矩形或直線的塊時才可以合并這些單元格。選擇連續(xù)行中形狀為矩形的單元格才可以執(zhí)行此操作。拆分單元格：可以將所選的單元格分成兩個或更多單元格。一次只能拆分一個單元格；如果選擇的單元格多于一個，則此按鈕將禁用。在彈出的對話框中，可以選擇把該單元格拆分成幾行或者幾列。網(wǎng)頁設(shè)計Webnetdesign（3）添加或刪除表格的行和列添加表格行或者列：將光標(biāo)放到表格或者表格中的某一單元格里面，“鼠標(biāo)右鍵：表格：插入行或列”,在彈出的對話框里面，可以進(jìn)行插入表格的設(shè)置。插入行或者列，插入行或者列數(shù)值，以及在當(dāng)前行或者列的上下還是前后。刪除表格的行或者列：將光標(biāo)放到表格或者表格中的某一單元格里面，“鼠標(biāo)右鍵：表格：刪除行”，“鼠標(biāo)右鍵：表格：刪除列”，這樣就可以刪除當(dāng)前表格的行或者列。網(wǎng)頁設(shè)計Webnetdesign（4）單元格的拆分與合并●方法一：可以選擇屬性面板上的單元格拆分、合并來設(shè)置?！穹椒ǘ簡卧竦牟鸱?，可以將光標(biāo)表格中，“鼠標(biāo)右鍵：表格：拆分單元格”；單元格的合并，可以用光標(biāo)選中要合并的單元格，“鼠標(biāo)右鍵→表格→合并單元格”。（5）嵌套表格圖

嵌套表格是在一個表格的單元格中插入新的表格。可以像對任何其他表格一樣對嵌套表格進(jìn)行格式設(shè)置；但是，其長度和寬度受它所在單元格的長度、寬度的限制。其中表格所具有的屬性，嵌套的表格都具有。網(wǎng)頁設(shè)計Webnetdesign（6）導(dǎo)入表格數(shù)據(jù)圖光標(biāo)在頁面中，選擇“文件菜單：導(dǎo)入：表格式數(shù)據(jù)”；或者“插入菜單：表格對象：導(dǎo)入表格式數(shù)據(jù)”，這樣在彈出的對話框里面進(jìn)行設(shè)置：數(shù)據(jù)文件：單擊“瀏覽”按鈕，選擇要導(dǎo)入的文件。定界符：正在導(dǎo)入的文件中所使用的分隔符。一般是Tab，如果未能指定定界符，則無法正確地導(dǎo)入文件，也無法在表格中對您的數(shù)據(jù)進(jìn)行正確的格式設(shè)置。表格寬度：⊙匹配內(nèi)容：使每個列足夠?qū)捯赃m應(yīng)該列中最長的文本字符串?！言O(shè)置為：創(chuàng)建以象素為單位指定固定的表格寬度，或按占瀏覽器窗口寬度的百分比指定表格寬度。單元格邊距：單元格內(nèi)容和單元格邊框之間的象素數(shù)，默認(rèn)為“1”，完全沒有則輸入“0”。單元格間距：確定相鄰的表格單元格之間的象素數(shù)，默認(rèn)為“2”，完全沒有則輸入“0”。格式化首行：是用來確定應(yīng)用于表格首行的格式設(shè)置（如果存在）。可選項為：無格式、粗體、斜體或加粗斜體。邊框：指定表格邊框的寬度（以象素為單位），默認(rèn)為“1”，完全沒有邊框則為“0”。網(wǎng)頁設(shè)計Webnetdesign（7）導(dǎo)出表格數(shù)據(jù)

選中頁面中要導(dǎo)出的表格，選擇“文件菜單：導(dǎo)出：表格”，進(jìn)行設(shè)置。定界符：指定應(yīng)該使用哪個分隔符字符在導(dǎo)出的文件中隔開各項。換行符：指定將在哪個操作系統(tǒng)中打開導(dǎo)出的文件：Windows、Macintosh還是UNIX。（不同的操作系統(tǒng)具有不同的指示文本行結(jié)尾的方式。）網(wǎng)頁設(shè)計Webnetdesign（8）表格繪制圓角矩形①在文檔中插入表格，3行3列的表格，邊框、邊距、間距都為“0”。②在photoshop中建立一個為寬：30px,長：30px，背景白色的文檔。用橢圓選框工具，同時按住Alt鍵和Shift鍵在文檔的一個角進(jìn)行托拽，填充顏色，繪制如圖5-13所示，顯示的是將來的矩形的右下角。這樣翻轉(zhuǎn)，分別保存四個不同方向的角文件為JPEG格式.

③在Dreamweaver的表格里面，上下左右四個單元格里面分別插入在photoshop里面制作的四個圖片.。④表格中的其它單元格里面設(shè)置為填充單元格背景顏色，顏色吸取插入角上的紅色，這樣就繪制完成了圓角矩形。⑤在圓角矩形的中間單元格里面，嵌套表格制作公告欄，添加內(nèi)容包括圖片和文字資料.網(wǎng)頁設(shè)計Webnetdesign（9）創(chuàng)建網(wǎng)站相冊①相冊的所有圖像放置在一個文件夾中，確保圖像文件名包含以下任意一個擴展名：.gif、.jpg、.jpeg、.png、.psd、.tif或.tiff。帶有無法識別的文件擴展名的圖像不會包含在相冊中。②選擇“命令菜單：創(chuàng)建網(wǎng)站相冊”，彈出對話框，進(jìn)行設(shè)置：網(wǎng)頁設(shè)計Webnetdesign相冊標(biāo)題：文本框中輸入的標(biāo)題將顯示在包含縮略圖的頁面的頂部的灰色矩形中。副標(biāo)信息和其他信息：這兩個文本框中輸入最多兩行附加文本，該文本將直接在標(biāo)題下顯示。源圖像文件夾：選擇包含源圖像的文件夾。目標(biāo)文件夾：選擇（或創(chuàng)建）一個目標(biāo)文件夾，用以放置所有導(dǎo)出的圖像和HTML文件?？s略圖大小：圖像將按比例縮放，以創(chuàng)建適合具有指定象素尺寸的方框的縮略圖，同時可以設(shè)置是否顯示圖片名稱。縮略圖格式：選擇縮略圖圖像的格式。GIFWebSnap128：創(chuàng)建GIF縮略圖，包含多達(dá)128色的Web適應(yīng)性調(diào)色板。GIFWebSnap256：創(chuàng)建GIF縮略圖，包含多達(dá)256色的Web適應(yīng)性調(diào)色板。JPEG—品質(zhì)較高：創(chuàng)建品質(zhì)較高且文件較大的JPEG縮略圖。JPEG—文件較?。簞?chuàng)建品質(zhì)較低且文件較小的JPEG縮略圖。網(wǎng)頁設(shè)計Webnetdesign相片格式：對于每個原始圖像，將創(chuàng)建一個具有指定格式的大尺寸圖像?？梢詾榇蟪叽鐖D像指定格式，這個格式可以與上面設(shè)置的縮略圖格式不同。√為每張相片建立導(dǎo)覽頁面：每個縮略圖像創(chuàng)建一個Web頁，該Web頁包含標(biāo)為“后圖5-19退”、“主頁”、“前進(jìn)”的導(dǎo)航鏈接；如果不選擇此選項，縮略圖鏈接將直接鏈接到大尺寸圖像。③單擊“確定”，F(xiàn)ireworks啟動（如果它尚未運行）并創(chuàng)建縮略圖和大尺寸圖像。如果所包含的圖像文件數(shù)目較多，這可能會需要幾分鐘的時間。當(dāng)處理完成后，Dreamweaver將再次處于活動狀態(tài)并創(chuàng)建包含縮略圖的頁。再次單擊“確定”，Dreamweaver相冊頁面建立，網(wǎng)頁設(shè)計Webnetdesign二、圖層的創(chuàng)建和應(yīng)用（1）創(chuàng)建層

選擇“布局”工具欄，單擊描繪層按鈕,這時光標(biāo)變“十”字形狀，在文檔窗口中拖動鼠標(biāo)，即可繪制出一個層，這樣繪制的層可以再頁面的任意位置?；蛘邎?zhí)行“插入菜單：布局對象：層”命令，也可繪制層，這樣的層在光標(biāo)所在的位置出現(xiàn)。（2）設(shè)置層參數(shù)使用“編輯菜單：首選參數(shù)”命令，打開“首選參數(shù)”對話框，在左側(cè)的“分類”列表中選擇“層”選項，可以設(shè)置層的參數(shù)：顯示：確定層在默認(rèn)情況下是否可見。default：“默認(rèn)”不指定可見性屬性。當(dāng)未指定可見性時，大多數(shù)瀏覽器都會默認(rèn)為“繼承”。inherit：“繼承”使用該層父級的可見性屬性。visible:“可見”顯示這些層的內(nèi)容，而不管父級的值是什么。網(wǎng)頁設(shè)計Webnetdesignhidden:“隱藏”隱藏這些層的內(nèi)容，而不管父級的值是什么。寬和高：指定使用“插入工具欄：層”創(chuàng)建的層的默認(rèn)寬度和高度（以象素為單位）。背景顏色：指定默認(rèn)層的背景顏色，可以是默認(rèn)透明的，或者吸取顏色自己設(shè)定。背景圖像：指定默認(rèn)的背景圖像。單擊“瀏覽”可在計算機上查找圖像文件。嵌套：√如果在層中則使用嵌套：指定從現(xiàn)有層邊界內(nèi)的某點開始繪制的層是否應(yīng)該是嵌套層。Netscape4兼容性：

插入層時固定大?。耗J(rèn)不做選擇。網(wǎng)頁設(shè)計Webnetdesign（3）層的屬性圖選中文檔中的層，在下面的屬性面板中，顯示當(dāng)前層的屬性，可以進(jìn)行設(shè)置：層編號：每個層都必須有它自己的唯一ID，以便在“層”面板和JavaScript代碼中標(biāo)識該層。這里默認(rèn)就可以。左和上：指定當(dāng)前層的左側(cè)和頂端距離頁面（如果嵌套，則為父層）左上角的位置。寬和高：指定當(dāng)前層的寬度和高度Z軸：指的是當(dāng)前層的堆疊順序，Z軸數(shù)值越大，圖層越在上面，Z軸為負(fù)數(shù)，則位于表格之后。網(wǎng)頁設(shè)計Webnetdesign可見性：指定該圖層最初是否是可見的。default為“默認(rèn)”。背景圖像：指定該層的背景圖像。背景顏色：指定該層的背景顏色。溢出：控制當(dāng)層的內(nèi)容超過層的指定大小時如何在瀏覽器中顯示層。visible:“可見”指定在層中顯示額外的內(nèi)容；實際上，該層會通過延伸來容納額外的內(nèi)容。hidden：“隱藏”指定不在瀏覽器中顯示超出層額外的內(nèi)容。scroll：“滾動”指定瀏覽器應(yīng)在層上添加滾動條，而不論內(nèi)容多少是否需要滾動條。auto:

“自動”使瀏覽器僅在需要時（即，當(dāng)層的內(nèi)容超過其邊界時）才顯示層的滾動條。剪輯：定義層的可見區(qū)域。指定左側(cè)、頂部、右側(cè)和底邊坐標(biāo)可在層的坐標(biāo)空間中定義一個矩形（從層的左上角開始計算）。層經(jīng)過“剪輯”后，只有指定的矩形區(qū)域才是可見的。網(wǎng)頁設(shè)計Webnetdesign（4）層與表格間的轉(zhuǎn)換層轉(zhuǎn)化為表格：①先創(chuàng)建多個圖層來布局整個頁面，但是層與層之間不允許疊加，可以在繪制層前，在“窗口菜單：層”，在彈出的層面板上進(jìn)行設(shè)置。②繪制完成后，選擇“修改菜單：轉(zhuǎn)換：層到表格”，在彈出窗口進(jìn)行設(shè)置。布局表格：⊙最精確：為每個層創(chuàng)建一個單元格，并且層和層之間的空白也都轉(zhuǎn)化為單元格。⊙最小:為每個層創(chuàng)建一個單元格，并且層和層之間的空白如果小于自己設(shè)置的象素，那么就合并單元格。√使用透明GIF：用透明的GIF填充表的最后一行。這將確保該表在所有瀏覽器中以相同的列寬顯示。√至于頁面中央：將結(jié)果表放置在頁面的中央；不勾選這項，則表將在頁面的左邊緣開始。③選擇所需的布局工具和網(wǎng)格選項，然后單擊“確定”。網(wǎng)頁設(shè)計Webnetdesign表格轉(zhuǎn)化為層：①繪制好文檔中的表格，選擇“修改菜單：轉(zhuǎn)換：表格到層”，在彈出對話框里面進(jìn)行設(shè)置。防止層重疊:

在創(chuàng)建、移動層和調(diào)整層大小時約束層的位置，使層不會重疊。顯示層面板：顯示“層”面板。顯示網(wǎng)格和靠齊到網(wǎng)格：能夠使用網(wǎng)格來協(xié)助對層進(jìn)行定位。②單擊“確定”。表格即轉(zhuǎn)換為層。空單元格不會轉(zhuǎn)換為層（除非它們具有背景顏色）。同時，位于表格外的頁面元素也會放入層中。網(wǎng)頁設(shè)計Webnetdesign（5）嵌套層①在文檔里面插入表格，設(shè)置成居中顯示，在表格里插入圖片.②讓光標(biāo)在圖片的左面，表格的里面，選擇“插入：布局對象：圖層”，這樣在表格的左上角顯示一個圖層，為圖層1，這個圖層是父層.③繼續(xù)繪制子層，選擇繪制圖層工具，按住鼠標(biāo)的Alt鍵從父層向外拖拽繪制一個新的圖層，為圖2，這個層是子層，之后繼續(xù)調(diào)整圖層2的位置和大小，圖層1是不動的，圖層2相對于圖層1可以任意移動位置，他們之間的距離是絕對的，圖層1和表格之間是相對的坐標(biāo)，不管表格居中還是左對齊，圖層1相對于表格是不動的，圖層2相對于圖層1是不動的，父層移動子層也跟著移動，父層不動子層可以隨便在任何位置；父層刪除了，子層也跟著沒有了，子層移動，不影響父層的任何變化。網(wǎng)頁設(shè)計Webnetdesign④在圖層2里面插入一個flash動畫，這個動畫是一個透明FLASH動畫，大小尺寸調(diào)整為和圖層一樣大，正好放在表格圖片之上。⑤選中圖層2中的FLASH動畫，在它的屬性面板上設(shè)置“參數(shù)”，在彈出的對話框里面進(jìn)行設(shè)置“參數(shù)：wmode,值：transparent”。這樣設(shè)置完成后，選擇“預(yù)覽”，在瀏覽器彈出的對話框里面，選擇“確定”，之后在瀏覽器上面出現(xiàn)的文字，鼠標(biāo)右鍵點擊，選擇“允許阻止的內(nèi)容”，之后點擊“是”，這樣最終效果完成。網(wǎng)頁設(shè)計Webnetdesign（6）圖層制作浮動廣告

①在頁面上繪制圖層1，在圖層1里面，可以繪制表格，插入圖片、插入文字等。②選擇“窗口菜單：時間軸”鼠標(biāo)選擇時間軸的第一幀上。選中文檔中的圖層1，“鼠標(biāo)右鍵：記錄路徑”，可以拖拽圖層，圖層拖拽所拽出的線，就是圖層浮動的軌道。如果需要修改，可以在時間軸面板上修改關(guān)鍵幀，也就是時間軸面板上面藍(lán)色的帶圓圈的就是關(guān)鍵幀。③預(yù)覽，設(shè)置出現(xiàn)瀏覽器阻攔，如上設(shè)置，就會看見圖層漂浮在頁面上網(wǎng)頁設(shè)計Webnetdesign三、框架的創(chuàng)建和應(yīng)用框架是一種特殊的網(wǎng)頁排版技術(shù)，含有框架的網(wǎng)頁是一種特殊的網(wǎng)頁，一般稱為框架網(wǎng)頁。使用框架后，整個網(wǎng)頁被分割成幾個區(qū)域，每個區(qū)域稱為一個框架窗口，整個頁面時各框架集。任何一個框架窗口實際就是一個網(wǎng)頁，任何一個框架窗口都可以作為超鏈接的窗口，當(dāng)瀏覽者點擊一個超鏈接時，該超鏈接的目標(biāo)窗口便可以是某一框架窗口，而不是整個大的瀏覽器的窗口發(fā)生跳轉(zhuǎn)?？蚣芗夹g(shù)是有效架構(gòu)網(wǎng)頁結(jié)構(gòu)和合理展示信息的工具，也為瀏覽者提供了方便和友好的界面。(1)創(chuàng)建框架集圖方法一：①選擇“查看菜單：可視化助理：框架邊框”建立框架邊框在文檔的窗口中，可以拖拽來創(chuàng)建我們想要的框架集。這個框架是父框架。②要拆分光標(biāo)所在的框架，從“修改菜單：框架頁”子菜單選擇拆分項。這樣的新建的框架就是嵌套的框架了。網(wǎng)頁設(shè)計Webnetdesign方法二：將光標(biāo)在文檔中，選擇“插入工具欄：布局：框架”子菜單中選擇預(yù)定義的框架集。框架集圖標(biāo)提供應(yīng)用于當(dāng)前文檔的每個框架集的可視化表示形式?？蚣芗瘓D標(biāo)的藍(lán)色區(qū)域表示當(dāng)前文檔，而白色區(qū)域表示將顯示其它文檔的框架。當(dāng)您應(yīng)用框架集時，Dreamweaver會自動設(shè)置該框架集的標(biāo)題，選擇默認(rèn)就可以了。(2)刪除一個框架圖不想要哪個框架，就把哪個框架拖拉到框架的邊框上或者父框架的邊框上。(3)保存框架集文檔設(shè)置完框架集后，要保存的時候，選擇“文件菜單：保存全部”，保存的時候會連續(xù)保存四個頁面。網(wǎng)頁設(shè)計Webnetdesign(4)選擇框架和框架集“框架”面板提供框架集內(nèi)各框架的可視化表示形式。它能夠清晰的顯示框架集的層次結(jié)構(gòu)，而且這種層次結(jié)構(gòu)在“文檔”窗口中的顯示可能不夠直觀。在“框架”面板中，環(huán)繞每個框架的是較細(xì)的灰線，并且每個框架由框架名稱標(biāo)識。我們可以在框架面板上選擇某個框架，相應(yīng)文檔中的框架就同時也被選中了。網(wǎng)頁設(shè)計Webnetdesign(5)框架集的屬性①在“文檔”窗口中單擊框架集中兩個框架之間的邊框。把框架集選中。②在下面的“屬性面板”上顯示當(dāng)前框架集的屬性，可以進(jìn)行設(shè)置：邊框：設(shè)置文檔中邊框周圍是否顯示邊框?！笆恰憋@示邊框；“否”不顯示邊框；“默認(rèn)”要允許瀏覽器確定如何顯示邊框。邊框顏色：設(shè)置邊框的顏色。邊框?qū)挾龋褐付ㄟx中框架集中所有邊框的寬度。值和單位：設(shè)置分配給每個框架的空間大小，一般左面框架是設(shè)置數(shù)值以象素為單位顯示，右側(cè)框架大小設(shè)置為相對大小，這樣在分配能夠使右側(cè)框架伸展以占據(jù)所有剩余空間。網(wǎng)頁設(shè)計Webnetdesign(6)框架的屬性①在文檔窗口中光標(biāo)點擊某個框架里，同時按住Alt鍵，這樣可以選中整個框架了?；蛘咴诳蚣苊姘迳线x擇某個框架，這樣文檔中的框架就被選中了。這樣在屬性欄里面就顯示了當(dāng)前框架的屬性。②可以通過框架屬性來設(shè)置框架，了解當(dāng)前框架的一些信息，框架名稱：鏈接的target屬性或腳本在引用該框架時所用的