資源簡介

(共48張PPT)
第1單元 第4課
跨學科活動：向世界介紹我的學校
（清華大學版）七年級
下
1
核心素養目標
3
新知講解
5
拓展延伸
7
板書設計
2
新知導入
4
課堂練習
6
課堂總結
課后作業
8
01
核心素養目標
信息意識
計算思維
數字化學習與創新
信息社會責任
理解在制作網頁時應當確保信息準確的問題，遵守相關法規，認識到網頁制作技術對社會信息流通的影響。
熟練使用工具和信息制作宣傳網頁，應用于校園搜索網頁，創新性地結合校園的特點進行個性化介紹，提高形象效果。
運用算法構建網頁內容的邏輯架構，提升信息傳遞效率，能夠優化網頁信息呈現方式，保障網頁的宣傳效果。
能夠主動收集校園信息內容，了解宣傳網頁的制作流程，理解宣傳網頁應具備的信息，提高信息分類和整合的意識。
02
新知導入
02
新知導入
本課中你將體驗：
如何根據需求來設計網頁
如何根據設計來制作網頁
如何對網頁進行測試并優化發布
03
新知講解
科技文化藝術節是學校一項頗具特色的活動，每年都會邀請一大批校外人士參加。為了能讓更多人了解并積極參與，需要你組建一支團隊，運用語文、英語、美術等學科知識，來設計制作一份便于社交媒體轉發的、以“向世界介紹我的學校”為主題的宣傳網頁（見圖1.4.1）。
情景導入
圖1.4.1 宣傳網頁的設計與制作
03
新知講解
“向世界介紹我的學?！钡男麄鲗ο笾饕屑议L、
校友及其他校外嘉 賓等。宣傳的主要目的是想幫
助大家更好地了解學校的過去、現在與未來。 因
此，介紹的內容可以是學校歷史、教學環境、校園文化活動與未來發展規劃等。請根據你學校的具體情況，羅列網頁欄目，寫出與這些欄目對應的宣傳內容要求，以及需要呈現的文本、圖片、視頻、表格、超鏈接、表單、框架與內嵌程序等網頁基本元素，并將這些信息填入表1.4.1中。
需求分析
03
新知講解
表1.4.1 校園科技文化藝術節的網頁設計需求
網頁欄目 宣傳內容要求 呈現的網頁基本元素
學校概況 簡要清晰地呈現學校的創辦歷史、辦學宗旨、校園環境以及整體規模。 文本、圖片、表格
校園生活 生動展現豐富多樣的校園文化活動、社團組織以及校園生活設施，體現學校的活力與特色。 文本、圖片、視頻
教學管理 全面展示學校的教學體系，包括課程設置、教學成果、師資力量等，凸顯學校的教學實力。 文本、圖片、表格、超鏈接
德育工作 展示學校的德育理念、德育活動以及學生的品德培養成果。 文本、圖片、視頻
招生信息 詳細說明學校的招生政策、招生計劃以及招生流程，方便信息獲取。 文本、表格、表單、超鏈接
03
新知講解
為更好地完成這項任務，你的小組需要進行分工合作。小組成員的分工角色與合作職責，既可以照搬表1.4.2的范例，也可以根據實際情況另行設計。
分工合作
03
新知講解
表1.4.2 項目小組的分工合作表
姓名 角色 職責
姜明 組長 主持整個項目開展過程，協調處理各種情況以確保完成項 目任務。
王依 組織員 組織各成員共同開展需求分析、規劃實施與交流評價等具體活動。
謝家佳 記錄員 記錄并整理需求分析、規劃實施與交流評價等活動的相關信息。
張濤 檢察員 核查各項任務的完成情況，制作匯報PPT并負責對外展示交流。
03
新知講解
明確了網頁欄目、宣傳內容和網頁基本元素等設計需求之后，就可以開始設計、制作并發布宣傳網頁了。這個過程大致可分為收集處理素材、設計制作網頁與測試優化發布三個環節。
規劃實施
03
新知講解
1、收集處理材料
根據各個欄目的宣傳內容與基本元素的呈現要求，收集、處理素材并進行分類存放。素材的收集途徑主要有網絡搜索與自主開發兩種。素材的類型主要有文本、圖片、音頻與視頻等。原始素材通常需要進行處理才可以使用。文本素材需要進行文字與
語法的檢查，圖片素材通常需要裁剪、拼
接及調整大小與亮度等，音視頻素材則大
多需要進行剪輯。
03
新知講解
請你根據宣傳網頁的設計需求，收集、處理相關素材并進行分類存放。 另外還要運用中文和英文兩種語言來撰寫一篇有號召力的宣傳稿，用來吸引更多讀者幫忙轉發。
（一）素材收集
圖片素材
校園建筑、校園景觀、教學場景、校園活動 、師生風采。
2.視頻素材
學校宣傳片、 教學片段、校園活動視頻。
文字素材
學校概況 、教學成果、 師資力量、 校園文化、學生故事。
03
新知講解
《夢想起航的知識殿堂》
這里，是知識的寶庫，是莘莘學子追逐理想、綻放青春的地方。
擁有悠久的歷史和深厚的文化底蘊，多年來，秉持著為學生服務的教育宗旨，培養了一批又一批杰出人才，他們在各個領域發光發熱，為社會的發展貢獻力量。
走進校園，你會被那充滿藝術氣息的建筑和如詩如畫的風景所吸引。現代化的教學樓、藏書豐富的圖書館、設施完備的體育館，為師生們提供了優良的教學和學習環境。
親愛的朋友們，無論你來自何方，歡迎你加入我們這個溫暖的大家庭。讓我們一起攜手，向著未來，揚帆起航！
03
新知講解
The Hall of Knowledge Where Dreams Set Sail
Here is a treasure house of knowledge, a place where countless students chase their ideals and blossom their youth.
With a long history and deep cultural heritage, over the years, upholding the educational purpose of serving students, it has cultivated a batch after batch of outstanding talents, who shine in various fields and contribute to the development of society.
Walking into the campus, you will be attracted by the art-filled buildings and picturesque scenery. The modernized teaching building, the rich library and the well-equipped gymnasium provide an excellent teaching and learning environment for teachers and students.
Dear friends, no matter where you come from, you are welcome to join our warm family. Let's join hands together and set sail towards the future!
03
新知講解
閱讀
宣傳稿屬于呼吁號召類的公文，通常有明確的發文對象與發文身份，要全格式書寫，即“標題+稱謂+正文+落款”。其中標題要吸引人，正文則要介紹宣傳的內容、作用與意義，并在結尾鼓勵大家積極轉發。
03
新知講解
2、設計制作網頁
宣傳網頁的版面布局設計應與其結構和內容有關，如圖1.4.2所示。例如，如果設計的是適用于智能手機、平板電腦等移動終端瀏覽的“一張網頁”結構，那么導航欄與活動簡介通常放在版面的上方，其他欄目內容則依次放在下面，以便于用戶瀏覽。如果是為臺式計算機設計的“一張主頁+多張子頁”結構，則導航欄與活動簡介應置于主頁，其他欄目內容則分布在各個子頁中。
03
新知講解
“一張網頁”結構的版面布局
“一張主頁+多張子頁”結構的版面布局
主頁
子頁
03
新知講解
應該根據大多數瀏覽者習慣的終端設備，確定網頁的數量結構。另外， 還可以通過網絡了解更多的網頁版面設計知識，并將其應用到宣傳網頁的 設計中。請將設計結果繪制在下方空白處。
03
新知講解
配色方案也是網頁設計的一項重要內容?？茖W、合理的網頁配色，能讓讀者賞心悅目，并激發其深入閱讀的興趣?？梢愿鶕麄鞯闹黝}，選用適當的色彩，并運用互補色、相似色等色彩理論知識進行配色。
03
新知講解
閱讀
互補色是指色輪（見圖1.4.3）上相對的兩
個顏色。比如藍色和橙色、紅色和綠色、
黃色和紫色等。互補色具有非常強烈的對
比度，在顏色飽和度很高的情況下，可以呈現很強的視覺效果。
相似色是指在色輪上相鄰的三個顏色。運用相似色可以在同一個色調中，創造出視覺上的豐富質感和層次感。
03
新知講解
圖1.4.3 色輪
03
新知講解
在制作宣傳網頁時，要選擇適用的開發工具。可供選擇的開發工具，既有HTML之類的編程語言，也有美篇之類的可視化開發工具，甚至可以直接利用微博、公眾號等社交媒體進行編輯和發布。
03
新知講解
閱讀
H5網頁是指采用HTMI5前端技術設計的網頁。它既包含文本圖片、音頻、視頻與動畫等傳統網頁元素，也有表單、投票與分享等新功能，因此被稱為交互式多媒體廣告頁面，常用于智能手機上瀏覽的網頁。
03
新知講解
請根據小組成員的技術能力、實驗室條件以及網頁設計需求等情況選擇合適的網頁開發工具，并開始制作網頁。
03
新知講解
3、測試優化發布
網頁制作完成之后，還要經過測試與優化才能發布。測試就是通過預覽，或者讓網頁在不同瀏覽器或客戶端軟件中進行渲染，再逐項查驗網頁的基本元素是否達到排版、功能及人機互動等方面的設計效果，以防止出現各種錯誤。優化就是對網頁基本元素的內容進行審查，并對測試效果或出現的問題進行改進，以確保網頁質量。發布是將網頁上傳到網絡供他人瀏覽與傳播。發布方式通常取決于發布環境，最簡單的方式就是使用制作工具直接發布。
03
新知講解
請對你們小組制作的宣傳網頁進行測試、優化和發布，并將測試發現的問題和優化建議記錄在表1.4.3中。
03
新知講解
網頁基本元素 查驗結果 優化建議
文本 欄目中學校創辦時間表述有錯別字；招生信息欄目招生計劃數據為上一年度未更新 仔細校對所有文本，修正錯別字；及時更新招生等欄目過時信息
圖片 欄目中社團活動照片說明文字與實際不符 重新核對圖片說明文字
表格 無 無
超鏈接 超鏈接跳轉錯誤 檢查并修正所有錯誤超鏈接地址
表單 招生咨詢表單無法提交 對表單進行代碼優化
視頻 無 無
框架與內嵌程序 報名系統時間選擇框無法正常彈出 修復校園活動報名系統時間選擇框
表 1.4.3 測試情況與優化建議
03
新知講解
項目成果交流，分為成果整理與交流兩個環節。成果整理，就是整理設計需求分析表、素材收集與處理、網頁版面設計、網頁測試情況、網頁優化建議及正式發布網頁等成果，并制作匯報交流用的PPT。
項目成果評價，可基于表1.4.4的評價量規，對自己與他人的項目成果進行客觀的評價，并記錄評價結果。
交流評價
03
新知講解
項目成果 評價標準 評價方式
優 良 一般 自評 他評
設計需求分析表 欄目內容設計科學網頁元素運用合理 欄目內容設計較為科學，網頁元素運用基本合理 其他
素材收集與處理 按需收集，處理規范有分類存放 按需收集，處理基本規范，有分類存放 其他
宣傳撰寫 分中英文撰寫，行文流暢，格式規范 分中英文援寫，格式規范 其他
網頁版面設計 與網頁數量結構匹配，頁面布局合理 與網頁數量結構匹配頁面布局基本合理 其他
表1.4.4 項目成果評價量規
03
新知講解
配色方案設計 能使用色彩理論知識進行配色，且科學合理，效果顯著 能使用色彩理論知識進行配色，基本科學合理 其他
網頁測試情況 進行了逐項測試，記錄完整、詳細 進行了逐項測試，記錄完整，但不夠詳細 其他
網頁優化建議 有科學、全面的針對性優化建議 有針對性優化建議但不夠全面 其他
正式發布網頁 視覺效果好，用戶體驗感強 視覺效果一般或用戶體驗感一般 其他
（續表）
04
課堂練習
一、選擇題
1、 以下元素在制作網頁中沒有涉及的是 （ ）
A. 圖片 B. 超鏈接
C. 視頻 D. 3D建模
2、制作宣傳網頁時，正常的素材處理流程是（ ）
A.收集→分類→處理→使用 B.處理→收集→分類→使用
C.分類→收集→處理→使用 D.收集→處理→分類→使用
二、判斷題
1、 H5網頁是指采用HTMI5前端技術設計的網頁。 （ ）
2、宣傳稿要全格式書寫，即“標題+正文+落款”。 （ ）
D
A
√
×
04
課堂練習
三、操作題
用PPT或手繪方式設計一個包含 “學校概況 / 教學成果 / 校園文化 / 校園風光" 的水平導航欄。
05
拓展延伸
制作宣傳網頁的注意事項
1、明確目標與定位
明確制作網頁的目的，不同的目的決定了網頁內容和風格的
側重點，分析目標受眾的風格喜好，以便確定合適的內容、
語言風格和設計元素。
2、注重設計與布局
避免使用過多的顏色、字體和復雜的圖案，選擇簡潔明了的設計風格，在網頁中保持顏色方案、字體風格、圖標樣式等視覺元素的一致性，運用網格系統和分欄布局，將內容合理地劃分區域，使頁面結構清晰，便于用戶快速找到所需信息。

