《網(wǎng)頁設計與制作案例教程（第2版） 》教案 第1課 網(wǎng)頁設計與制作基礎（一）

第課網(wǎng)頁設計與制作基礎第課網(wǎng)頁設計與制作基礎（一）1（一）網(wǎng)頁設計與制作基礎第課（一）網(wǎng)頁設計與制作基礎第課1PAGE6PAGE6PAGE7PAGE7《網(wǎng)頁設計與制作案例教程》

教案課時分配表章序課程內容課時備注1網(wǎng)頁設計與制作基礎42創(chuàng)新與創(chuàng)新素養(yǎng)培養(yǎng)43創(chuàng)新發(fā)明與創(chuàng)新成果保護44創(chuàng)業(yè)機會與創(chuàng)業(yè)風險45創(chuàng)業(yè)者與創(chuàng)業(yè)團隊46創(chuàng)業(yè)資源與融資47創(chuàng)業(yè)計劃48新創(chuàng)企業(yè)管理4合計32文旌課堂APP

課題網(wǎng)頁設計與制作基礎(一)課時4課時（180min）教學目標知識技能目標：（1）了解網(wǎng)頁，網(wǎng)站和主頁的概念（2）了解網(wǎng)頁類型、構成、版式和配色的相關知識思政育人目標：（1）養(yǎng)成做事有計劃、有條理的工作習慣（2）有意識地培養(yǎng)自己的審美能力，并運用到工作中教學重難點教學重點：網(wǎng)頁設計的基礎知識教學難點：能夠分析總結網(wǎng)站的特點教學方法情景模擬法、問答法、討論法教學用具電腦、投影儀、多媒體課件、教材教學設計第1節(jié)課：傳授新知（23min）第2節(jié)課：問題導入（5min）

實踐探究（25min）

小組合作（5min）

課堂小結（3min）

作業(yè)布置（2min）教學過程主要教學內容及步驟設計意圖第一節(jié)課課前任務【教師】布置課前任務，和學生負責人取得聯(lián)系，讓其提醒同學通過文旌課堂APP，查閱資料，了解網(wǎng)頁設計相關知識【學生】按照教師要求完成課前任務通過課前的預熱，讓學生了解所學課程的大概內容，激發(fā)學生的學習欲望考勤

（2min）【教師】使用文旌課堂APP進行簽到【學生】按照老師要求簽到培養(yǎng)學生的組織紀律性，掌握學生的出勤情況新課預熱

（8min）【教師】教師自我介紹，并介紹課程定位、內容安排、考核要求等網(wǎng)頁就是我們上網(wǎng)時在瀏覽器中打開的一個個畫面。網(wǎng)站則是一組相關網(wǎng)頁的集合。一個小型網(wǎng)站可能只包含幾個網(wǎng)頁，而一個大型網(wǎng)站則可能包含成千上萬個網(wǎng)頁。例如，新浪網(wǎng)就包含新聞、財經(jīng)、科技、體育、娛樂等多個版塊，而每個版塊又包含很多網(wǎng)頁?！緦W生】聆聽、互動、思考【教師】導入課題，板書在網(wǎng)絡中，網(wǎng)頁是傳遞資源與信息的載體，也是網(wǎng)站的組成部分。本任務將簡單介紹網(wǎng)頁和網(wǎng)站的基本概念、網(wǎng)頁類型、網(wǎng)頁的構成及網(wǎng)頁設計的基礎知識。試問：日常生活中常用的網(wǎng)頁有哪些，你知道網(wǎng)頁是如何制作出來的嗎？【學生】觀看、聆聽、思考通過導入環(huán)節(jié)，與學生互相熟悉，并讓學生了解這門課的大致內容和考核要求問題導入（5min）【教師】提出問題：你在日常生活中常用的網(wǎng)頁有哪些，你知道網(wǎng)頁是如何制作出來的嗎？【學生】聆聽、思考、舉手回答通過問題導入，引導學生思考，調動學生的主觀能動性傳授新知

