任務五 布局技術表格

1、工程三 規(guī)劃技術網頁設計Dreamweaver CS3 工程教程.工程三 規(guī)劃技術義務五 規(guī)劃技術之一表格 技藝目的熟練運用表格掌握頁面規(guī)劃技術?？梢越涍^表格的定位使頁面的規(guī)劃更加合理、美觀。知識目的熟練掌握表格的添加與編輯。掌握表格中操作行和列的方法。掌握單元格的拆分與合并方法。掌握在表格中輸入文字、圖像并定位的方法。掌握嵌套表格的用法。掌握切換視圖的操作方法。掌握規(guī)劃表格、單元格的繪制與屬性設置方法。.工程三 規(guī)劃技術義務五 規(guī)劃技術之一表格 3.1.1 運用表格搭建頁面 3.1.2 問題探求認識表格3.1.3 知識拓展規(guī)劃方式和擴展表格方式.工程三 規(guī)劃技術義務五 表格構建義務任務義務

2、利用表格搭建頁面時，應先規(guī)劃好頁面中各元素的詳細位置，經過表格將這些區(qū)域劃分出來，在單元格中插入元素后，再仔細調整各單元格的大小、位置，使頁面各個元素的所在位置與實踐需求相符。經過該義務的實施，用戶可以靈敏利用表格的背景、框線等屬性設置，掌握運用表格準確定位頁面元素的排版技術，創(chuàng)建規(guī)劃更加合理、美觀的網頁效果。 .工程三 規(guī)劃技術義務五 表格構建義務任務流程在站點中新建一個頁面并保管。在網頁中插入一張表格。合并單元格。為單元格設置背風光根據規(guī)劃需求插入嵌套表格。在指定位置插入圖片和文字。根據頁面的規(guī)劃調整圖片大小。為文字設置相關屬性。為表格內文字建立超鏈接。.工程三 規(guī)劃技術義務五 表格構建義

3、務網頁預覽效果.工程三 規(guī)劃技術義務五 表格-問題探求 傳統(tǒng)的網頁設計普通會根據用戶要求，思索好主顏色、圖片、字體、顏色后，再用Photoshop等制圖軟件自在的畫出來，最后切成小圖，再經過表格的定位來排版這些元素，從而設計整個網頁頁面。普通表格邊框寬度設為0，有時設置了邊框反而會影響頁面的顯示效果。最好將表格的寬度設置為以像素為單位，這樣當閱讀器的窗口大小改動時，表格不會因此而改動，真正起到定位的作用。 .工程三 規(guī)劃技術義務五 表格-問題探求表格的組成元素 表格由邊框、行、列、單元格組成。整張表格的邊緣稱為邊框，程度方向的一組單元格稱為行，垂直方向的一組單元格稱為列，行列交叉部分就稱為單元

4、格，單元格中的內容和邊框之間的間隔稱為邊距，單元格和單元格之間的間隔稱為間距。如圖3-1所示。行列單元格邊框間距邊距。圖3-1 表格表示圖行列單元格邊框間距邊距.工程三 規(guī)劃技術義務五 表格-問題探求 插入表格新建一張頁面，在設計視圖將插入點放在需求表格出現的位置。 假設文檔是空白的，那么插入點自動置于文檔的起始處。選擇“插入記錄/表格命令， 或在“插入欄的“常用類別 中單擊“表格按鈕，彈出如 圖3-2所示的“表格對話框。圖3-2 插入表格對話框 .工程三 規(guī)劃技術義務五 表格-問題探求設置表格及單元格屬性 在設計視圖中表格的屬性設置有三種：表格整體設置、行和列設置和單元格設置。表格格式設置的

5、優(yōu)先順序為單元格、行列、表格。設置表格屬性：在表格的外框單擊，就可以選中整個表格，在屬性面板可以為選中表格進展屬性設置。如圖3-4所示。圖3-4 表格屬性面板 .工程三 規(guī)劃技術義務五 表格-問題探求設置單元格屬性 表格的根本組成元素是單元格，單元格組成行或列，再由行與列一同組成完好表格。在單元格內單擊鼠標左鍵，在屬性面板上會顯示當前單元格的屬性，如圖3-6所示。假設遇到單元格寬度與列寬沖突時，以單元格寬度為準，但必需保證該行一切單元格寬度之和與表格整體寬度相等。圖3-6 單元格屬性面板.工程三 規(guī)劃技術義務五 表格-問題探求設置行、列屬性 除對表格進展整體設置外，還可分別對表格的某行某幾行或

