項目06制作名師工作室網頁

1、主講：主講：網頁設計與制作Dreamweaver CS3項目六 制作名師工作室網頁任務一 制作頁眉任務二 設置主體頁面項目六：項目六： 制作名師工作室網頁制作名師工作室網頁網 頁 設 計 與 制 作Dreamweaver CS3任務一任務二任務三 制作頁腳小 結任務三實 訓任務一 制作頁眉 本任務主要是使用表格來布局網頁頁眉的內容，用到的基礎知識主要包括插入表格、表格屬性設置、插入嵌套表格的方法以及單元格屬性設置等。Dreamweaver CS3網 頁 設 計 與 制 作項目六：項目六： 制作名師工作室網頁制作名師工作室網頁任務一任務二小 結任務三實 訓操作一 設置網站標識Dreamweave

2、r CS3網 頁 設 計 與 制 作 本操作主要介紹使用表格定位網站標識的方法。通過本操作本操作主要介紹使用表格定位網站標識的方法。通過本操作的學習，應該掌握的內容主要有：的學習，應該掌握的內容主要有： 1.關于表格的理解 一個完整的表格包括行、列、單元格、單元格間距、單元格一個完整的表格包括行、列、單元格、單元格間距、單元格邊距（填充）、表格邊框和單元格邊框。表格邊框可以設置粗細邊距（填充）、表格邊框和單元格邊框。表格邊框可以設置粗細和顏色等屬性，單元格邊框粗細不可設置。和顏色等屬性，單元格邊框粗細不可設置。 一個包括一個包括n列表格的寬度列表格的寬度2表格邊框（表格邊框（n1）單元格單元格

3、間距間距2n單元格邊距單元格邊距n單元格寬度單元格寬度+2n單元格邊框寬度單元格邊框寬度（1個像素）。個像素）。 掌握這個公式是非常有用的，在運用表格布局時，精確地定掌握這個公式是非常有用的，在運用表格布局時，精確地定位網頁就是通過設置單元格的寬度或者高度來實現的。位網頁就是通過設置單元格的寬度或者高度來實現的。 項目六：項目六： 制作名師工作室網頁制作名師工作室網頁任務一任務二小 結任務三實 訓操作一 設置網站標識Dreamweaver CS3網 頁 設 計 與 制 作項目六：項目六： 制作名師工作室網頁制作名師工作室網頁表格的構成 任務一任務二小 結任務三實 訓Dreamweaver CS

4、3網 頁 設 計 與 制 作操作一 設置網站標識2.插入表格的方法 將光標置于頁面中，然后在主菜單中選擇將光標置于頁面中，然后在主菜單中選擇【插入記錄插入記錄】【表格表格】命令或在命令或在【插入插入】【常用常用】面板中單擊面板中單擊 （表格）（表格）按鈕打開按鈕打開【表格表格】對話框進行參數設置，最后單擊對話框進行參數設置，最后單擊【確定確定】按鈕按鈕插入表格。插入表格。 項目六：項目六： 制作名師工作室網頁制作名師工作室網頁任務一任務二小 結任務三實 訓Dreamweaver CS3網 頁 設 計 與 制 作操作一 設置網站標識3.選擇表格的方法通過以下通過以下4種方法來選擇整個表格。種方法

5、來選擇整個表格。l單擊表格左上角或者單擊表格中任何一個單元格的邊框線。單擊表格左上角或者單擊表格中任何一個單元格的邊框線。l將光標置于表格內，選擇主菜單中的將光標置于表格內，選擇主菜單中的【修改修改】【表格表格】【選擇表格選擇表格】命令或單擊鼠標右鍵，在快捷菜單中選擇命令或單擊鼠標右鍵，在快捷菜單中選擇【表表格格】【選擇表格選擇表格】命令。命令。l按住鼠標左鍵由表格的左上角至右下角拖曳，選中其中所有按住鼠標左鍵由表格的左上角至右下角拖曳，選中其中所有的單元格，并選擇主菜單中的的單元格，并選擇主菜單中的【編輯編輯】【全選全選】命令。命令。l將光標移至欲選擇的表格內，單擊文檔窗口左下角對應的將光標

6、移至欲選擇的表格內，單擊文檔窗口左下角對應的“table”標簽。標簽。項目六：項目六： 制作名師工作室網頁制作名師工作室網頁任務一任務二小 結任務三實 訓Dreamweaver CS3網 頁 設 計 與 制 作操作一 設置網站標識4.設置表格【屬性】的方法 首先選中表格，然后通過表格首先選中表格，然后通過表格【屬性屬性】面板設置表格的行數、面板設置表格的行數、列數、寬度、高度、填充、間距、邊框、對齊方式、背景顏色、列數、寬度、高度、填充、間距、邊框、對齊方式、背景顏色、背景圖像、邊框顏色等屬性。背景圖像、邊框顏色等屬性。 項目六：項目六： 制作名師工作室網頁制作名師工作室網頁任務一任務二小 結

