《Dreamweaver 8案例教程》課件第7章

本章學(xué)習(xí)目標(biāo)創(chuàng)建表格7.1格式化表格7.2編輯表格的單元格7.3框架的應(yīng)用7.5網(wǎng)頁(yè)布局7.47.1創(chuàng)建表格表格廣泛地應(yīng)用于網(wǎng)頁(yè)設(shè)計(jì)中，無(wú)論在數(shù)據(jù)顯示方面還是在定位排版方面都起著不可替代的作用，下面就詳細(xì)介紹如何在網(wǎng)頁(yè)中創(chuàng)建表格。7.1.1插入表格

在文檔中創(chuàng)建表格的步驟如下：（1）在Dreamweaver8.0中單擊“插入”—“表格”菜單命令，彈出屬性設(shè)置窗口，對(duì)所要插入的表格進(jìn)行初步定義，如圖7-1所示。（2）在參數(shù)設(shè)置窗口中根據(jù)需要設(shè)置參數(shù)。（3）單擊窗口中的“確定”按鈕之后，即可在文檔中光標(biāo)所做位置插入一個(gè)表格。7.1.1插入表格圖7-1表格參數(shù)設(shè)置7.1.2在表格中添加內(nèi)容

創(chuàng)建好表格以后，現(xiàn)在可以直接在表格中填充信息，如下圖所示。圖7-2在表格中添加內(nèi)容7.1.3導(dǎo)入/導(dǎo)出數(shù)據(jù)1.導(dǎo)入文本：(1)在設(shè)計(jì)視圖中，將光標(biāo)放在需要插入文本的地方；(2)導(dǎo)入文本文件：將鼠標(biāo)指針置入所要導(dǎo)入數(shù)據(jù)的單元格內(nèi)，選擇“文件”|“導(dǎo)入”|“Word文檔”菜單項(xiàng)，此時(shí)彈出“打開(kāi)”對(duì)話(huà)框，在其中找到要導(dǎo)入的文本文件，然后單擊“確定”按鈕即可。2.導(dǎo)入Excel文檔：(1)在設(shè)計(jì)視圖中，將光標(biāo)放在需要插入Excel文檔的地方；(2)導(dǎo)入Excel文檔：選擇“文件”|“導(dǎo)入”|“Excel文檔”菜單項(xiàng)，在彈出的“打開(kāi)”對(duì)話(huà)框中選擇要導(dǎo)入的Excel文檔，然后單擊“打開(kāi)”按鈕，選擇的Excel文檔即可被導(dǎo)入表格中。

7.1.3導(dǎo)入/導(dǎo)出數(shù)據(jù)3.導(dǎo)入表格：(1)在設(shè)計(jì)視圖中，將光標(biāo)放在需要插入表格式數(shù)據(jù)的地方；(2)執(zhí)行“文件”|“導(dǎo)入”|“表格式數(shù)據(jù)”命令

。(3)這時(shí)會(huì)彈出如圖7-3所示的對(duì)話(huà)框，通過(guò)這個(gè)對(duì)話(huà)框可以對(duì)數(shù)據(jù)源以及參數(shù)進(jìn)行選擇。圖7-3設(shè)置導(dǎo)入數(shù)據(jù)參數(shù)

7.1.3導(dǎo)入/導(dǎo)出數(shù)據(jù)4.導(dǎo)出表格：(1)打開(kāi)需要導(dǎo)出表格的HTML文檔，并將光標(biāo)放到表的的單元格中。

