網頁設計與制作老虎工作室

2012年12月網頁設計與制作老虎工作室

2012年12月項目六表格──布局一翔網店主頁任務一使用表格布局頁眉任務二使用嵌套表格布局主體頁面任務三使用表格布局頁腳實訓布局“電腦商城”網頁項目六表格──布局一翔網店主頁任務一使用表格布局頁眉表格是網頁排版的靈魂，是頁面布局的重要方法，它可以將網頁中的文本、圖像等內容有效地組合成符合設計效果的頁面。本項目以一翔網店主頁為例，介紹使用表格進行網頁布局的基本方法。在項目中，將使用表格分別對頁眉、主體和頁腳進行布局。表格是網頁排版的靈魂，是頁面布局的重要方法，

任務一使用表格布局頁眉

需要掌握的內容主要有：1、表格的概念2、插入表格3、選擇表格4、設置表格屬性5、設置單元格屬性任務一使用表格布局頁眉需要掌握的內容主在網頁制作中，表格的作用主要體現在兩個方面，一個是組織數據，如各種數據表，另一個是布局網頁，即把網頁的各種元素通過表格進行有序布局。一個完整的表格包括行、列、單元格、單元格間距、單元格邊距（填充）、表格邊框和單元格邊框。表格邊框可以設置粗細和顏色等屬性，單元格邊框粗細不可設置。另外，表格的HTML標簽是“<table>”，行的HTML標簽是“<tr>”，單元格的HTML標簽是“<td>”。一個包括n列表格的寬度＝2×表格邊框＋（n＋1）×單元格間距＋2n×單元格邊距＋n×單元格寬度+2n×單元格邊框寬度（1個像素）。掌握這個公式是非常有用的，在運用表格布局時，精確地定位網頁就是通過設置單元格的寬度或者高度來實現的。1、表格的概念在網頁制作中，表格的作用主要體現在兩個方面，在主菜單中選擇【插入】／【表格】命令，或在【插入】／【常用】面板中單擊（表格）按鈕打開【表格】對話框進行設置插入即可。2、插入表格在主菜單中選擇【插入】／【表格】命令，或在【選擇表格的方法如下：（1）單擊表格左上角或者表格中任何一個單元格的邊框線。（2）將光標移至欲選擇的表格內，單擊文檔窗口左下角對應的“＜table＞”標簽。（3）將光標置于表格的邊框上，當光標呈上下箭頭形狀時單擊鼠標。（4）將光標置于表格內，在主菜單中選擇【修改】／【表格】／【選擇表格】命令或在鼠標右鍵快捷菜單中選擇【表格】／【選擇表格】命令。3、選擇表格選擇表格的方法如下：3、選擇表格選中表格，在【屬性】面板中將顯示表格的各項屬性，同時也可以修改這些屬性設置。4、設置表格屬性選中表格，在【屬性】面板中將顯示表格的各項屬將光標置于單元格內，在單元格【屬性】面板設置其屬性。5、設置單元格屬性將光標置于單元格內，在單元格【屬性】面板設置任務二使用嵌套表格布局主體頁面（一）設置主體頁面布局（二）設置左側頁面布局（三）設置右側頁面布局任務二使用嵌套表格布局主體頁面（一）設置主體頁面布局（一）設置主體頁面布局

需要掌握的內容主要有：1、在表格外插入表格2、設置單元格屬性3、使用表格制作細線的方法

（一）設置主體頁面布局需要掌1、在表格外插入表格

用鼠標選中整個表格或者將光標置于表格的最右側，然后選擇【插入】／【表格】命令插入表格，即可在上一個表格的下面插入表格。1、在表格外插入表格用鼠標選2、設置單元格屬性

將鼠標光標置于單元格內，然后根據需要在【屬性】面板中設置單元格的水平、垂直對齊方式和單元格寬度等。2、設置單元格屬性將鼠標光標置于單元格內，然3、使用表格制作細線的方法

將鼠標光標置于單元格內，然后設置單元格寬度或高度為較小的數值，如“2”，再設置背景顏色，如“#e4d9d9”，并將單元格源代碼中的不換行空格符“ ”刪除即可。3、使用表格制作細線的方法將鼠標光標置于單元（二）設置左側頁面布局

