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

1、無數(shù)學(xué)系 09 級（3）班 杜強海 20091022129利用表格制作網(wǎng)頁實驗?zāi)繕?biāo)該網(wǎng)頁將利用設(shè)計頁面的布局，制楚雄師院的頁面簡介。通過該種制作，我們可以體會到表格在布局設(shè)計中的實際運用，體會如何使用表格來控制頁面中的元素對象，已達到自然，生動的配置構(gòu)成元素的目的。實驗過程1在 dreamweaver 中執(zhí)行 文件 中的 新建命令，創(chuàng)建一個 HTML 文檔。然后在文件中保存該文檔。然后在文檔工具欄的標(biāo)題中輸入“師院首頁” 。然后單擊常用工具欄的表格按鈕，插入一個 3 行 3 列的表格，圖 1如圖 1 所示。選中第 2 行表格的第 2 單元格。單擊屬性面板中的合并所選單元格按鈕，將其合并。然后將

2、指針置于第 1 行第 1 列單元格內(nèi)在屬性面板中將寬設(shè)為 200，高設(shè)為 30，如右圖 2 所示。3單擊常用工具欄中的常用圖像按鈕，再打開的選擇圖像源文件對話框中選中一幅圖片，單擊確定按鈕，為單元的插入一幅圖片，如右圖 3 所示4將鼠標(biāo)指針移到第 1 行 1 列單元格內(nèi)，在屬性面板中將寬設(shè)為 50， 高設(shè)為 30，單擊常用工具欄中的圖像按鈕，打開插入鼠標(biāo)經(jīng)過圖像對話框，如圖 4 所示。圖 35在打開的對話框中，單擊原始圖像后面的瀏覽按鈕.。在打開的對話框中選中一幅圖片，單擊確定按鈕，在單擊鼠標(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)按鈕，為文檔在插入一個 3 行 3 列的表格，如圖 7 所示。8將鼠標(biāo)指針置于插入表格的第 1 行第 1 列中，在屬性面板中將寬 。設(shè)為 120，然后將鼠標(biāo)指針置于第 1 行第 1 列單元格內(nèi)，按下 Ctrl+Alt+t 組合鍵，打開表格對話

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

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

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

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