(2)在菜單中選擇執(zhí)行“文件”|“導(dǎo)出”|“表格”命令，這時(shí)會(huì)彈出一個(gè)對(duì)話(huà)框。(3)在“定界符”下拉列表中選擇將要生成的表格數(shù)據(jù)文件的分隔符類(lèi)型。(4)在“換行符”下拉列表中選擇斷行類(lèi)型。(5)按下“導(dǎo)出”按鈕就會(huì)彈出保存文件對(duì)話(huà)框，輸入文件名和路徑后按下“保存”按鈕，即可將表格輸出為數(shù)據(jù)文件。7.1.4選擇表格元素（1）選取整個(gè)表格，可以執(zhí)行下列操作步驟之一：方法一：點(diǎn)擊表格左上角，或點(diǎn)擊右邊或底邊任意位置方法二：?jiǎn)螕舯砀癫⑦x擇“修改”|“表格”|“選擇表格”。方法三：?jiǎn)螕舯砀癫⑦x擇“編輯”|“全選”。方法四：將光標(biāo)放到表格內(nèi)任意位置，選取文檔窗口左下角標(biāo)簽選擇器中的<table>標(biāo)簽。7.1.4選擇表格元素（2）選取行或列，可以執(zhí)行下列操作步驟之一：方法一：將光標(biāo)置于行的左邊空白處或者列的頂部。當(dāng)選取箭頭出現(xiàn)時(shí)點(diǎn)擊，如圖7-11和7-12所示。方法二：點(diǎn)擊一個(gè)單元格，橫向或縱向拖拽可以選取多個(gè)行或列。方法三：將插入點(diǎn)放到表格內(nèi)，選取文檔窗左下角標(biāo)簽選擇器中的<tr>標(biāo)簽。7.1.4選擇表格元素（3）要選取不相鄰的單元格，可以執(zhí)行下列操作步驟之一：方法一：按住【Ctrl】鍵點(diǎn)擊表格內(nèi)部來(lái)增加單元格、行或列到選集中。方法二：選取表格內(nèi)多個(gè)單元格，然后按住【Ctrl】鍵并點(diǎn)擊單元格，行或列取消對(duì)某些單元格的選取。7.2格式化表格制作好了，內(nèi)容也有了，但是表格看起來(lái)還不太美觀，這時(shí)需要對(duì)表格進(jìn)行修飾——格式化表格。表格的格式化主要包括表格的對(duì)齊方式，間距與邊距的調(diào)整，邊框的設(shè)置以及背景的設(shè)置等。本節(jié)我們將學(xué)習(xí)如何設(shè)置表格。返回7.2.1設(shè)置表格屬性

對(duì)于表格總體屬性的設(shè)置，主要是通過(guò)屬性面板來(lái)完成。選中整個(gè)表格，這時(shí)的屬性面板如圖7-4所示。圖7-4表格的屬性面板

7.2.2設(shè)置單元格，行和列的屬性按照前面介紹的方法，選中某一個(gè)單元格，或者是某一行、某一列，這時(shí)的屬性面板如圖7-5，7-6，7-7所示。圖7-5單元格的屬性面板

圖7-6行的屬性面板

圖7-7列的屬性面板

7.2.3設(shè)置預(yù)置表格類(lèi)型單擊已經(jīng)創(chuàng)建好的表格的邊框，以選中該表格，然后選擇“命令”|“格式化表格”菜單項(xiàng)，彈出“格式化表格”對(duì)話(huà)框，如圖7-8所示。圖7-8格式化表格7.3編輯表格的單元格

在Dreamweaver8.0中，表格創(chuàng)建完成后，不僅可以設(shè)置其格式，而且還可以對(duì)單元格進(jìn)行編輯，如拆分/合并單元格，復(fù)制單元格，增加/刪除行列，對(duì)表格中的數(shù)據(jù)進(jìn)行排序等，這些內(nèi)容將在本節(jié)中詳細(xì)介紹。返回7.3.1調(diào)整表格列寬與行高

1、調(diào)整列寬：（1）選中要調(diào)整列寬的那一列表格；（2）在屬性面板中設(shè)置該列表格的寬度值，單位是像素，例如此時(shí)將列寬設(shè)置為20像素，屬性面板如圖7-9所示。圖7-9列的屬性面板7.3.1調(diào)整表格列寬與行高

