1、第6講 使用表格和Spry布局構(gòu)件 教學(xué)目標(biāo)6.1 創(chuàng)建站點(diǎn)6.1.1 功能講解6.1.2 范例解析制作“瑞士風(fēng)情”網(wǎng)頁(yè) 6.1.3 課堂實(shí)訓(xùn)制作日歷表6.2 創(chuàng)建文件6.6.1 功能講解6.6.2 范例解析創(chuàng)建Spry選項(xiàng)卡式面板 6.6.3 課堂實(shí)訓(xùn)創(chuàng)建Spry菜單欄 6.3 綜合案例使用表格布局網(wǎng)頁(yè)教學(xué)目標(biāo)掌握插入表格的方法。掌握編輯表格的方法。掌握使用表格布局網(wǎng)頁(yè)的方法。掌握插入和設(shè)置Spry布局構(gòu)件的方法。返回目錄6.1 創(chuàng)建站點(diǎn)6.1.1 功能講解6.1.2 范例解析制作“瑞士風(fēng)情”網(wǎng)頁(yè) 6.1.3 課堂實(shí)訓(xùn)制作日歷表返回目錄6.1.1 功能講解表格可以將一定的內(nèi)容按特定的行、列規(guī)

2、則進(jìn)行排列。Dreamweaver CS4中的表格功能很強(qiáng)大，用戶可以方便地創(chuàng)建出各種規(guī)格的表格。 具體內(nèi)容如下。創(chuàng)建表格。 編輯表格。 設(shè)置表格屬性。 設(shè)置行、列或單元格屬性。 操作數(shù)據(jù)表格。 返回目錄一、創(chuàng)建表格 插入單個(gè)表格。 創(chuàng)建嵌套表格。 返回目錄（1）插入單個(gè)表格 在網(wǎng)頁(yè)文檔中，將光標(biāo)置于要插入表格的位置，然后采用以下任意一種方式打開(kāi)【表格】對(duì)話框，進(jìn)行參數(shù)設(shè)置即可，如圖所示。選擇【插入】/【表格】命令。在【插入】/【常用】工具欄中單擊 按鈕。在【插入】/【布局】工具欄中單擊 按鈕。按Ctrl+Alt+T組合鍵。 返回目錄（2）創(chuàng)建嵌套表格 嵌套表格是指在表格的單元格內(nèi)再插入表格，

3、其寬度受所在單元格的寬度限制。在進(jìn)行網(wǎng)頁(yè)布局時(shí)，常使用嵌套表格來(lái)排版頁(yè)面元素，此時(shí)，表格的邊框粗細(xì)通常設(shè)置為“0”，如圖所示是一個(gè)嵌套表格。 返回目錄二、編輯表格 表格的基本操作，包括增加行或列、刪除行或列、合并單元格、拆分單元格等。具體內(nèi)容如下。選擇表格。 增加行或列。 刪除行或列。 合并單元格。 拆分單元格。 返回目錄（1）選擇表格 選擇整個(gè)表格。 選擇行或列。 選擇單元格。 返回目錄選擇整個(gè)表格單擊表格左上角或單擊表格中任何一個(gè)單元格的邊框線。將光標(biāo)置于表格內(nèi)，選擇【修改】/【表格】/【選擇表格】命令，或在右鍵快捷菜單中選擇【表格】/【選擇表格】命令。 將光標(biāo)移到預(yù)選擇的表格內(nèi)，表格上端

4、或下端會(huì)彈出綠線的標(biāo)志，單擊綠線中的 按鈕，從彈出的下拉菜單中選擇【選擇表格】命令。將光標(biāo)移到預(yù)選擇的表格內(nèi)，單擊文檔窗口左下角相應(yīng)的“”標(biāo)簽。返回目錄返回目錄選擇行或列 當(dāng)鼠標(biāo)指針位于欲選擇的行首或列頂時(shí)，指針變成黑色箭頭形狀，這時(shí)單擊鼠標(biāo)，便可選擇行或列，如圖所示。如果按住鼠標(biāo)左鍵并拖曳，可以選擇連續(xù)的行或列，也可以按住Ctrl鍵，依次單擊欲選擇的行或列。 返回目錄按住鼠標(biāo)左鍵從左至右或從上至下拖曳，將選擇相應(yīng)的行或列。 將光標(biāo)移到欲選擇的行中，單擊文檔窗口左下角的“”標(biāo)簽選擇行。將光標(biāo)移到表格內(nèi)，單擊欲選擇列的綠線標(biāo)志中的按鈕，從彈出的下拉菜單中選擇【選擇列】命令。 返回目錄選擇單元格

