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

第課網(wǎng)頁設(shè)計與制作基礎(chǔ)第課網(wǎng)頁設(shè)計與制作基礎(chǔ)（二）2（二）網(wǎng)頁設(shè)計與制作基礎(chǔ)（二）網(wǎng)頁設(shè)計與制作基礎(chǔ)第課2PAGE4PAGE4PAGE5PAGE52第2第課網(wǎng)頁設(shè)計與制作基礎(chǔ)（二） 課題網(wǎng)頁設(shè)計與制作基礎(chǔ)(二）課時2課時（90min）教學(xué)目標(biāo)知識技能目標(biāo)：（1）了解Internet，IP地址，域名，WWW，URL和HTTP（2）認(rèn)識網(wǎng)站建設(shè)流程（3）知道網(wǎng)頁制作語言和網(wǎng)頁制作、測試工具思政育人目標(biāo)：（1）養(yǎng)成做事有計劃、有條理的工作習(xí)慣（2）有意識地培養(yǎng)自己的審美能力，并運用到工作中教學(xué)重難點教學(xué)重點：網(wǎng)頁制作語言和網(wǎng)頁制作、測試工具教學(xué)難點：能夠保存、編輯與運行網(wǎng)頁文件教學(xué)方法情景模擬法、問答法、討論法、練習(xí)法教學(xué)用具電腦、投影儀、多媒體課件、教材教學(xué)設(shè)計第1節(jié)課：傳授新知（33min）第2節(jié)課：問題導(dǎo)入（5min）

任務(wù)實施（20min）

實踐探索（15min）

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

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

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

（10min）【教師】提出以下問題：同學(xué)們思考一下，我們現(xiàn)在使用的網(wǎng)絡(luò)叫什么名字？不同國家、地區(qū)之間是通過什么協(xié)議來使用網(wǎng)絡(luò)呢？【學(xué)生】思考、舉手發(fā)言Internet的全稱是Internetwork，中文稱為因特網(wǎng)，是集現(xiàn)代計算機技術(shù)和通信技術(shù)于一體，基于TCP/IP協(xié)議將全世界不同國家、不同地區(qū)、不同部門和不同類型的計算機、國家骨干網(wǎng)、廣域網(wǎng)、局域網(wǎng)通過網(wǎng)絡(luò)互聯(lián)設(shè)備連接而成的，全球最大的開放式計算機網(wǎng)絡(luò)。通過問題導(dǎo)入，引導(dǎo)學(xué)生思考，調(diào)動學(xué)生的主觀能動性，為學(xué)習(xí)新知識做好準(zhǔn)備傳授新知

（33min）【教師】通過學(xué)生的發(fā)言，引入新的知識點，介紹Internet，IP地址和域名一、Internet，IP地址和域名【教師】展示因特網(wǎng)的基本概念和教師機的IP地址，幫助學(xué)習(xí)理解Internet的全稱是Internetwork，中文稱為因特網(wǎng)，是集現(xiàn)代計算機技術(shù)和通信技術(shù)于一體，基于TCP/IP協(xié)議將全世界不同國家、不同地區(qū)、不同部門和不同類型的計算機、國家骨干網(wǎng)、廣域網(wǎng)、局域網(wǎng)通過網(wǎng)絡(luò)互聯(lián)設(shè)備連接而成的，全球最大的開放式計算機網(wǎng)絡(luò)。因特網(wǎng)上連接了不計其數(shù)的服務(wù)器和客戶機，每一個主機在因特網(wǎng)上都有一個唯一的地址，我們稱這個地址為IP地址（internetprotocoladdress）。IP地址是一個32位的二進制數(shù)，為方便使用，一般用4個小于256的十進制數(shù)表示，4個數(shù)字之間用點間隔。例如，“26”就是一個IP地址。（詳見教材）【教師】布置以下學(xué)習(xí)任務(wù)：閱讀教材“高手點撥”部分，了解internet與Internet的區(qū)別?！緦W(xué)生】自主學(xué)習(xí)、思考【教師】利用多媒體展示各級各類網(wǎng)站的域名，并進行講解由于IP地址在使用過程中難于記憶和書寫，人們又開發(fā)了一種與IP地址對應(yīng)的字符來表示地址，這就是域名。每一個網(wǎng)站都有自己的域名，并且域名是獨一無二的。例如，我們在瀏覽器地址欄中輸入搜狐網(wǎng)站的域名“”，然后按“Enter”鍵即可訪問搜狐網(wǎng)站。域名可分為頂級域名（一級域名）、二級域名和三級域名等。（詳見教材）二、WWW，URL和HTTP【教師】提出以下問題：同學(xué)們知道什么我們常用的網(wǎng)址前綴中WWW和HTTP有什么含義嗎?【學(xué)生】聆聽、思考、舉手回答【教師】總結(jié)學(xué)生的答案WWW：萬維網(wǎng)（worldwideweb，WWW）又稱全球信息網(wǎng)，是Internet的信息服務(wù)類型，它將世界各地的信息資源以超文本或超媒體的形式組織成一個巨大的信息網(wǎng)絡(luò)，用戶可以使用Web瀏覽器隨心所欲地在萬維網(wǎng)中漫游，獲取感興趣的信息。這些信息由URL標(biāo)識，通過HTTP傳送給用戶。HTTP：超文本傳輸協(xié)議（hypertexttransferprotocol，HTTP）負責(zé)規(guī)定瀏覽器和服務(wù)器怎樣互相交流。（詳見教材）【教師】展示網(wǎng)址的組成，輔助學(xué)習(xí)理解URLURL：統(tǒng)一資源定位符（uniformresourcelocator，URL），也稱為網(wǎng)址，是世界通用的負責(zé)給萬維網(wǎng)上的資源（如網(wǎng)頁）定位的系統(tǒng)。一個完整的URL由通信協(xié)議名稱、域名或IP地址、資源在服務(wù)器中的路徑和文件名4部分組成。（詳見教材）三、網(wǎng)站建設(shè)流程【教師】展示網(wǎng)站建設(shè)流程圖，輔助學(xué)習(xí)理解網(wǎng)站建設(shè)流程1．網(wǎng)站策劃網(wǎng)站策劃可以分為分析策劃和資料收集兩個部分。制作網(wǎng)站前，首先需要分析網(wǎng)站的功能及建站的目的，確定網(wǎng)站的用戶群和網(wǎng)站內(nèi)容，并出具詳細的網(wǎng)站策劃書，然后根據(jù)策劃書搜集建站所需的相關(guān)資料和素材。2．設(shè)計頁面網(wǎng)頁設(shè)計師與客戶進行溝通，了解客戶的基本要求后，制定網(wǎng)站建設(shè)方案并使用圖像處理軟件設(shè)計頁面效果圖。3．效果圖切片在效果圖得到客戶認(rèn)可后，設(shè)計師可使用圖像處理軟件將效果圖切割并保存為較小的圖像文件，留待后面制作網(wǎng)頁時使用。（詳見教材）【教師】布置以下小組合作學(xué)習(xí)任務(wù)：根據(jù)網(wǎng)站建設(shè)流程圖，查找資料，以小組為單位說一說你們想建設(shè)什么網(wǎng)站，根據(jù)流程圖盡量詳細的規(guī)劃網(wǎng)站。完成后將學(xué)習(xí)成果以word形式提交到文旌課堂APP。【學(xué)生】聆聽、思考、合作、完成學(xué)習(xí)任務(wù)【教師】展示網(wǎng)頁的案例（例如百度），并提出以下問題：你都知道哪些網(wǎng)頁制作語言？【學(xué)生】聆聽、思考、舉手回答【教師】總結(jié)學(xué)生的回答并講解知識點——網(wǎng)頁制作語言1．HTML5HTML是hypertextmarkuplanguage（超文本標(biāo)記語言）的英文縮寫，它是制作網(wǎng)頁的主要語言。HTML有許多版本，目前最新版是HTML5。2．CSS3CSS是cascadingstylesheets（層疊樣式表）的英文縮寫，用于設(shè)置網(wǎng)頁中各元素的樣式，如文本的大小、顏色與圖像的邊框、位置等。3．JavaScriptJavaScript簡稱JS，它是一種具有函數(shù)優(yōu)先的輕量級、解釋型或即時編譯型的編程語言。（詳見教材）五、網(wǎng)頁制作與測試工具【教師】展示網(wǎng)頁制作與測試的工具例如AdobePhotoshop、AdobeDreamweaver等，輔助學(xué)生理解1．網(wǎng)頁設(shè)計工具設(shè)計網(wǎng)頁或制作網(wǎng)頁中使用的素材圖像，通常需要使用制圖工具制作或處理。常用的相關(guān)軟件有AdobePhotoshop、AdobeIllustrator和CorelDRAW等，最常用的是AdobePhotoshop，也就是我們常說的PS。2．網(wǎng)頁制作工具網(wǎng)頁文件是純文本文檔，使用計算機自帶的記事本軟件即可編寫制作。不過記事本軟件的功能相對匱乏，對使用者的技術(shù)要求較高，不適合初學(xué)者使用。常用的專業(yè)軟件有Notepad++、SublimeText、HBuilderX等，對于初學(xué)者來說更適合使用AdobeDreamweaverCC，本書選用的工具正是該軟件。3．網(wǎng)頁測試工具網(wǎng)頁測試就是查看網(wǎng)頁的效果是否符合預(yù)期，驗證網(wǎng)頁的功能是否完好，檢測網(wǎng)頁的鏈接是否正確。（詳見教材）【學(xué)生】聆聽、思考、理解、記憶通過講解，讓學(xué)生了解網(wǎng)頁類型，通過講解和對網(wǎng)頁的分析，掌握網(wǎng)頁的構(gòu)成第二節(jié)課問題導(dǎo)入

（5min）【教師】提問引出新知識點如何保存、編輯與運行網(wǎng)頁文件？【學(xué)生】思考、發(fā)言用問題導(dǎo)入，讓學(xué)生主動探究保存、編輯、運行的基本操作任務(wù)實施

（20min）【教師】演示保存、編輯和運行“北京魯迅博物館”網(wǎng)站的操作，并對其進行分析（1）在谷歌瀏覽器中打開“北京魯迅博物館”網(wǎng)站主頁，在工具欄中單擊“自定義及控制”按鈕，在展開的下拉列表中選擇“更多工具”→“網(wǎng)頁另存為”選項……（2）打開“另存為”對話框，選擇合適的本地磁盤位置，然后單擊“保存”按鈕，將網(wǎng)頁文件保存到本地。（3）在文件資源管理器中找到保存的文件，右擊該網(wǎng)頁文件，在彈出的快捷菜單中選擇“打開方式”→“記事本”選項，使用記事本打開網(wǎng)頁文件。（4）記事本軟件中顯示網(wǎng)頁文件的代碼，修改記事本中的代碼即可改變頁面內(nèi)容。例如，修改<title>標(biāo)簽中的文本（更改網(wǎng)頁標(biāo)題）（5）將文件保存后，關(guān)閉記事本。在文件資源管理器中右擊網(wǎng)頁文件，在彈出的快捷菜單中選擇“打開方式”→“GoogleChrome”選項，在谷歌瀏覽器中運行網(wǎng)頁文件，可以看到網(wǎng)頁的標(biāo)題修改成功（詳見教材）【學(xué)生】觀察、記錄、理解，上機操作【教師】巡堂指導(dǎo)，及時解決學(xué)生的問題通過任務(wù)實施，讓學(xué)生們主動參與學(xué)習(xí)，對保存、編輯和運行網(wǎng)頁相關(guān)操作留下印象，在實踐過程中理解、鞏固知識點實踐探索

（15min）【教師】組織學(xué)生以小組為單位，登錄智聯(lián)招聘、中華英才網(wǎng)等招聘類網(wǎng)站，搜索“網(wǎng)頁設(shè)計與制作”“前端開發(fā)”的職業(yè)要求，并討論作為網(wǎng)頁設(shè)計與制作人員或前端開發(fā)人員，應(yīng)掌握哪些技能【學(xué)生】瀏覽、分析、小組討論，由小組代表上臺發(fā)表討論結(jié)果【教師】與學(xué)生一起評價各組的討論結(jié)果通過實踐探索，使學(xué)生進一步鞏固所學(xué)知識，了解自己與職業(yè)要求的能力差距課堂小結(jié)

（3min）【教師】簡要總結(jié)本節(jié)課的要點本節(jié)課了解了Internet，IP地址，域名，WWW，URL和HTTP的概念，熟悉了網(wǎng)站建設(shè)的流程，認(rèn)識了網(wǎng)頁制作語言和工具，還通過實操學(xué)習(xí)了如何保存、編輯和運行網(wǎng)頁文件。希望大家在課下多加復(fù)習(xí)，能夠熟練進行網(wǎng)站制作的基本操作?！緦W(xué)生】