需要掌握的內容主要有：1、插入嵌套表格2、在表格中增加行或列3、刪除表格的行或列

（二）設置左側頁面布局需要掌1、插入嵌套表格

所謂嵌套表格，就是在表格的單元格中再插入表格。將光標置于單元格內，在主菜單中選擇【插入】/【表格】命令將在單元格中插入一個嵌套表格。嵌套表格嵌套的層數不宜過多，以3-4層為宜。在使用表格進行網頁布局時，最好不要將所有內容放在一個表格中，因為在瀏覽器端只有整個表格的內容全部下載完后才顯示，內容過多的表格必然導致用戶等待的時間太長，而把內容分散到多個表格必然解決這個問題。1、插入嵌套表格所謂嵌套表2、在表格中增加行或列

在表格中增加行或列的方法如下：（1）在主菜單中選擇【修改】／【表格】／【插入行】或【插入列】命令或在鼠標右鍵快捷菜單中選擇【表格】／【插入行】或【插入列】命令將在光標所在行的上面插入一行或在列的左側插入一列。（2）在主菜單中選擇【修改】／【表格】／【插入行或列】命令或在鼠標右鍵快捷菜單中選擇【表格】／【插入行或列】命令，可以通過【插入行或列】對話框設置是插入行還是列及其行數和位置。（3）在主菜單中選擇【插入】／【表格對象】／【在上面插入行】、【在下面插入行】、【在左邊插入列】、【在右邊插入列】命令插入行或列。2、在表格中增加行或列在表格如果要刪除表格的行或列，可以先將光標置于要刪除的行或列中，或者將要刪除的行或列選中，然后在主菜單中選擇【修改】/【表格】/【刪除行】或【刪除列】命令或在鼠標右鍵快捷菜單選擇【表格】/【刪除行】或【刪除列】命令即可。其實，最簡便的方法是選定要刪除的行或列，然后按下Delete鍵直接刪除。如果要刪除表格的內容而不想刪除表格，可以選擇一個或多個單元格，但不能選擇整行、整列或者整個表格。只有這樣，被選擇的行、列或者單元格中的內容被刪除后，表格的結構或屬性才不會發生變化。3、刪除表格的行或列如果要刪除表格的行或列，可以先將光標置于要刪

需要掌握的內容主要有：1、選擇表格的行、列和單元格2、合并單元格3、拆分單元格

（三）設置右側頁面布局需要掌握的內容主要有：（三）設置右側頁面布局選擇表格的行、列的方法如下：（1）當鼠標位于欲選擇行首或者列頂時，鼠標變成黑色箭頭，這時單擊鼠標左鍵，便可選擇行或者列。（2）按住鼠標左鍵從左至右或者從上至下拖曳，將欲選擇的行或列選擇。（3）還有一種方法可以選擇行，將光標移到欲選擇的行中，然后單擊文檔窗口左下角的“<tr>”標簽，這種方法只能用來選擇行，而不能用來選擇列。1、選擇表格的行、列和單元格選擇表格的行、列的方法如下：1、選擇表格的行選擇表格不相鄰的行、列的方法如下：（1）按住Ctrl鍵，把鼠標置于欲選擇的行首或者列頂，當鼠標變成黑色箭頭時，依次單擊鼠標左鍵。（2）按住Ctrl鍵，在已選擇的連續行或列中單擊想取消的行或列將其去除。選擇表格不相鄰的行、列的方法如下：

選擇相鄰單元格的方法如下。（1）在開始的單元格中按住鼠標左鍵并拖曳到最后的單元格。（2）將光標置于開始的單元格內，按住Shift鍵不放，單擊最后的單元格。選擇不相鄰的單元格的方法如下。（1）按住Ctrl鍵，單擊欲選擇的單元格。（2）在已選擇的連續單元格中按住Ctrl鍵，單擊想取消選擇的單元格將其去除。選擇相鄰單元格的方法如下。

