第四單元 建立網站 第12課 藍圖架構師-網站規劃設計（初中信息科技七年級）

第四單元建立網站第12課藍圖架構師——網站規劃設計（初中信息科技七年級）

一、教學背景與設計立意

（一）課程定位與大單元語境【非常重要】

本課隸屬于義務教育信息科技課程標準（2022年版）第三學段“互聯網應用與創新”模塊，是七年級大單元項目“模光織史·碼動千年——校園數字文博云展廳”中的第2課時。在上一課時中，學生已完成對萬維網服務本質、HTTP協議基礎及HTML基本骨架的感知，破除了對代碼編程的神秘感；本課時則需完成從“瀏覽者”向“建構者”認知轉型的關鍵一躍——在動手輸入第一行代碼之前，先行完成對數字化作品的整體架構設計。本課并非孤立的技術步驟教學，而是以大概念“系統與工程”為錨點，將“規劃設計”確立為工程思維的核心實踐環節，使學生理解：任何可靠的數字系統都源于嚴謹的設計藍圖，代碼僅是設計的物化表達。

（二）學科核心概念與大概念錨點

1.【核心大概念】系統與工程、信息系統的構成、數字化創新與表達。

2.【學科本質透視】網站規劃設計課的本質不是教授“填寫規劃表的技能”，而是培育學生在不確定情境中進行問題界定、要素分析、結構優化與創新表達的系統工程思維。規劃行為映射了從“用戶需求”到“功能規格”再到“結構藍圖”的映射與轉換過程。

（三）真實情境與項目驅動

本課承接單元總項目：為學校“百廿校慶·學科探秘”大型主題活動搭建云上數字展廳。各小組化身為“數字策展與建造聯合事務所”，承接真實任務——為物理學科“水火箭的飛天密碼”、生物學科“扎染與植物色素”、歷史學科“文物里的中國”等特色社團設計并搭建主題展區網站。本課核心挑戰為：“在不寫一行代碼的前提下，如何讓客戶（師生/虛擬甲方）相信你們的網站值得被建造？”通過此具有挑戰性的真實問題，將規劃從“作業”升維為“專業提案”。

二、學習目標與表現期望

（一）【基礎】信息意識與概念建構

1.通過類比建筑設計與施工的關系，能用自己的語言復述“網站規劃設計”在網站建設全生命周期中的前置性與決定性價值。

2.能夠列舉至少3個因規劃設計缺陷導致用戶體驗失敗的數字產品案例（如導航迷失、內容龐雜、風格混亂），初步建立“以用戶為中心設計”的意識。

（二）【重要】計算思維與工程方法

1.掌握網站規劃的四維要素模型（目的與用戶、內容與功能、結構與導航、風格與體驗），并能運用該模型對一個給定的主題網站進行反向拆解與分析。

2.學會使用思維導圖工具（XMind/手繪）或站點地圖對網站的信息架構進行可視化建模，形成具有層級邏輯的樹狀結構圖。

3.經歷“需求分析—功能定義—內容歸并—鏈接關系設計”的完整推演過程，初步具備將抽象問題轉化為結構化方案的建模能力。

（三）【核心】【高頻考點】【難點】數字化學習與創新

1.能夠結合本小組選定的學科主題，運用“設計沖刺”方法，在40分鐘內完成一份包含項目定位、受眾畫像、欄目架構、首頁布局線框草圖、交互亮點在內的《網站規劃提案書》（數字化或紙質）。

2.在規劃中有意識地融入中華優秀傳統文化元素（如非遺扎染配色、水墨風格界面）或社會責任議題（如數字版權聲明、無障礙瀏覽設計），體現技術溫度與文化自信。

（四）【熱點】信息社會責任與工程倫理

1.在規劃階段即前置思考網站內容的知識產權合規性，明確素材來源的自創與引用邊界，學會在規劃書中標注“擬引用素材授權狀態”。

2.探討數字空間的可訪問性設計，思考色盲用戶、老年人等群體如何順暢瀏覽網頁，規劃中主動避免純色差傳導關鍵信息。

三、教學重難點與靶向突破策略

（一）【重點】網站信息架構的可視化建模

學生需從發散性的創意碎片中凝練出具有邏輯層次的欄目體系。突破策略：引入“卡片分類法”——將各組頭腦風暴出的20~30個內容關鍵詞寫在便利貼上，小組通過協作將卡片進行歸并、分層、命名，物理化地呈現“父級欄目—子頁面—同位頁面”的關系，再將物理分類結果遷移至思維導圖軟件中固化。

（二）【難點】從“內容堆砌”到“交互設計”的思維躍升