（23min）【教師】通過學生的發(fā)煙引入新課題，介紹網(wǎng)頁、網(wǎng)站和主頁的概念，以及網(wǎng)頁的類型、構成、版式和配色一、網(wǎng)頁，網(wǎng)站和主頁網(wǎng)頁就是我們上網(wǎng)時在瀏覽器中打開的一個個畫面。網(wǎng)站則是一組相關網(wǎng)頁的集合。一個小型網(wǎng)站可能只包含幾個網(wǎng)頁，而一個大型網(wǎng)站則可能包含成千上萬個網(wǎng)頁?！ㄔ斠娊滩模窘處煛看蜷_12306主頁，并提問：請同學們觀看網(wǎng)頁，說一說12306官網(wǎng)網(wǎng)頁是由哪些元素組成的？【學生】觀看、聆聽、思考、舉手回答【教師】總結學生的回答二、網(wǎng)頁類型從實現(xiàn)原理和功能上區(qū)分，網(wǎng)頁分為靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁兩種類型。1．靜態(tài)網(wǎng)頁使用純HTML編寫的網(wǎng)頁為靜態(tài)網(wǎng)頁，擴展名為“.htm”或“.html”。靜態(tài)網(wǎng)頁并不是指網(wǎng)頁靜止不動，許多靜態(tài)網(wǎng)頁也會有視頻、動畫等動態(tài)效果。靜態(tài)網(wǎng)頁具有以下基本特點。（1）每一個靜態(tài)網(wǎng)頁都是一個獨立的文件，內容相對穩(wěn)定，容易被搜索引擎檢索。（2）靜態(tài)網(wǎng)頁沒有數(shù)據(jù)庫支持，網(wǎng)頁制作與維護更加耗時。（3）靜態(tài)網(wǎng)頁交互性相對較差，功能受限。2．動態(tài)網(wǎng)頁動態(tài)網(wǎng)頁與靜態(tài)網(wǎng)頁相對應，指使用HTML加ASP、PHP、JSP或ASP.NET等編寫的網(wǎng)頁。動態(tài)網(wǎng)頁可以通過程序訪問數(shù)據(jù)庫，擁有交互功能，也稱為交互式網(wǎng)頁。動態(tài)網(wǎng)頁可以獨立存在于服務器上，也可以由程序根據(jù)用戶請求自動生成。動態(tài)網(wǎng)頁具有以下基本特點。（1）動態(tài)網(wǎng)頁與數(shù)據(jù)庫相連接，數(shù)據(jù)內容可以在后臺更新，網(wǎng)站維護的工作量相對較低。（2）動態(tài)網(wǎng)頁能夠實現(xiàn)用戶注冊、用戶登錄、信息管理等功能，并根據(jù)用戶需求動態(tài)響應。（3）動態(tài)網(wǎng)頁內容并不固定，在做搜索引擎檢索設計時需要進行一定的技術處理。三、網(wǎng)頁構成【教師】展示網(wǎng)頁的案例，幫助學習理解1．網(wǎng)頁的基本元素從瀏覽者的角度出發(fā)，網(wǎng)頁中主要包含文本、圖像、多媒體、超鏈接等元素。（1）文本。文本是傳遞信息的主要載體，新聞資訊、產(chǎn)品信息、企業(yè)介紹等都要依靠文本來表達?？梢哉f，文本是網(wǎng)頁中必不可少的元素。（2）圖像。圖像能夠給人非常直觀的視覺效果，具有展示、裝飾等功能，在網(wǎng)頁中主要用于制作標題、網(wǎng)頁背景、網(wǎng)頁主圖、圖像超鏈接等。（詳見教材）2．網(wǎng)頁的模塊【教師】展示網(wǎng)頁的案例（例如百度），并提出以下問題：我們已經(jīng)知道了網(wǎng)頁的組成，除此之外，網(wǎng)頁還有一些模塊，通過觀察同學們發(fā)現(xiàn)網(wǎng)頁中有哪些元素是模塊呢？【學生】聆聽、思考、舉手回答【教師】總結學生的回答，并進行講解從設計者的角度出發(fā)，網(wǎng)頁一般由若干個不同功能的模塊組成，主要有Logo、導航欄、Banner、內容與頁腳等。（1）Logo。Logo主要指企業(yè)或網(wǎng)站的標志，是網(wǎng)頁的重要組成部分。形象美觀的Logo能夠快速給用戶留下深刻的印象，達到識別和推廣的目的。（2）導航欄。導航欄相當于網(wǎng)站目錄，它為用戶瀏覽網(wǎng)頁提供了極大的便利，用戶使用導航欄能夠快速查找需要的信息并跳轉至目標頁面（詳見教材）四、網(wǎng)頁版式【教師】展示網(wǎng)頁的案例（例如百度、淘寶等），并提出以下問題：觀察案例總結一下網(wǎng)頁都有哪幾種常見的類型？【學生】聆聽、思考、舉手回答【教師】總結學生的回答，并進行講解網(wǎng)頁版式有分欄型（骨骼型）、滿版型、分割型、中軸型、曲線型、傾斜型、對稱型、焦點型、三角型、自由型等。1．分欄型分欄型又稱骨骼型，是指使用類似報紙、雜志的分割方式，將頁面劃分為若干欄，常見的有橫向（豎向）通欄、雙欄、三欄等。這種版式給人以清晰有條理的視覺效果。2．滿版型滿版型是指使用圖像充滿整版的版式，有時也搭配文本羅列信息，整體視覺效果直觀且強烈，能夠突出重點。（詳見教材）五、網(wǎng)頁配色1．色彩基礎【教師】展示RGB顏色模式圖，介紹色彩基礎大部分顏色都是由三種基本色按一定比例混合而成的，這三種基本色分別為紅色（red）、綠色（green）和藍色（blue）。網(wǎng)頁設計中常用的RGB顏色模式，就是利用基本色的數(shù)值來表達顏色的，這種顏色表示方法稱為加色法。（詳見教材）2．色彩屬性【教師】利用多媒體展示PS界面，幫助學生理解色彩屬性色彩擁有三種屬性，分別為色相、飽和度和明度。色相是色彩的主要特征，是區(qū)別顏色的標準，如紅、橙、黃、綠、青、藍、紫等。飽和度表示色彩的純度，也可以理解為同類顏色的鮮艷程度，一般用百分數(shù)表示。明度表示色彩的明亮程度，也稱為亮度或發(fā)光強度，一般用百分數(shù)表示。白色最亮，黑色最暗。3．網(wǎng)頁配色技巧【教師】利用多媒體展示色環(huán)，幫助學生理解網(wǎng)頁配色網(wǎng)頁配色可以分為非彩色配色與彩色配色兩種。顧名思義，非彩色配色是指黑色、白色和灰色的搭配；彩色配色是指除了使用若干種任意顏色的搭配。一般來說，彩色配色會比非彩色配色更容易吸引用戶的注意力，表達也更加多元，但非彩色配色如果搭配得當也會產(chǎn)生鮮明、獨特的視覺效果。（1）非彩色配色常用于大段文本區(qū)域，無論是黑底白字還是白底黑字都會給人清晰明了、簡潔大方的視覺效果。（2）彩色配色用途廣泛，能夠用于網(wǎng)頁的各個區(qū)域。顏色種類繁多，如何選擇顏色是彩色搭配的核心問題，一般可從以下幾個方面進行考慮。單一配色。相鄰配色。對比配色。（詳見教材）【教師】布置以下學習任務：閱讀“高手點撥”部分，拓展理解網(wǎng)頁配色相關知識?！緦W生】閱讀、思考、理解【學生】聆聽、思考、理解、記憶通過講解和分析，幫助學生掌握網(wǎng)頁、網(wǎng)站和主頁的概念，以及網(wǎng)頁的類型、構成、版式和配色第二節(jié)課問題導入