6、某列或某幾列進展設置。將鼠標移至目的行的行首，當光標變?yōu)椤?形狀時，單擊鼠標左鍵選中該行；將鼠標移至目的列的頂部，當光標變?yōu)椤?形狀時，單擊鼠標左鍵選中該列。屬性面板自動切換到行列形狀。如圖3-7所示。圖3-7 表格行列屬性面板 .工程三 規(guī)劃技術義務五 表格-問題探求編輯調整表格 在插入表格時，假設對表格的行數、列數和款式沒有確切的估計，可以根據需求對表格進展編輯。添加行和列刪除行和列合并/拆分單元格.工程三 規(guī)劃技術義務五 表格-問題探求嵌套表格嵌套表格在現有的單元格或表格內插入一個表格，插入表格的大小受所在單元格大小的限制。網頁的排版有時會很復雜，經過一個表格控制頁面的總體規(guī)劃，假設一些

7、內部元素也經過總表來實現排版細節(jié)的話，很容易引起行高或列寬的沖突；閱讀器在解析網頁時，下載完好個表格的構造后才顯示表格，通常閱讀者需等待很長才干看到網頁內容。嵌套表格的運用使頁面規(guī)劃更加靈敏，外部父表格控制頁面的整體規(guī)劃，嵌套表格擔任各子欄目的排版，互不干擾。.工程三 規(guī)劃技術義務五 表格-問題探求需求留意的是：表格可以無限制的多層嵌套，但嵌套層數越多閱讀器解析的速度就越慢，訪問者等待時間就越久，通常情況下，表格嵌套深度不超越三層。嵌套表格會對父表格產生一定影響，當嵌套表格寬度大于所在父表格單元格的寬度時，父表格的單元格將會自動調整；假設嵌套表格過大，甚至會添加整個父表格的大小。因此在運用嵌套

8、表格時為了堅持在不同分辨率下的外觀構造，父表格的寬度和高度普通運用像素值，而嵌套表格普通運用百分比。.工程三 規(guī)劃技術義務五 表格-知識拓展 頁面規(guī)劃是網頁設計中最根本、最重要的任務之一，Dreamweaver CS3提供了一種非常方便的規(guī)劃工具規(guī)劃表格。在“規(guī)劃方式下，可以直接在頁面上繪制規(guī)劃表格和單元格，使得繁瑣的頁面規(guī)劃變得輕松自若。規(guī)劃方式 在進展網頁規(guī)劃時，經常會在一個規(guī)劃表格中運用多個規(guī)劃單元格；也可以運用多個規(guī)劃表格將頁面隔離成多個部分，這樣它們就不會相互影響；還可以在現有規(guī)劃表格中進展規(guī)劃表格嵌套。擴展表格方式 當嵌套表格過多時，為了方便察看和規(guī)劃，運用擴展表格方式使表格的編輯

9、更容易。.工程三 規(guī)劃技術義務五 表格-知識拓展規(guī)劃方式-繪制規(guī)劃表格 在“規(guī)劃方式下，可以在頁面上繪制規(guī)劃表格和單元格，包括嵌套在其他表格中的表格。繪制表格和繪制單元格變成了各自獨立的操作。假設繪制的規(guī)劃單元格不在規(guī)劃表格中，Dreamweaver CS自動創(chuàng)建一個規(guī)劃表格作為該單元格的容器，規(guī)劃單元格不能存放在規(guī)劃表格之外，靠齊網格有助于對齊單元格。圖 新建規(guī)劃表格.工程三 規(guī)劃技術義務五 表格-知識拓展規(guī)劃方式-繪制規(guī)劃表格 在規(guī)劃方式下，單擊菜單欄中的“插入記錄/規(guī)劃對象/規(guī)劃單元格，或單擊規(guī)劃選項卡上的“繪制規(guī)劃單元格按鈕，此時鼠標指針變?yōu)椤笆滞庑?。然后將鼠標置于頁面上需求繪制單元格的位置，拖動鼠標繪制規(guī)劃單元格，如圖3-17所示。 圖 新建規(guī)劃單元格 .工程三 規(guī)劃技術義務五 表格-知識拓展規(guī)劃方式-為規(guī)劃單元格添加內容 規(guī)劃表格創(chuàng)建后，表格以灰色填充，表示該區(qū)域不能插入內容，因此必需在表格中創(chuàng)建規(guī)劃單元格后，才干在規(guī)劃單元中插入文本、圖像或媒體等內容。當添加寬度或高度大于規(guī)劃單元格的內容時，該單元格將自動擴展，這能夠會改動周圍單元格的大小。該列的列寬變?yōu)轱@示代碼中出現的寬度，后面的括號中是該列的可視寬度屏幕上顯示的寬度。 圖 新建規(guī)劃表格.工程三 規(guī)劃技術義務五 表格-知識拓展擴展表格方式嵌套表格過多時，為了方便察看和規(guī)