項目3使用表格排版網頁由淺入深簡章易懂貼近實際WANGYEZHIZUOXIANGMUSHIXUNJIAOCHENG《網頁制作項目實訓教程》重慶大學出版社CONTENTS任務1使用表格制作簡單校園新聞網頁任務2使用表格布局電子商務系新聞主頁任務1使用表格制作簡單校園新聞網頁本任務可以分解為2個活動：表格基本操作；使用表格制作新聞網頁?；顒?表格基本操作1-1如下圖所示，使用表格完成比賽成績表的制作?；顒右蠡顒?表格基本操作1-11、表格的構成表格最基本的單位是單元格，由單元格組成行和列。單元格之間的間隔稱為單元格間距；單元格內容與單元格邊框之間的間隔稱為單元格邊距（或填充）。表格邊框有明暗之分，可以設置粗細、顏色等屬性。單元格邊框也有明暗之分，可以設置顏色，但不可設置粗細屬性。如下圖所示是一個5行5列的表格。知識窗單元格行列單元格填充表格邊框單元格間距框單元格邊框活動1表格基本操作1-12、表格的屬性如下圖所示，下面對表格“屬性”面板中的相關參數進行說明：ID：指定表格的ID，以便在腳本中引用該表格。行：指定表格中的行數。列：指定表格中的列數。寬：指定表格的寬度?？蛇x擇單位為像素，或占瀏覽器窗口寬度的百分比。填充：指定單元格內容與單元格邊框間的距離。單位為像素。間距：指定相鄰單元格間的間隔。單位為像素。對齊：選擇表格相對于同一段落中的其他元素的顯示位置。邊框：指定表格邊框的寬度。單位為像素。類：對該表格應用CSS類。清除列寬：從表格中刪除所有明確指定的列寬。清除行高：從表格中刪除所有明確指定的行高。將表格寬度轉換成像素：將表格中每列的寬度和整個表格的寬度都設為以像素為單位。將表格寬度轉換成百分比：將表格中每列的寬度和整個表格的寬度都設為以百分比為單位。ID清除列寬

將表格寬度轉換成像素

對齊

類清除行高

將表格寬度轉換成百分比

活動1表格基本操作1-13、表格的編輯（1）選擇表格選擇整個表格主要有以下幾種操作方法。單擊表格左上角或單擊表格中任一個單元格的邊框，如下方左圖所示。

將光標移到表格內，單擊文檔窗口左下角的標簽“<table>”，如上方右圖所示。選擇表格的行（或列）把光標放在需要選擇的行左邊（或列上方）時，光標變成黑色箭頭，單擊鼠標左鍵，選中該行（或列），如下圖所示。

活動1表格基本操作1-1（2）合并與拆分單元格合并單元格選擇要合并的幾個單元格后，可以采取以下幾種方法進行合并單元格操作。單擊鼠標右鍵，在彈出的菜單中選擇“表格”欄下的“合并單元格”選項，如下方左圖所示。單擊“屬性”面板左下角“合并單元格”按鈕，如下方右圖所示。拆分單元格選擇要拆分的單元格后，可以采取以下幾種方法進行拆分操作。單擊鼠標右鍵，在彈出的菜單中選擇“表格”欄下的“拆分單元格”選項，如下方左圖所示。單擊“屬性”面板左下角“拆分單元格”按鈕，如下方右圖所示。

