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

1、無數(shù)學(xué)系 09 級(jí)（3）班 杜強(qiáng)海 20091022129利用表格制作網(wǎng)頁實(shí)驗(yàn)?zāi)繕?biāo)該網(wǎng)頁將利用設(shè)計(jì)頁面的布局，制楚雄師院的頁面簡(jiǎn)介。通過該種制作，我們可以體會(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、指針置于第 1 行第 1 列單元格內(nèi)在屬性面板中將寬設(shè)為 200，高設(shè)為 30，如右圖 2 所示。3單擊常用工具欄中的常用圖像按鈕，再打開的選擇圖像源文件對(duì)話框中選中一幅圖片，單擊確定按鈕，為單元的插入一幅圖片，如右圖 3 所示4將鼠標(biāo)指針移到第 1 行 1 列單元格內(nèi)，在屬性面板中將寬設(shè)為 50， 高設(shè)為 30，單擊常用工具欄中的圖像按鈕，打開插入鼠標(biāo)經(jīng)過圖像對(duì)話框，如圖 4 所示。圖 35在打開的對(duì)話框中，單擊原始圖像后面的瀏覽按鈕.。在打開的對(duì)話框中選中一幅圖片，單擊確定按鈕，在單擊鼠標(biāo)經(jīng)過圖像后面的瀏覽按鈕，用同樣的方法選定一幅圖片，如圖 5 所示6設(shè)置完成后，單擊確定按鈕，然后同同第

3、 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)指針置圖 4圖 2無于表格的下一行，單擊常用工具欄表格圖標(biāo)按鈕，為文檔在插入一個(gè) 3 行 3 列的表格，如圖 7 所示。8將鼠標(biāo)指針置于插入表格的第 1 行第 1 列中，在屬性面板中將寬 。設(shè)為 120，然后將鼠標(biāo)指針置于第 1 行第 1 列單元格內(nèi)，按下 Ctrl+Alt+t 組合鍵，打開表格對(duì)話

4、框，其中的設(shè)置如圖 8 所示。設(shè)置好后，單擊確定按鈕，給單元格插入嵌套表格。9選中插入的嵌套表格在屬性面板中將對(duì)齊設(shè)置為劇中右對(duì)齊。然后將鼠標(biāo)指針置于嵌套表格第一行中，按照前面的方法，為其插入一幅圖片。同樣的，為其第 2,3,4,5 列也分別插入圖片。圖 6圖 8圖 710在屬性面板中，將第 6 列單元格的高設(shè)為 50，再將鼠標(biāo)指針置于第 7 列，為其插入一幅圖片。單擊狀態(tài)欄中的tatle標(biāo)簽，選中第 7 步插入的 3 行 3 列的表格，在屬性面板中，為背景顏色設(shè)置為#009966，如圖10 所示。圖 10圖 9圖 5無圖 11圖 1211 將鼠標(biāo)指針置于 7 步插入表格的第 2 行2 列中，

5、在屬性面板中，將垂直設(shè)置為頂端。打開表格對(duì)話框，其中的設(shè)置如圖 11 所示。設(shè)置完后，單擊確定按鈕，為單元格插入嵌套。12在上一步插入表格的屬性面板中，將對(duì)齊方式設(shè)為居中對(duì)齊， 將鼠標(biāo)置于該表格的第2 行，按下 ctrl+alt+I 組合鍵，在打開的對(duì)話框中選擇一幅圖，單擊確定，為單元格插入圖片。在該單元格的屬性面板中，單擊居中對(duì)齊按鈕，將圖片居中，如圖 12 所示13 將光標(biāo)置于下 1 列單元格， 輸入文字。在網(wǎng)頁中右擊，在彈出的快捷鍵菜單中執(zhí)行CSS 規(guī)則對(duì)話框。按照?qǐng)D 13 設(shè)置后，單擊確定按鈕，彈出X1 的規(guī)則定義對(duì)話框。14在X1 規(guī)則定義對(duì)話框中，將文字設(shè)為宋體， 大小設(shè)為 12

6、像素， ， 樣式設(shè)為正常，設(shè)為 26 像素,其余不變.單擊按鈕，在編輯窗口選中輸入的文字，右擊，在彈出的快捷菜單中執(zhí)行CSS 樣式 的 x1 命令， 為文字應(yīng)用 css 樣式，如圖 14 所示圖 1415將鼠標(biāo)指針置于第 7 步插入的 3 行 2 列表格的下一行，然后按下 ctrl+Alt+T 組合鍵圖 13無打開表格對(duì)話框，其中的設(shè)置如圖 15 所示設(shè)置完畢后，單擊確定按鈕，為網(wǎng)頁插入表格16選中上一步插入的表格，在屬性面板中，將背景顏色設(shè)為#99FF66。將鼠標(biāo)指針設(shè)置于第 1 行單元格內(nèi)，在屬性面板中，將水平設(shè)為右對(duì)齊，然后為該單元格插入一幅圖片，如圖 16 所示17將鼠標(biāo)指針置于定 2

7、 行單元格內(nèi)，在屬性面板中，將格式設(shè)為段落，水平設(shè)為右對(duì)齊，然后輸入師院信息。在網(wǎng)頁中右擊，在彈出的快捷鍵菜單中執(zhí)行css 樣式的新建命令彈出新建 css 規(guī)則對(duì)話框。18 新建 css 規(guī)則對(duì)話框的設(shè)置如圖18 所示，設(shè)置好后，單擊確定按鈕。彈出x2 的規(guī)則定義對(duì)話框，將大小設(shè)為 19 像素， 樣式設(shè)為正常， 行高設(shè)為 20 像素， 顏色設(shè)為，其余不變。設(shè)置完畢后，單擊確定按鈕19在編輯窗口選中輸入的文字，右擊在彈出的快捷菜單中執(zhí)行css 樣式的x2命令， 為文字應(yīng)用 css 樣式。按下 ctrl+s 組合保存文件，按下 F12 鍵預(yù)覽在 IE 中。圖 16圖 15圖 17無創(chuàng)建一個(gè)本地站點(diǎn)

8、實(shí)驗(yàn)?zāi)繕?biāo)建立一個(gè)站點(diǎn)后， 要把所有的站點(diǎn)文件保存在建立的根目錄中， 然后將所做的網(wǎng)頁保存在所建的站點(diǎn)中。實(shí)驗(yàn)過程1在 dreamweaver 中執(zhí)行站點(diǎn)中打開新建站點(diǎn)命令， ，將彈出未命名站點(diǎn) 1 的站點(diǎn)定義為對(duì)話框。然后在基本選項(xiàng)卡里輸入站點(diǎn)名稱。2然后單擊下一步，彈出一個(gè)對(duì)話框如圖 2 所示。然后他給出的你想使用那一種服務(wù)器技術(shù)。然后點(diǎn)擊是這個(gè)按鈕，然后點(diǎn)擊你所選中的技術(shù)。如圖 2 所示3然后單擊下一行這個(gè)按鈕， 找到在 本地進(jìn)行編輯和測(cè)試這個(gè)按鈕，點(diǎn)擊它。然后找到將把文件存儲(chǔ)在計(jì)算機(jī)上的什么位置？圖 1這個(gè)按鈕，然后點(diǎn)擊瀏覽，找到我所新那個(gè)文件，如圖 3 所示4然后在單擊下一步按鈕，將會(huì)出來如圖 4 所示的對(duì)話框，然后