選擇單個單元格的方法如下。（1）先將光標置于單元格內，按住Ctrl鍵，并單擊單元格。（2）將光標置于單元格內，然后單擊文檔窗口左下角的“<td>”標簽。選擇單個單元格的方法如下。合并單元格是針對多個單元格而言的，而且這些單元格必須是連續的一個矩形。合并單元格首先需要選中這些單元格，然后執行以下任一操作即可。（1）單擊【屬性】面板中的（合并單元格）按鈕。（2）在主菜單中選擇【修改】/【表格】/【合并單元格】命令。（3）在鼠標右鍵快捷菜單中選擇【表格】/【合并單元格】命令。2、合并單元格合并單元格是針對多個單元格而言的，而且這些單拆分單元格是針對單個單元格而言的，可看成是合并單元格的逆向操作。拆分單元格首先需要將光標置于該單元格內，然后執行以下任一操作。（1）單擊【屬性】面板中的（拆分）按鈕。（2）在主菜單中選擇【修改】/【表格】/【拆分單元格】命令。（3）在鼠標右鍵快捷菜單中選擇【表格】/【拆分單元格】命令。3、拆分單元格拆分單元格是針對單個單元格而言的，可看成是合無論使用哪種方法拆分單元格，最終都將彈出【拆分單元格】對話框。在【拆分單元格】對話框中，【把單元格拆分】選項后面有【行】和【列】兩個選項，這表明可以將單元格縱向拆分或者橫向拆分。無論使用哪種方法拆分單元格，最終都將彈出【拆任務三使用表格布局頁腳需要掌握的內容主要有：1、表格排序2、表格式數據的導入或導出

任務三使用表格布局頁腳需要掌握的內容主1、表格排序表格還可以根據表格列中的數據來進行排序，主要是針對具有數據的表格。方法是，首先選中表格，然后在主菜單中選擇【命令】/【排序表格】命令，打開【排序表格】對話框，進行參數設置即可。1、表格排序表格還可以根據表格列中的數據來進2、表格式數據的導入或導出在Dreamweaver中，還可以將一些具有制表符、逗號、句號、分號或其他分隔符的已經格式化的表格數據導入到網頁文檔中，也可以將網頁中的表格導出為文本文件保存，這對于需要在網頁中放置大量格式化數據的情況提供了更加快捷、方便的方法。方法是，在主菜單中選擇【文件】/【導入】/【Excel文檔】命令或【表格式數據】命令導入表格，選擇【文件】/【導出】/【表格】命令導出表格。2、表格式數據的導入或導出在Dreamwea實訓布局“電腦商城”網頁本項目主要介紹了使用表格布局網頁的基本方法，本實訓將讓讀者進一步鞏固所學的基本知識。要求：把素材文件復制到站點根文件夾下，然后根據操作提示使用表格布局的網頁。實訓布局“電腦商城”網頁本項目主要介紹了

制作“送孟浩然之廣陵”網頁

制作“送孟浩然之廣陵”網頁項目小結本項目介紹了使用表格對網頁進行布局的基本方法，詳細闡述了插入表格、編輯表格、表格屬性設置、單元格屬性設置等基本內容。熟練掌握表格的各種操作和屬性設置會給網頁制作帶來極大的方便，是需要重點學習和掌握的內容之一。在本項目中，最外層表格的寬度是用“像素”來定制的，這樣網頁文檔不會隨著瀏覽器分辨率的改變而發生變化。插入嵌套表格可以區分不同的欄目內容，使各個欄目相互獨立，但嵌套表格最好不要層次太多，否則會加長網頁的打開時間。在沒有設置CSS樣式的情況下，在一個文檔中表格不能在水平方向并排，而只能在垂直方向按順序排列。項目小結本項目介紹了使用表格對網頁進行布局網頁設計與制作老虎工作室

2012年12月網頁設計與制作老虎工作室

2012年12月項目六表格──布局一翔網店主頁任務一使用表格布局頁眉任務二使用嵌套表格布局主體頁面任務三使用表格布局頁腳實訓布局“電腦商城”網頁項目六表格──布局一翔網店主頁任務一使用表格布局頁眉表格是網頁排版的靈魂，是頁面布局的重要方法，它可以將網頁中的文本、圖像等內容有效地組合成符合設計效果的頁面。本項目以一翔網店主頁為例，介紹使用表格進行網頁布局的基本方法。在項目中，將使用表格分別對頁眉、主體和頁腳進行布局。表格是網頁排版的靈魂，是頁面布局的重要方法，

任務一使用表格布局頁眉

