網頁設計與制作 課件 項目3 使用表格布局網頁

任務3-1認識表格

任務3-2設置表格和單元格的屬性

任務3-1認識表格1.表格的基本構成表格是網頁設計制作中不可缺少的元素，它可以將各類網頁元素有序地顯示在頁面上。表格由3個基本部件構成：(1)行：水平空間。(2)列：垂直空間。(3)單元格：行列相交處的空間。整張表格的邊緣成為邊框，單元格中的內容和邊框之間的距離稱為單元格邊距(CellPad)，單元格和單元格之間的距離稱為單元格間距(CellSpace)，如圖3-1所示。2.創(chuàng)建和選擇表格1)創(chuàng)建表格插入表格的位置必須是從一個新行開始，且表格獨占一行。Dw中創(chuàng)建表格的步驟如下：(1)將光標置于要插入表格的位置，選擇“插入”菜單中的“表格”選項或在“插入”面板的“常用”選項卡中單擊“表格”按鈕，打開“表格”對話框，根據需求設置表格初始屬性，如圖3-2所示。(2)單擊“確定”按鈕即可將表格插入頁面，可輸入表格內容，文字、圖片。表格建立好后就可以向表格內添加元素了，如圖像、文字和表格等，方法如同在Word文檔中操作一樣，添加文本，表格會隨著增多而自動增高。在單元格中添加圖像時，如果單元格的尺寸小于圖像的尺寸，單元格會自動增高或增寬。在單元格中插入表格時，單元格中的表格叫作內嵌式表格。內嵌式表格中的單元格可以再拆分成多行或多列，并且可以無限制地插入，不過內嵌的表格越多，瀏覽器下載時間越長，所以內嵌表格最好不要超過三層。2)選取表格對表格進行編輯前，需要先選擇表格。選擇整個表格的方法：將鼠標光標移動到表格的任意邊框上，當光標變成雙向箭頭形狀時，單擊鼠標左鍵，即可選擇整個表格，如圖3-4所示。3)選取行或列在選擇表格時，可以通過鼠標直接選擇表格的某一行或某一列，也可以同時選擇多行或多列。(1)選擇表格的一行。移動光標到表格的某一行左邊框處，當鼠標光標變成向右的黑箭頭時，單擊鼠標即可選擇該行，如圖3-5所示。(2)選擇表格的一列。移動光標到表格的某一列上邊框處，當鼠標光標變成向下的黑箭頭時，單擊鼠標即可選擇該列，如圖3-6所示。若要選擇多行或多列，可以配合“Ctrl”鍵和“Shift”鍵使用。4)選取單元格在選取單元格時，可以選擇單個單元格，也可以選擇一個單元格、單元格區(qū)域或不相鄰的多個單元格。當某個單元格被選時，該單元格周圍會出現黑色邊框。單擊表格中的某個單元格，按住鼠標左鍵從當前單元格上方開始向要連續(xù)選擇單元格的方向拖動鼠標選擇單元格，釋放鼠標后，完成某個區(qū)域的單元格選取，如圖3-7所示。在選擇單元格前按住“Ctrl”鍵，然后單擊需要選擇的單元格，最后釋放“Ctrl”鍵可選擇多個不相鄰的單元格，如圖3-8所示。任務3-2設置表格和單元格的屬性創(chuàng)建表格后，需要對表格元素進行一系列的操作，最常用的就是設置它的屬性。1.設置表格屬性在網頁中加入表格后，可以對表格的布局、樣式等進行詳細的設置，以使表格中的布局可以精確地達到要求。選定整個表格后，屬性面板會變成表格屬