任務五布局技術表格—表格

技能目標知識目標熟練掌握表格的添加與編輯。掌握表格中操作行和列的方法。掌握單元格的拆分與合并方法。掌握在表格中輸入文字、圖像并定位的方法。掌握嵌套表格的用法。掌握切換視圖的操作方法。任務五布局技術之一—表格

3.1.1使用表格搭建頁面3.1.2問題探究—認識表格3.1.3知識拓展—布局模式和擴展表格模式任務五表格——構建任務工作任務利用表格搭建頁面時，應先規(guī)劃好頁面中各元素的具體位置，通過表格將這些區(qū)域劃分出來，在單元格中插入元素后，再仔細調整各單元格的大小、位置，使頁面各個元素的所在位置與實際需要相符。通過該任務的實施，用戶能夠靈活利用表格的背景、框線等屬性設置，掌握使用表格準確定位頁面元素的排版技術，創(chuàng)建布局更加合理、美觀的網頁效果。任務五表格——構建任務工作流程在站點中新建一個頁面并保存。在網頁中插入一張表格。合并單元格。為單元格設置背景色根據(jù)布局需要插入嵌套表格。在指定位置插入圖片和文字。根據(jù)頁面的布局調整圖片大小。為文字設置相關屬性。為表格內文字建立超鏈接。任務五表格——構建任務網頁預覽效果任務五表格-問題探究

傳統(tǒng)的網頁設計一般會根據(jù)用戶要求，考慮好主色調、圖片、字體、顏色后，再用Photoshop等制圖軟件自由的畫出來，最后切成小圖，再通過表格的定位來排版這些元素，從而設計整個網頁頁面。一般表格邊框寬度設為0，有時設置了邊框反而會影響頁面的顯示效果。最好將表格的寬度設置為以像素為單位，這樣當瀏覽器的窗口大小改變時，表格不會因此而改變，真正起到定位的作用。任務五表格-問題探究表格的組成元素表格由邊框、行、列、單元格組成。整張表格的邊緣稱為邊框，水平方向的一組單元格稱為行，垂直方向的一組單元格稱為列，行列交叉部分就稱為單元格，單元格中的內容和邊框之間的距離稱為邊距，單元格和單元格之間的距離稱為間距。如圖3-1所示。行列單元格邊框間距邊距。圖3-1表格示意圖行列單元格邊框間距邊距任務五表格-問題探究

插入表格新建一張頁面，在設計視圖將插入點放在需要表格出現(xiàn)的位置。若文檔是空白的，則插入點自動置于文檔的起始處。選擇“插入記錄/表格”命令，或在“插入”欄的“常用”類別中單擊“表格”按鈕，彈出如圖3-2所示的“表格”對話框。圖3-2插入表格對話框任務五表格-問題探究設置表格及單元格屬性在設計視圖中表格的屬性設置有三種：表格整體設置、行和列設置和單元格設置。表格格式設置的優(yōu)先順序為單元格、行列、表格。設置表格屬性：在表格的外框單擊，就可以選中整個表格，在屬性面板可以為選中表格進行屬性設置。如圖3-4所示。圖3-4表格屬性面板任務五表格-問題探究設置單元格屬性

表格的基本組成元素是單元格，單元格組成行或列，再由行與列一起組成完整表格。在單元格內單擊鼠標左鍵，在屬性面板上會顯示當前單元格的屬性，如圖3-6所示。如果遇到單元格寬度與列寬沖突時，以單元格寬度為準，但必須保證該行所有單元格寬度之和與表格整體寬度相等。圖3-6單元格屬性面板任務五表格-問題探究設置行、列屬性