5、選擇單個(gè)單元格的方法有以下兩種。將光標(biāo)置于單元格內(nèi)，然后按住Ctrl鍵，單擊單元格可以將其選擇。將光標(biāo)置于單元格內(nèi)，然后單擊文檔窗口左下角的標(biāo)簽將其選擇。選擇相鄰單元格的方法有以下兩種。在開(kāi)始的單元格中按住鼠標(biāo)左鍵并拖曳到最后的單元格。將光標(biāo)置于開(kāi)始的單元格內(nèi)，然后按住Shift鍵不放，單擊最后的單元格。選擇不相鄰單元格的方法有以下兩種。按住Ctrl鍵，依次單擊欲選擇的單元格。按住Ctrl鍵，在已選擇的連續(xù)單元格中依次單擊欲去除的單元格。 返回目錄（2）增加行或列 在【插入】/【布局】面板中單擊【在上面插入】等按鈕來(lái)插入行或列。選擇【修改】/【表格】/【插入行】命令，則在光標(biāo)所在單元格的上面增

6、加1行。同樣，選擇【修改】/【表格】/【插入列】命令，則在光標(biāo)所在單元格的左側(cè)增加1列。也可右鍵快捷菜單命令進(jìn)行操作。選擇【插入】/【表格對(duì)象】菜單中的【在上面插入行】、【在下面插入行】、【在左邊插入列】、【在右邊插入列】命令來(lái)插入行或列。選擇【修改】/【表格】/【插入行或列】命令，在彈出的【插入行或列】對(duì)話框中進(jìn)行設(shè)置，加以確認(rèn)后即可完成插入操作。也可在右鍵快捷菜單中選擇【表格】/【插入行或列】命令，彈出該對(duì)話框。返回目錄（3）刪除行或列 如果要?jiǎng)h除行或列，首先需要將鼠標(biāo)光標(biāo)置于要?jiǎng)h除的行或列中，或者將要?jiǎng)h除的行或列選中，然后選擇【修改】/【表格】菜單中的【刪除行】或【刪除列】命令，將行或列

7、刪除。最簡(jiǎn)捷的方法就是利用選擇表格行或列的方法選定要?jiǎng)h除的行或列，然后按Delete鍵。也可使用右鍵快捷菜單進(jìn)行以上操作。 返回目錄（4）合并單元格 合并單元格是指將多個(gè)單元格合并為一個(gè)單元格。首先選擇欲合并的單元格，然后可采取以下幾種方法進(jìn)行操作。選擇【修改】/【表格】/【合并單元格】命令。單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇【表格】/【合并單元格】命令。單擊【屬性】面板左下角的 按鈕。合并單元格后的效果如圖所示。 返回目錄（5）拆分單元格 拆分單元格是針對(duì)單個(gè)單元格而言的，可看成是合并單元格操作的逆操作。首先需要將鼠標(biāo)光標(biāo)定位到要拆分的單元格中，然后采取以下幾種方法進(jìn)行操作。選擇【修改】/

8、【表格】/【拆分單元格】命令。單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇【表格】/【拆分單元格】命令。單擊【屬性】面板左下角的 按鈕，彈出【拆分單元格】對(duì)話框。拆分單元格的效果如圖所示。 返回目錄三、設(shè)置表格屬性 選擇表格后，表格【屬性】面板如圖所示。 返回目錄四、設(shè)置行、列或單元格屬性 設(shè)置表格的行、列或單元格屬性要先選擇行、列或單元格，然后在【屬性】面板中進(jìn)行設(shè)置。行、列、單元格的【屬性】面板都是一樣的，唯一不同的是左下角的名稱。如圖所示是單元格的【屬性】面板，上半部分是設(shè)置單元格內(nèi)文本的屬性，下半部分是設(shè)置單元格的屬性。 返回目錄五、操作數(shù)據(jù)表格 Dreamweaver CS4能夠與外部軟件交