7、任務三實 訓Dreamweaver CS3網 頁 設 計 與 制 作操作一 設置網站標識5.設置單元格【屬性】的方法 通過單元格通過單元格【屬性屬性】面板可以設置單元格的寬度和高度、水面板可以設置單元格的寬度和高度、水平和垂直對齊方式、背景顏色和背景圖像以及邊框顏色等。另外，平和垂直對齊方式、背景顏色和背景圖像以及邊框顏色等。另外，如果需要將單元格高度或寬度設置為較小數值時，為了達到實際如果需要將單元格高度或寬度設置為較小數值時，為了達到實際效果，必須將該單元格源代碼中的效果，必須將該單元格源代碼中的“ ”（不換行空格符）（不換行空格符）刪除，這是使用表格制作細線效果的一種技

8、巧。刪除，這是使用表格制作細線效果的一種技巧。 項目六：項目六： 制作名師工作室網頁制作名師工作室網頁任務一任務二小 結任務三實 訓操作二 制作導航欄Dreamweaver CS3網 頁 設 計 與 制 作 本操作主要介紹使用表格制作導航欄的方法。本操作主要介紹使用表格制作導航欄的方法。通過本操作的學習，通過本操作的學習，應該掌握的內容主要有：應該掌握的內容主要有： 1.拆分單元格的方法通過以下方法可以打開通過以下方法可以打開【拆分單元格拆分單元格】對話框拆分單元格。對話框拆分單元格。在主菜單中選擇在主菜單中選擇【修改修改】【表格表格】【拆分單元格拆分單元格】命令。命令。單擊鼠標右鍵，在其快捷

9、菜單中選擇單擊鼠標右鍵，在其快捷菜單中選擇【表格表格】【拆分單元格拆分單元格】命令。命令。單擊單元格單擊單元格【屬性屬性】面板左下方的面板左下方的 （拆分）按鈕。（拆分）按鈕。項目六：項目六： 制作名師工作室網頁制作名師工作室網頁任務一任務二小 結任務三實 訓Dreamweaver CS3網 頁 設 計 與 制 作操作二 制作導航欄項目六：項目六： 制作名師工作室網頁制作名師工作室網頁任務一任務二小 結任務三實 訓Dreamweaver CS3網 頁 設 計 與 制 作操作二 制作導航欄2.合并單元格的方法 通過以下方法可以將選擇的單元格進行合并。通過以下方法可以將選擇的單元格進行合并。在主菜

10、單中選擇在主菜單中選擇【修改修改】【表格表格】【合并單元格合并單元格】命令。命令。單擊鼠標右鍵，在其快捷菜單中選擇單擊鼠標右鍵，在其快捷菜單中選擇【表格表格】【合并單元格合并單元格】命令。命令。單擊單元格單擊單元格【屬性屬性】面板左下方的面板左下方的 （合并）按鈕。（合并）按鈕。項目六：項目六： 制作名師工作室網頁制作名師工作室網頁任務一任務二小 結任務三實 訓Dreamweaver CS3網 頁 設 計 與 制 作操作二 制作導航欄項目六：項目六： 制作名師工作室網頁制作名師工作室網頁3.選擇表格的行或列的方法下面兩種方法可用來選擇表格的行或列。下面兩種方法可用來選擇表格的行或列。當鼠標位于

11、表格欲選擇的行首或列頂時，鼠標變成黑色箭頭，當鼠標位于表格欲選擇的行首或列頂時，鼠標變成黑色箭頭，這時單擊鼠標左鍵，便可選擇行或者列。這時單擊鼠標左鍵，便可選擇行或者列。按住鼠標左鍵從左至右或者從上至下拖曳，將欲選擇的行或列按住鼠標左鍵從左至右或者從上至下拖曳，將欲選擇的行或列選中。選中。另外，單擊文檔窗口左下角相應的另外，單擊文檔窗口左下角相應的“”標簽也可以選擇相應標簽也可以選擇相應的行。的行。任務一任務二小 結任務三實 訓 本任務主要是使用表格布局網頁主體部分的內容，用到的基礎知識主要包括表格的嵌套、利用表格制作細線邊框等。Dreamweaver CS3網 頁 設 計 與 制 作任務二

