用表格製作網頁

　　你知道表格能做成網頁嗎?如果你知道，那你又知不知道怎麼做呢?下面是小編為你整理的，希望對你有用!

　　利

　　實驗目標

　　該網頁將利用設計頁面的佈局，制楚雄師院的頁面簡介。通過該種製作，我們可以體會到表格在佈局設計中的實際運用，體會如何使用表格來控制頁面中的元素物件，已達到自然，生動的配置構成元素的目的。

　　實驗過程

　　《1》在dreamweaver中執行《檔案》中的《新建》命令，建立一個HTML文件。然後在《檔案》中儲存該文件。然後在《文件》工具欄的《標題》中輸入“師院首頁”。然後單擊《常用》工具欄的表格按鈕，插入一個3行3列的表格。

　　<2>選中第2行表格的第2單元格。單擊屬性面板中的合併所選單元格按鈕，將其合併。然後將指標置於第1行第1列單元格內在屬性面板中將《寬》設為200，<高》設為30。

　　《3》單擊《常用》工具欄中的常用影象按鈕，再開啟的《選擇影象原始檔》對話方塊中選中一幅圖片，單擊《確定》按鈕，為單元的插入一幅圖片。

　　《4》將滑鼠指標移到第1行1列單元格內，在屬性面板中將《寬》設為50，《高》設為30，單擊《常用》工具欄中的影象按鈕，開啟《插入滑鼠經過影象》對話方塊。

　　《5》在開啟的< 插入滑鼠經過影象>對話方塊中，單擊《原始影象》後面的《瀏覽》按鈕.。在開啟的對話方塊中選中一幅圖片，單擊確定按鈕，在單擊《滑鼠經過影象》後面的《瀏覽》按鈕，用同樣的方法選定一幅圖片。

　　《6》設定完成後，單擊《確定》按鈕，然後同同第4,5步一樣為第1行的第1,2列也分別設定滑鼠經過影象。然後將滑鼠指標置於第一行第三列的單元格內，在《屬性》面板中，為《寬》設為100，《高》。設為50。為《背景顏色》設為#333cc。

　　《7》將滑鼠指標置於表格的第3行，按前面的方法，為第3行單元格也插入一幅圖片。然後將滑鼠指標置於表格的下一行，單擊《常用》工具欄表格圖示按鈕，為文件在插入一個3行3列的表格。

　　《8》將滑鼠指標置於插入表格的第1行第1列中，在屬性面板中將《寬》。設為120，然後將滑鼠指標置於第1行第1列單元格內，按下Ctrl+Alt+t組合鍵，開啟《表格》對話方塊。設定好後，單擊《確定》按鈕，給單元格插入巢狀表格。

　　《9》選中插入的巢狀表格在屬性面板中將《對齊》設定為劇中右對齊。然後將滑鼠指標置於巢狀表格第一行中，按照前面的方法，為其插入一幅圖片。同樣的，為其第2,3,4,5列也分別插入圖片。

　　《10》在屬性面板中，將第6列單元格的《高》設為50，再將滑鼠指標置於第7列，為其插入一幅圖片。單擊《狀態列》中的《tatle》標籤，選中第7步插入的3行3列的表格，在屬性面板中，為《背景顏色》設定為#009966。

　　《11》將滑鼠指標置於7步插入表格的第2行2列中，在屬性面板中，將《垂直》設定為頂端。開啟《表格》對話方塊，其中的設定如圖11所示。設定完後，單擊《確定》按鈕，為單元格插入巢狀。

　　《12》在上一步插入表格的屬性面板中，將對齊方式設為居中對齊，將滑鼠置於該表格的第2行，按下ctrl+alt+I組合鍵，在開啟的對話方塊中選擇一幅圖，單擊確定，為單元格插入圖片。在該單元格的屬性面板中，單擊居中對齊按鈕，將圖片居中。

　　《13》將游標置於下1列單元格，輸入文字。在網頁中右擊，在彈出的快捷鍵選單中執行《CSS樣式》的新建命令，彈出《新建CSS規則》對話方塊。按照設定後，單擊《確定》按鈕，彈出《X1的規則定義》對話方塊。

　　《14》在《X1規則定義》對話方塊中，將《文字》設為宋體，《大小》設為12畫素，，《樣式》設為正常，<行高>設為26畫素,其餘不變.單擊<確定>按鈕，在編輯視窗選中輸入的文字，右擊，在彈出的快捷選單中執行《CSS樣式》的x1命令，為文字應用css樣式。

　　《15》將滑鼠指標置於第7步插入的3行2列表格的下一行，然後按下ctrl+Alt+T組合鍵開啟《表格》對話方塊，設定完畢後，單擊《確定》按鈕，為網頁插入表格。

