《網(wǎng)頁設(shè)計與制作實踐》課件第7章表格與表單

第7章表格與表單1考核知識點表格創(chuàng)建及表格的樣式設(shè)置。2練習(xí)目標(biāo)●掌握創(chuàng)建表格的方法?！裾莆毡砀裣嚓P(guān)屬性的設(shè)置?！裾莆蘸喜卧竦姆椒ā！裾莆?lt;th>、<tr>、<td>標(biāo)簽的用法。●掌握<th>、<tr>、<td>的常用屬性。實驗1表格請做出以下效果：要求：（1）創(chuàng)建寬600px的表格，表格有7列，1行表格標(biāo)題，賣家買家信用各占4行，中間有一空行，如效果圖所示。（2）表格標(biāo)題有灰色的背景。（3）評價中的好、中、差用給定的圖片表示。3實驗內(nèi)容及要求實驗1表格結(jié)構(gòu)分析：創(chuàng)建表格首先要分析表格有多少行列，表格的行列以最大數(shù)算，然后通過合并單元格，制作出各種效果的表格。本例從效果圖可以分析出，表格有7列，10行，中間的空白行可通過合并一行單元格制作出來，“賣家信用”和“買家信用”所占單元格是通過縱向合并單元格就可以制作出來。樣式分析：（1）設(shè)置表格的樣式進(jìn)行整體控制，需對表框的寬度、外邊距樣式進(jìn)行設(shè)置。（2）設(shè)置表題的背景及單元格的邊框、文字對齊樣式。（3）設(shè)置中間行無邊框，制作出空行。4實驗分析實驗1表格1考核知識點表單<form>、<input>控件、<textarea>控件、<select>控件、用CSS控制表單及表單元素的樣式。2練習(xí)目標(biāo)●掌握表單的構(gòu)成。●掌握<form>標(biāo)簽的用法及相關(guān)屬性的設(shè)置?！裾莆読nput控件中的單行文本輸入框、密碼輸入框、復(fù)選框、文件域、按鈕的屬性設(shè)置及使用方法?！裾莆?lt;textarea>、<select>等控件的屬性設(shè)置及使用方法。●掌握<label>標(biāo)簽的屬性設(shè)置及使用方法?！袷煜け砀癫季值?。實驗2寶貝發(fā)布表單請做出以下效果：要求：（1）要求運(yùn)用表格和表單組織頁面。（2）跟根需要錄入的信息特點，選擇對應(yīng)的控制制作。3實驗內(nèi)容及要求實驗2寶貝發(fā)布表單結(jié)構(gòu)分析：從效果圖可以看出界面整體包在一個大盒子中，內(nèi)容分可以分為上面的標(biāo)題和下面的表單兩部分。其中表單部分排列整齊，由左右兩部分構(gòu)成，左邊為提示信息，右邊為對應(yīng)的表單控制。表單部分可以表格來布局，需要定義一個7行2列的表格。寶貝標(biāo)題、尺寸、寶貝圖片、提交及重置按鈕用<input>標(biāo)簽定義；寶貝賣點需要錄入多行信息，通過<textarea>控件定義多行文本框；品牌用下拉列表選擇，<select>控件定義。樣式分析：（1）通過最外層的大盒子頁面進(jìn)行整體控制，需要對其設(shè)置高度、寬度、邊框、外邊距樣式。（2）設(shè)置標(biāo)題字體大小及下內(nèi)邊距控制標(biāo)題的位置。（3）設(shè)置左側(cè)提示信