網頁設計Webnetdesign

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

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

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

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

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

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

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

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

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