利用表格設(shè)計和制作網(wǎng)(參考版)
2025-06-07 07:47本頁面
【正文】 。 習(xí)題 1. 制作一個 6*4 的表格，按如圖 426 所示的樣式進(jìn)行合并單元格。 5.“移動所有分隔符圖像”命令 選擇該命令，就可以刪除所有的空白圖像。 3.“清除單元格高度”命令 選擇該命令，就會清除對應(yīng)單元格的高度，代之以系統(tǒng)自動確定的高度。這是因?yàn)橛行g覽器在表格中沒有內(nèi)容時，不按列寬顯示，而是直接按零寬度來顯示，通過添加一個大小適中（與顯示的寬度值一致）的空白圖像，就可有效避免這個問題，但在瀏覽時，用戶只會看到該列是空白的，并不會覺得其中有圖像存在。 1.“列設(shè)置為自動伸展”命令 選擇該命令，將使列自動伸展，即表格的列可以按比例自動擴(kuò)展至占滿整個剩余的空間。每個數(shù)字后面都有一個倒立的三角形按鈕，單擊它可以彈出一個菜單，如圖 425所示。 圖 423 布局表格屬性面板 圖 424 布局單元格屬性面板 由圖 423和圖 424 可以看出，布局表格和布局單元格屬性面板上的主要項(xiàng)目與普通表格和單元格的類似，只是多了一個“自動伸展”單選按鈕，如果選中該按鈕，則當(dāng)前表格或單元格的列寬將自動伸展至占滿整個剩余的空間。 （ 5）設(shè)置布局表格或單元格的屬性 選中布局表格或布局單元格后，就可以在“屬性”面板上設(shè)置其屬性各參數(shù)值，如輸入寬和高的值來精確地調(diào)整其大小。 圖 422 選中的布局表格 （ 4）刪除布局表格或布局單元格。需要說明的是，最外圍的布局表格不能被移動 ，只有嵌套的子布局表格才能被移動。 （ 2）調(diào)整布局表格或單元格的大小 選中布局表格或單元格后，將鼠標(biāo)指針移到邊框的控制點(diǎn)上，此時鼠標(biāo)指針會變成豎雙箭頭、橫雙箭頭或斜雙箭頭形狀，按住鼠標(biāo)左鍵拖動控制點(diǎn)，就可以改變布局表格或布局單元格的大小。 （ 1）選中布局表格或單元格 要對布局表格或布局單元格進(jìn)行操作，首先須選中它。只能在現(xiàn)有布局表格的空白區(qū)域中或在現(xiàn)有單元格周圍創(chuàng)建嵌套布局表格。如果想在現(xiàn)有內(nèi)容之 下繪制布局表格但是出現(xiàn)禁止繪制鼠標(biāo)指針，請重新調(diào)整文檔窗口的大小以合現(xiàn)有內(nèi)容底部和窗口底部之間產(chǎn)生更多的空白空間?？梢圆迦攵嗉壡短妆砀?，嵌套布局表格的大小不能超過包含它的表格。對外部表格所進(jìn)行的更改不會影響嵌套表格中的單元格。 可以在網(wǎng)頁文檔布局的空白區(qū)域中創(chuàng)建布局表格，也可以在現(xiàn)有布局單元格和表格的周圍或嵌套在現(xiàn)有布局表格中創(chuàng)建布局表格。這種全窗口默認(rèn)布局表格使用戶可以在設(shè)計視圖中的任意位置繪制布局單元格。布局單元格不能存在于布局表格之外。 （ 7）在布局單元格中插入文本和圖像，如圖 421 所示。 注意：單元格彼此之間不能重疊。 圖 420 繪制布局表格 （ 4）單擊“布局”面板中“繪制布局單元格”按鈕 ，然后在已繪制好的布局表格內(nèi)按住鼠標(biāo)左鍵拖動，就可以繪制出布局單元格了，其邊框呈天藍(lán)色。 （ 2）單擊“插入”面板“布局”選項(xiàng)卡，再單擊“布局視圖”按鈕 ，切換至 布局視圖。 要在網(wǎng)頁文檔中繪制布局表格和布局單元格，具體的操作方法如下。 圖 418 “布局視圖”面板 首先按下“布局”按鈕，切換到布局視圖模式后，設(shè)計窗口將彈出如 圖 419 所示的“布局視圖入門”對話框，提供布局視圖下相關(guān)功能的操作說明，單擊“確定”按鈕，當(dāng)前網(wǎng)頁文檔即處于布局視圖模式下。 Dreamweaver MX 為設(shè)計制作表格提供了兩種視圖：標(biāo)準(zhǔn)視圖和面局視圖，前面介紹的表格創(chuàng)建及編輯過程都是在標(biāo)準(zhǔn)視圖下進(jìn)行的。 圖 417 去掉表格中的空格代碼 注意 :這種細(xì)線效果其實(shí)就是一個高為 ”1pix”的表格 .在 Dreamweaver MX 中沒有插入元素的單元格中都自動填充半個空格 (其代碼為“ amp。把如圖 417 所示的源代碼中的 amp。nbsp”(半個空格位 )徹底刪除 ,就可以得到一條水平細(xì)線 . 同樣的 ,如果在圖 415 所示的表格屬性設(shè)置中改成高為 \某個像素什 ,寬為 0。 圖 415 設(shè)置表格屬性 （ 3）按圖 416 所求設(shè)置單元格的屬性，即高設(shè)為 1；寬不高或?yàn)?0；背景顏色高為黑色（媽為細(xì)線的顏色，也可以高置為其他顏色）。細(xì)線分隔線具體的制作過程如下： （ 1）插入一個一行一列的表格。 表格的應(yīng)用技巧 4． 4． 1 利用表格制作水平線與垂直線 在對網(wǎng)頁布局排版時，有時候會需要一條細(xì)線作為分隔線，用一些線型的圖像可以完成這項(xiàng)功能，但既費(fèi)事又占據(jù)存儲空間。設(shè)置方法為：在 TABLE 或 TD 標(biāo)記符內(nèi)使用 bgcolor 屬性設(shè)置背景顏色；使用 background 屬性設(shè)置背景圖案。 可以使用標(biāo)記符的 width 和 height 屬性設(shè)置表格和單元格的大小，這兩個屬性是取值可以是像素值，也可以是百分比，但一般都使用絕對的像素值。 由于表格能將網(wǎng)頁劃分為任意大小的矩形區(qū)域，所以表格在網(wǎng)頁中更多地是用作排版工具。 Valign屬性的常用取值見表 46。 如果是在 TR標(biāo)記符中使用 align 屬性，則可以控制整行內(nèi)容的水平對齊；如果是在 TD或 TH標(biāo)記符中使用 align 屬性，則是控制單元格中內(nèi)容的水平對齊。表格單元格內(nèi)容的對齊包括各數(shù)據(jù)項(xiàng)在水平方向和垂直方向上的對齊。如果使用了 TABLE 標(biāo)記符的 align 屬性設(shè)置表格頁面對齊，并且使用的是 left 或 right 值，則跟在表格后的文本會位于表格的左邊和右邊，從而形成文本與表格環(huán)繞的效果。另外，也可以用 DIV 標(biāo)記符的 align 屬性設(shè)置表格的對齊，方法是，將 TABLE 標(biāo)記符包含在 DIV align=” “和 /DIV之間。 （ 1）表格的頁面對齊。本示例中設(shè)置 border=”0”,則意味著 frame=”viod”,rules=”none”。 表 43 frame 屬性的取值 名稱 作用 名稱 作用 Void 無邊框 vsides 僅有左側(cè)框和右側(cè)框 above 僅有頂框 lhs 僅有左側(cè)框 below 僅有底框 rhs 僅有右側(cè)框 hsides 僅有頂框和底框 box 包含全部四個邊框 （ 2） rules 屬性用于控制是否顯示單元格之間的分隔線，其取值見表 44。 2．邊框與分隔線 在 TABLE 標(biāo)記符肌使用 frame 、 rules 和 border 屬性可以設(shè)置表格的邊框和單元格分隔線。 （ 2）在 TD和 TH 標(biāo)記符內(nèi)使用 colspan 屬性可以進(jìn)行列合并， colspan 的取值表示水平方向上合并的列數(shù)。 表格的編輯及屬性設(shè)置 1．合并單元格 （ 1）在 TD和 TH標(biāo)記符內(nèi)使用 rowspan 屬性可以進(jìn)行行合并， rowspan 的取值表示垂直方向上合并的行數(shù)。主要有以下四個屬性，見表 4— 2。另外，它 還可以傳遞一些信息，如網(wǎng)頁的過期日期、刷新間隔等。 META equiv= “ContentType”content= “text/html。 （ 6） META。惟一不同之處是 TD 標(biāo)記符表示普通表格數(shù)據(jù) ,而 TH 標(biāo)記符表示表格的行列標(biāo)題數(shù)據(jù) (即表頭 )。 （ 5） TD和 TD標(biāo)記符或 TH 標(biāo)記符，用于標(biāo)記表格的內(nèi)容，其中可以包括文字、圖像或其他對象。 TR 標(biāo) 記符用于定義表格的行，對于每一個表格行，都對應(yīng) RT 標(biāo)記符。 CAPTION align=” ”標(biāo)題 /CAPTION Align 屬
畢業(yè)設(shè)計相關(guān)推薦
鄂ICP備17016276號-1