資源描述:
《Dreamweaver MX網(wǎng)頁設(shè)計與制作 教學(xué)課件 作者 曾立 第2章.ppt》由會員上傳分享,免費在線閱讀,更多相關(guān)內(nèi)容在教育資源-天天文庫。
1、Dreamweaver網(wǎng)頁設(shè)計和制作第2章表格第2章表格布局技術(shù)2.1表格的基本操作2.2使用表格制作網(wǎng)頁簡介網(wǎng)頁是由文字、圖片、動畫等靜態(tài)和動態(tài)的一些網(wǎng)頁元素構(gòu)成的,如何合理地組織這些元素,使之整齊、美觀,首先需要一個整體布局的概念,在DreamweaverMX中主要依靠表格的相互嵌套、合并、拆分來完成。本章主要介紹表格在網(wǎng)頁布局中的應(yīng)用。本章任務(wù)學(xué)會表格的建立與修改掌握表格的嵌套使用能夠熟練地利用表格制作出一個布局整齊的網(wǎng)頁2.1表格的基本操作插入表格在表格中添加內(nèi)容從其他文檔導(dǎo)入表格式數(shù)據(jù)嵌套表格在
2、網(wǎng)頁設(shè)計中,頁面布局是一個重要的部分。DreamweaverMX提供了多種方法來創(chuàng)建和控制網(wǎng)頁布局,最普通的方法就是使用表格,使用表格可以簡化頁面布局設(shè)計過程、導(dǎo)入表格化數(shù)據(jù)、設(shè)計頁面分欄及定位頁面上的文本和圖像等。插入表格的方法通過“插入”面板上的“表格”按鈕選擇“插入”菜單—“表格”命令在彈出的對話框中設(shè)置,表格的行和列設(shè)置表格的“寬度”(注意行和列的單位)設(shè)置表格的“邊框”、“單元格填充”和“單元格間距”(特別強調(diào)“邊框”、“單元格填充”和“單元格間距”之間的關(guān)系)“表格”屬性行數(shù):定義表格行的
3、數(shù)目。列數(shù):定義表格列的數(shù)目。表格寬度:以像素為單位或按占瀏覽器窗口寬度的百分比來定義該表格在瀏覽器中的顯示寬度。邊框粗細(xì):指定表格邊框的寬度(以像素為單位)。此時默認(rèn)的邊框粗細(xì)為沒有,沒有粗細(xì)并不代表粗細(xì)就為0,根據(jù)不同瀏覽器確定的粗細(xì)不同,若要確保瀏覽器不顯示表格邊框,需將邊框粗細(xì)設(shè)置為“0”。若要在邊框粗細(xì)設(shè)置為“0”時查看單元格和表格邊框,可選擇“查看”菜單—“可視化助理”—“表格邊框”命令。“單元格填充”和“單元格間距”情況相同單元格邊距:確定單元格邊框和單元格內(nèi)容之間相距的像素數(shù)。單元格間距:
4、確定相鄰的表格單元格之間相距的像素數(shù)。如果沒有明確指定單元格間距和單元格邊距的值,則大多數(shù)瀏覽器按單元格邊距設(shè)置為“1”,單元格間距設(shè)置為“2”顯示表格。若要確保瀏覽器不顯示表格中的邊距和間距,大多數(shù)情況下將“單元格邊距”和“單元格間距”設(shè)置為“0”。單元格邊框與其中內(nèi)容之間的空白,其默認(rèn)值為1像素表格中每個單元格之間的距離,默認(rèn)值為2像素表格中添加內(nèi)容將光標(biāo)定位在要插入對象的位置輸入文本,或者選擇“插入欄”的“常用”選項卡中單擊對應(yīng)的對象從其他文檔導(dǎo)入表格式數(shù)據(jù)選擇“文件”菜單—“導(dǎo)入”,可導(dǎo)入相應(yīng)的數(shù)
5、據(jù)1、此時應(yīng)準(zhǔn)備些數(shù)據(jù)文件,比如文本文件、EXCLE、WORD……,讓學(xué)生行行導(dǎo)入,然后老師再進行拓展。2、如果是EXCLE、WORD對象,會在網(wǎng)頁中生成很多重復(fù)的代碼,應(yīng)選擇“命令”菜單—清理WORD生成的HTML嵌套表格嵌套表格是指在一個表格的單元格中再插入一個表格。嵌套表格的寬度受所在單元格的寬度的限制,嵌套表格的編輯方法與表格相同。注意:當(dāng)嵌套表格表格的寬度和高度超過外面表格時,應(yīng)該采取的方法:1、調(diào)整外部表格的寬或者高2、調(diào)整嵌套表格的寬或者高,最佳方式為把嵌套表格的寬和高單位修改百分比。嵌套表
6、格的具體操作(1)將光標(biāo)定位到要插入表格的單元格中。(2)在“插入欄”的“常用”選項卡中單擊按鈕,打開“插入表格”對話框。(3)根據(jù)實際需要分別在行數(shù)、列數(shù)、寬度和邊框等項中指定嵌套表格的屬性。(4)設(shè)置完成后單擊按鈕即可。表格基本操作選定操作單元格的合并及拆分插入或刪除行或列單元格的選取單元格的選取分為單個單元格的選取和單元格區(qū)域的選取兩種情況。單個單元格的選取方法很簡單,只需將光標(biāo)定位到要選取的單元格中即可。合并單元格(1)選取要合并的單元格區(qū)域(2)單擊“屬性”面板左下角的按鈕,合并后的效果如拆分單
7、元格(1)將光標(biāo)定位要拆分的單元格中。(2)單擊“屬性”面板中的按鈕,打開“拆分單元格”對話框。(3)在“把單元格拆分”欄中選中單選項。表格屬性設(shè)置表格屬性的設(shè)置單元格屬性設(shè)置表格屬性的設(shè)置選取表格,展開“表格”屬性面板設(shè)置對應(yīng)的屬性綜合練習(xí)