9、換數(shù)據(jù)，以方便用戶快速導(dǎo)入或?qū)С鰯?shù)據(jù)，同時(shí)還可以對(duì)數(shù)據(jù)表格進(jìn)行排序。 導(dǎo)入表格數(shù)據(jù)。 導(dǎo)出表格數(shù)據(jù)。 排序表格數(shù)據(jù)。 返回目錄（1）導(dǎo)入表格數(shù)據(jù) 選擇【文件】/【導(dǎo)入】/【表格式數(shù)據(jù)】或【Excel文檔】命令可以將表格式數(shù)據(jù)或Excel表格導(dǎo)入到網(wǎng)頁(yè)文檔中。導(dǎo)入Excel文檔與導(dǎo)入Word文檔打開(kāi)的對(duì)話框是相似的，而導(dǎo)入表格式數(shù)據(jù)打開(kāi)的對(duì)話框如圖所示。 返回目錄（2）導(dǎo)出表格數(shù)據(jù) 在Dreamweaver CS4中的表格數(shù)據(jù)也可以進(jìn)行導(dǎo)出。方法是，將光標(biāo)置于表格中，然后選擇【文件】/【導(dǎo)出】/【表格】命令，打開(kāi)【導(dǎo)出表格】對(duì)話框，如圖所示，在【定界符】下拉列表中選擇要在導(dǎo)出的結(jié)果文件中使用的分

10、隔符類型（包括“Tab”、“空白鍵”、“逗點(diǎn)”、“分號(hào)”、“引號(hào)”），在【換行符】下拉列表中選擇打開(kāi)文件的操作系統(tǒng)（包括“Windows”、“Mac”、“UNIX”），最后單擊 按鈕，打開(kāi)【表格導(dǎo)出為】對(duì)話框，設(shè)置文件的保存位置和名稱即可。 返回目錄（3）排序表格數(shù)據(jù) 利用Dreamweaver CS4的【排序表格】命令可以對(duì)表格指定列的內(nèi)容進(jìn)行排序。方法是，利用選擇表格的相關(guān)命令選中整個(gè)表格，然后選擇【命令】/【排序表格】命令，打開(kāi)【排序表格】對(duì)話框進(jìn)行參數(shù)設(shè)置即可，如圖所示。 返回目錄6.1.2 范例解析制作“瑞士風(fēng)情”網(wǎng)頁(yè)首先將“范例解析素材第6講6-1-2images”文件夾復(fù)制到站點(diǎn)

11、根文件夾下，然后創(chuàng)建文檔“6-1-2.htm”，并使用表格布局頁(yè)面，最終效果如圖所示。 這是使用表格進(jìn)行頁(yè)面布局的一個(gè)例子，可以先插入表格，然后通過(guò)【屬性】面板對(duì)表格和單元格進(jìn)行屬性設(shè)置，最后在單元格中輸入內(nèi)容即可，具體操作步驟參考教材。返回目錄返回目錄6.1.3 課堂實(shí)訓(xùn)制作日歷表 使用表格制作2009年10月日歷表并保存為“6-1-3.htm”，最終效果如圖所示。 這是使用表格組織數(shù)據(jù)的一個(gè)例子，可以先插入表格，然后通過(guò)【屬性】面板對(duì)表格和單元格進(jìn)行屬性設(shè)置，最后在單元格中輸入內(nèi)容即可。 返回目錄6.2 使用Spry構(gòu)件 6.2.1 功能講解6.2.2 范例解析創(chuàng)建Spry選項(xiàng)卡式面板 6

