一、實驗目的
1、掌握框架集和框架的建立和儲存；
2、掌握框架、框架集的編輯和屬性的設定；
3、掌握框架超級鏈結。
二、實驗內容
利用框架製作如下圖所示的頁面效果，框架集網頁為index.html，
其中：圖2-9-1為開啟index.html的效果圖；
圖2-9-2 單擊左側「動物類」的網頁效果圖；
圖2-9-3 單擊左側「插花類」的網頁效果圖；
圖2-9-4 單擊左側「海洋類」的網頁效果圖；
圖2-9-5 單擊左側「郵票類」的網頁效果圖；
圖2-9-6 單擊左側「詩歌」的網頁效果圖，其中詩歌內容在「si.txt」文件中；
圖2-9-7 單擊左側「散文」的網頁效果圖，其中散文內容在「愛情人生.doc」文件中。
圖2-9-1圖2-9-2
圖2-9-3圖2-9-4
圖2-9-5圖2-9-6
圖2-9-7
三、知識點分解
該實驗主要涉及的知識點就是框架和框架集的儲存以及設定超連結的目標框架。
四、實驗步驟
1、選擇[檔案]/[新建]選單命令。
2、在「新建文件」對話方塊「類別」列表中選擇「框架集」選項。
3、從「框架集」列表選擇相應的框架集，如圖2-9-8所示。
圖2-9-8 「新建文件」對話方塊
4、單擊按鈕，則會彈出「框架標籤輔助功能屬性」對話方塊，為每一框架指定乙個標題，單擊「確定」按鈕，則上方框架標題為「topframe」，左側框架標題為「leftframe」，右側框架標題為「mainframe」。
5、選擇[檢視]/[視覺化助理]/[框架邊框]選單命令，則在文件中就會出現框架的邊框。
6、選擇[檔案]/[儲存全部]選單命令，將框架集檔案儲存為index.html，上方框架檔案儲存為top.html，左側框架檔案儲存為left.
html，右側框架檔案儲存為main.html。
注意：對於框架集和框架檔案儲存的檔名，一定要做的看到檔名就能知道該檔案對應與該框架集中的哪個框架。
7、選擇[視窗]/[框架] 選單命令，開啟「框架」面板，直接在面板中單擊最外面的框架集，開啟屬性對話方塊，設定「行值」：119px，再選擇裡面巢狀的框架集，設定「列值」：25**x。
8、開啟top.html，將「插入」欄中的「常用」選項卡改為「布局」選項卡，此時就出現「布局」工具欄，切換到「布局」模式，單擊「布局**」按鈕，繪製乙個寬：350px高：
88px，「居中對齊」的**，再在該**內繪製乙個同樣大小的單元格，並將該單元格背景影象設為「top_bak.gif」，水平「居中對齊」，垂直「居中」，再在該單元格內寫上文字「我的收藏」，並將該文字設為：字型「隸書」，大小「16px」，顏色「#993300」。
注意：可以不需要開啟相對應的框架檔案，直接在index.html文件中對框架檔案進行編輯。
9、接著上面**的下方再繪製乙個**，並將其寬設為「自動伸展」，高：8，背景影象設為「line1.gif」。
10、按【ctrl+s】儲存該網頁。
11、開啟left.html，將「插入」欄中的「常用」選項卡改為「布局」選項卡，此時就出現「布局」工具欄，切換到「布局」模式，單擊「布局**」按鈕，繪製乙個寬：162px，高：
40px，背景顏色「#ffcccc」，「右對齊」的**。
12、再在該**中布乙個同樣大小的單元格，單擊「在下面插入行」按鈕，連續插7行，將游標定位到每個單元格，分別輸入文字：**收藏，動物類，插花類，海洋類，郵票類，文章收藏，詩歌，散文，並將「**收藏」和「文章收藏」設為「黑體」，「左對齊」，其餘文字都設為「居中對齊」。
13、按【ctrl+s】儲存該網頁。
14、開啟main.html，將「插入」欄中的「常用」選項卡改為「布局」選項卡，此時就出現「布局」工具欄，切換到「布局」模式，單擊「布局**」按鈕，繪製乙個寬：500px，高：
355px，背景影象「back.gif」的**。
15、單擊「布局單元格」按鈕，從**的左下角開始繪製乙個寬：112px，高：268px的單元格，輸入文字「收藏精美的**，淒美、憂鬱、壯麗的文章是我最大的愛好，它們能帶給我無窮的樂趣，無限的遐想。
」並將文字設為：字型「楷體」，大小「14px」，顏色「#cc6633」。
16、切換到「標準」模式，單擊「繪製層」按鈕，繪製乙個層，選中**，將**拖到該層內，選中層，開啟屬性面板，設定：左「84px」，上「29px」。
17、按【ctrl+s】儲存該網頁。
18、新建乙個文件，將「插入」欄中的「常用」選項卡改為「布局」選項卡，此時就出現「布局」工具欄，單擊「繪製層」按鈕，繪製乙個層，開啟屬性面板，設定：左「84px」，上「29px」。
19、將游標定位到層內，單擊「**」按鈕，插入乙個2行4列，寬：500px，高：271px，間距：
5，對齊：居中對齊，邊框：1，邊框顏色：
#996600，背景影象：right_bak.jpg的**。
20、合併第1行的單元格，設定該行高：8**x，邊框：#ff99cc，輸入文字「動物類：」，字型為「黑體」。
21、在第2行的4個單元格內分別插入影象「animal1.jpg」，「animal4.jpg」，「animal3.
jpg」，「animal2.jpg」，設定影象:寬「100」，高「150」，「居中對齊」，設定該行的邊框顏色：
#ff99cc。
22、按【ctrl+s】將該網頁儲存為dongwu.html。
23、重複步驟18-22，製作chahua.html，haiyang.html，youpiao.html；並將其中的影象替換掉即可。
24、新建乙個文件，將si.txt的內容複製，貼上到該文件中，選中所有文字，設為「居中對齊」，選中標題「獻給我的同代人」，設定顏色「#990000」。
25、按【ctrl+s】將該網頁儲存為sige.html。
26、新建乙個文件，將「愛情人生.doc」匯入到該文件中，選中所有的文字，設定「左對齊」，將游標定位到標題「愛情人生」，敲「回車鍵」，選中該文字，設定顏色「#ff0000 」，「居中對齊」。
27、按【ctrl+s】將該網頁儲存為sanwen.html。
28、回到index.html，選中文字「動物類」，開啟屬性面板，設定鏈結：dongwu.html，目標：mainframe。
29、同理分別選中文字「插花類」，「海洋類」，「郵票類」，開啟屬性面板，分別設定鏈結：chahua.html，haiyang.
html，youpiao.html，目標都為：mainframe。
30、選中文字「詩歌」，開啟屬性面板，設定鏈結：sige.html，目標：leftframe或_self。
31、選中文字「散文」，開啟屬性面板，設定鏈結：sanwen.html，目標： _black。
32、按【ctrl+s】儲存該網頁。
33、回到index.html，按【f12】預覽。
五、思考題
建立完框架集後，選擇「檔案|儲存全部」，有的同學沒有按要求將框架頁儲存為top.html、left.html、main.
html，而是儲存為預設的檔案，當他發現沒按要求儲存時又把相應的檔案重新命名為top.html、left.html、main.
html，但是預覽框架集檔案index.html時，發現框架頁顯示「該頁無法顯示」，問題出在哪？怎麼修改？
網頁製作 插入和設定框架
作業1 插入和設定框架 操作步驟 1.建立乙個 上方固定，右側巢狀 的框架頁。2.將滑鼠定於頂部框架內，選擇 檔案 在框架中開啟 開啟文擋 然後依次在左側和右側的框架內開啟文件 和 3.在框架面板中單擊第1層框架集邊框選擇整個框架集，然後選擇選單命令 檔案 儲存框架頁 將整個框架頁儲存為 4.在 屬...
製作互動功能的網頁 表單網頁的製作
教學課題 製作互動功能的網頁 表單網頁的製作 教學背景 在此之前，學生已經對製作網頁的基本方法有了清楚地認識，並基本完成了自己的站點，此內容是網頁製作部分的進一步提公升，讓學生對網頁製作進行更加深入的 和製作，通過學習製作具有互動功能的網頁，進一步感受網頁製作的樂趣，激發更大的創造熱情，培養學習興趣...
網頁設計與製作實驗十一
網頁設計與製作實驗十一 vbscript指令碼語言介紹 第2部分 周四下午1 2 3小節，地點31 403 1課時 一 複習之前的內容 iis配置 dw中動態站點設定 vbscript常量 變數 陣列 運算子 函式 二 介紹vbscript指令碼語言 vbscript過程 條件語句 迴圈語句 三 s...