資源簡介

中小學教育資源及組卷應用平臺
信息技術《設計制作網頁》教學設計
課題 《設計制作網頁》 單元 一單元 學科 信息技術 年級 八年級
教材分析 《設計制作網頁》這一課旨在讓學生增進對網頁設計制作的學習和掌握，學會對頁面整體的設計和規劃。教材編排了“學習任務-任務分析-操作指南-任務小結-知識鏈接-練習與思考”的系列學習活動，引導學生學會制作網頁，掌握制作網頁的步驟和方法。促進對網站構建的學習和使用，這些學習對于初中學生來說是非常有必要的，不僅可以增加學生知識，同時也能增強學生對信息的感受力、注意力，以及對信息價值的判斷力和洞察力，提高學生信息素養。教材編排合理，貼近學生生活實際，符合七年級學生認知特點。
學習目標 1.信息意識：提高對信息的敏感度和對信息價值的判斷力；2.計算思維：能夠對問題進行分解、用計算的方法形成解決方案；3.數字化學習與創新：有效利用學習資源，開展探究性學習，創造性解決問題；4.信息社會責任：規范使用網絡技術解決問題，形成良好道德準則。
重點 掌握網頁制作的步驟和方法
難點 加入自己的創新，優化網頁的制作
教學過程
教學環節 教師活動 學生活動 設計意圖
導入新課 導入：師：上節課，我們學習了網站的創建，這節課我們一起來學習一下網頁的制作，首先一起來認識一下front Page軟件的各個分區和功能。 學生先回顧上節課的學習內容 由此引出今天的學習內容
講授新課 簡單來說，網頁設計就是對頁面中的各種構成要素進行合理布局，使其既能有條理地呈現圖文及展示圖文關系,又能在形式上有美感，讓觀者能夠賞心悅目地閱讀，提升網站的吸引力。學習任務依據規劃的頁面內容特點，為網站各主要頁面進行網頁布局設計，要求：在保持網站整體風格一致的基礎上，各頁面能夠依據內容需要進行合理布局，有效提升頁面的表達力和感染力。任務分析為網站設計整體風格，確定各主要頁面的布局特點，需注意以下幾個問題:（1）體現以用戶為中心。根據本組確定的網站用戶的特點（年齡、知識結構等），分析用戶可能的喜好。網站風格和網頁布局應充分尊重用戶的喜好，不能單純表現設計者個人的喜好。（2)與網站主題相協調。網站的風格要切合網站的具體主題，并與各主要欄目相協調。例如，以介紹河北紅色之旅為主題的頁面與介紹現代景點為主題的頁面，以介紹自然風光為主題的頁面與介紹人文景觀為主題的頁面，在風格上應有所區別。（3）站內風格基本一致。確定了網站的整體風格和布局特點后，網站內的各個欄目的風格可以略有變化，但在色彩、整體風格和頁面布局等方面要保持基本一致，避免一個網站中出現多種風格。（4）頁面協調，便于閱讀。頁面不同部分之間均衡協調，既不“過滿”(一頁中信息太多），也不“過空”(一頁中信息太少)；既不“過擠”(不同部分相互重疊），也不“過散”(不同部分相隔過遠）。突出重點信息，便于閱讀。（5）為了確保圖文混排的網頁不因屏幕分辨率的改變而破壞頁面布局效果，在網頁制作時可以利用表格來控制圖、文位置，實現網頁的準確布局。操作指南1.設計頁面布局（1）頁面布局特點研究。觀察下表中的網頁頁面布局，了解網站主頁、欄目首頁和底層頁面布局的共同點和區別，總結頁面布局特點（整體風格、主要顏色和搭配、主要內容布局方式、頁面的主要目的等）填寫在表格內。拓展延伸布局的作用：網頁版面的設計延續了傳統紙媒的特點，但又比傳統的紙媒更靈活，傳統的紙媒由于紙張大小的限制，只能在有限的空間內排列內容，而網頁版面的布局，可以根據內容自適應寬度和高度。網頁布局是網頁制作的基礎，通常使用的方式有三種：流式布局，即元素按照標準文檔流進行排列；浮動布局和絕對定位布局。而在各大網站中，常見的布局結構分為：一列布局，兩列布局，三列布局和混合布局，其中使用最多的是混合布局，即按照網站的實際需求使用多列進行布局。（2）網頁中的基本要素。從上面的分析中可以看出：①網頁中包含的基本信息。每個網頁上一般都應該包含網站的名稱和站標（網頁左上部)、導航欄（網頁上部）和版權信息(網頁下部居中)等基本信息，而且位置都相對固定。②網頁主要信息的布局方法。除了網站基本信息和導航欄外，網頁中的主要內容大多采用“縱橫分割式”的方式布局。如上表中的網頁頁面主要內容采用的就是兩列分割式的布局方式。（3）規劃主要頁面的布局方式。參照上表中的網站主頁布局示意圖，畫出自己小組的網站主頁布局示意圖。本組網站主頁布局示意圖：2.繪制表格實現頁面布局網頁中通常使用表格來定位文字或圖片，從而實現頁面的布局設計。在繪制表格的過程中，可以放心大膽地操作，因為表格和單元格可以根據需要隨時調整。(以示例網站的主頁布局為例)（1）打開網站。①在FrontPage中執行“文件”→“打開網站”命令，打開已建立好的網站。②雙擊“文件夾列表”面板中名為“index.htm的主頁文件，打開主頁。(2）通過表格進行頁面布局。①執行“表格”→“插入”→“表格”命令，打開“插入表格”對話框。②在“插入表格”對話框中，依據布局需要進行設置(示例為6行2列)，如圖所示。③設置完成后，單擊“確定”按鈕插入規則的表格。如圖所示。④合并單元格(以“大美河北”主頁為側)。第1步：選擇第1行的兩個單元格。第2步：執行“表格”，“合并單元格”命令，如圖所示。第3步：運用合并單元格的方法，參照示例完成其他處單元格的合并，并調整單元格的大小，完成頁面布局，如圖所示。⑤為了調整方便，表格中還可以嵌套表格。如圖所示，在頁導航欄位置處嵌套1行5列的表格。⑥保存文件。執行“文件”→“保存”命令，保存主頁文件。(3）其他布局方式的頁面布局。參考操作示范，根據本組確定的方案設計欄目主頁和其他頁面布局。在設計網站其他頁面時，可以將設計好的頁面布局作為模板使用。任務小結在制作網頁之前，規劃頁面布局非常重要。在FrontPage的網頁模板或向導中沒有現成的布局，在一個空白網頁中插入的圖片、文字很難排列整齊，所以表格是很好的輔助定位的工具。在網頁中插入表格時，根據需要設置合適的行數、列數，通過合并和拆分單元格調整布局，大小。合理安排文字、圖片、表格等網友元，并根據網頁元素的大小調整單元格的大小。知識鏈接1.單元格襯距和單元格間距 單元格襯距是指文本和單元格邊框的距離。單元格間距是指表格中各單元格間的距離。它們都以像素為單位。軟件默認的單元格襯距、單元格間距分別是1像素和2像素。 要改變它們的值，可以右鍵單擊表格的任意單元格，選擇“表格屬性”命令，在“表格屬性”對話框的“布局”選項區域中，修改“單元格襯距”和“單元格間距”的數值。2.拆分單元格可以通過“拆分單元格”命令，將選定的單元格拆分為若干列或若干行。具體方法:選定要拆分的單元格，單擊右鍵，選擇快捷菜單中的“拆分單元格”命令，在“拆分單元格”對話框中，如果選擇“拆分成列”選項，則可在“列數”框中設置要拆分的列數；如果選擇“拆分成行”選項，則“列數”變為“行數”，可以在“行數”框中設置要拆分的行數。3.合并單元格通過合并兩個或兩個以上的相鄰單元格來得到一個較大的單元格的操作叫做合并單元格。這樣的操作只在選中兩個或多個相鄰單元格，并且已選的單元格形成矩形時才有效。具體方法：選擇1組相鄰的單元格，右鍵單擊所選的區域，然后選擇快捷菜單中的“合并單元格”命令即可；也可以在選擇好單元格后，通過執行“表格”，“合并單元格”命令將單元格合并。若要顯示“表格”工具欄，可執行“視圖”“工具欄”→“表格”命令。拓展延伸當發現表格缺少時，也可以在需要補充表格的地方“右擊”打開選擇快捷菜單，如何選擇插入，菜單會顯示表格插入的方向，然后選擇自己要補充的表格即可。同樣的，當發現表格多出來時，可以“右擊”表格，在彈出的快捷菜單上點擊“刪除”，即可刪除多余的表格。最后我們一起觀看視頻學習一下，怎么使用Front Page制作網頁的創建以及表格的制作。練習與思考（1）在FrontPage中利用表格進行頁面布局，與在Word中利用表格進行頁面布局有什么異同 （2）新建一個名為“練習”的網站，如圖所示進行頁面布局。Front Page與Word的表格制作，在刪除，插入以及拆分單元格都是相似的，但是在合并單元格中卻有所不同。Word只需要選中要合并的單元格然后右擊選中選項即可。（3）要想在瀏覽的狀態中看不到表格線，該如何處理 （4）從瀏覽者角度出發，在用表格設計頁面布局時要考慮哪些方面 可以嘗試下載門戶網站首頁，用FrontPage打開，查看頁面布局形式。要著重考慮統一性，統一是指網站的整體色彩風格最好保持一致，具有統一的性質。視覺對象的各個組成部分，如顏色、形狀、尺寸等，保持統一，因此這些部分之間的關系似乎比其他部分更緊密，從而向訪問者展示一個獨特的視覺整體，加深對訪問者的印象。閱讀材料“布局表格和單元格”是FrontPage 2003的新增功能，可以靈活地進行頁面布局。使用“布局表格和單元格”功能布局頁面時，需要通過兩步來完成。首先通過“布局表格”功能來為頁面布局創建一個框架，然后通過“布局單元格”功能為該框架填充包含網頁內容(包括文本、圖像、Web部件和其他元素)的區域，也就是單元格。執行“表格”→“布局表格和單元格”命令，打開該面板。選擇“繪制布局表格”按鈕，拖動鼠標繪制表格；選擇“繪制布局單元格”按鈕 ，在表格范圍內，拖動鼠標繪制單元格。如圖所示。這樣能比較靈活地調整表格和單元格的大小和位置，為編輯網頁元素提供方便。作業布置請同學們設計一個網頁布草圖，并以“山茶之美”為主題制作一個網頁，下節課在課上與同學們一起分享你的制作方法。 學生初步了解本節課的學習內容學生注意制作網頁的一些注意事項學生了解網頁布局的重要性學生了解網頁中的基本要素學生動手實踐，掌握制作網頁的具體方法和步驟學生掌握“任務小結”的學習內容，都是本節課的重點學習內容學生掌握“知識鏈接”的學習內容，對比學習制作網頁的一些操作學生通過學習后，完成課堂練習最后學生完成閱讀材料的學習學生完成課后作業 由此引出接下來的教學環節為了后續更好的制作網頁拓展延伸學生知識，增加學生知識技能增加學生知識技能提高學生動手實踐能力的同時增加學生知識增加學生知識技能，再一次鞏固本節課的重點學習內容增加學生知識技能鞏固本節課的學習內容拓展延伸學生更深入的知識點鞏固本節課的學習知識
課堂練習 請同學們嘗試在網頁里加入背景音樂，讓網頁整體更有意境。加深瀏覽者的感受和印象。 學生完成課堂練習 鞏固所學知識
課堂小結 學習使用Front Page制作網頁表格；學習規劃頁面布局，將文字、圖案以及標題等編排好；能夠區分學習Front Page與Word制作表格的異同。 學生總結概括本節課的學習內容 總結概括本節課的學習內容
板書 網頁表格制作制作表格的各種操作網頁知識學習
21世紀教育網 www.21cnjy.com 精品試卷·第 2 頁 （共 2 頁）
HYPERLINK "http://www.21cnjy.com/" 21世紀教育網(www.21cnjy.com)(共42張PPT)
《設計制作網頁》
河北大學版 初中版第二冊
內容總覽
學習目標
01
學習任務
02
任務分析
03
操作指南
04
任務小結
05
知識鏈接
06
目錄
07
08
課堂練習
課堂總結
09
10
板書設計
課后作業
教學目標
1.信息意識：提高對信息的敏感度和對信息價值的判斷力；
2.計算思維：能夠對問題進行分解、用計算的方法形成解決方案；
3.數字化學習與創新：有效利用學習資源，開展探究性學習，創造性解決問題；
4.信息社會責任：規范使用網絡技術解決問題，形成良好道德準則。
新知導入
上節課，我們學習了網站的創建，這節課我們一起來學習一下網頁的制作，首先一起來認識一下front Page軟件的各個分區和功能。
新知講解
簡單來說，網頁設計就是對頁面中的各種構成要素進行合理布局，使其既能有條理地呈現圖文及展示圖文關系,又能在形式上有美感，讓觀者能夠賞心悅目地閱讀，提升網站的吸引力。
新知講解
學習任務
依據規劃的頁面內容特點，為網站各主要頁面進行網頁布局設計，要求：在保持網站整體風格一致的基礎上，各頁面能夠依據內容需要進行合理布局，有效提升頁面的表達力和感染力。
新知講解
任務分析
為網站設計整體風格，確定各主要頁面的布局特點，需注意以下幾個問題:
（1）體現以用戶為中心。
根據本組確定的網站用戶的特點（年齡、知識結構等），分析用戶可能的喜好。網站風格和網頁布局應充分尊重用戶的喜好，不能單純表現設計者個人的喜好。
（2)與網站主題相協調。
網站的風格要切合網站的具體主題，并與各主要欄目相協調。例如，以介紹河北紅色之旅為主題的頁面與介紹現代景點為主題的頁面，以介紹自然風光為主題的頁面與介紹人文景觀為主題的頁面，在風格上應有所區別。
新知講解
（3）站內風格基本一致。
確定了網站的整體風格和布局特點后，網站內的各個欄目的風格可以略有變化，但在色彩、整體風格和頁面布局等方面要保持基本一致，避免一個網站中出現多種風格。
新知講解
（4）頁面協調，便于閱讀。
頁面不同部分之間均衡協調，既不“過滿”(一頁中信息太多），也不“過空”(一頁中信息太少)；既不“過擠”(不同部分相互重疊），也不“過散”(不同部分相隔過遠）。突出重點信息，便于閱讀。
（5）為了確保圖文混排的網頁不因屏幕分辨率的改變而破壞頁面布局效果，在網頁制作時可以利用表格來控制圖、文位置，實現網頁的準確布局。
新知講解
操作指南
1.設計頁面布局
（1）頁面布局特點研究。
觀察下表中的網頁頁面布局，了解網站主頁、欄目首頁和底層頁面布局的共同點和區別，總結頁面布局特點（整體風格、主要顏色和搭配、主要內容布局方式、頁面的主要目的等）填寫在表格內。
新知講解
拓展延伸
布局的作用：
網頁版面的設計延續了傳統紙媒的特點，但又比傳統的紙媒更靈活，傳統的紙媒由于紙張大小的限制，只能在有限的空間內排列內容，而網頁版面的布局，可以根據內容自適應寬度和高度。
新知講解
網頁布局是網頁制作的基礎，通常使用的方式有三種：流式布局，即元素按照標準文檔流進行排列；浮動布局和絕對定位布局。而在各大網站中，常見的布局結構分為：一列布局，兩列布局，三列布局和混合布局，其中使用最多的是混合布局，即按照網站的實際需求使用多列進行布局。
拓展延伸
新知講解
（2）網頁中的基本要素。
從上面的分析中可以看出：
①網頁中包含的基本信息。每個網頁上一般都應該包含網站的名稱和站標（網頁左上部)、導航欄（網頁上部）和版權信息(網頁下部居中)等基本信息，而且位置都相對固定。②網頁主要信息的布局方法。除了網站基本信息和導航欄外，網頁中的主要內容大多采用“縱橫分割式”的方式布局。如上表中的網頁頁面主要內容采用的就是兩列分割式的布局方式。
新知講解
（3）規劃主要頁面的布局方式。參照上表中的網站主頁布局示意圖，畫出自己小組的網站主頁布局示意圖。
事例網站主頁
新知講解
本組網站主頁布局示意圖：
新知講解
2.繪制表格實現頁面布局
網頁中通常使用表格來定位文字或圖片，從而實現頁面的布局設計。在繪制表格的過程中，可以放心大膽地操作，因為表格和單元格可以根據需要隨時調整。(以示例網站的主頁布局為例)
（1）打開網站。
①在FrontPage中執行“文件”→“打開網站”命令，打開已建立好的網站。
②雙擊“文件夾列表”面板中名為“index.htm的主頁文件，打開主頁。
新知講解
(2）通過表格進行頁面布局。
①執行“表格”→“插入”→“表格”命令，打開“插入表格”對話框。
②在“插入表格”對話框中，依據布局需要進行設置(示例為6行2列)，如圖所示。
新知講解
③設置完成后，單擊“確定”按鈕插入規則的表格。如圖所示。
新知講解
④合并單元格(以“大美河北”主頁為側)。
第1步：選擇第1行的兩個單元格。
第2步：執行“表格”，“合并單元格”命令，如圖所示。
合并之后的效果
新知講解
第3步：運用合并單元格的方法，參照示例完成其他處單元格的合并，并調整單元格的大小，完成頁面布局，如圖所示。
可以通過拖動邊線來調整單元格的大小
新知講解
⑤為了調整方便，表格中還可以嵌套表格。如圖所示，在頁導航欄位置處嵌套1行5列的表格。
在單元格中插入表格
新知講解
⑥保存文件。執行“文件”→“保存”命令，保存主頁文件。
(3）其他布局方式的頁面布局。
參考操作示范，根據本組確定的方案設計欄目主頁和其他頁面布局。在設計網站其他頁面時，可以將設計好的頁面布局作為模板使用。
新知講解
任務小結
在制作網頁之前，規劃頁面布局非常重要。在FrontPage的網頁模板或向導中沒有現成的布局，在一個空白網頁中插入的圖片、文字很難排列整齊，所以表格是很好的輔助定位的工具。在網頁中插入表格時，根據需要設置合適的行數、列數，通過合并和拆分單元格調整布局，大小。合理安排文字、圖片、表格等網友元，并根據網頁元素的大小調整單元格的大小。
新知講解
知識鏈接
1.單元格襯距和單元格間距
單元格襯距是指文本和單元格邊框的距離。單元格間距是指表格中各單元格間的距離。它們都以像素為單位。軟件默認的單元格襯距、單元格間距分別是1像素和2像素。
新知講解
要改變它們的值，可以右鍵單擊表格的任意單元格，選擇“表格屬性”命令，在“表格屬性”對話框的“布局”選項區域中，修改“單元格襯距”和“單元格間距”的數值。
新知講解
2.拆分單元格
可以通過“拆分單元格”命令，將選定的單元格拆分為若干列或若干行。
具體方法:選定要拆分的單元格，單擊右鍵，選擇快捷菜單中的“拆分單元格”命令，在“拆分單元格”對話框中，如果選擇“拆分成列”選項，則可在“列數”框中設置要拆分的列數；如果選擇“拆分成行”選項，則“列數”變為“行數”，可以在“行數”框中設置要拆分的行數。
新知講解
3.合并單元格
通過合并兩個或兩個以上的相鄰單元格來得到一個較大的單元格的操作叫做合并單元格。這樣的操作只在選中兩個或多個相鄰單元格，并且已選的單元格形成矩形時才有效。
具體方法：選擇1組相鄰的單元格，右鍵單擊所選的區域，然后選擇快捷菜單中的“合并單元格”命令即可；也可以在選擇好單元格后，通過執行“表格”，“合并單元格”命令將單元格合并。若要顯示“表格”工具欄，可執行“視圖”“工具欄”→“表格”命令。
新知講解
拓展延伸
當發現表格缺少時，也可以在需要補充表格的地方“右擊”打開選擇快捷菜單，如何選擇插入，菜單會顯示表格插入的方向，然后選擇自己要補充的表格即可。同樣的，當發現表格多出來時，可以“右擊”表格，在彈出的快捷菜單上點擊“刪除”，即可刪除多余的表格。
新知講解
最后我們一起觀看視頻學習一下，怎么使用Front Page制作網頁的創建以及表格的制作。
新知講解
練習與思考
（1）在FrontPage中利用表格進行頁面布局，與在Word中利用表格進行頁面布局有什么異同
（2）新建一個名為“練習”的網站，如圖所示進行頁面布局。
新知講解
Front Page與Word的表格制作，在刪除，插入以及拆分單元格都是相似的，但是在合并單元格中卻有所不同。Word只需要選中要合并的單元格然后右擊選中選項即可。
新知講解
（3）要想在瀏覽的狀態中看不到表格線，該如何處理
表格邊框的粗細設置為0。
新知講解
（4）從瀏覽者角度出發，在用表格設計頁面布局時要考慮哪些方面 可以嘗試下載門戶網站首頁，用FrontPage打開，查看頁面布局形式。
新知講解
要著重考慮統一性，統一是指網站的整體色彩風格最好保持一致，具有統一的性質。視覺對象的各個組成部分，如顏色、形狀、尺寸等，保持統一，因此這些部分之間的關系似乎比其他部分更緊密，從而向訪問者展示一個獨特的視覺整體，加深對訪問者的印象。
新知講解
閱讀材料
“布局表格和單元格”是FrontPage 2003的新增功能，可以靈活地進行頁面布局。使用“布局表格和單元格”功能布局頁面時，需要通過兩步來完成。首先通過“布局表格”功能來為頁面布局創建一個框架，然后通過“布局單元格”功能為該框架填充包含網頁內容(包括文本、圖像、Web部件和其他元素)的區域，也就是單元格。
新知講解
執行“表格”→“布局表格和單元格”命令，打開該面板。
選擇“繪制布局表格”按鈕 ，拖動鼠標繪制表格；選擇“繪制布局單元格”按鈕 ，在表格范圍內，拖動鼠標繪制單元格。如圖所示。這樣能比較靈活地調整表格和單元格的大小和位置，為編輯網頁元素提供方便。
課堂練習
請同學們嘗試在網頁里加入背景音樂，讓網頁整體更有意境。加深瀏覽者的感受和印象。
課堂總結
1.學習使用Front Page制作網頁表格；
2.學習規劃頁面布局，將文字、圖案以及標題等編排好；
3.能夠區分學習Front Page與Word制作表格的異同。
板書設計
網頁表格制作
制作表格的各種操作
網頁知識學習
作業布置
請同學們設計一個網頁布草圖，并以“山茶之美”為主題制作一個網頁，下節課在課上與同學們一起分享你的制作方法。
謝謝
21世紀教育網（www.21cnjy.com)
中小學教育資源網站
兼職招聘：
https://www.21cnjy.com/recruitment/home/admin

展開更多......

收起↑