布局技術(shù)之表格培訓(xùn)教材

Dreamweaver

CS3

項(xiàng)目教程項(xiàng)目三

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

布局技術(shù)之一—表格項(xiàng)目三

布局技術(shù)技能目標(biāo)熟練運(yùn)用表格掌握頁(yè)面布局技術(shù)。能夠通過(guò)表格的定位使頁(yè)面的布局更加合理、美觀。知識(shí)目標(biāo)熟練掌握表格的添加與編輯。掌握表格中操作行和列的方法。掌握單元格的拆分與合并方法。掌握在表格中輸入文字、圖像并定位的方法。掌握嵌套表格的用法。掌握切換視圖的操作方法。掌握布局表格、單元格的繪制與屬性設(shè)置方法。任務(wù)五

布局技術(shù)之一—表格項(xiàng)目三

布局技術(shù)使用表格搭建頁(yè)面問(wèn)題探究—認(rèn)識(shí)表格知識(shí)拓展—布局模式和擴(kuò)展表格模式任務(wù)五

表格——構(gòu)建任務(wù)項(xiàng)目三

布局技術(shù)工作任務(wù)利用表格搭建頁(yè)面時(shí)，應(yīng)先規(guī)劃好頁(yè)面中各元素的具體位置，通過(guò)表格將這些區(qū)域劃分出來(lái)，在單元格中插入元素后，再仔細(xì)調(diào)整各單元格的大小、位置，使頁(yè)面各個(gè)元素的所在位置與實(shí)際需要相符。通過(guò)該任務(wù)的實(shí)施，用戶能夠靈活利用表格的背景、框線等屬性設(shè)置，掌握使用表格準(zhǔn)確定位頁(yè)面元素的排版技術(shù)，創(chuàng)建布局更加合理、美觀的網(wǎng)頁(yè)效果。任務(wù)五

表格——構(gòu)建任務(wù)項(xiàng)目三

布局技術(shù)工作流程在站點(diǎn)中新建一個(gè)頁(yè)面并保存。在網(wǎng)頁(yè)中插入一張表格。合并單元格。為單元格設(shè)置背景色根據(jù)布局需要插入嵌套表格。在指定位置插入圖片和文字。根據(jù)頁(yè)面的布局調(diào)整圖片大小。為文字設(shè)置相關(guān)屬性。為表格內(nèi)文字建立超鏈接。任務(wù)五

表格——構(gòu)建任務(wù)網(wǎng)頁(yè)預(yù)覽效果項(xiàng)目三

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

表格-問(wèn)題探究項(xiàng)目三

布局技術(shù)傳統(tǒng)的網(wǎng)頁(yè)設(shè)計(jì)一般會(huì)根據(jù)用戶要求，考慮好主色調(diào)、圖片、字體、顏色后，再用Photoshop等制圖軟件自由的畫出來(lái)，最后切成小圖，再通過(guò)表格的定位來(lái)排版這些元素，從而設(shè)計(jì)整個(gè)網(wǎng)頁(yè)頁(yè)面。一般表格邊框?qū)挾仍O(shè)為0，有時(shí)設(shè)置了邊框反而會(huì)影響頁(yè)面的顯示效果。最好將表格的寬度設(shè)置為以像素為單位，這樣當(dāng)瀏覽器的窗口大小改變時(shí)，表格不會(huì)因此而改變，真正起到定位的作用。任務(wù)五

表格-問(wèn)題探究表格的組成元素表格由邊框、行、列、單元格組成。整張表格的邊緣稱為邊框，水平方向的一組單元格稱為行，垂直方向的一組單元格稱為列，行列交叉部分就稱為單元格，單元格中的內(nèi)容和邊框之間的距離稱為邊距，單元格和單元格之間的距離稱為間距。如圖3-1所示。行列單元格邊框間距邊距。圖3-1

表格示意圖列單元格行邊框間距邊距項(xiàng)目三

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