　　《16》選中上一步插入的表格，在屬性面板中，將《背景顏色》設為#99FF66。將滑鼠指標設置於第1行單元格內，在屬性面板中，將《水平》設為右對齊，然後為該單元格插入一幅圖片。

　　《17》將滑鼠指標置於定2行單元格內，在屬性面板中，將《格式》設為段落，《水平》設為右對齊，然後輸入師院資訊。在網頁中右擊，在彈出的快捷鍵選單中執行《css樣式》的《新建》命令彈出《新建css規則》對話方塊。

　　《18》《新建css規則》對話方塊的設定如圖18所示，設定好後，單擊《確定》按鈕。彈出《x2的規則定義》對話方塊，將《大小》設為19畫素，《樣式》設為正常，《行高》設為20畫素，《顏色》設為，其餘不變。設定完畢後，單擊確定按鈕。

　　《19》在編輯視窗選中輸入的文字，右擊在彈出的快捷選單中執行《css樣式》的《x2》命令，為文字應用css樣式。按下ctrl+s組合儲存檔案，按下F12鍵預覽在IE中。

　　什麼是表格

　　表格，是指按所需的內容專案畫成格子，分別填寫文字或數字的書面材料，便於統計檢視。是人們表達解釋事務性質所運用的資料傳達形式，在經濟領域或者統計活動中運用很是廣泛。

　　在Microsoft Office 中：

　　表格：表格由一行或多行單元格組成，用於顯示數字和其他項以便快速引用和分析。表格中的項被組織為行和列。

　　表格由行，列，單元格三個部分組成。

　　在現實生活中：

　　表格應用於各種軟體中,有表格應用軟體也有表格控制元件,典型的像Office word,excel, 表格是最常用的資料處理方式之一，主要用於輸入、輸出、顯示、處理和列印資料，可以製作各種複雜的表格文件，甚至能幫助使用者進行復雜的統計運算和圖表化展示等。表格控制元件還可常用於資料庫中資料的呈現和編輯、資料錄入介面設計、資料交換***如與Excel交換資料***、資料報表及分發等。比如Spread,ComponentOne的FlexGrid。而隨著網際網路時代的發展，現在還能在網上做表格，簡稱“網表”或“線上表格”。

　　表格的HTML基本語法

　　<table>...</table> - 定義表格

　　<tr> - 定義錶行

　　<th> - 定義表頭

　　<td> - 定義表元***表格的具體資料***

　　什麼是網頁

　　網頁是一個檔案，通常是HTML格式***副檔名為.html或.htm***。網頁通常用影象檔來提供圖畫。網頁通常要透過網頁瀏覽器來閱讀。根據W3C對於WEB PAGE的定義，網頁是一個資訊的集合，其內容包含一個或多個網路資源的資訊，同時預期使其成為單一個URI。進一步說，一個網頁其包含一個或多個嵌入於網頁中的網路資源使其成為單一個URI檔案***HTML***，而該URI並 不再嵌入於其他檔案之中。

　　網頁是構成網站的基本元素，是承載各種網站應用的平臺。通俗地說，您的網站就是由網頁組成的，如果您只有域名和虛擬主機而沒有製作任何網頁的話，您的客戶仍舊無法訪問您的網站。

　　網頁是一個檔案，他存放在世界某個角落的某一部計算機中，而這部計算機必須是與網際網路相連的。網頁經由網址***URL***來識別與存取，是全球資訊網中的一“頁”，是超文字標記語言格式***標準通用標記語言的一個應用，副檔名為.html或.htm***。網頁通常用影象檔來提供圖畫。網頁要透過網頁瀏覽器來閱讀。

　　靜態網頁

　　靜態網頁，其內容是預先確定的，並存儲在Web伺服器或者本地計算機/伺服器之上。

　　特點：

　　1，製作速度快，成本低

　　2，模板一旦確定下來，不容易修改，更新比較費時費事

　　3，常用於製作一些固定板式的頁面。

　　4，通常用於文字和影象組成，常用於子頁面的內容介紹。

　　動態網頁

　　動態網頁，是取決於由使用者提供的功能，並根據儲存在資料庫中的網站上的資料中建立的頁面。

　　儲存

　　當要將網頁存入自己的電腦內，網頁瀏覽器通常提供以下的選擇：

　　只儲存網頁的文字部分完裝封裝，即連同該網頁***HTML***所要用到的影象、Applet和JavaScript等檔案也一併封裝儲存只有HTML，不作任何改動;若果網頁內的連結是相對連結，可能會令圖片消失只有HTML，但將網頁內連結到的檔案改成絕對定義有些網頁瀏覽器容許在列印網頁前預覽，並可選擇印底色與否，甚至放大、縮小。