12、.2.3 課堂實(shí)訓(xùn)創(chuàng)建Spry菜單欄 返回目錄6.2.1 功能講解Spry構(gòu)件是預(yù)置的常用用戶界面組件，可以使用CSS來(lái)自定義這些組件，然后將其添加到網(wǎng)頁(yè)中。使用Dreamweaver CS4可以將多個(gè)Spry構(gòu)件添加到頁(yè)面中，這些構(gòu)件包括XML驅(qū)動(dòng)的列表和表格、折疊構(gòu)件、選項(xiàng)卡式界面和具有驗(yàn)證功能的表單元素?？梢赃x擇【插入】/【Spry】中的相應(yīng)命令向頁(yè)面中插入各種Spry構(gòu)件，也可以通過(guò)【插入】/【Spry】工具欄中的相應(yīng)按鈕進(jìn)行操作。如果要編輯構(gòu)件，可以將光標(biāo)指向這個(gè)構(gòu)件直到看到構(gòu)件的藍(lán)色選項(xiàng)卡式輪廓，單擊構(gòu)件左上角的選項(xiàng)卡將其選中，然后在【屬性】面板中編輯構(gòu)件即可。盡管可以使用【屬性】

13、面板編輯Spry構(gòu)件，但【屬性】面板并不支持其外觀樣式的設(shè)置。如果要修改其外觀樣式，必須修改對(duì)應(yīng)的CSS樣式。 下面對(duì)Spry布局構(gòu)件進(jìn)行簡(jiǎn)要介紹，包括Spry菜單欄、Spry選項(xiàng)卡式面板、Spry折疊式構(gòu)件、Spry可折疊式面板。 返回目錄一、Spry菜單欄 Spry菜單欄是一組可導(dǎo)航的菜單按鈕，當(dāng)將鼠標(biāo)懸停在其中的某個(gè)按鈕上時(shí)，將顯示相應(yīng)的子菜單。根據(jù)需要，可以使用Spry菜單欄構(gòu)件創(chuàng)建橫向或縱向的下拉或彈出菜單。圖為一個(gè)水平菜單欄構(gòu)件，其中的第3個(gè)菜單項(xiàng)處于展開(kāi)狀態(tài)。 返回目錄創(chuàng)建Spry菜單欄的方法是，選擇【插入】/【Spry】/【Spry菜單欄】命令打開(kāi)【Spry菜單欄】對(duì)話框，選擇

14、菜單欄的布局模式，其中包括【水平】和【垂直】?jī)煞N。確定菜單欄的布局后，單擊 按鈕，在文檔中插入一個(gè)Spry菜單欄構(gòu)件，如圖所示。 返回目錄此時(shí)還需要通過(guò)【屬性】面板添加菜單項(xiàng)及鏈接目標(biāo)。確保Spry菜單欄構(gòu)件處于選中狀態(tài)，如果沒(méi)有選中可單擊左上角的【Spry菜單欄：MenuBar1】可將其選中，此時(shí)其【屬性】面板如圖所示。由【屬性】面板可以看出，創(chuàng)建的菜單欄可以有3級(jí)菜單。在【屬性】面板中，從左至右的3個(gè)列表框分別用來(lái)定義一級(jí)菜單項(xiàng)、二級(jí)菜單項(xiàng)和三級(jí)菜單項(xiàng)，在定義每個(gè)菜單項(xiàng)時(shí)，均使用右側(cè)的【文本】、【鏈接】、【標(biāo)題】和【目標(biāo)】4個(gè)文本框進(jìn)行設(shè)置。單擊列表框上方的 按鈕將添加一個(gè)菜單項(xiàng)；單擊 按

