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

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

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

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

實踐探究（25min）

小組合作（5min）

課堂小結(jié)（3min）

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

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

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

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

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

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

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

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