需要掌握的內容主要有：1、表格的概念2、插入表格3、選擇表格4、設置表格屬性5、設置單元格屬性任務一使用表格布局頁眉需要掌握的內容主在網頁制作中，表格的作用主要體現在兩個方面，一個是組織數據，如各種數據表，另一個是布局網頁，即把網頁的各種元素通過表格進行有序布局。一個完整的表格包括行、列、單元格、單元格間距、單元格邊距（填充）、表格邊框和單元格邊框。表格邊框可以設置粗細和顏色等屬性，單元格邊框粗細不可設置。另外，表格的HTML標簽是“<table>”，行的HTML標簽是“<tr>”，單元格的HTML標簽是“<td>”。一個包括n列表格的寬度＝2×表格邊框＋（n＋1）×單元格間距＋2n×單元格邊距＋n×單元格寬度+2n×單元格邊框寬度（1個像素）。掌握這個公式是非常有用的，在運用表格布局時，精確地定位網頁就是通過設置單元格的寬度或者高度來實現的。1、表格的概念在網頁制作中，表格的作用主要體現在兩個方面，在主菜單中選擇【插入】／【表格】命令，或在【插入】／【常用】面板中單擊（表格）按鈕打開【表格】對話框進行設置插入即可。2、插入表格在主菜單中選擇【插入】／【表格】命令，或在【選擇表格的方法如下：（1）單擊表格左上角或者表格中任何一個單元格的邊框線。（2）將光標移至欲選擇的表格內，單擊文檔窗口左下角對應的“＜table＞”標簽。（3）將光標置于表格的邊框上，當光標呈上下箭頭形狀時單擊鼠標。（4）將光標置于表格內，在主菜單中選擇【修改】／【表格】／【選擇表格】命令或在鼠標右鍵快捷菜單中選擇【表格】／【選擇表格】命令。3、選擇表格選擇表格的方法如下：3、選擇表格選中表格，在【屬性】面板中將顯示表格的各項屬性，同時也可以修改這些屬性設置。4、設置表格屬性選中表格，在【屬性】面板中將顯示表格的各項屬將光標置于單元格內，在單元格【屬性】面板設置其屬性。5、設置單元格屬性將光標置于單元格內，在單元格【屬性】面板設置任務二使用嵌套表格布局主體頁面（一）設置主體頁面布局（二）設置左側頁面布局（三）設置右側頁面布局任務二使用嵌套表格布局主體頁面（一）設置主體頁面布局（一）設置主體頁面布局

需要掌握的內容主要有：1、在表格外插入表格2、設置單元格屬性3、使用表格制作細線的方法

（一）設置主體頁面布局需要掌1、在表格外插入表格

用鼠標選中整個表格或者將光標置于表格的最右側，然后選擇【插入】／【表格】命令插入表格，即可在上一個表格的下面插入表格。1、在表格外插入表格用鼠標選2、設置單元格屬性

將鼠標光標置于單元格內，然后根據需要在【屬性】面板中設置單元格的水平、垂直對齊方式和單元格寬度等。2、設置單元格屬性將鼠標光標置于單元格內，然3、使用表格制作細線的方法

將鼠標光標置于單元格內，然后設置單元格寬度或高度為較小的數值，如“2”，再設置背景顏色，如“#e4d9d9”，并將單元格源代碼中的不換行空格符“ ”刪除即可。3、使用表格制作細線的方法將鼠標光標置于單元（二）設置左側頁面布局

需要掌握的內容主要有：1、插入嵌套表格2、在表格中增加行或列3、刪除表格的行或列

（二）設置左側頁面布局需要掌1、插入嵌套表格

所謂嵌套表格，就是在表格的單元格中再插入表格。將光標置于單元格內，在主菜單中選擇【插入】/【表格】命令將在單元格中插入一個嵌套表格。嵌套表格嵌套的層數不宜過多，以3-4層為宜。在使用表格進行網頁布局時，最好不要將所有內容放在一個表格中，因為在瀏覽器端只有整個表格的內容全部下載完后才顯示，內容過多的表格必然導致用戶等待的時間太長，而把內容分散到多個表格必然解決這個問題。1、插入嵌套表格所謂嵌套表2、在表格中增加行或列