15、鈕將刪除一個(gè)菜單項(xiàng)；單擊 按鈕將選中的菜單項(xiàng)上移；單擊 按鈕將選中的菜單項(xiàng)下移。 返回目錄二、Spry選項(xiàng)卡式面板 Spry選項(xiàng)卡式面板構(gòu)件是一組面板，用來(lái)將內(nèi)容存儲(chǔ)到緊湊空間中。用戶可以通過(guò)單擊要訪問(wèn)面板上的選項(xiàng)卡來(lái)隱藏或顯示存儲(chǔ)在選項(xiàng)卡式面板中的內(nèi)容。當(dāng)訪問(wèn)者單擊不同的選項(xiàng)卡時(shí)，構(gòu)件的面板會(huì)相應(yīng)地打開(kāi)。在給定時(shí)間內(nèi)，選項(xiàng)卡式面板構(gòu)件中只有一個(gè)內(nèi)容面板處于打開(kāi)狀態(tài)。圖為一個(gè)選項(xiàng)卡式面板構(gòu)件，第3個(gè)面板處于打開(kāi)狀態(tài)。 返回目錄創(chuàng)建Spry選項(xiàng)卡式面板的方法是，選擇【插入】/【Spry】/【Spry選項(xiàng)卡式面板】命令，在頁(yè)面中添加一個(gè)Spry選項(xiàng)卡式面板構(gòu)件。 確保Spry選項(xiàng)卡式面板構(gòu)件處于選

16、中狀態(tài)，其【屬性】面板如圖所示。 返回目錄三、Spry折疊式構(gòu)件 折疊式構(gòu)件是一組可折疊的面板，可以將大量?jī)?nèi)容存儲(chǔ)在一個(gè)緊湊的空間中。站點(diǎn)瀏覽者可通過(guò)單擊該面板上的選項(xiàng)卡來(lái)隱藏或顯示存儲(chǔ)在折疊構(gòu)件中的內(nèi)容。當(dāng)瀏覽者單擊不同的選項(xiàng)卡時(shí)，折疊構(gòu)件的面板會(huì)相應(yīng)地展開(kāi)或收縮。在折疊式構(gòu)件中，每次只能有一個(gè)內(nèi)容面板處于打開(kāi)且可見(jiàn)的狀態(tài)。圖所示為一個(gè)折疊式構(gòu)件，其中第2個(gè)面板處于展開(kāi)狀態(tài)。 返回目錄創(chuàng)建折疊式構(gòu)件的方法是，選擇【插入】/【Spry】/【Spry折疊式】命令，在頁(yè)面中添加一個(gè)Spry折疊式構(gòu)件。 確保Spry折疊式構(gòu)件處于選中狀態(tài)，其【屬性】面板如圖所示。 返回目錄四、Spry可折疊式面板

17、可折疊面板構(gòu)件是一個(gè)面板，可將內(nèi)容存儲(chǔ)到緊湊的空間中。用戶單擊構(gòu)件的選項(xiàng)卡即可隱藏或顯示存儲(chǔ)在可折疊面板中的內(nèi)容。圖所示為一個(gè)處于展開(kāi)和折疊狀態(tài)的可折疊面板構(gòu)件。 返回目錄創(chuàng)建可折疊面板構(gòu)件的方法是，選擇【插入】/【Spry】/【Spry可折疊面板】命令，在頁(yè)面中添加一個(gè)Spry可折疊面板構(gòu)件。如果頁(yè)面中需要多個(gè)可折疊面板，可以多次選擇該命令，依次添加多個(gè)Spry可折疊面板。 確保Spry可折疊面板處于選中狀態(tài)，其【屬性】面板如圖所示。在【屬性】面板中，可以在【可折疊面板】文本框中設(shè)置面板的名稱，在【顯示】列表框中設(shè)置面板當(dāng)前狀態(tài)為“打開(kāi)”或“已關(guān)閉”，在【默認(rèn)狀態(tài)】列表框中設(shè)置在瀏覽器中瀏覽時(shí)面板默認(rèn)狀態(tài)為“打開(kāi)”或“已關(guān)閉”，勾選【啟用動(dòng)畫】復(fù)選框?qū)⒂脛?dòng)畫效果?？梢灾苯釉谖臋n中更改標(biāo)面板的標(biāo)題名稱并輸入相應(yīng)的內(nèi)容。 返回目錄6.2.2 范例解析創(chuàng)建Spry選項(xiàng)卡式面板 創(chuàng)建一個(gè)Spry選項(xiàng)卡式面板，在瀏覽器中的預(yù)覽效果如圖所示。