利用表格制作網(wǎng)頁

數(shù)學(xué)系09級（3）班杜強(qiáng)海20091022129利用表格制作網(wǎng)頁實(shí)驗(yàn)?zāi)繕?biāo)該網(wǎng)頁將利用設(shè)計頁面的布局，制楚雄師院的頁面簡介。通過該種制作，我們可以體會到表格在布局設(shè)計中的實(shí)際運(yùn)用，體會如何使用表格來控制頁面中的元素對象，已達(dá)到自然，生動的配置構(gòu)成元素的目的。實(shí)驗(yàn)過程在dreamweaver中執(zhí)行《文件》中的《新建》命令，創(chuàng)建一個HTML文檔。然后在《文件》中保存該文檔。然后在《文檔》工具欄的《標(biāo)題》中輸入“師院首頁”。然后單擊《常用》工具欄的表格按鈕，插入一個3行3列的表格， 圖1如圖1所示。<2>選中第2行表格的第2單元格。單擊屬性面板中的合并所選單元格按鈕，將其合并。然后將指針置于第1行第1列單元格內(nèi)在屬性面板中將《寬》設(shè)為200，<高》設(shè)為30，如右圖2所示。圖2《3》單擊《常用》工具欄中的常用圖像按鈕，再打開的《選擇圖像源文件》對話框中選中一幅圖片，單擊《確定》按鈕，為單元的插入一幅圖片，如右圖3所示圖2《4》將鼠標(biāo)指針移到第1行1列單元格內(nèi)，在屬性面板中將《寬》設(shè)為50，《高》設(shè)為30，單擊《常用》工具欄中的圖像按鈕，打開《插入鼠標(biāo)經(jīng)過圖像》對話框，如圖4所示。 圖3《5》在打開的< 插入鼠標(biāo)經(jīng)過圖像>對話框中，單擊《原始圖像》后面的《瀏覽》按鈕.。在打開的對話框中選中一幅圖片，單擊確定按鈕，在單擊《鼠標(biāo)經(jīng)過圖像》后面的《瀏覽》按鈕，用同樣的方法選定一幅圖片，如圖5所示圖4《6》設(shè)置完成后，單擊《確定》按鈕，然后同同第4,5步一樣為第1行的第1,2列也分別設(shè)置鼠標(biāo)經(jīng)過圖像。然后將鼠標(biāo)指針置于第一行第三列的單元格內(nèi)，在《屬性》面板中，為《寬》設(shè)為100，《高》。設(shè)為50。為《背景顏色》設(shè)為#333cc，如圖6所示圖4《7》將鼠標(biāo)指針置于表格的第3行，按前面的方法，為第3行單元格也插入一幅圖片。然后將鼠標(biāo)指針置于表格的下一行，單擊《常用》工具欄表格圖標(biāo)按鈕，為文檔在插入一個3行3列的表格，如圖7所示。圖5《8》將鼠標(biāo)指針置于插入表格的第1行第1列中，圖5在屬性面板中將《寬》。設(shè)為120，然后將鼠標(biāo)指針置于第1行第1列單元格內(nèi)，按下Ctrl+Alt+t組合鍵，打開《表格》對話框，其中的設(shè)置如圖8所示。設(shè)置好后，單擊《確定》按鈕，給單元格插入嵌套表格。《9》選中插入的嵌套表格在屬性面板中將《對齊》設(shè)置為劇中右對齊。然后將鼠標(biāo)指針置于嵌套表格第一行中，按照前面的方法，為其插入一幅圖片。同樣的，為其第2,3,4,5列也分別插入圖片。圖6 圖6 圖8圖7 《10》在屬性面板中，將第6列單元格的《高》設(shè)為50，再將鼠標(biāo)指針置于第7列，為其插入一幅圖片。單擊《狀態(tài)欄》中的《tatle》標(biāo)簽，選中第7步插入的3行3列的表格，在屬性面板中，為《背景顏色》設(shè)置為#00996