網(wǎng)頁制作培訓(xùn)教程第課

《網(wǎng)頁制作培訓(xùn)教程第課》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

1、網(wǎng)頁制作培訓(xùn)教程第11課第11課用表格和層進(jìn)行布局本課要點(diǎn)具體要求本課導(dǎo)讀上機(jī)練習(xí)本課要點(diǎn)使用表格和層布局設(shè)計具體要求掌握表格與單元格的屬性設(shè)置掌握邊框樣式的設(shè)置掌握層的屬性設(shè)置了解一般網(wǎng)頁的大小本課導(dǎo)讀表格與層是進(jìn)行網(wǎng)頁布局的常用工具，主要用于對文本和圖形進(jìn)行定位，對頁面進(jìn)行分欄等。11.1使用表格表格是處理數(shù)據(jù)最有效的工具，它能使數(shù)據(jù)得到合理的分配。通過表格與單元格的屬性控制，可以使表格及表格數(shù)據(jù)表現(xiàn)出豐富的視覺效果。11.1使用表格11.1.1知識講解11.1.2典型案例——制作細(xì)框表格11.1.1知識講解本節(jié)將介紹表格和表格元素標(biāo)簽，以

2、及如何對表格與單元格進(jìn)行屬性設(shè)置。11.1.1知識講解1.認(rèn)識表格及表格元素標(biāo)簽2.設(shè)置表格屬性3.設(shè)置單元格屬性1.認(rèn)識表格及表格元素標(biāo)簽在HTML語言中，表格標(biāo)簽用<table></table>表示，表格元素標(biāo)簽位于<table>和</table>之間。行標(biāo)簽為<tr></tr>，單元格標(biāo)簽為<td></td>。2.設(shè)置表格屬性在設(shè)置表格屬性前，首先要插入表格并選擇表格。將光標(biāo)定位在插入的表格中，此時表格的上方或下方出現(xiàn)帶有標(biāo)注的綠線，單擊綠線區(qū)

3、域即可選取光標(biāo)所在的表格。如果沒有綠線，則可以通過在表格左下方的標(biāo)簽欄上單擊<table>標(biāo)簽來選取表格。2.設(shè)置表格屬性選取表格后，【屬性】面板如下圖所示。3.設(shè)置單元格屬性按住鼠標(biāo)左鍵拖動選取需要的單元格后，其【屬性】面板如下圖所示。11.1.2典型案例——制作細(xì)框表格案例目標(biāo)本案例將制作如下圖所示的表格效果，主要練習(xí)設(shè)置表格背景、單元格背景和表格邊框等。11.1.2典型案例——制作細(xì)框表格操作思路：（1）將第9課創(chuàng)建的snsp站點(diǎn)復(fù)制到第11課中，在【文件】面板中重新編輯站點(diǎn)位置。（2）創(chuàng)建table.html文件，并插入一個

4、9行3列的表格。（3）設(shè)置表格屬性和單元格屬性。操作步驟請老師參照軟件講解11.1.2典型案例——制作細(xì)框表格案例小結(jié)本案例通過制作table.html表格文檔，主要練習(xí)了表格的插入、填充、對齊，單元格的背景顏色、背景圖像、水平對齊方式、標(biāo)題及字號的設(shè)置以及單元格的合并等。11.2布局設(shè)計布局是網(wǎng)頁效果的實(shí)現(xiàn)方式，分為表格布局和框架布局等，本節(jié)將學(xué)習(xí)表格布局。11.2布局設(shè)計11.2.1知識講解11.2.2典型案例——對“圣能賽普”的主頁進(jìn)行布局11.2.1知識講解本節(jié)將介紹一般網(wǎng)頁的大小、表格的嵌套、用CSS定義表格邊框、表格與層的轉(zhuǎn)換等知識

5、。11.2.1知識講解1.網(wǎng)頁大小的規(guī)定2.嵌套表格3.定義邊框樣式4.使用層5.表格與層的相互轉(zhuǎn)換1.網(wǎng)頁大小的規(guī)定一般以800×600像素和1024×768像素下全屏顯示時的網(wǎng)頁寬度來確定網(wǎng)頁的大小。一般來說，除去瀏覽器的邊框，800×600像素下全屏顯示時的網(wǎng)頁寬度是778或776像素；1024×768像素下全屏顯示時的網(wǎng)頁寬度為1002或1000像素。用戶也可以根據(jù)設(shè)計效果指定所需的寬度。網(wǎng)頁高度一般不受限制，可以向下適當(dāng)延展。2.嵌套表格在使用表格對網(wǎng)頁進(jìn)行布局時，嵌套表格使用得十分廣泛。嵌套表格是指在表格的單元格中再插入表格來放置網(wǎng)

6、頁元素。一般而言，一個網(wǎng)頁中嵌套表格的層次不能超過3層。層次越多，文件越大，因此，應(yīng)盡量采用較少的嵌套層次來進(jìn)行網(wǎng)頁布局。2.嵌套表格嵌套表格一般是通過文檔窗口左下側(cè)的標(biāo)簽欄來選擇的：將光標(biāo)定位在嵌套表格的單元格中，單擊標(biāo)簽欄中的標(biāo)簽即可選中嵌套表格，例如，單擊中的標(biāo)簽，即可選中嵌套表格。此外，嵌套表格的屬性設(shè)置方法與普通表格相同。3.定義邊框樣式除了在【屬性】面板中設(shè)置外，也可以通過【CSS樣式】面板來定義表格的邊框樣式。3.定義邊框樣式表格由行線和列線組成，如果只需要表格的外邊框線，則要將表格分成上、上與左、上與右、左、右、下、下與左、下與

7、右8個部分來定義才能實(shí)現(xiàn)如下圖所示的效果，這是設(shè)置表格屬性與單元格屬性所無法實(shí)現(xiàn)的。4.使用層層也是進(jìn)行網(wǎng)頁布局的一種工具，但常在使用表格進(jìn)行布局時作為輔助工具。由于層具有浮動性，可以在窗口中隨意拖動，因此它的定位相對于表格更為靈活。例如，要在網(wǎng)頁左右側(cè)空白處或浮于網(wǎng)頁上方添加一些廣告、宣傳畫等，就可以通過層來完成。層的繪制方法為：單擊插入欄的【布局】選項(xiàng)卡中的按鈕，在窗口中按住鼠標(biāo)左鍵并拖動；如果要連續(xù)繪制多個，則在按住【Ctrl】鍵的同時繪制。4.使用層單擊層邊框選中層，其【屬性】面板如下圖所示。如果要使多個層對齊、大小一致等，則按住【Sh

8、ift】鍵選中這些層，然后在【屬性】面板中設(shè)置對應(yīng)的參數(shù)。5.表格與層的相互轉(zhuǎn)換在Dreamweaver中，表格與層之間可以相互轉(zhuǎn)換。有些低版本的瀏覽