在表格中增加行或列的方法如下：（1）在主菜單中選擇【修改】／【表格】／【插入行】或【插入列】命令或在鼠標右鍵快捷菜單中選擇【表格】／【插入行】或【插入列】命令將在光標所在行的上面插入一行或在列的左側插入一列。（2）在主菜單中選擇【修改】／【表格】／【插入行或列】命令或在鼠標右鍵快捷菜單中選擇【表格】／【插入行或列】命令，可以通過【插入行或列】對話框設置是插入行還是列及其行數和位置。（3）在主菜單中選擇【插入】／【表格對象】／【在上面插入行】、【在下面插入行】、【在左邊插入列】、【在右邊插入列】命令插入行或列。2、在表格中增加行或列在表格如果要刪除表格的行或列，可以先將光標置于要刪除的行或列中，或者將要刪除的行或列選中，然后在主菜單中選擇【修改】/【表格】/【刪除行】或【刪除列】命令或在鼠標右鍵快捷菜單選擇【表格】/【刪除行】或【刪除列】命令即可。其實，最簡便的方法是選定要刪除的行或列，然后按下Delete鍵直接刪除。如果要刪除表格的內容而不想刪除表格，可以選擇一個或多個單元格，但不能選擇整行、整列或者整個表格。只有這樣，被選擇的行、列或者單元格中的內容被刪除后，表格的結構或屬性才不會發生變化。3、刪除表格的行或列如果要刪除表格的行或列，可以先將光標置于要刪

需要掌握的內容主要有：1、選擇表格的行、列和單元格2、合并單元格3、拆分單元格

（三）設置右側頁面布局需要掌握的內容主要有：（三）設置右側頁面布局選擇表格的行、列的方法如下：（1）當鼠標位于欲選擇行首或者列頂時，鼠標變成黑色箭頭，這時單擊鼠標左鍵，便可選擇行或者列。（2）按住鼠標左鍵從左至右或者從上至下拖曳，將欲選擇的行或列選擇。（3）還有一種方法可以選擇行，將光標移到欲選擇的行中，然后單擊文檔窗口左下角的“<tr>”標簽，這種方法只能用來選擇行，而不能用來選擇列。1、選擇表格的行、列和單元格選擇表格的行、列的方法如下：1、選擇表格的行選擇表格不相鄰的行、列的方法如下：（1）按住Ctrl鍵，把鼠標置于欲選擇的行首或者列頂，當鼠標變成黑色箭頭時，依次單擊鼠標左鍵。（2）按住Ctrl鍵，在已選擇的連續行或列中單擊想取消的行或列將其去除。選擇表格不相鄰的行、列的方法如下：

選擇相鄰單元格的方法如下。（1）在開始的單元格中按住鼠標左鍵并拖曳到最后的單元格。（2）將光標置于開始的單元格內，按住Shift鍵不放，單擊最后的單元格。選擇不相鄰的單元格的方法如下。（1）按住Ctrl鍵，單擊欲選擇的單元格。（2）在已選擇的連續單元格中按住Ctrl鍵，單擊想取消選擇的單元格將其去除。選擇相鄰單元格的方法如下。

選擇單個單元格的方法如下。（1）先將光標置于單元格內，按住Ctrl鍵，并單擊單元格。（2）將光標置于單元格內，然后單擊文檔窗口左下角的“<td>”標簽。選擇單個單元格的方法如下。合并單元格是針對多個單元格而言的，而且這些單元格必須是連續的一個矩形。合并單元格首先需要選中這些單元格，然后執行以下任一操作即可。（1）單擊【屬性】面板中的（合并單元格）按鈕。（2）在主菜單中選擇【修改】/【表格】/【合并單元格】命令。（3）在鼠標右鍵快捷菜單中選擇【表格】/【合并單元格】命令。2、合并單元格合并單元格是針對多個單元格而言的，而且這些單拆分單元格是針對單個單元格而言的，可看成是合并單元格的逆向操作。拆分單元格首先需要將光標置于該單元格內，然后執行以下任一操作。（1）單擊【屬性】面板中的（拆分）按鈕。（2）在主菜單中選擇【修改】/【表格】/【拆分單元格】命令。（3）在鼠標右鍵快捷菜單中選擇【表格】/【拆分單元格】命令。3、拆分單元格拆分單元格是針對單個單元格而言的，可看成是合無論使用哪種方法拆分單元格，最終都將彈出【拆分單