12、設置主體頁面項目六：項目六： 制作名師工作室網頁制作名師工作室網頁任務一任務二小 結任務三實 訓操作一 制作左側區(qū)域Dreamweaver CS3網 頁 設 計 與 制 作通過本操作的學習，應該掌握的內容主要有：通過本操作的學習，應該掌握的內容主要有： 1.關于嵌套表格在表格單元格中繼續(xù)插入表格，稱為嵌套表格。嵌套表格的寬度在表格單元格中繼續(xù)插入表格，稱為嵌套表格。嵌套表格的寬度一定不要大于當前單元格的寬度，否則當前單元格的寬度就會發(fā)一定不要大于當前單元格的寬度，否則當前單元格的寬度就會發(fā)生變化。使用表格進行網頁布局，嵌套表格是經常使用的。合理生變化。使用表格進行網頁布局，嵌套表格是經常使用的

13、。合理使用嵌套表格是做好表格網頁布局的關鍵因素。使用嵌套表格是做好表格網頁布局的關鍵因素。項目六：項目六： 制作名師工作室網頁制作名師工作室網頁任務一任務二小 結任務三實 訓操作一 制作左側區(qū)域Dreamweaver CS3網 頁 設 計 與 制 作2.選擇相鄰單元格的方法（1）在開始的單元格中按住鼠標左鍵并拖曳到最后的單元格。）在開始的單元格中按住鼠標左鍵并拖曳到最后的單元格。 （2）將光標置于開始的單元格內，按?。⒐鈽酥糜陂_始的單元格內，按住Shift鍵不放，單擊最后鍵不放，單擊最后的單元格。的單元格。 項目六：項目六： 制作名師工作室網頁制作名師工作室網頁3.選擇不相鄰的行、列或單元格

14、的方法（1）按?。┌醋trl鍵，單擊欲選擇的行、列或單元格。鍵，單擊欲選擇的行、列或單元格。 （2）在已選擇的連續(xù)單元格、行或列中按?。┰谝堰x擇的連續(xù)單元格、行或列中按住Ctrl鍵，單擊想取消鍵，單擊想取消選擇的單元格、行或列將其去除。選擇的單元格、行或列將其去除。 4.選擇單個單元格的方法（1）先將光標置于單元格內，按?。┫葘⒐鈽酥糜趩卧駜?，按住Ctrl鍵，并單擊單元格。鍵，并單擊單元格。 （2）將光標置于單元格內，然后單擊文檔窗口左下角的）將光標置于單元格內，然后單擊文檔窗口左下角的“”標簽。標簽。 任務一任務二小 結任務三實 訓Dreamweaver CS3網 頁 設 計 與 制 作

15、操作二 制作右側區(qū)域本操作主要介紹使用嵌套表格對右側區(qū)域的內容進行定位。本操作主要介紹使用嵌套表格對右側區(qū)域的內容進行定位。通過通過本操作的學習，應該掌握的內容主要有：本操作的學習，應該掌握的內容主要有： 1.表格的復制和粘貼項目六：項目六： 制作名師工作室網頁制作名師工作室網頁任務一任務二小 結任務三實 訓 選擇要復制的表格，然后在主菜單中選擇選擇要復制的表格，然后在主菜單中選擇【編輯編輯】【拷貝拷貝】命令復制表格。將光標置于要粘貼表格的位置，在主菜單中選擇命令復制表格。將光標置于要粘貼表格的位置，在主菜單中選擇【編輯編輯】【粘貼粘貼】命令粘貼表格。命令粘貼表格。 2.刪除表格中的內容 用鼠

16、標選擇表格中的用鼠標選擇表格中的1個或多個單元格，按個或多個單元格，按Delete鍵可以刪除鍵可以刪除其中的內容。但不能選擇整行、整列或者整個表格，只有這樣，其中的內容。但不能選擇整行、整列或者整個表格，只有這樣，被選擇的行、列或者單元格內的內容被刪除后，表格的結構或屬被選擇的行、列或者單元格內的內容被刪除后，表格的結構或屬性才不會發(fā)生變化。性才不會發(fā)生變化。 Dreamweaver CS3網 頁 設 計 與 制 作操作二 制作右側區(qū)域項目六：項目六： 制作名師工作室網頁制作名師工作室網頁3.在表格中增加行或列的方法l在主菜單欄中選擇在主菜單欄中選擇【修改修改】【表格表格】【插入行插入行】或或

17、【插入列插入列】命命令。令。l在主菜單欄中選擇在主菜單欄中選擇【插入插入】【表格對象表格對象】【在上面插入行在上面插入行】、【在下面插入行在下面插入行】、【在左邊插入列在左邊插入列】、【在右邊插入列在右邊插入列】命令。命令。l在主菜單欄中選擇在主菜單欄中選擇【修改修改】【表格表格】【插入行或列插入行或列】命令。命令。4.刪除表格的行或列的方法 如果要刪除行或列，可以先將光標置于要刪除的行或列中，如果要刪除行或列，可以先將光標置于要刪除的行或列中，或者將要刪除的行或列選中，然后在主菜單欄中選擇或者將要刪除的行或列選中，然后在主菜單欄中選擇【修改修改】【表格表格】【刪除行刪除行】或或【刪除列刪除列