（5min）【教師】提出問題：日常生活中你最常瀏覽的網(wǎng)頁是哪個？你是如何進行瀏覽的？【學生】聆聽、思考、發(fā)言用問題導入，讓學生主動探究瀏覽網(wǎng)站的基本操作實踐探究

（20min）【教師】演示瀏覽“北京魯迅博物館”網(wǎng)站的操作，并對其進行分析一、瀏覽網(wǎng)站（1）在瀏覽器中打開“北京魯迅博物館”網(wǎng)站主頁，向下移動滾動條瀏覽網(wǎng)頁.（2）單擊導航欄中的“館藏精品”鏈接，打開“館藏精品”頁面，向下移動滾動條瀏覽網(wǎng)頁。（詳見教材）二、分析網(wǎng)站【教師】通過多媒體課件分析北京魯迅博物館的基本情況北京魯迅博物館（北京新文化運動紀念館）是國家一級博物館，主要承擔魯迅及其他新文化運動時期著名人物或重大事件的有關實物與資料的征集、保管、研究和宣傳展示等工作，其由原北京魯迅博物館和北京新文化運動紀念館于2014年7月合并組建而成，其中包括魯迅博物館館區(qū)和新文化運動紀念館館區(qū)。（詳見教材）【教師】布置以下學習任務閱讀“青春風采”，了解新文化運動相關知識?！緦W生】自主學習，拓展知識【教師】通過多媒體課件分析北京魯迅博物館網(wǎng)頁的設計（1）網(wǎng)頁整體布局比較規(guī)整，頁眉部分采用橫向通版的版式，內容區(qū)域采用了分欄版式，在突出主題的基礎上展示了更多的內容。（2）網(wǎng)站整體采用暖黃色作為主題色，帶有撲面而來的年代氣息，符合“博物館”網(wǎng)站的主題?！緦W生】教師講解完成后，學生小組內討論，分析網(wǎng)站的其他設計，例如模塊設計等等?！緦W生】觀察、記錄、理解利用實踐探索法，讓學生們主動參與學習，留下印象，在實踐過程中理解、鞏固知識點實戰(zhàn)演練

（15min）【教師】組織學生以小組為單位，對某網(wǎng)頁（如故宮博物館）進行瀏覽和分析【學生】瀏覽、分析【教師】巡堂指導，及時解決學生的問題學生通過瀏覽和分析網(wǎng)頁，進一步鞏固知識課堂小結

（3min）【教師】簡要總結本節(jié)課的要點本節(jié)課學習了網(wǎng)頁、網(wǎng)站和主頁的概念，以及網(wǎng)頁的類型、構成、版式和配色。希望大家在課下多加復習，能