學生極易將規劃理解為“我要放什么內容”，而忽視“用戶如何獲取這些內容”以及“內容之間如何發生聯系”。突破策略：創設“用戶迷失情境”——展示一個僅有海量內容卻無清晰導航的網站，引導學生模擬用戶尋找特定信息的挫敗感，從而自主建構出“鏈接邏輯”與“導航策略”同樣是規劃設計不可分割的組成部分。引入“三點擊原則”，強化信息獲取效率意識。

（三）【易錯點】規劃與制作的脫節

學生常認為規劃是“給老師看的作業”，制作時仍隨意修改。全程嵌入一致性審查：在后續課時啟動制作前，必須進行“規劃—原型比對會”，強化藍圖對施工的約束力與迭代更新的規范性。

四、教學準備與學習環境建構

（一）數字化平臺與工具

1.國家中小學智慧教育平臺：教師提前建立班級群組，上傳本節課范例文檔、微課視頻及數字化學案。

2.協作白板：選用億圖圖示（EdrawMax）或ProcessOn在線思維導圖工具，支持多人在線同步協作繪制站點地圖。

3.AI輔助工具【創新應用】：提供結構化“提示詞模板”，學生可調用生成式AI輔助生成網站欄目建議、受眾分析報告，作為思維拓展的“副駕駛”而非替代思考-2。

（二）實體資源與教具

1.行業案例包：選取“故宮博物院青少版網站”“NASA太陽系探索互動站”“嗶哩嗶哩非遺區”等優秀青少年網站截圖及站點地圖解構。

2.物理教具：大型磁性白板、彩色便利貼、馬克筆、A3尺寸“規劃藍圖草稿紙”（預印有網站LOGO位、導航區、內容區、版權區的占位框）。

3.腳手架工具：《網站規劃設計自查量表》《用戶角色模型畫像模板》《同類型網站競品分析簡表》。

五、教學實施過程（全景展開）

（一）【定向與喚醒】工程隱喻：萬丈高樓從何起？（7分鐘）

1.錨點情境創設

上課伊始，教師不直接提出“網站規劃”，而是在大屏幕上展示一張享譽世界的建筑作品——悉尼歌劇院。畫面切分為兩欄：左欄是壯麗的實景照片，右欄是丹麥建筑師約恩·烏松最初的手繪草稿，線條甚至有些潦草。教師以敘述性口吻發問：“這座耗時16年、成本超支1400%的奇跡，究竟是從哪一秒開始真正‘存在’的？是從第一塊混凝土澆筑時，還是從筆尖觸碰草圖紙的那一刻？”【非常重要】

學生在短暫沉思后傾向后者。教師順勢揭示本課核心隱喻：代碼即施工，規劃即設計。沒有藍圖，工地永遠是散落的鋼筋水泥；沒有規劃設計，服務器里只是一堆無關的文本標簽。

2.失敗博物館·數字館

教師呈現兩個“反面典型”微型案例（均為脫敏處理的往屆學生作品）：

案例A：名為“我愛動物”的網站，首頁堆砌了37張高清圖片，沒有標題、沒有欄目分類、鏈接全部失效，用戶打開后完全不知從何點起。

案例B：名為“宇宙探秘”的網站，首頁布局華麗，但點擊“火星”欄目跳轉出的卻是“寵物狗”的收養信息。

學生以“用戶體驗顧問”身份進行30秒快速診斷。學生自然生成關鍵概念：做網站必須提前想清楚給誰看、放什么、怎么放、如何跳。教師將這些零散的回答提煉，以概念詞云形式呈現在屏幕側邊，引出本節課的核心挑戰：成為網站建設的“藍圖架構師”。

（二）【解構與建模】專家思維：規劃的四維羅盤（13分鐘）【基礎】【高頻考點】

1.案例拆解——以“鄱陽湖里探白鶴”為標本

教師引導學生打開本地服務器中的范例站點“鄱陽湖里探白鶴”-6。這不是簡單的瀏覽，而是逆向工程。學生被賦予四色便簽紙，分別對應四個分析維度：

紅色（目的）：建站者為什么要做這個站？希望訪客離開時帶走什么認知？

藍色（內容）：站里包含了哪些具體的信息塊？文字、圖片、數據？

綠色（結構）：頁面如何被組織？點擊幾次能從首頁找到白鶴遷徙的具體原因？

黃色（風格）：整個站給你什么視覺情緒？寧靜？震撼？嚴肅？

小組將四色便簽貼至磁性白板對應區域，形成可視化的思維拼圖。教師在各組匯報中提煉出高度結構化的“網站規劃四維羅盤”模型：【非常重要】

[1]定位層：建站目的+核心受眾（為誰解決什么問題）。

[2]內容層：信息要素+功能模塊（提供什么資源與服務）。

[3]架構層：欄目劃分+鏈接關系+頁面層級（信息如何被組織）。

[4]表現層：視覺基調+色彩意象+版式風格（以何種情感呈現）。

2.專家工具引入——站點地圖的可視化語法

