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

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

2、11.1.1 知識講解1. 認識表格及表格元素標簽 2. 設(shè)置表格屬性 3. 設(shè)置單元格屬性1. 認識表格及表格元素標簽 在html語言中，表格標簽用<table></table>表示，表格元素標簽位于<table>和</table>之間。行標簽為<tr></tr>，單元格標簽為<td></td>。2. 設(shè)置表格屬性 在設(shè)置表格屬性前，首先要插入表格并選擇表格。將光標定位在

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

4、創(chuàng)建table.html文件，并插入一個9行3列的表格。 （3）設(shè)置表格屬性和單元格屬性。操作步驟請老師參照軟件講解11.1.2 典型案例制作細框表格案例小結(jié)本案例通過制作table.html表格文檔，主要練習了表格的插入、填充、對齊，單元格的背景顏色、背景圖像、水平對齊方式、標題及字號的設(shè)置以及單元格的合并等。11.2 布局設(shè)計 布局是網(wǎng)頁效果的實現(xiàn)方式，分為表格布局和框架布局等，本節(jié)將學習表格布局。11.2 布局設(shè)計11.2.1 知識講解11.2.2 典型案例對“圣能賽普”的主頁進行布局 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)頁高度一般不受限制，可以向下適當延展。2. 嵌套表格在使用表格對網(wǎng)頁進行布局時，嵌套表格使用得十分廣泛。嵌套表格是指在表格的單元格

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

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

8、表格與層的相互轉(zhuǎn)換在dreamweaver中，表格與層之間可以相互轉(zhuǎn)換。有些低版本的瀏覽器不支持層功能，為了使網(wǎng)頁的訪問面擴大，可以將網(wǎng)頁中的層轉(zhuǎn)換為表格。選擇【修改】【轉(zhuǎn)換】【層到表格】命令，可將層轉(zhuǎn)換為表格。選擇【修改】【轉(zhuǎn)換】【表格到層】命令，可將表格轉(zhuǎn)換為層。11.2.2 典型案例對“圣能賽普”的主頁進行布局 案例目標 本案例將用表格來對“圣能賽普”的主頁進行布局，主要練習表格的創(chuàng)建、設(shè)置及嵌套表格的使用，完成后的效果如下圖所示。11.2.2 典型案例對“圣能賽普”的主頁進行布局11.2.2 典型案例對“圣能賽普”的主頁進行布局操作思路：（1）在fireworks中打開前面制作的“第4

9、課素材snsp主頁.png”文件，分析網(wǎng)頁結(jié)構(gòu)后發(fā)現(xiàn)：上部分由左、中、右三列構(gòu)成，頁腳為單獨一部分。因此，該網(wǎng)頁應(yīng)采用兩個表格來進行布局，上部分為1行3列的表格，下部分為1行1列的表格。（2）插入1行3列的表格，左、中、右單元格中分別再嵌套表格，放置內(nèi)容。（3）插入1行1列的表格，放置頁腳信息。操作步驟請老師參照軟件講解 11.2.2 典型案例對“圣能賽普”的主頁進行布局案例小結(jié)本案例通過對主頁進行布局，練習了表格的插入、嵌套、拆分、合并及表格與單元格的屬性設(shè)置等。在對網(wǎng)頁進行布局時，各個單元格都需要設(shè)置頂端對齊，以便使插入的圖像之間無縫。采用背景顯示效果的單元格需要設(shè)置行高以確保網(wǎng)頁與設(shè)計效

10、果一致。11.3 上機練習 11.3.1 制作粗框表格 11.3.2 用表格對主頁進行布局 11.3.1 制作粗框表格 本練習將制作如下圖所示的粗框表格，主要練習設(shè)置表格屬性和單元格屬性。11.3.1 制作粗框表格 操作思路：插入5行3列、寬500像素的表格。設(shè)置表格邊框為“10”，間距為“1”，填充為“2”。在【窗口】菜單中打開【標簽檢查器】面板，展開【瀏覽器特定的】項，設(shè)置“bordercolordark”的顏色為“#006699”、“bordercolorlight”的顏色為“#ffcc66”。11.3.2 用表格對主頁進行布局 本練習將對一個主頁進行布局，主要練習表格布局，效果如下圖所示。11.3.2 用表格對主頁進行布局 操作思路：新建jianyi站點，并新建index.html文件，將“第11課素材jia