活動1表格基本操作1-1（3）增加或刪除行（或列）增加行（或列）把光標移到需要增加行（或列）的下面（右側）后，有以下幾種方法增加行（或列）：點擊鼠標右鍵，在彈出的菜單中選擇“表格”欄下的“插入行（或列）”選項，如下方左圖所示。選擇“修改”菜單欄下的“表格”選項，選擇“插入行（或列）”選項。刪除行（或列）把光標移到需要刪除的行（或列）后，有以下幾種方法刪除該行（或列）：點擊鼠標右鍵，在彈出的菜單中選擇“表格”欄下的“刪除行（或列）”選項，如上方右圖所示。選擇“修改”菜單欄下的“表格”選項，選擇“刪除行（或列）”選項?；顒?表格基本操作1-1詳細操作步驟請參閱教材。活動實施表格的基本操作類似于Word文檔中表格的操作，有基礎的同學會很快熟悉，但是都需要多操作多練習?；顒釉u價活動2使用表格制作簡單新聞網頁1-21、新建一個網頁文件，按要求插入表格。2、把素材中的文字、圖片合理布局到網頁中，并將網頁文件以“task3-1-2.html”為文件名保存到“項目3”站點根目錄下，最終效果如下圖所示。活動要求活動2使用表格制作簡單新聞網頁1-2單元格的屬性如下圖所示，下面對單元格“屬性”面板中的相關參數進行說明：類：對該單元格應用CSS類。ID：指定單元格的ID，以便在腳本中引用該單元格。鏈接：指定單元格內對象的超鏈接地址。目標：指定鏈接對象打開的位置。水平：設置單元格內容在水平方向上的對齊方式。垂直：設置單元格內容在垂直方向上的對齊方式。寬和高：設置被選擇單元格的寬和高。不換行：防止換行，從而使給定單元格中的所有文本都在一行上。標題：將所選單元格格式設置為表格標題單元格。背景顏色：設置單元格的背景顏色。合并（拆分）按鈕：將所選單元格、行或列合并（拆分）為一個（兩個或多個）單元格。知識窗活動2使用表格制作簡單新聞網頁1-2詳細操作步驟請參閱教材?；顒訉嵤┖唵蔚木W頁只包含文字和圖片等幾種基本元素，使用表格進行布局，操作難度較小，設置“對齊方式”等屬性就可以合理排布這些元素，效果明顯。活動評價任務2使用表格布局電子商務系新聞主頁本任務可以分解為2個活動：使用表格進行整體布局；使用表格嵌套完成主頁布局?；顒?使用表格進行整體布局2-1如下圖所示，完成基本主頁布局的制作，完成后以“task3-2-1.html”為文件名保存?；顒右蠡顒?使用表格進行整體布局2-11、網頁布局制作網頁首先要進行基本的網頁布局，以下是最為常用的頁面布局類型：上下型布局：上下排列網頁標題和內容，如下圖A所示。左右型布局：左右排列網頁的導航欄和內容，如下圖B所示。“同”字型結構布局：布局結構與漢字“同”相似，如下圖C所示?！皣弊中筒季郑翰季纸Y構與漢字“國”相似，如下圖D所示，是一些大型網站喜歡的布局類型。T型布局：布局結構與英文大寫字母“T”相似，如下圖E所示，初學者容易上手。POP布局：頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設計中心。Flash布局：整個或大部分幅面的網頁是一個Flash動畫。知識窗A

B

CD

E

