資源描述：
《利用表格制作網(wǎng)頁》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在學(xué)術(shù)論文-天天文庫。
1、數(shù)學(xué)系09級(jí)（3）班杜強(qiáng)海20091022129利用表格制作網(wǎng)頁實(shí)驗(yàn)?zāi)繕?biāo)該網(wǎng)頁將利用設(shè)計(jì)頁面的布局，制楚雄師院的頁面簡介。通過該種制作，我們可以體會(huì)到表格在布局設(shè)計(jì)中的實(shí)際運(yùn)用，體會(huì)如何使用表格來控制頁面中的元素對(duì)象，已達(dá)到自然，生動(dòng)的配置構(gòu)成元素的目的。實(shí)驗(yàn)過程《1》在dreamweaver中執(zhí)行《文件》中的《新建》命令，創(chuàng)建一個(gè)HTML文檔。然后在《文件》中保存該文檔。然后在《文檔》工具欄的《標(biāo)題》中輸入“師院首頁”。然后單擊《常用》工具欄的表格按鈕，插入一個(gè)3行3列的表格，圖1如圖1所示。<2>選中第2行表格的第2單元格。單
2、擊屬性面板中的合并所選單元格按鈕，將其合并。然后將指針置于第1行第1列單元格內(nèi)在屬性面板中將《寬》設(shè)為200，<高》設(shè)為30，如右圖2所示。圖2《3》單擊《常用》工具欄中的常用圖像按鈕，再打開的《選擇圖像源文件》對(duì)話框中選中一幅圖片，單擊《確定》按鈕，為單元的插入一幅圖片，如右圖3所示《4》將鼠標(biāo)指針移到第1行1列單元格內(nèi)，在屬性面板中將《寬》設(shè)為50，《高》設(shè)為30，單擊《常用》工具欄中的圖像按鈕，打開《插入鼠標(biāo)經(jīng)過圖像》對(duì)話框，如圖4所示。圖3《5》在打開的<插入鼠標(biāo)經(jīng)過圖像>對(duì)話框中，單擊《原始圖像》后面的《瀏覽》按鈕.。在
3、打開的對(duì)話框中選中一幅圖片，單擊確定按鈕，在單擊《鼠標(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所示《7》將鼠標(biāo)指針置于表格的第3行，按前面的方法，為第3行單元格也插入一幅圖片。然后將鼠標(biāo)指針置于表格的下一行，單擊《常用》工具欄表格圖標(biāo)按鈕，為文檔在插入一個(gè)3行3列的表
4、格，如圖7所示。圖5《8》將鼠標(biāo)指針置于插入表格的第1行第1列中，在屬性面板中將《寬》。設(shè)為120，然后將鼠標(biāo)指針置于第1行第1列單元格內(nèi)，按下Ctrl+Alt+t組合鍵，打開《表格》對(duì)話框，其中的設(shè)置如圖8所示。設(shè)置好后，單擊《確定》按鈕，給單元格插入嵌套表格。《9》選中插入的嵌套表格在屬性面板中將《對(duì)齊》設(shè)置為劇中右對(duì)齊。然后將鼠標(biāo)指針置于嵌套表格第一行中，按照前面的方法，為其插入一幅圖片。同樣的，為其第2,3,4,5列也分別插入圖片。圖6圖6圖8圖7《10》在屬性面板中，將第6列單元格的《高》設(shè)為50，再將鼠標(biāo)指針置于第7列
5、，為其插入一幅圖片。單擊《狀態(tài)欄》中的《tatle》標(biāo)簽，選中第7步插入的3行3列的表格，在屬性面板中，為《背景顏色》設(shè)置為#009966，如圖10所示。圖10圖9《11》將鼠標(biāo)指針置于7步插入表格的第2行2列中，在屬性面板中，將《垂直》設(shè)置為頂端。打開《表格》對(duì)話框，其中的設(shè)置如圖11所示。設(shè)置完后，單擊《確定》按鈕，為單元格插入嵌套。圖11《12》在上一步插入表格的屬性面板中，將對(duì)齊方式設(shè)為居中對(duì)齊，將鼠標(biāo)置于該表格的第2行，按下ctrl+alt+I組合鍵，在打開的對(duì)話框中選擇一幅圖，單擊確定，為單元格插入圖片。在該單元格的屬
6、性面板中，單擊居中對(duì)齊按鈕，將圖片居中，如圖12所示《13》將光標(biāo)置于下1列單元格，輸入文字。在網(wǎng)頁中右擊，在彈出的快捷鍵菜單中執(zhí)行《CSS樣式》的新建命令，彈出《新建CSS規(guī)則》對(duì)話框。按照?qǐng)D13設(shè)置后，單擊《確定》按鈕，彈出《X1的規(guī)則定義》對(duì)話框。上》《14》在《X1規(guī)則定義》對(duì)話框中，將《文字》設(shè)為宋體，《大小》設(shè)為12像素，，《樣式》設(shè)為正常，<行高>設(shè)為26像素,其余不變.單擊<確定>按鈕，在編輯窗口選中輸入的文字，右擊，在彈出的快捷菜單中執(zhí)行《CSS樣式》的x1命令，為文字應(yīng)用css樣式，圖12如圖14所示圖13圖1
7、4《15》將鼠標(biāo)指針置于第7步插入的3行2列表格的下一行，然后按下ctrl+Alt+T組合鍵打開《表格》對(duì)話框，其中的設(shè)置如圖15所示設(shè)置完畢后，單擊《確定》按鈕，為網(wǎng)頁插入表格《16》選中上一步插入的表格，在屬性面板中，將《背景顏色》設(shè)為#99FF66。將鼠標(biāo)指針設(shè)置于第1行單元格內(nèi)，在屬性面板中，將《水平》設(shè)為右對(duì)齊，然后為該單元格插入一幅圖片，如圖16所示《17》將鼠標(biāo)指針置于定2行單元格內(nèi)，在屬性面板中，將《格式》設(shè)為段落，《水平》設(shè)為右對(duì)齊，然后輸入師院信息。在網(wǎng)頁中右擊，在彈出的快捷鍵菜單中執(zhí)行《css樣式》的《新建》
8、命令彈出《新建css規(guī)則》對(duì)話框?！?8》《新建css規(guī)則》對(duì)話框的設(shè)置如圖圖1518所示，設(shè)置好后，單擊《確定》按鈕。彈出《x2的規(guī)則定義》對(duì)話框，將《大小》設(shè)為19像素，《樣式》設(shè)為正常，《行高》設(shè)為20像素，《顏色》設(shè)為，其余不變。設(shè)置完畢后