表格-問(wèn)題探究插入表格?新建一張頁(yè)面，在設(shè)計(jì)視圖將插入點(diǎn)放在需要表格出現(xiàn)的位置。

若文檔是空白的，則插入點(diǎn)自動(dòng)置于文檔的起始處。選擇“插入記錄/表格”命令，或在“插入”欄的“常用”類別中單擊“表格”按鈕，彈出如圖3-2所示的“表格”對(duì)話框。圖3-2

插入表格對(duì)話框項(xiàng)目三

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

表格-問(wèn)題探究設(shè)置表格及單元格屬性在設(shè)計(jì)視圖中表格的屬性設(shè)置有三種：表格整體設(shè)置、行和列設(shè)置和單元格設(shè)置。表格格式設(shè)置的優(yōu)先順序?yàn)閱卧瘛⑿辛?、表格?.

設(shè)置表格屬性：在表格的外框單擊，就可以選中整個(gè)表格，在屬性面板可以為選中表格進(jìn)行屬性設(shè)置。如圖3-4所示。圖3-4

表格屬性面板項(xiàng)目三

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

表格-問(wèn)題探究2. 設(shè)置單元格屬性表格的基本組成元素是單元格，單元格組成行或列，再由行與列一起組成完整表格。在單元格內(nèi)單擊鼠標(biāo)左鍵，在屬性面板上會(huì)顯示當(dāng)前單元格的屬性，如圖3-6所示。如果遇到單元格寬度與列寬沖突時(shí)，以單元格寬度為準(zhǔn)，但必須保證該行所有單元格寬度之和與表格整體寬度相等。圖3-6

單元格屬性面板項(xiàng)目三

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

表格-問(wèn)題探究3. 設(shè)置行、列屬性除對(duì)表格進(jìn)行整體設(shè)置外，還可分別對(duì)表格的某行（某幾行）或某列（或某幾列）進(jìn)行設(shè)置。將鼠標(biāo)移至目標(biāo)行的行首，當(dāng)光標(biāo)變?yōu)椤?”狀態(tài)時(shí)，單擊鼠標(biāo)左鍵選中該行；將鼠標(biāo)移至目標(biāo)列的頂部，當(dāng)光標(biāo)變?yōu)椤啊睜顟B(tài)時(shí)，單擊鼠標(biāo)左鍵選中該列。屬性面板自動(dòng)切換到行（列）狀態(tài)。如圖3-7所示。圖3-7

表格行（列）屬性面板項(xiàng)目三

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

表格-問(wèn)題探究項(xiàng)目三

布局技術(shù)編輯調(diào)整表格在插入表格時(shí)，如果對(duì)表格的行數(shù)、列數(shù)和樣式?jīng)]有確切的預(yù)計(jì)，可以根據(jù)需要對(duì)表格進(jìn)行編輯。添加行和列刪除行和列合并/拆分單元格任務(wù)五

表格-問(wèn)題探究項(xiàng)目三

布局技術(shù)5. 嵌套表格嵌套表格在現(xiàn)有的單元格或表格內(nèi)插入一個(gè)表格，插入表格的大小受所在單元格大小的限制。網(wǎng)頁(yè)的排版有時(shí)會(huì)很復(fù)雜，通過(guò)一個(gè)表格控制頁(yè)面的總體布局，如果一些內(nèi)部元素也通過(guò)總表來(lái)實(shí)現(xiàn)排版細(xì)節(jié)的話，很容易引起行高或列寬的沖突；瀏覽器在解析網(wǎng)頁(yè)時(shí)，下載完整個(gè)表格的結(jié)構(gòu)后才顯示表格，通常瀏覽者需等待很長(zhǎng)才能看到網(wǎng)頁(yè)內(nèi)容。嵌套表格的使用使頁(yè)面布局更加靈活，外部父表格控制頁(yè)面的整體布局，嵌套表格負(fù)責(zé)各子欄目的排版，互不干擾。任務(wù)五