2、調(diào)整行高：（1）選中要調(diào)整行高的那一行表格；（2）在屬性面板中設(shè)置該行表格的高度值，單位是像素，例如此時(shí)將行高設(shè)置為15像素，屬性面板如圖7-10所示。圖7-10行的屬性面板7.3.2增加/刪除行或列（1）增加行：方法一：把光標(biāo)定位在要在其上面或下面插入行的一個(gè)單元格內(nèi)，單擊“插入”|“表格對(duì)象”命令，在子菜單中根據(jù)實(shí)際需要選擇“在上面插入行”或“在下面插入行”。方法二：選中要在其下面插入行的整行單元格，單擊鼠標(biāo)右鍵，從彈出的快捷菜單中選擇“表格”|“插入行”，這時(shí)就在該行的下面插入了新的一行。方法三：選中要在其上面或下面插入行的整行單元格，單擊鼠標(biāo)右鍵，從彈出的快捷菜單中選擇“表格”|“插入行或列”，這時(shí)彈出一個(gè)對(duì)話(huà)框。7.3.2增加/刪除行或列（2）增加列：方法一：把光標(biāo)定位在要在其左邊或右邊插入列的一個(gè)單元格內(nèi)，單擊“插入”|“表格對(duì)象”命令，在子菜單中根據(jù)實(shí)際需要選擇“在左邊插入列”或“在右邊插入列”。方法二：選中要在其右邊插入列的整列單元格，單擊鼠標(biāo)右鍵，從彈出的快捷菜單中選擇“表格”|“插入列”，這時(shí)就在該列的右邊插入了新的一列。方法三：選中要在其左邊或右邊插入列的整列單元格，單擊鼠標(biāo)右鍵，從彈出的快捷菜單中選擇“表格”|“插入行或列”，這時(shí)彈出一個(gè)對(duì)話(huà)框。7.3.2增加/刪除行或列（3）刪除行：方法一：選中要?jiǎng)h除的整行單元格，單擊“修改”|“表格”|“刪除行”命令，這時(shí)該行就被自動(dòng)刪除。方法二：選中要?jiǎng)h除的整行單元格，單擊鼠標(biāo)右鍵，從彈出的快捷菜單中選擇“表格”|“刪除行”，同樣，該行也會(huì)被刪除。（4）刪除列：方法一：選中要?jiǎng)h除的整列單元格，單擊“修改”|“表格”|“刪除列”命令，這時(shí)該列就被自動(dòng)刪除。方法二：選中要?jiǎng)h除的整列單元格，單擊鼠標(biāo)右鍵，從彈出的快捷菜單中選擇“表格”|“刪除列”，同樣，該列也會(huì)被刪除。7.3.3剪切/復(fù)制/粘貼單元格1.剪切或復(fù)制單元格：(1)選擇要復(fù)制或剪切的單元格。既可以選擇一個(gè)單元格，也可以選擇多個(gè)單元格，但要保證選中的單元格區(qū)域呈矩形。(2)單擊“編輯”|“剪切”命令，即可將選中的單元格剪切到剪貼板上；單擊“編輯”|“拷貝”命令，即可將選中的單元格復(fù)制到剪貼板上。2.粘貼單元格：(1)選擇要粘貼數(shù)據(jù)的目標(biāo)對(duì)象。如果希望將數(shù)據(jù)粘貼入單元格內(nèi)，可以單擊該單元格，將光標(biāo)放置到該單元格內(nèi)；如果希望將剪貼板中的數(shù)據(jù)粘貼入一個(gè)新的表格，可以在文檔中將插入點(diǎn)放置到該位置上。(2)單擊“編輯”|“粘貼”命令，即可進(jìn)行粘貼。同樣，如果單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“粘貼”命令，也能完成粘貼操作。7.3.4拆分/合并單元格(1)拆分單元格：方法一：選中要拆分的單元格，單擊鼠標(biāo)右鍵，從彈出的快捷菜單中選擇“表格”|“拆分單元格”命令，或者在單元格的屬性面板上單擊拆分單元格的圖標(biāo)也可以。方法二：?jiǎn)螕簟靶薷摹眧“表格”|“拆分單元格”命令，也能完成拆分單元格的操作。方法三：將光標(biāo)放置到要拆分的單元格中，單擊“修改”|“表格”|“減少行寬”命令，可以將當(dāng)前單元格拆分為兩行；單擊“修改”|“表格”|“減少列寬”命令，可以將當(dāng)前單元格拆分為兩列。7.3.4拆分/合并單元格（2）合并單元格：方法一：選中要合并的多個(gè)連續(xù)單元格，選擇時(shí)要保證選中的單元格區(qū)域呈矩形，然后單擊鼠標(biāo)右鍵，從彈出的快捷菜單中選擇“表格”|“合并單元格”命令，或者在單元格的屬性面板上單擊合并單元格的圖標(biāo)也可以。這時(shí)選中的多個(gè)單元格會(huì)合并為一個(gè)大的單元格。方法二：?jiǎn)螕簟靶薷摹眧“表格”|“合并單元格”命令，也能完成合并單元格的操作。方法三：將光標(biāo)放置到要合并的一個(gè)單元格中，單擊“修改”|“表格”|“增加行寬”命令，可以將當(dāng)前單元格和它下面的一個(gè)單元格合并成一個(gè)大的單元格；單擊“修改”|“表格”|“增加列寬”命令，可以將當(dāng)前單元格和它右邊的一個(gè)單元格合并成一個(gè)大的單元格。7.3.5數(shù)據(jù)排序(1)選中表格，單擊“命令”|“排序表格”菜單項(xiàng)，這時(shí)會(huì)彈出一個(gè)“排序表格”的對(duì)話(huà)框，如圖7-11所示。圖7-11排序表格對(duì)話(huà)框7.3.5數(shù)據(jù)排序（2）在“排序按”下拉列表中選擇以哪列作為排序依據(jù)。（3）在“順序”下拉列表中可以設(shè)置排序的方式，包括“按字母順序”和“按數(shù)字順序”兩種。同時(shí)可以設(shè)置按照“升序”或“降序”來(lái)排列。（4）在“再按”下拉列表中，可以選擇以哪列作為第二排序依據(jù)，其設(shè)置方法同上。（5）在“選項(xiàng)”復(fù)選框中，有四種選擇。如果選中“排序包含第一行”，則在對(duì)表格數(shù)據(jù)排序時(shí)，同時(shí)也對(duì)首行進(jìn)行排序，有時(shí)表格的首行是標(biāo)題行，則可以清除該復(fù)選框。如果選中“排序標(biāo)題行”或“排序腳注行”，則是對(duì)標(biāo)題行或腳注行進(jìn)行排序。如果選中“完成排序后所有行顏色保持不變”，則在對(duì)表格排序后保留排序行中標(biāo)記的原有屬性。（5）設(shè)置完畢，單擊“確定”按鈕，表格即被重新排序。7.4網(wǎng)頁(yè)布局Dreamweaver8.0中有一個(gè)非常重要的功能，就是利用布局來(lái)給網(wǎng)頁(yè)排版。在“布局”下，我們可以在網(wǎng)頁(yè)中直接畫(huà)出表格與單元格，還可以自由拖動(dòng)。利用“布局”來(lái)對(duì)網(wǎng)頁(yè)定位非常方便，但生成的表格比較復(fù)雜，不適合大型網(wǎng)站使用。返回7.4.1布局視圖“布局視圖”的具體用法如下所示：（1）將對(duì)象面板切換到“布局”面板組，單擊“布局”按鈕進(jìn)入“布局模式”。（2）在“布局”面板上許多以前不可用的按鈕變?yōu)榭捎脿顟B(tài)。其中有兩個(gè)按鈕，一個(gè)是“布局表格”按鈕，允許用戶(hù)像繪圖一樣在頁(yè)面里繪制表格，進(jìn)行表格布局；另一個(gè)是“繪制布局單元格”按鈕，可以用于在表格中直接繪制單元格。7.4.2布局表格和單元格1.繪制表格：打開(kāi)“布局模式”，在對(duì)象面板中單擊“布局表格”按鈕，然后在文檔窗口中繪制表格。如圖7-12所示，我們可以拖動(dòng)表格的邊框來(lái)調(diào)整它的大小。圖7-12繪制的表格布局7.4.2布局表格和單元格2.繪制單元格：在對(duì)象面板中單擊“繪制布局單元格”按鈕，在鼠標(biāo)變成“+”時(shí)在面板中拖動(dòng)繪制單元格。如圖7-13所示。圖7-13拖動(dòng)繪制的單元格7.4.2布局表格和單元格繪制完成后，在“布局”對(duì)象面板中按下“標(biāo)準(zhǔn)模式”按鈕，則剛剛繪制的布局會(huì)全部轉(zhuǎn)換成表格，如圖7-14所示。我們可以任意調(diào)整表格，也可以回到“布局模式”中繼續(xù)繪制。圖7-14標(biāo)準(zhǔn)模式下的表格7.5框架的應(yīng)用前面我們介紹了很多網(wǎng)站的頁(yè)面都是用表格制作的，其實(shí)還有一種更方便的工具，這就是框架。使用框架不僅能夠讓站點(diǎn)具有統(tǒng)一的風(fēng)格，而且利用框架制作的頁(yè)面鏈接也具有較強(qiáng)的優(yōu)勢(shì)，方便瀏覽頁(yè)面。返回7.5.1框架簡(jiǎn)介框架包含兩部分，一部分是框架，另一部分就是框架集?？蚣芗x了一個(gè)在窗口中顯示的框架數(shù)以及框架內(nèi)的網(wǎng)頁(yè)等，框架則是指框架集中包含的網(wǎng)頁(yè)，也就是顯示區(qū)域?？蚣艿淖饔镁褪前褳g覽器窗口劃分為若干個(gè)區(qū)域，每個(gè)區(qū)域可以分別顯示不同的網(wǎng)頁(yè)。