教師指出：僅有四維羅盤還不夠，工程師需要精確的圖紙語言。此刻引入站點地圖這一專業工具。對比展示：文本形式的欄目列表（枯燥、難理解）與圖形化的樹狀站點地圖（直觀、揭示關系）。學生瞬間感知到圖形化建模的力量。

教師以“鄱陽湖里探白鶴”為例，在思維導圖工具中現場演示繪制過程：根節點（首頁）—一級欄目（白鶴檔案、三進鄱陽湖、水文氣候、保護行動）—二級頁面（例如“水文氣候”下掛“水溫年際變化”“降雨量與棲息地”）—同級頁面關系（兄弟節點）—跨頁面鏈接示意（虛線表示）。此步驟需慢放，邊繪邊講，將頭腦中的抽象邏輯外化為可視節點。【難點突破】

（三）【遷移與模擬】協同建模：為“非遺扎染”設計信息骨架（15分鐘）【重要】

1.情境接駁——從分析者轉向設計師

屏幕切換至本班生物社團提供的真實素材包：“巧手扎錦繡，靛藍染春秋”——扎染工藝數字化展陳需求。包括：扎染歷史口述稿、植物染料（板藍根）種植照片、扎結技法示意圖（捆扎、縫絞）、學生自己動手染制的圍巾作品圖、靛藍染色化學原理小視頻。大量碎片化信息撲面而來，形成認知壓力——這正是規劃設計需要解決的痛點。

2.卡片分類——讓結構從混沌中涌現

各小組領到一袋信息卡片（約25張），每張卡片寫有一條具體素材描述。任務指令：【請為這些信息建立秩序】。

學生通過協作將卡片進行物理分組：有的組按“時間線”（古代—現代）、有的組按“工藝流程”（備料—扎結—浸染—氧化—成品）、有的組按“學科融合”（藝術圖案、化學原理、勞動實踐）。教師在巡視中不評判對錯，而是引導學生思考：哪一種分類方式對目標訪客（初中生、家長、來訪嘉賓）更友好？如果我希望重點展示學生創造力，應該把“學生作品集”放在一級導航還是三級頁面？

各組將分類結果用雙面膠固定在大白紙上，并用箭頭繪制從首頁到末梢頁面的“點擊路徑”。此時，部分組別已經無意識地繪制出了具有層級結構的站點地圖雛形。

3.工具遷移——從物理到數字

學生登錄ProcessOn在線協作平臺，領取教師提前的《扎染展廳·空白畫布》。小組將物理白板上的卡片分類結果轉化為數字化的節點和連線。平臺支持多人同時拖動、編輯，對話氣泡里充滿了協商：“這個不應該放在二級，這是整個展廳的核心價值觀，應該在首頁就有入口！”——規劃設計課在此刻已不僅是技術課，而是思維品質與協作技能的淬煉場。【核心素養落地】

教師通過教師端廣播展示某一小組的實時建模過程，進行“過程性示范”而不是“結果性展示”，重點講解：如何為頁面節點命名（動詞短語還是名詞短語）、如何控制樹形結構的寬度與深度、如何在復雜的層級中保持導航的一致性。

（四）【攻堅與創造】設計沖刺：小組項目《校園文博云展廳》規劃提案（35分鐘）【重中之重】【熱點】【難點】

此環節為全課高潮與主體，占據近一半課堂時間，采用高度濃縮的“設計沖刺”模式，模擬真實設計事務所的限時競標。

1.角色分工與身份賦予（2分鐘）

每組抽取“客戶委托卡”：物理組“飛天密碼——水火箭的百年追問”、歷史組“方寸之間——館藏漢代銅鏡”、地理組“巖石會說話——校園地質標本”。組內產生4個專業角色，佩戴工牌：

【非常重要】

[1]策展人：負責確定網站立意、受眾定位、情感基調。

[2]信息架構師：負責人卡片分類、站點地圖繪制、導航邏輯。

[3]交互體驗官：負責規劃用戶點擊路徑、鏈接策略、特殊交互動效設想。

[4]創意美工：負責色彩風格聯想、LOGO意象構思、首頁版式線框草繪。

角色非固定，每5分鐘可進行輪換或支援，但需確保人人有核心貢獻。

2.第一輪沖刺：競品調研與定位（8分鐘）

各小組利用教師提供的資源包（內含同類主題的博物館網站截圖、優秀學生作品鏈接）。使用SWOT簡表分析：現有網站哪里做得好？哪里存在空白？我們組的網站相比它們的獨特價值主張是什么？

【重要】此時教師介入提供AI提示詞腳手架：若小組定位思路受阻，可向AI助手提問，但必須使用標準指令模板，例如：“我是一名初中生，正在策劃一個關于[水火箭歷史]的主題網站，目標訪客是參加校園開放日的小學生，請推薦3個具有吸引力的網站欄目名稱。”-2這一方面提升效率，更重要的是將模糊的創意沖動轉化為精確的語言指令，本身即是一種思維訓練。