活動1使用表格進行整體布局2-12、表格標簽表格和單元格分別都有很多屬性，有相同相似的，也有不同的。表格中的基本標簽有<table>、<tr>、<td>。一般描述整個表格屬性的標簽放在<table>中，描述單元格屬性的標簽放在<tr>（行）、<td>中。標簽從屬關系由左向右依次遞減。一個表格的代碼如下圖所示?；顒?使用表格進行整體布局2-1詳細操作步驟請參閱教材?；顒訉嵤﹥热葺^多的網頁，應先構思出整個頁面的布局，再動手用表格搭建布局，最后填充內容。切忌沒有規劃的隨意堆砌內容?；顒釉u價活動2使用表格嵌套完成主頁布局2-2在已完成的“活動一”基礎上增加圖片、文字等對象，細化板塊結構，最終完成整個主頁的制作，如下圖所示，并以文件名“task3-2-2.html”另存到“項目3”站點根目錄下?；顒右蠡顒?使用表格嵌套完成主頁布局2-2表格的嵌套在復雜表格的布局中，一般不建議使用單元格的拆分和合并來實現，這樣對后期布局的修改往往會造成不利的影響。建議通過表格的嵌套或更好的Div布局來進行。嵌套表格是指在表格的單元格中再插入表格，其寬度受所在單元格的寬度限制，可以很好地控制表格內各個對象的位置。但嵌套層次不建議太多，否則有可能讓布局頁面過于復雜，可讀性差，還可能影響網頁的瀏覽速度。如下圖所示就是兩個表格的嵌套，從標簽上很容易看出，表格2是嵌套在表格1內的。知識窗活動2使用表格嵌套完成主頁布局2-2詳細操作步驟請參閱教材?；顒訉嵤┍砀竦那短走m用于內容豐富，結構復雜的網頁布局。但是嵌套操作有難度，鼠標常常會選擇不到需要操作的對象，所以請大家多使用標簽進行選擇?；顒釉u價感謝您的觀看由淺入深簡章易懂貼近實際WANGYEZHIZUOXIANGMUSHIXUNJIAOCHENG《網頁制作項目實訓教程》重慶大學出版社項目4制作包含表單的網頁由淺入深簡章易懂貼近實際WANGYEZHIZUOXIANGMUSHIXUNJIAOCHENG《網頁制作項目實訓教程》重慶大學出版社CONTENTS任務1制作登錄表單任務2制作調查問卷表單任務1制作登錄表單本任務分解為2個活動：了解表單元素；使用表單制作QQ郵箱登錄頁?；顒?了解表單元素1-1了解表單以及表單中常用的文本域、按鈕等表單元素的添加、屬性設置等使用方法；利用表單元素制作一個留言板頁面，效果如下圖所示?；顒右蠡顒?了解表單元素1-11、表單表單在頁面顯示的是一個紅色虛線框，如下圖所示，我們可以把它理解成一個容器，我們可以向里面添加進各種表單元素。在實際使用中，表單有時候可以不需要單獨添加，因為當我們在頁面中添加第一個表單元素時，系統也會自動創建一個表單。知識窗活動1了解表單元素1-12、表單屬性的設置表單屬性設置界面如下圖所示，常用屬性設置項目的含義是：動作：指定用來處理表單數據的文件。方法：用于設置表單數據提交給服務器的方法，兩種方法有所區別。POST：是將表單數據嵌入到HTTP請求中傳輸，傳輸的數據量沒有限制，可用于長表單。GET：將數據附加到請求頁的URL中，傳輸的字符數量有限制，是默認的方式。編碼類型：用于指定提交給服務器的數據使用的編碼類型，默認使用：application/x-www-form-urlencoded，如果要創建文件上傳表單，則使用：multipart/form-data。活動1了解表單元素1-13、文本域文本域是表單中的一個基本元素，應用的非常廣泛，用戶可以利用它輸入文本類的信息，如用戶名、密碼、留言等，輸入的內容可以是字符、數字等符號。文本域包括：單行、多行、密碼三種類型，以適合不同的需求，三種類型之間可以互相轉換。文本域的屬性欄設置如下圖所示：

文本域：設置該文本域在系統中的名稱，這個名字必須是唯一的。字符寬度：設置文本輸入框顯示時的寬度。最多字符數：設置在文本框中可以輸入的最大字符數。初始值：設置文本域在默認初始狀態下顯示的字符信息。禁用：勾選此項，文本域處于禁止狀態，文本框呈灰色。只讀：勾選此項，文本域內容只可查看，無法修改，可用于一些特殊情況下展示信息使用。類型：可設置文本域在三種狀態間轉換。默認為單行，用于輸入少量的文本信息；設置為密碼狀態時，文本框中輸入的字符會被隱藏，呈現項目符號或星號；設置為多行時，文本框變為多行，此時文本字段轉成文本區域表單，可用于輸入較多文本內容時使用，行數可以在屬性中設置。活動1了解表單元素1-14、按鈕表單按鈕是一個非常重要的表單元素，當用戶在輸入完數據后單擊按鈕可以將數據提交給服務器處理。按鈕的屬性欄參數設置如上圖所示：

值：可設置按鈕中的提示文字，默認的有“提交”和“重置”，隨“動作”選項設置自動變化，也可設置成其它信息動作：該選項有三個參數選擇，選擇“提交表單”則可將表單信息上傳給服務器；選擇“重設表單”可以重置表單數據；如果想設置按鈕實現其它功能，可選擇“無”，再另外設置按鈕所關聯的腳本或程序?；顒?了解表單元素1-1詳細操作步驟請參閱教材。活動實施在本次活動中，小白順利地完成留言板的制作，并且知道可以通過設置“字符寬度”參數來調節文本框的顯示寬度以使網面中前后框的邊緣可以對齊一致，使頁面更加協調美觀?；顒釉u價活動2制作QQ郵箱登錄頁1-2創建一個模擬QQ郵箱登錄頁面，效果如下圖所示，并將頁面以文件名：task4-1-2.html保存?；顒右蠡顒?制作QQ郵箱登錄頁1-21、密碼輸入表單制作在網頁制作過程中，在賬號登錄、用戶注冊等環節都會使用到密碼輸入項，在DreamweaveCS6中提供了幾種可以制作密碼輸入對象的工具，如文本字段、spry驗證密碼，下面分別進行介紹。（1）文本字段作密碼輸入項選中添加的文本域，在屬性欄中設置類型為“密碼”，如下圖所示：