18、】命令。最簡捷的方法就是選命令。最簡捷的方法就是選定要刪除的行或列，然后在鍵盤上按下定要刪除的行或列，然后在鍵盤上按下Delete 鍵將選定的行或列鍵將選定的行或列刪除。也可使用鼠標右鍵快捷菜單進行以上操作。刪除。也可使用鼠標右鍵快捷菜單進行以上操作。 任務一任務二小 結任務三實 訓Dreamweaver CS3網 頁 設 計 與 制 作操作二 制作右側區(qū)域項目六：項目六： 制作名師工作室網頁制作名師工作室網頁5.使用表格布局應該注意的問題（1）表格寬度要根據實際需要設置，目前常用的寬度有兩種，一種是）表格寬度要根據實際需要設置，目前常用的寬度有兩種，一種是760-780像素，另一種是像素，另

19、一種是960-1000像素，這主要是因為目前許多計算機使像素，這主要是因為目前許多計算機使用的屏幕分辨率絕大多數是用的屏幕分辨率絕大多數是800X600和和1024X768兩種，這樣在水平方向兩種，這樣在水平方向上就不會出現滾動條。上就不會出現滾動條。（2）表格的邊框通常設置為）表格的邊框通常設置為“0”，也就是讓表格在網頁中不可見，這樣，也就是讓表格在網頁中不可見，這樣才能實現表格布局的目的。才能實現表格布局的目的。（3）盡量使用多個表格進行布局，不要使用一個表格布局整個頁面。）盡量使用多個表格進行布局，不要使用一個表格布局整個頁面。（4）表格的嵌套層次盡量要少，最好嵌套表格不超過）表格的嵌

20、套層次盡量要少，最好嵌套表格不超過3層。層。（5）注意背景圖像在表格布局中的特殊作用，盡量用小圖像起到大圖像）注意背景圖像在表格布局中的特殊作用，盡量用小圖像起到大圖像的效果，如水平線，可以使用一幅很小的圖像，使其在水平方向上平鋪的效果，如水平線，可以使用一幅很小的圖像，使其在水平方向上平鋪即可。即可。（6）注意使用表格制作細邊框線效果的方法，如巧用背景顏色和間距就）注意使用表格制作細邊框線效果的方法，如巧用背景顏色和間距就可以制作細邊線表格?？梢灾谱骷氝吘€表格。任務一任務二小 結任務三實 訓Dreamweaver CS3網 頁 設 計 與 制 作任務三 制作頁腳 頁腳主要存放一些諸如版權信息

21、、聯系方式等內容。網頁的頁腳主要存放一些諸如版權信息、聯系方式等內容。網頁的頁腳部分占用的空間相對比較小，但它所顯示的信息卻不是可有頁腳部分占用的空間相對比較小，但它所顯示的信息卻不是可有可無的，一般與頁眉部分相呼應，有時候也是對網頁的一種補充。可無的，一般與頁眉部分相呼應，有時候也是對網頁的一種補充。 通過本任務的學習，主要注意一點：當把行或列的寬度或高通過本任務的學習，主要注意一點：當把行或列的寬度或高度設置為較小的數值時，需要將源代碼中的度設置為較小的數值時，需要將源代碼中的“ ”刪除。利刪除。利用這種方法，也可以制作細線效果。如，將表格某一行單元格的用這種方法，也可以

22、制作細線效果。如，將表格某一行單元格的高度設置為高度設置為“1”，并設置單元格的背景顏色或背景圖像，然后刪，并設置單元格的背景顏色或背景圖像，然后刪除源代碼中的除源代碼中的“ ”就出現了細線效果。就出現了細線效果。 項目六：項目六： 制作名師工作室網頁制作名師工作室網頁任務一任務二小 結任務三實 訓實訓 制作參考咨詢網頁本項目著重介紹了表格在網頁布局中的應用。實訓將使用表格本項目著重介紹了表格在網頁布局中的應用。實訓將使用表格制制作參考咨詢網頁作參考咨詢網頁 ，以進一步鞏固表格的基本操作。，以進一步鞏固表格的基本操作。 Dreamweaver CS3網 頁 設 計 與 制 作項目六：項目六： 制作名師工作室網頁制作名師工作室網頁【實訓目的實訓目的】l 進一步掌握插入表格的方法。進一步掌握插入表格的方法。l 進一步掌握表格屬性設置的基本方法。進一步掌握表格屬性設置的基本方法。l 進一步掌握單元格屬性設置的基本方法。進一步掌握單元格屬性設置的基本方法。l 進一步進一步掌握使用表格進行頁面