資源簡介

第2節 制作網站——應用框架布局網頁
【教學目標】
知識與技能目標
（1）了解框架結構網頁的概念及作用，以及它與表格布局網頁的區別。
（2）掌握框架結構網頁的建立、框架結構的拆分、刪除等操作方法。
（3）能夠區分框架結構屬性設置與頁面屬性設置的不同點。
（4）掌握框架中頁面設置及保存的方法。
（5）通過框架結構網頁設計，對網頁的整體結構有更進一步的認識。
過程與方法
通過類似功能的表格網頁的賞析，理解框架結構網頁的特點及優勢，并通過創建“人與動物”框架結構網頁任務，在四個小任務中逐步帶領學生學會框架結構網頁的制作及保存，最后再通過兩個探究問題，引導學生做進一步的比較和思考，形成結論。
情感態度與價值觀
（1）通過以“人與動物”為主題的框架結構網頁制作活動，了解更多有關人與動物和諧相處的知識，增強學生關注動物的興趣和意識。
（2）能夠將表格與框架結構網頁結合使用，在創作中體驗樂趣。
【教學重點】
框架網頁的作用和功能，框架建立與屬性設置。
框架中各個頁面之間的關聯，每個框中頁面的設置方法。
框架網頁的保存方法。
【教學難點】
（1）框架結構網頁中框架屬性與頁面屬性的設置方法。
（2）理解框架結構的多網頁存儲方法及各網頁的設置方法。
【教學方法】
比較法、任務驅動法、講演法、分組協作法。
【課時安排】
1課時
【教學過程】
教學環節 教師活動 學生活動 設計意圖
一、導入 展示一組表格制作的網頁 （上方和左側內容相同，僅右下部分內容有變化） 提問：該如何簡化制作這樣的網頁呢？ （復制粘貼） ——引入主題：框架結構網頁 （相同的區域我們只需要制作一遍） 欣賞 思考 釋疑 師生賞析，引出主題。
二、新授 （一）框架網頁概念 1、打開“d:\dongwu”站點，展示“人與動物”頁面，明確本課操作內容，引導學生理解框架網頁的概念。 框架結構網頁的特點：能夠將瀏覽器頁面分割成若干個區域，各個區域既相互獨立，又保持一定聯系，且部分區域內容相對固定。 （二）創建與設置框架結構網頁 【任務1：】在“d:\dongwu”站點中新建一個“上方固定，左側嵌套”結構的框架網頁，并設置框架相關屬性（如：顯示框架邊框，寬度設為1，顏色設為紅色等） （課本P70-71實踐學習） 提示：框架集屬性面板的切換及設置（單擊框架集任一邊框即可切換）。如圖所示： 相關鏈接： 框架的拆分與合并 https://zhidao./question/1494196567615170739.html 過渡語： 記錄框架結構需要一個獨立的網頁文件，框架結構中的每個框也都是獨立的網頁文件。（如：一所學校與每個班級之間的關系）因此，當框架確定之后，需要為每個框分別制作網頁，完成后保存各網頁文件。(注意) （三）新建各框中的初始頁面 【任務2：】在“上方固定，左側嵌套”樣式的框架網頁中，一般將3個框分別命名為top、left和main，這里請將各子框架分別保存為“top.html”、“left.html”、“main.html”，框架整體保存為“kuangjia.html”。 （演示視頻） (
方法：
子框架頁的保存
：
文件——
>
保存框架
)提示： 1、保存top框架頁面 2、保存left框架頁面 3、保存main框架頁面 保存框架整體 方法：整體框架頁的保存：文件——>保存全部（“kuangjia.html”） （四）制作各個網頁頁面 【任務3：】制作“人與動物”框架網頁中每個頁面內容。 制作top框架頁面 在Top區域單擊，定位插入點。 單擊“屬性窗口”中的“頁面屬性”按鈕，設置“背景圖片”為“logo.jpg”。 將指針移動到框架分割線，拖動調節框架區域的大小至合適位置。 單擊“文件”菜單中的“保存框架頁”命令，覆蓋保存。 制作left框架頁面 在Left區域單擊，定位插入點。 使用表格布局，插入一個7行1列的表格，并設置表格“邊框粗細”為“0”。 從上至下，單元格內依次插入圖片nav-1、nav-2……nav-7。 拖動框架分割線，調節左側框架區域的大小至合適位置。 單擊“文件”菜單中的“保存框架頁”命令，覆蓋保存。 制作main框架頁面 在Main區域單擊，定位插入點。 對照圖示，粘貼相關文本，并在合適的位置插入相關圖片。 考慮框架整體效果，設置頁面屬性，如設置合適的網頁背景顏色等。 單擊“文件”菜單中的“保存框架頁”命令，覆蓋保存。 ★覆蓋保存框架整體 單擊“文件”菜單中的“保存全部”命令，覆蓋保存整個框架網頁。 過渡：預覽網頁，發現框架大小和邊框有問題，需要調整修改。 （五）預覽再設置 【任務4：】預覽完成的框架網頁，查看整體效果，根據實際情況適當調整框架的大小、設置框架的邊框等。 相關鏈接： 如何設置框架集及其屬性 https://jingyan./article/93f9803fe3a2ede0e46f55f3.html 觀察、理解 了解 生參考樣圖和課本步驟，自行操作完成，個別學生演示。 關于框架集的屬性設置，生在老師的講演提示下完成操作，框架的拆分與合并操作，學生自行課后學習。 學生參看提示和演示視頻進行保存操作，搞清楚各框架頁間的關系，然后參照樣圖，根據步驟或演示視頻完成各框架網頁制作，組內互助，共性問題視學生實際學習情況，師生有選擇性地輪換講演。 學生根據提示自行探究，個別展示交流。 相關鏈接內容自行學習。 明確本節課任務，讓學生對框架結構網頁有一個初步的認識。 關于框架集的屬性設置及拆分合并問題，課本中并未提到，但是實際操作過程中會有涉及，這里老師無需面面俱到，只提醒學生有這樣的操作內容和方法，但具體是否應用，要視實際需要。 這部分會耗時較長，但一定要給學生充足的時間，因為這部分既是對前面知識的一個鞏固運用，也是對框架結構網頁的一個實踐認知。 時間有限，可以分3組，制作不同的框架頁內容，但是需要提醒學生不要忘記最后的“覆蓋保存”。 學生完成后，可以選擇個別提交，然后由老師講演合并，讓學生通過此過程中進一步理解框架整體頁與各子框架頁之間的關系。同時，這樣的學習和操作過程，實質也是對第三部分探究第一題的先行認知。 這部分是框架網頁的完善，實際操作仍然秉持按需操作的原則，而非越多操作設置越好。
三、探究 （1）若Main框架頁面設置的初始網頁有誤，該如何修改？ （2）如果使用表格來設計類似框架結構的網頁，它與框架結構網頁的區別在哪？ 學有余力的學生自行思考探究，得出結論并分享。 這部分兩個問題其實在以上導入和新授部分已經初步涉及，這里老師只需要提點，讓學生自己去好好體會思考即可。
四、小結 今天，我們應用框架布局了“人與動物”網頁，相信同學們定是收獲滿滿，本節課的最后時間，請大家踴躍發言，大膽分享吧！ 學生分享，梳理知識，總結經驗。 及時歸納總結。
教學后記

展開更多......

收起↑