3.第二輪沖刺：架構藍圖與站點地圖（12分鐘）【核心產出】

各組在協作白板上全力構建站點地圖。此階段課堂聲音分貝達到峰值，這是深度投入的標志。教師巡視，捕捉關鍵問題作為生成性資源：

典型困境A：內容貪多求全，架構層級深達5層（首頁—歷史—人物—傳承人—第三代弟子—一件作品）。教師介入，講述“三點擊原則”：用戶通常希望3次點擊內抵達任何內容頁面。小組砍掉冗余層級，合并同類項。

典型困境B：僅羅列“關于我們”“作品展示”等通用欄目，缺乏主題特色。教師引導回歸定位層：“我們的獨特性到底是什么？”物理組重新將“水火箭”欄目升華為“問天——從宋代火箭到流體力學”，既有文化厚度又具學科本質。【難點突破】

4.第三輪沖刺：首頁線框原型與高光亮點（10分鐘）

信息架構穩定后，轉向表現層規劃。并非要求高保真UI圖，而是用A3草稿紙繪制線框圖：頁面從上到下分幾塊？導航欄是橫向還是側欄？首屏需不需要一個打動人的大標題/主視覺？哪些區域放置最能體現小組特色的內容？

此時，創意表達百花齊放：歷史組將導航設計成“銅鏡”造型，點擊鏡面不同區域進入不同年代；扎染組規劃了“靛藍漸變”的色彩主題；更有小組主動在頁面底部預留“版權聲明”和“圖像引用來源”模塊——這是信息社會責任從設計源頭就植根的體現。

（五）【發布與校準】提案路演與同行評議（10分鐘）

1.電梯演講·60秒

每組選派“策展人”或“架構師”，攜帶規劃藍圖紙質稿或平板截圖，起立面向全班進行60秒提案。話語框架為：【我們的網站要讓（誰）在（什么情境下）完成（什么任務），因此我們設計了（核心欄目）與（獨特導航），并讓用戶感受到（情感關鍵詞）。】

此環節不僅是展示，更是將隱性思維顯性化、結構化表達的強制訓練。臺下學生依據《規劃提案評價量規》進行診斷，重點記錄“一個最欣賞的創新點”和“一個可能存在的迷失風險”。

2.同行反饋·靜默修改

采用“畫廊漫步”形式：各組將規劃成果固定在教室四周白板，學生持便簽貼流動觀摩，在他人作品旁寫下建設性意見（“導航欄如果能增加一個全站地圖索引會更友好”“配色建議考慮色盲用戶的可識別性”）。每組領回自己的規劃書后，用紅筆進行最后一輪“微迭代”，將外部反饋轉化為內部優化指令。

（六）【整合與升華】工程倫理與認知閉環（5分鐘）

1.前置的倫理：可訪問性與包容性設計

教師在總結階段并未重復技術要點，而是展示兩張圖片：全色畫面與灰度畫面；正常字號與放大150%后的排版錯亂。提問：“我們規劃的網站，是否把一部分人擋在了門外？”學生陷入沉思。教師引導：真正的卓越設計，是讓盡可能多的人平等獲取信息。這是2022版課標“信息社會責任”在規劃設計課中最具溫情的落點-2。學生回到小組規劃書，用一句話在封面標注本組“包容性設計承諾”，如“本網站確保僅通過顏色不傳達關鍵信息”“本網站支持字號自由縮放”。

2.認知閉環：從藍圖到施工的儀式感

教師總結：今天你們沒有寫一行代碼，卻完成了一個網站80%的智力工作量。下節課，當你們打開HTML編輯器時，請記住——優秀的代碼忠實于優秀的規劃，隨意的修改是對藍圖的背叛。但規劃不是枷鎖，迭代是工程常態，只是每一次迭代都必須是集體智慧的再協商，而非個人的即興沖動。

課代表將各組的《規劃提案書》電子版加密歸檔，命名為“藍圖V1.0”。下節課啟動制作前，必須進行“規劃—原型”一致性審查，通過審查的小組方可獲得“施工許可證”。這一儀式化設計，將規劃設計從“軟任務”轉化為“硬約束”。

六、學業評價設計——量規嵌入全程

（一）過程性評價（權重60%）【非常重要】

1.信息分類能力（15%）：卡片分類的邏輯一致性、層級歸并的合理性。

2.架構建模能力（25%）：站點地圖的完整性（覆蓋核心內容）、深度控制（3層以內）、節點命名清晰度、跨頁面鏈接邏輯預設。

3.協作貢獻度（10%）：角色履職情況、討論中提供建設性觀點的頻次（教師課堂觀察與小組互評結合）。

4.創新意識（