表格-問(wèn)題探究需要注意的是：表格可以無(wú)限制的多層嵌套，但嵌套層數(shù)越多瀏覽器解析的速度就越慢，訪問(wèn)者等待時(shí)間就越久，通常情況下，表格嵌套深度不超過(guò)三層。嵌套表格會(huì)對(duì)父表格產(chǎn)生一定影響，當(dāng)嵌套表格寬度大于所在父表格單元格的寬度時(shí)，父表格的單元格將會(huì)自動(dòng)調(diào)整；如果嵌套表格過(guò)大，甚至?xí)黾诱麄€(gè)父表格的大小。因此在使用嵌套表格時(shí)為了保持在不同分辨率下的外觀結(jié)構(gòu)，父表格的寬度和高度一般使用像素值，而嵌套表格一般使用百分比。項(xiàng)目三

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

表格-知識(shí)拓展項(xiàng)目三

布局技術(shù)頁(yè)面布局是網(wǎng)頁(yè)設(shè)計(jì)中最基本、最重要的工作之一，DreamweaverCS3提供了一種非常方便的布局工具——布局表格。在“布局”模式下，可以直接在頁(yè)面上繪制布局表格和單元格，使得繁瑣的頁(yè)面布局變得輕松自如。布局模式在進(jìn)行網(wǎng)頁(yè)布局時(shí)，經(jīng)常會(huì)在一個(gè)布局表格中使用多個(gè)布局單元格；也可以使用多個(gè)布局表格將頁(yè)面隔離成多個(gè)部分，這樣它們就不會(huì)相互影響；還可以在現(xiàn)有布局表格中進(jìn)行布局表格嵌套。擴(kuò)展表格模式當(dāng)嵌套表格過(guò)多時(shí)，為了方便觀察和布局，使用擴(kuò)展表格模式使表格的編輯更容易。任務(wù)五

表格-知識(shí)拓展布局模式-繪制布局表格在“布局”模式下，可以在頁(yè)面上繪制布局表格和單元格，包括嵌套在其他表格中的表格。繪制表格和繪制單元格變成了各自獨(dú)立的操作。如果繪制的布局單元格不在布局表格中，Dreamweaver

CS自動(dòng)創(chuàng)建一個(gè)布局表格作為該單元格的容器，布局單元格不能存放在布局表格之外，靠齊網(wǎng)格有助于對(duì)齊單元格。圖

新建布局表格項(xiàng)目三

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

表格-知識(shí)拓展布局模式-繪制布局表格在布局模式下，單擊菜單欄中的“插入記錄/布局對(duì)象/布局單元格”，或單擊布局選項(xiàng)卡上的“繪制布局單元格”按鈕，此時(shí)鼠標(biāo)指針變?yōu)椤笆弊中螤睢Ｈ缓髮⑹髽?biāo)置于頁(yè)面上需要繪制單元格的位置，拖動(dòng)鼠標(biāo)繪制布局單元格，如圖3-17所示。圖 新建布局單元格項(xiàng)目三

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

表格-知識(shí)拓展布局模式-為布局單元格添加內(nèi)容布局表格創(chuàng)建后，表格以灰色填充，表示該區(qū)域不能插入內(nèi)容，因此必須在表格中創(chuàng)建布局單元格后，才能在布局單元中插入文本、圖像或媒體等內(nèi)容。當(dāng)添加寬度或高度大于布局單元格的內(nèi)容時(shí)，該單元格將自動(dòng)擴(kuò)展，這可能會(huì)改變周圍單元格的大小。該列的列寬變?yōu)轱@示代碼中出現(xiàn)的寬度，后面的括號(hào)中是該列的可視寬度（屏幕上顯示的寬度）。圖

新建布局表格項(xiàng)目三

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

表格-知識(shí)拓展擴(kuò)展表格模式嵌套表格過(guò)多時(shí)，為了方便觀察和布局，使用擴(kuò)展表格模式使表