05
拓展延伸
制作宣傳網頁的注意事項
3、保證內容質量
確保宣傳內容真實、準確，避免出現錯別字、語法錯誤
和信息遺漏，重要信息放在突出位置，便于用戶快速獲
取關鍵信息。還應適當加入圖片、視頻、圖表等多媒體
元素，增強內容的吸引力和表現力。
4、優化技術性能
優化代碼、壓縮圖片和視頻等資源，減少頁面加載時間，在不同的設備和瀏覽器上進行測試，確保網頁顯示正常、功能完整，為用戶提供一致的瀏覽體驗。采取安全措施，防止數據泄露和惡意攻擊，保護用戶信息安全。
05
拓展延伸
網頁的分類及特點
動態網頁，是取決于由用戶提供的參數，并根據存儲在數據庫中的網站上的數據中創建的頁面。
特點：
1、具有交互性，動態網頁能夠實時響應用戶的操作和輸入，為用戶提供便捷的交互體驗。
2、內容動態更新，可以與數據庫進行交互，實時獲取和顯示最新的數據。
3、功能豐富多樣，可以實現各種復雜的功能和應用，如在線購物車、在線支付、會員系統、論壇社區、在線游戲等。為用戶提供更加全面和便捷的服務。
05
拓展延伸
網頁的分類及特點
靜態網頁，其內容是預先確定的，并存儲在Web服務器或者本地計算機/服務器之上。
特點：
1、制作速度快，成本低。
2、模板一旦確定下來，不容易修改，更新比較費時費事。
3、常用于制作一些固定版式的頁面。
4、通常用于文本和圖像組成，常用于子頁面的內容介紹。
5、對服務器性能要求較低，但對存儲壓力相對較大。
06
小結與評價
本單元你學習了：
網頁制作與渲染
流媒體的實現
HTTP的缺陷與 HTTPS的優勢
網頁設計與制作實踐
小結與評價
06
小結與評價
知識梳理
06
小結與評價
1、瀏覽器渲染網頁時，首先解析的是 ( )
A. HTML 標簽 B. CSS樣式
C. JavaSeript 腳本 D. 視頻
2、下列不屬于流媒體應用原理的是 ( )
A. 網頁渲染 B. 數據壓縮
C. 分段發送 D. 流式傳輸
3、HTTP存在 、 及 等缺陷。
4、W3C標準規定，網頁代碼主要由 、 和 三部分組成，它們分別使用 HTML、CSS、JS 等編程語言來創建。
A
A
無連接狀態
明文傳輸
不安全
結構
表現
行為
學習檢測
06
小結與評價
5、 你的宣傳網頁作品都采用了哪些版面布局形式？為什么？
1、左右框架型布局
采用該布局，是因為它簡潔直觀，用戶在左側點擊導航選項，右側能迅速切換展示相關內容，交互性強。對于校園宣傳網頁而言，左側導航可按照學校不同方面分類，如學術科研、學生活動、招生就業等，用戶能精準定位自己感興趣的內容，提升用戶獲取信息的效率。
2、封面型布局
選用這種布局，是因其視覺沖擊力強，能瞬間抓住瀏覽者眼球，引導用戶深入了解學校，同時保持頁面的簡潔美觀，突出學校的獨特魅力。
06
小結與評價
在本單元學習過程中，肯定少不了與他人進行互動交流、參與作品制作等活動?，F在請就此進行總結與反思，以便更好地促進自身成長。
1. 從同伴那里學到過什么？
2. 向同伴分享過哪些觀點？
3. 所運用的工具、方法是否得當？
4. 所開發作品是否值得推廣應用？
反思評價
06
小結與評價
從同伴那里學到過什么？
從設計思路來看，有的同伴擅長從用戶體驗角度出發，提出了獨特的導航欄設計方案；在素材收集方面，有同伴掌握高效的圖片搜索技巧。
2. 向同伴分享過哪些觀點？
強調不同布局形式需與學校宣傳重點相匹配，應注重文字與圖片、視頻的搭配比例。
3. 所運用的工具、方法是否得當？
選用專業網頁制作軟件 Adobe Dreamweaver，其強大的代碼編輯與可視化設計功能為我們提供了便利，能高效實現各種布局形式與交互效果，總體較為得當。
4. 所開發作品是否值得推廣應用？
作品本身來看，我們制作的校園宣傳網頁具有一定推廣應用價值。
07
課堂總結
1
引入新知內容
跨學科活動：向世界介紹我的學校
2
制作學校宣傳網頁
3
測試、優化并發布宣傳網頁
4
完成課堂練習
5
進行知識拓展
1
2
3
4
5
08
板書設計
跨學科活動：向世界介紹我的學校
1、進行新知引入
2、制作學校宣傳網頁
3、測試、優化并發布宣傳
4、完成課堂練習
5、進行知識拓展
課后作業。
1、小組之間相互展示制作的宣傳網頁，找一找有什么問題。
09
課后作業
小組之間相互展示制作的宣傳網頁，找一找有什么問題。
https://www.21cnjy.com/recruitment/home/fine

展開更多......

收起↑