7.5.1框架簡(jiǎn)介7.5.2創(chuàng)建框架及框架集（1）創(chuàng)建框架集：首先創(chuàng)建一個(gè)空白文檔，在此文檔的基礎(chǔ)上構(gòu)建框架。然后用鼠標(biāo)拖動(dòng)文檔窗口四周顯示的框架邊框，當(dāng)鼠標(biāo)變成雙箭頭時(shí)，將它移動(dòng)到所希望的位置上，釋放鼠標(biāo)，即可構(gòu)建框架。（2）插入預(yù)置的框架集：?jiǎn)螕簟安迦搿眧“HTML”|“框架”命令，有可供選擇的多種框架集樣式，選擇其中一種就可以直接插入了。每插入一個(gè)新的框架集，都會(huì)生成一個(gè)框架集HTML文檔以及若干個(gè)框架HTML文檔。如果在一個(gè)框架集中插入另一個(gè)框架集，我們稱(chēng)之為嵌套框架集。

7.5.2創(chuàng)建框架及框架集（3）新建框架集：?jiǎn)螕簟拔募眧“新建”菜單項(xiàng)，打開(kāi)“新建文檔”對(duì)話(huà)框，在“新建文檔”對(duì)話(huà)框中單擊“常規(guī)”選項(xiàng)卡，選擇“框架集”，如圖7-15所示。7.5.2創(chuàng)建框架及框架集圖7-15新建“框架集”對(duì)話(huà)框7.5.3設(shè)置框架和框架集屬性（1）設(shè)置框架屬性：首先單擊“窗口”|“框架”菜單項(xiàng)，打開(kāi)“框架”面板。要設(shè)置某個(gè)框架的屬性，必須先選中它，可以直接在“框架”面板上單擊對(duì)應(yīng)的框架區(qū)域，被選中的框架區(qū)域四周會(huì)出現(xiàn)黑色邊框。選中框架后，就可以在屬性面板設(shè)置其屬性，框架的屬性面板如圖7-16所示。圖7-16框架的屬性面板7.5.3設(shè)置框架和框架集屬性（2）設(shè)置框架集屬性：?jiǎn)螕簟翱蚣堋泵姘逅闹艿目蚣苓吙?，選中框架集，這時(shí)整個(gè)“框架”面板區(qū)域四周顯示粗黑邊框。選中框架集后，就在屬性面板中設(shè)置其屬性，框架集的屬性面板如圖7-17所示。圖7-17框架的屬性面板7.5.4插入框架內(nèi)容（1）創(chuàng)建框架和框架集。單擊“文件”|“新建”菜單項(xiàng)，打開(kāi)“新建文檔”對(duì)話(huà)框，參數(shù)設(shè)置如圖7-18所示。圖7-18新建“框架集”對(duì)話(huà)框7.5.4插入框架內(nèi)容（2）保存框架及框架集。單擊“文件”|“保存全部”菜單項(xiàng)，保存時(shí)將上面的框架命名為“topFrame”，下部左側(cè)的框架命名為“l(fā)eftFrame”，下部右側(cè)的框架命名為“mainFrame”。（3）設(shè)置topFrame框架的屬性。在屬性面板中設(shè)置topFrame框架的屬性。（4）設(shè)置leftFrame框架的屬性。在屬性面板中設(shè)置leftFrame框架的屬性。

（5）設(shè)置mainFrame框架的屬性。在屬性面板中設(shè)置mainFrame框架的屬性。（6）設(shè)置topFrame框架內(nèi)的頁(yè)面屬性。選中“topFrame”框架，單擊“修改”|“頁(yè)面屬性”菜單項(xiàng)，彈出一個(gè)名為“頁(yè)面屬性”的對(duì)話(huà)框，在其中設(shè)置參數(shù)。（7）設(shè)置leftFrame框架內(nèi)的頁(yè)面屬性。選中“l(fā)eftFrame”框架，單擊“修