《HTML5+CSS3網(wǎng)頁設(shè)計技術(shù)》授課教案授課教案學(xué)校******大學(xué)（學(xué)院）任課教師***授課題目模塊一網(wǎng)頁設(shè)計概述授課時間長度4學(xué)時所用教材HTM5+CSS3網(wǎng)頁設(shè)計技術(shù)，黃玉春主編；中國科學(xué)技術(shù)出版社出版。教學(xué)目標(biāo)｜知識目標(biāo)｜（1）了解網(wǎng)站和網(wǎng)頁的概念。（2）了解HTML、CSS和JavaScript的功能和作用。（3）理解靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁的區(qū)別。（4）熟悉網(wǎng)頁開發(fā)所使用的基本技術(shù)和工具。｜能力目標(biāo)｜（1）能夠說出動態(tài)網(wǎng)頁和靜態(tài)網(wǎng)頁的區(qū)別。（2）能夠說出網(wǎng)頁制作用到的主要技術(shù)。（2）能夠簡單使用網(wǎng)頁開發(fā)工具VSCode。｜素質(zhì)目標(biāo)｜（1）通過學(xué)習(xí)網(wǎng)頁設(shè)計基本知識，掌握網(wǎng)頁設(shè)計的基本原則和理論，包括頁面布局、色彩搭配、圖文排版等，具備扎實的網(wǎng)頁設(shè)計基礎(chǔ)知識。（2）通過對網(wǎng)頁制作技術(shù)的學(xué)習(xí)，體會Web標(biāo)準(zhǔn)的嚴(yán)謹(jǐn)性，從而在工作生活中養(yǎng)成嚴(yán)謹(jǐn)?shù)膽B(tài)度。教學(xué)重點（1）了解網(wǎng)頁和網(wǎng)頁設(shè)計用到的基本技術(shù)。（2）能夠簡單使用網(wǎng)頁開發(fā)工具VSCode。教學(xué)難點（1）理解網(wǎng)站和網(wǎng)頁的概念（2）區(qū)別靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁。教學(xué)方法任務(wù)引入法、課堂討論、理論講解、實操訓(xùn)練教學(xué)用具多媒體教學(xué)設(shè)備、教材、課件、實訓(xùn)素材教學(xué)過程主要教學(xué)內(nèi)容及步驟考勤教師使用App或者點名等方式進(jìn)行簽到；學(xué)生按照老師要求簽到教學(xué)內(nèi)容任務(wù)一了解網(wǎng)頁相關(guān)知識大家對網(wǎng)頁并不陌生，在上網(wǎng)時瀏覽新聞、查詢信息、網(wǎng)上購物、看視頻等都是在瀏覽網(wǎng)頁。網(wǎng)頁可以被看作各種網(wǎng)站應(yīng)用和信息的容器，所有可視化的內(nèi)容都會通過網(wǎng)頁展示給用戶。一、網(wǎng)站和網(wǎng)頁網(wǎng)站英文為WebSite。簡單來說，網(wǎng)站是多個網(wǎng)頁的集合，即根據(jù)一定的規(guī)則，將用于展示特定內(nèi)容的相關(guān)網(wǎng)頁，通過超鏈接構(gòu)成一個網(wǎng)站整體人們可以通過網(wǎng)頁瀏覽器訪問網(wǎng)站，獲取自己需要的資訊或者享受網(wǎng)絡(luò)服務(wù)。常見的網(wǎng)站有搜狐、新浪、騰訊等。網(wǎng)頁是Internet的基本信息單位，英文為WebPage。網(wǎng)頁是以HTML（HyperTextMarkupLanguage，超文本標(biāo)記語言）為基礎(chǔ)編寫的，能夠通過網(wǎng)絡(luò)傳輸，并被瀏覽器翻譯成可以顯示出來的包含文字、圖片、聲音、動畫等媒體形式的頁面文件。例如，中國青年網(wǎng)的首頁如圖1-1所示。圖1-1中國青年網(wǎng)首頁網(wǎng)頁呈現(xiàn)在用戶面前的是各種文字、圖像、動畫、音頻、視頻等豐富的內(nèi)容，網(wǎng)頁在本質(zhì)上是文本文件和其相關(guān)的資源，網(wǎng)頁最根本的語言是HTML。通過單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“查看網(wǎng)頁源代碼”瀏覽器窗口會顯示當(dāng)前網(wǎng)頁的源代碼，如圖1-2所示。圖1-2中國青年網(wǎng)首頁部分源代碼二、動態(tài)網(wǎng)頁和靜態(tài)網(wǎng)頁網(wǎng)頁有靜態(tài)和動態(tài)之分。靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁的區(qū)別不是體現(xiàn)在視覺效果上，而是體現(xiàn)在兩者所采用的技術(shù)上。靜態(tài)網(wǎng)頁是指沒有后臺數(shù)據(jù)庫、不含程序的網(wǎng)頁，程序員編寫的是什么，它顯示的就是什么，不會有任何改變。靜態(tài)網(wǎng)頁更新起來相對比較麻煩，適用于更新較少的展示型網(wǎng)站。靜態(tài)網(wǎng)頁有一個固定的URL（UniformResourceLocator，統(tǒng)一資源定位符），且以.htm、.html、.shtml、.xml等形式為后綴。動態(tài)網(wǎng)頁一般使用ASP、PHP、JSP、.NET等網(wǎng)絡(luò)編程語言編寫，是運行于服務(wù)器端的代碼，瀏覽時先將服務(wù)器端代碼執(zhí)行成HTML代碼，然后再顯示在客戶端瀏覽器中。動態(tài)網(wǎng)頁可以實現(xiàn)的功能較多，如用戶注冊、登錄、在線調(diào)查、用戶管理、訂單管理、站內(nèi)搜索、即時更新新聞、留言或書寫評論等，一般以.aspx、.jsp、.php等常見形式為后綴。三、常用的網(wǎng)頁名詞1.IP地址、域名和URLIP地址是指互聯(lián)網(wǎng)協(xié)議地址（InternetProtocolAddress）。IP地址是IP協(xié)議提供的一種統(tǒng)一的地址格式，它為互聯(lián)網(wǎng)上的每一個網(wǎng)絡(luò)和每一臺主機分配一個邏輯地址，以此來屏蔽物理地址的差異。2.HTTP和HTTPSHTTP（HyperTextTransferProtocol，超文本傳輸協(xié)議）是一種常用的網(wǎng)絡(luò)通信協(xié)議，是客戶端瀏覽器或其他程序與Web服務(wù)器之間的應(yīng)用層通信協(xié)議。HTTPS是HTTP的加密版本。HTTP和HTTPS的區(qū)別主要在于以下幾點。（1）加密。（2）證書認(rèn)證。（3）端口號。（4）表現(xiàn)。HTTPS通常比HTTP慢。3.WWW和W3C組織WWW（WorldWideWeb）中文譯文“萬維網(wǎng)”。WWW是基于客戶機/服務(wù)器方式的信息發(fā)現(xiàn)技術(shù)和超文本技術(shù)的綜合。W3C組織是對網(wǎng)絡(luò)標(biāo)準(zhǔn)制定的一個非盈利組織，W3C是WorldWideWebConsortium（萬維網(wǎng)聯(lián)盟）的縮寫，像HTML、XHTML、CSS、XML的標(biāo)準(zhǔn)就是由W3C來定制。4.瀏覽器瀏覽器是查看網(wǎng)頁的一種工具，它可向服務(wù)器發(fā)送各種請求，并對從服務(wù)器發(fā)來的超文本信息和各種多媒體數(shù)據(jù)格式進(jìn)行解釋、顯示和播放。不同瀏覽器對網(wǎng)頁的解析可能存在差異，本書案例主要使用GoogleChrome瀏覽器顯示網(wǎng)頁效果。四、Web標(biāo)準(zhǔn)Web標(biāo)準(zhǔn)不是某一個標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。在Web標(biāo)準(zhǔn)中，規(guī)定網(wǎng)頁主要由三部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。1．結(jié)構(gòu)結(jié)構(gòu)對網(wǎng)頁中用到的信息進(jìn)行整理和分類。在結(jié)構(gòu)中用到的主要技術(shù)包括HTML、XML和XHTML。目前已逐漸被HTML5所取代。2．表現(xiàn)表現(xiàn)技術(shù)用于對已被結(jié)構(gòu)化的信息進(jìn)行顯示上的控制，包含版式、顏色、大小等形式控制。在網(wǎng)頁制作中主要CSS設(shè)置網(wǎng)頁的樣式。CSS（CascadingStyleSheets）中文譯為“層疊樣式表”。W3C創(chuàng)建CSS標(biāo)準(zhǔn)的目的是希望以CSS來描述整個頁面的布局設(shè)計，與HTML所負(fù)責(zé)的結(jié)構(gòu)分開。目前CSS的最新版本是CSS3。3．行為行為是指對整個文檔內(nèi)部的一個模型定義及交互行為的編寫，用于編寫用戶可進(jìn)行交互式操作的文檔。表現(xiàn)行為的WEB標(biāo)準(zhǔn)技術(shù)主要有：DOM（DocumentObjectModel）文檔對象模型和ECMAScript（JavaScript的擴展腳本語言）兩部分。任務(wù)二網(wǎng)頁制作技術(shù)入門HTML、CSS和JavaScript是網(wǎng)頁制作的標(biāo)準(zhǔn)語言，要學(xué)好網(wǎng)頁制作技術(shù)，首先要對它們有總體的認(rèn)識。一、網(wǎng)頁標(biāo)記語言HTMLHTML是用于創(chuàng)建網(wǎng)頁和設(shè)計其他可在網(wǎng)頁瀏覽器中看到的信息的一種標(biāo)記語言，它以純文字格式為基礎(chǔ)。可以使用任何文字編輯器或所見即所得的HTML編輯器來編輯HTML文件。HTML被用來結(jié)構(gòu)化信息——例如標(biāo)題、段落、列表和圖像等，主要負(fù)責(zé)網(wǎng)頁的“內(nèi)容”部分。二、網(wǎng)頁表現(xiàn)技術(shù)CSSCSS是CascadingStyleSheet的縮寫，中文譯為“層疊樣式表”或“串聯(lián)樣式表”，簡稱“樣式表”。HTML和CSS分別實現(xiàn)了網(wǎng)頁內(nèi)容和樣式的設(shè)計，實現(xiàn)了結(jié)構(gòu)和外觀的分離，使站點的訪問及維護(hù)更加容易。CSS最新版本是CSS3。在CSS3中增加了很多新樣式，例如圓角效果、塊陰影與文字陰影、使用變形處理（旋轉(zhuǎn)、縮放、傾斜、移動）等，這些內(nèi)容將在后續(xù)的講解中介紹。三、網(wǎng)頁腳本語言JavaScript腳本語言由ASCII碼構(gòu)成，是一種不必事先編譯，只要利用適當(dāng)?shù)慕忉屍骶涂梢詧?zhí)行的簡單程序。目前常用的腳本語言有JavaScript、VBScript和JScript，其中JavaScript是眾多網(wǎng)頁開發(fā)者首選的腳本語言。通常JavaScript代碼可以直接嵌入HTML文件中，隨網(wǎng)頁一起傳送到客戶端瀏覽器，然后通過瀏覽器來解釋執(zhí)行。任務(wù)三網(wǎng)頁制作工具VSCode的使用VisualStudioCode（簡稱VSCode）是微軟公司推出的一款免費、開源的代碼編輯器。可以用來編寫網(wǎng)頁前端的編輯器軟件有很多，例如記事本、Notepad++、Dreamweaver、HBuilder、WebStorm、atom等。本書選擇VisualStudioCode編輯器作為開發(fā)工具。一、VSCode特點VSCode在功能上做到了夠用，體驗上做到了好用，更在擁有海量插件的情況下做到了簡潔流暢。具有如下主要優(yōu)點：（1）輕量級。（2）跨平臺。（3）智能感知。（4）多語言支持。（5）提供豐富的插件。二、下載和安裝VSCode打開瀏覽器，登錄VSCode官方網(wǎng)站。下載完成后，雙擊安裝包啟動安裝程序，然后按照程序的提示一步一步進(jìn)行操作，直到完成安裝。三、安裝VSCode插件VSCode編輯器提供了非常豐富的插件功能，根據(jù)開發(fā)的需要，安裝對應(yīng)的插件可以大大提高開發(fā)效率。本節(jié)介紹本課程需要用到的VSCode常用插件。1.Chinese（Simplified）VSCode下載下來默認(rèn)是英文的，可以下載Chinese(Simplified)LanguagePackforVisualStudioCode插件將編譯器漢化，提高開發(fā)效率。2．AutoRenameTag該插件的功能是自動修改標(biāo)簽名，重命名一個開始標(biāo)簽時，自動重命名配對的結(jié)束標(biāo)簽。3．Openinbrowser安裝完以后在目標(biāo)的html文件上右擊鼠標(biāo)，在彈出的菜單上選擇“openindefaultbrowser”選項，即可使用默認(rèn)瀏覽器預(yù)覽當(dāng)前文件。4．LiveServer該插件功能是開啟一個實時的本地服務(wù)器。這是一個非常好用的插件，每次保存文件后到瀏覽器都要刷新才能看到最新的變化，有了這個插件，就可以實時監(jiān)聽文件的變化，自動刷新網(wǎng)頁。5．OnedarkproVSCode有一些自帶的顏色主題，用戶可以根據(jù)自己的喜好選擇相應(yīng)的顏色主題。OneDarkPro是最受歡迎的暗黑主題，安裝完成后，用戶就可以選擇使用該主題。四、使用VSCodeVSCode編輯器和常用插件安裝完成后，就可以使用VSCode制作和編輯網(wǎng)頁文件了。1.VSCode界面啟動VSCode編輯器，主界面如圖1-10所示。編輯器最左側(cè)黑色背景的是“活動欄”，在活動欄上有“資源管理器”“搜索”“代碼管理器”“運行和調(diào)試”“擴展”“賬戶”和“管理”等按鈕。單擊活動欄上的按鈕可以打開相應(yīng)的功能。例如：單擊編輯器左側(cè)的活動欄的“擴展”按鈕，可以看到VSCode安裝的插件；單擊活動欄上的“資源管理器”按鈕，顯示或隱藏“資源管理器”區(qū)域。在資源管理器中，可以看到當(dāng)前項目包含的文件夾和文件。圖1-10VSCode編輯器主界面在VSCode編輯器“開始”界面中，單擊“打開文件夾…”，也可以使用快捷鍵“Ctrl+K+O”直接打開“打開文件夾”對話框，選擇某個文件夾作為項目的根目錄。在彈出“是否信任此文件夾中的文件作者？”對話框中，單擊“是，我信任此作者”按鈕，否則其中的代碼可能無法運行。如圖1-11所示。圖1-11選擇信任打開的文件夾2.在VSCode中創(chuàng)建文件在編輯器的“資源管理器”中，單擊新建文件按鈕，創(chuàng)建一個文件，命名為“index.html”。如圖1-12所示。圖1-12新建html文檔單擊這個文件，進(jìn)入到代碼編輯環(huán)境。在VSCode代碼編輯器中編輯HTML文檔，可以通過輸入英文感嘆號“!”，按【Tab】鍵或【Enter】鍵，快速生成HTML結(jié)構(gòu)模版代碼。對于HTML文檔，可以在當(dāng)前文件窗口右擊鼠標(biāo)，在彈出的快捷菜單上選擇“OpenWithLiveServer”、“OpenwithDefaultBrowser”和“OpenWithOtherBrowsers”三個選項之一，在瀏覽中查看網(wǎng)頁設(shè)計的效果。如圖1-13所示。圖1-13運行網(wǎng)頁代碼選項說明：VSCode安裝了“LiveServer”插件，才會有“OpenWithLiveServer”選項。安裝了“OpeninBrowser”插件，才會有“Openwith