任務(wù)五 布局技術(shù)表格

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

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

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

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

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

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

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

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

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