小編以前也不會框架網頁的，但是前段時間小編需要考試。遇到了有關框架網頁的問題，也就去學習了。接下來小編就用接下來的實例來教大家如何制作框架網頁。希望能夠幫助到妳們。
我們今天就以下面的例題來學習壹下。
請建立壹個目錄框架網頁，並按照要求將此文件保存名為page2.html。
要求:在目錄框架網頁建立壹個4行1列的表格（高300像素、寬100像素），表格居中，邊框為黃色、背景為綠色；表格中的文字為華文楷體、14磅、加粗、黑色；單元格內容水平方向居右對齊，垂直方向相對底邊對齊；在主框架網頁中新建網頁並插入素材包內的圖片8139.jpg；設置"美食介紹"與素材包內sc7.htm文件的鏈接，設置"相關新聞"與網站.cn鏈接，設置"相關圖片"與素材包內bg7.jpg文件的鏈接，設置"網絡高手"與郵箱someone@microsoft.com鏈接
第壹步：新建網頁
首先我們打開軟件，選擇菜單欄下“修改”——“框架集”——“拆分為左右框架”。進行三個網頁的保存。
1.整個框架網頁。
選中框架最中間的豎線，當我們看到代碼欄中有“<framesetcols="597,598">”代表我們選取成功。
2.框架網頁的左側
選中左側空白區域即可
3.是框架網頁的右側。
選中右側空白區域即可
如圖：
第二步：制作左邊的框架網頁
首先插入表格並設置基本屬性
1.選擇主菜單下的“插入”——“表格”如圖。
2.接著設置表格的屬性
（4行1列的表格“高300像素、寬100像素”，表格邊框為黃色、背景為綠色。）其中的高，邊框顏色都是使用代碼輸入的。如圖：
3.至於背景和居中我們可以到屬性面板的頁面布局進行設計就可以了。如圖：
第三步：設置css樣式
1.首先打開css面板，選擇該面板的下面的“+”號，出現下圖所示的效果。
2.設置樣式。選擇“id”類型，取名為“stlye1”,保存了“僅存為該文檔”。如圖：
3.設置樣式屬性。“華文楷體、14磅、加粗、黑色”。如圖：
第四步：使用css樣式
1.在表格中書寫相應的文字。如圖：
2.使用樣式。選中所有的文字，然後來到屬性面板。選擇“類”——“stlye1”,我們就設置好css樣式了。如圖：
第五步：設置文字的位置。
選中文字，來到屬性面板，設置“水平”，“垂直”的屬性。如圖：
第六步：設置文字鏈接。
選中“美食介紹”，來到屬性面板，選擇“鏈接”，將我們要鏈接的地址輸入進去就可以了。接下來依次選中其他文字就可以了。效果如下：
（註意：我們先前選中的網頁文件，圖片文件是可以直接填寫的。而網址我們要在前面加上“http://”,郵箱地址要加上"mailto:"）
第七步：設置右側網頁
選中右側網頁，選擇“插入”——“圖片”，選擇我們想要插入的圖片我們就完成了。如圖：
此時我們就可以打開htm文件，在瀏覽器中瀏覽效果了，如圖：