當設置文本域為密碼模式時，在框內的字符顯示為小數點。這種方法制作密碼輸入框的特點是方法簡單，但對密碼的驗證功能較少，只能限制密碼最大的位數。知識窗活動2制作QQ郵箱登錄頁1-2（2）用“spry驗證密碼”作密碼輸入項“spry驗證密碼”對象的密碼驗證功能比前面方法要復雜一些，它的屬性欄如下圖所示，通過合理設置參數，可以實現密碼位數控制、內容控制、錯誤信息提示等功能。屬性欄中參數設置介紹如下：最大/最小字符：設置密碼域中可輸入的總的最小字符數和最大字符數。最大/最小字母數：設定密碼中包含的小寫字母的個數范圍。最大/最小數字數：設定密碼中包含的字數的個數范圍。最大/最小大寫字母數：設定密碼中包含的大寫字母的個數范圍。最大/最小特殊字符數：設定密碼中包含的特殊字符的個數范圍。利用以上這幾個參數，用戶可以根據需要設定密碼的一些特殊要求，以達到強化密碼復雜性的目的，當不符合要求時系統可以給出提示信息。活動2制作QQ郵箱登錄頁1-2“驗證”選項設置何時對輸入的密碼進行驗證，可根需要設置，它們的含義如下：Onblur：用戶離開輸入框。Onchange：輸入框內容有修改。Onsubit：用戶提交信息。預覽狀態：可設置密碼域在不同狀態下的提示信息，點擊按鈕，選擇“強度無效”時可出現如下圖所示的選項及出現紅色字體的提示信息，此信息是當用戶輸入的密碼不符合強度要求時系統自動提示的，內容可以修改；同樣在另外幾種狀態下也有相應的提示信息出現?；顒?制作QQ郵箱登錄頁1-22、復選框可以讓用戶在預先定義好的一個選項中進行選擇。選中矩形的復選框，可以在屬性欄中設置屬性參數，如下圖所示：

選定值：設置選擇后的參數值。初始狀態：設置默認打開頁面時選項的狀態，默認是未選中狀態?；顒?制作QQ郵箱登錄頁1-2詳細操作步驟請參閱教材。活動實施出于安全性的考慮，網站一般要求輸入密碼時不直接顯示內容，這時可以通過將密碼輸入框設置為密碼格式，則輸入內容顯示為*號，如果對密碼的位數、格式等還有特別要求，則需要通過設置屬性欄中的相關參數實現。活動評價任務2制作調查問卷表單本任務分成兩個部分完成：制作調查問卷表單（一）；制作調查問卷表單（二）?；顒?制作調查問卷表單（一）2-1了解掌握單選按鈕組、spry驗證文本域等表單元素的添加、屬性設置的方法；制作調查問卷頁面，完成后效果如下圖所示，并將頁面以文件名：task4-2-1.html為文件名保存?；顒右蠡顒?制作調查問卷表單（一）2-11、單選按鈕組單選按鈕一般都是成組使用，可以讓用戶在預先定義好的可選項中選擇一項，這樣可以使收集的信息規范，便于信息的統計。單選按鈕組添加對話框如下圖所示，根據需求單擊+號或-號可增添加或刪除選項，設置好每一個項的標簽符和值，每項的值不能相同。知識窗活動1制作調查問卷表單（一）2-12、spry驗證文本域spry驗證文本域是帶有驗證功能的文本域，它可以作為有特殊格式要求的文本輸入項使用。點擊spry驗證文本域屬性欄中“類型”按鈕，彈出多種數據類型選項，根據“類型”項選擇的不同，“格式”項會出現相對應的選項，用戶可以選擇和設置，如下圖所示：同時，在“預覽狀態”項可以設置不同狀態下的提示信息，如選擇“無效格式”選項，文本框右邊會出現紅色文字的提示信息“格式無效”，如下圖所示，信息可以根據需要進行修改?；顒?制作調查問卷表單（一）2-13、復選框組如果需要在用戶在預先定義好的多個選項中進行選擇，則可以使用復選框組，用戶可以從中選擇一項或多項。根據需求單擊+號或-號可增添加或刪除選項，設置好每一個項的標簽符和值（注意各復選框所設定的值不允許相同），如下圖所示?；顒?制作調查問卷表單（一）2-1詳細操作步驟請參閱教材?；顒訉嵤┚W頁