除對表格進行整體設置外，還可分別對表格的某行（某幾行）或某列（或某幾列）進行設置。將鼠標移至目標行的行首，當光標變?yōu)椤啊睜顟B(tài)時，單擊鼠標左鍵選中該行；將鼠標移至目標列的頂部，當光標變?yōu)椤啊睜顟B(tài)時，單擊鼠標左鍵選中該列。屬性面板自動切換到行（列）狀態(tài)。如圖3-7所示。圖3-7表格行（列）屬性面板任務五表格-問題探究編輯調整表格在插入表格時，如果對表格的行數(shù)、列數(shù)和樣式沒有確切的預計，可以根據(jù)需要對表格進行編輯。添加行和列刪除行和列合并/拆分單元格任務五表格-問題探究嵌套表格嵌套表格在現(xiàn)有的單元格或表格內插入一個表格，插入表格的大小受所在單元格大小的限制。網頁的排版有時會很復雜，通過一個表格控制頁面的總體布局，如果一些內部元素也通過總表來實現(xiàn)排版細節(jié)的話，很容易引起行高或列寬的沖突；瀏覽器在解析網頁時，下載完整個表格的結構后才顯示表格，通常瀏覽者需等待很長才能看到網頁內容。嵌套表格的使用使頁面布局更加靈活，外部父表格控制頁面的整體布局，嵌套表格負責各子欄目的排版，互不干擾。任務五表格-問題探究需要注意的是：表格可以無限制的多層嵌套，但嵌套層數(shù)越多瀏覽器解析的速度就越慢，訪問者等待時間就越久，通常情況下，表格嵌套深度不超過三層。嵌套表格會對父表格產生一定影響，當嵌套表格寬度大于所在父表格單元格的寬度時，父表格的單元格將會自動調整；如果嵌套表格過大，甚至會增加整個父表格的大小。因此在使用嵌套表格時為了保持在不同分辨率下的外觀結構，父表格的寬度和高度一般使用像素值，而嵌套表格一般使用百分比。任務五表格-知識拓展

頁面布局是網頁設計中最基本、最重要的工作之一，DreamweaverCS3提供了一種非常方便的布局工具——布局表格。在“布局”模式下，可以直接在頁面上繪制布局表格和單元格，使得繁瑣的頁面布局變得輕松自如。布局模式在進行網頁布局時，經常會在一個布局表格中使用多個布局單元格；也可以使用多個布局表格將頁面隔離成多個部分，這樣它們就不會相互影響；還可以在現(xiàn)有布局表格中進行布局表格嵌套。擴展表格模式當嵌套表格過多時，為了方便觀察和布局，使用擴展表格模式使表格的編輯更容易。任務五表格-知識拓展布局模式-繪制布局表格在“布局”模式下，可以在頁面上繪制布局表格和單元格，包括嵌套在其他表格中的表格。繪制表格和繪制單元格變成了各自獨立的操作。如果繪制的布局單元格不在布局表格中，DreamweaverCS自動創(chuàng)建一個布局表格作為該單元格的容器，布局單元格不能存放在布局表格之外，靠齊網格有助于對齊單元格。圖新建布局表格任務五表格-知識拓展布局模式-繪制布局表格

在布局模式下，單擊菜單欄中的“插入記錄/布局對象/布局單元格”，或單擊布局選項卡上的“繪制布局單元格”按鈕，此時鼠標指針變?yōu)椤笆弊中螤睢Ｈ缓髮⑹髽酥糜陧撁嫔闲枰L制單元格的位置，拖動鼠標繪制布局單元格，如圖3-17所示。圖新建布局單元格任務五表格-知識拓展布局模式-為布局單元格添加內容布局表格創(chuàng)建后，表格以灰色填充，表示該區(qū)域不能插入內容，因此必須在表格中創(chuàng)建布局單元格后，才能在布局單元中插入文本、圖像或媒體等內容。當添加寬度或高度大于布局單元格的內容時，該單元格將自動擴展，這可能會改變周圍單元格的大小。該列的列寬變?yōu)轱@示代碼中出現(xiàn)的寬度，后面的括號中是該列的可視寬度（屏幕上顯示的寬度）。圖新建布局表格任務五表格-知識拓展