任務11 完整項目：制作學院網(wǎng)站

教案名稱任務十一完整項目：制作學院網(wǎng)站計劃學時12學時知識目標學習網(wǎng)站規(guī)劃步驟了解效果圖設計原則掌握效果圖設計步驟能夠?qū)πЧ麍D進行切片掌握主頁、列表頁、詳情頁搭建方法掌握CSS樣式能力目標掌握完整網(wǎng)站的制作方法素質(zhì)目標引導學生做好職業(yè)規(guī)劃，在課程學習中樹立職業(yè)理想認識溝通的重要性引導學生學會把復雜的問題簡單化，逐個解決引導學生做好職業(yè)規(guī)劃，在課程學習中樹立職業(yè)理想激發(fā)學生愛國熱情、為科技強國而努力學習教學重點效果圖設計、學院網(wǎng)站制作教學難點學院網(wǎng)站制作教學模式教學做一體化線上+線下混合教學教學活動及主要環(huán)節(jié)思政元素切入點第1學時（網(wǎng)站規(guī)劃）課前發(fā)布任務：觀看學習通平臺相關(guān)學習視頻。做課前測試題。=1\*ROMANI.導入新課：（5分鐘）本學期我們學習了網(wǎng)頁的基礎知識，做了簡單網(wǎng)站。有了一定的知識積累后，同學們是不是躍躍欲試要做真正的網(wǎng)站了？本任務我們通過制作學院網(wǎng)站一起來學習網(wǎng)站的開發(fā)流程。從規(guī)劃網(wǎng)站開始，設計網(wǎng)頁效果圖，制作網(wǎng)站，并為網(wǎng)站添加動態(tài)效果，讓網(wǎng)站效果更加絢麗。本次課學習網(wǎng)站規(guī)劃，并設計學院網(wǎng)站主頁效果圖。（讓同學們在學習通平臺觀看視頻，提前預習。）=2\*ROMANII.重難點內(nèi)容講授：（35分鐘）網(wǎng)站規(guī)劃網(wǎng)站需求分析未來信息學院網(wǎng)站的主要功能2．網(wǎng)站的風格定位3．規(guī)劃草圖4．項目計劃一般網(wǎng)站開發(fā)流程=3\*ROMANIII.課堂小結(jié)：（5分鐘）網(wǎng)站規(guī)劃步驟第2、3、4學時（效果圖設計）一、效果圖設計原則（5分鐘）（以學院網(wǎng)站為例進行分析介紹）先背景，后前景，先上后下，先左后右。二、效果圖設計步驟（115分鐘）（講解部分難點，課下發(fā)給學生們配套電子教材及對應視頻進行課下自學，課下將效果圖設計好）1.新建畫布2.添加參考線3.制作背景4.填充圖案5.添加logo6.設計導航條7.添加滾動文本8.圖片切換區(qū)9.學校要聞區(qū)10.通知公告區(qū)11.系部動態(tài)12.鏈接13.視頻宣傳14.友情鏈接15頁腳16.保存文件效果圖切片導出網(wǎng)頁（10分鐘）（講解用法及注意事項，簡單演示，為學會配備操作視頻，課下進行切片操作）選擇“切片工具”，根據(jù)需要進行切片。幾個注意事項：將預期的切片設計好，再進行切片；盡量放大圖片進行切片；在網(wǎng)頁中使用的切片圖片，重新進行命名，以便在制作網(wǎng)站時使用。=3\*ROMANIII.課堂小結(jié)：（5分鐘）效果圖設計原則效果圖設計步驟效果圖切片導出網(wǎng)頁作業(yè)：完成效果圖設計及對效果圖進行切片操作第5、6、7、8學時（制作網(wǎng)站主頁）課前發(fā)布任務：觀看學習通平臺任務書及相關(guān)學習視頻。做課前測試題。=1\*ROMANI.導入新課：（5分鐘）上節(jié)課給大家留下了制作學院官網(wǎng)的設計圖的任務，并將制作好的效果圖進行切片操作。分析主頁結(jié)構(gòu)。這節(jié)課我們根據(jù)制作好的效果圖制作學院官網(wǎng)主頁。=2\*ROMANII.重難點內(nèi)容講授及練習：（170分鐘）一、主頁結(jié)構(gòu)分析把整個頁面分成這樣幾大塊：頁首、導航、滾動文本、主體部分、友情鏈接和頁腳。主體部分可分為五行。二、準備工作1.新建項目，項目名稱為chapter11，將素材中提供的images文件夾拷貝到chapter1文件夾下。2.新建網(wǎng)頁index.html。3.在chapter11中新建目錄“css”，在CSS上當中新建樣式表文件index.css，書寫通用樣式。4.將網(wǎng)頁文件及樣式表文件建立鏈接。三、制作index.html頁面（講解部分難點，學生通過教材和學習通配套視頻進行練習。）1.制作網(wǎng)頁的banner部分2.制作網(wǎng)頁導航條部分將之前完成的導航代碼復制修改即可。3.制作滾動文字部分4.制作主體部分5行5.友情鏈接6.頁腳=3\*ROMANIII.課堂小結(jié)：（5分鐘）創(chuàng)建項目創(chuàng)建主頁，搭建主頁結(jié)構(gòu)，添加頁面各元素作業(yè)：根據(jù)教材和學習通視頻完成網(wǎng)站主頁。第9、10學時（制作新聞列表頁）課前發(fā)布任務：觀看學習通平臺相關(guān)學習視頻。做課前測試題。=1\*ROMANI.導入新課：（5分鐘）網(wǎng)站新聞內(nèi)容較多時，不能全部在首頁顯示，可以建立新聞列表頁展示近期新聞，方便用戶查閱。新聞列表頁要簡潔，讓用戶很快了解自己想訪問哪些內(nèi)容。你網(wǎng)上瀏覽并推薦一種新聞列表頁展示方式給同學看。=2\*ROMANII.重難點內(nèi)容講授：（80分鐘）分析頁面結(jié)構(gòu)（5分鐘）新聞列表頁主體部分與主頁不同，其它部分相同，將主頁復制一份，改名為newsList.html。在css目錄中再新建一個樣式表文件，名稱為list.css，將index.css和list.css都鏈接到newsList.html頁面中。左側(cè)部分制作（15分鐘）（帶領(lǐng)同學們一起操作）分析基本頁面結(jié)構(gòu)：

三、添加左側(cè)部分css效果（25分鐘）（帶領(lǐng)同學一起操作）四、右側(cè)部分制作（15分鐘）分析右側(cè)結(jié)構(gòu)五、添加右側(cè)css效果（20分鐘）（帶領(lǐng)同學一起操作）右側(cè)采用靈活的彈性高度。=3\*ROMANIII.課堂小結(jié)：（5分鐘）學校網(wǎng)站列表頁與首頁的風格一致，這樣做可以提升網(wǎng)站的辨識度，提高網(wǎng)站制作效率。我們?yōu)橛覀?cè)列表設置了彈性高度，如果內(nèi)容高度不確定時，采用彈性高度更具靈活性。作業(yè)：完成主頁的新聞頁主體部分結(jié)構(gòu)以及樣式設置。第11、12學時（制作網(wǎng)站詳情頁）課前發(fā)布任務：觀看學習通平臺相關(guān)學習視頻。做課前測試題。=1\*ROMANI.導入新課：（5分鐘）詳情頁在網(wǎng)站中有著非常重要的地位，要有清晰簡明的詳情頁文案、吸引人的頁面。在電商網(wǎng)站中好的產(chǎn)品詳情頁具有提高商品轉(zhuǎn)化率的作用。今天我們制作學院網(wǎng)站新聞詳情頁、視頻宣傳頁，并為網(wǎng)站各頁面添加腳本。=2\*ROMANII.重難點內(nèi)容講授及練習：（80分鐘）頁面結(jié)構(gòu)制作（帶領(lǐng)同學一起操作）將newsList.html頁面復制一份，改名為：newsDetail.html。該頁面內(nèi)容與newsList.html相比，只是右側(cè)內(nèi)容不同，添加右側(cè)HTML和CSS代碼。二、制作視頻宣傳頁1.視頻標記<video>在HTML5中，video標記用于定義播放視頻文件的標準。它支持以下三種視頻格式：MP4,WebM,和Ogg。語法格式：<videosrc=“視頻文件路徑”controls="controls"></video>src：設置視頻文件的路徑；controls：為視頻提供播放控件。示例通過controls="controls"添加播放控制條，我們可以隨時播放和暫停視頻，調(diào)整聲音，縮放窗口，選擇播放位置等一系列操作。增加自動播放和循環(huán)播放功能自動播放，播放完成自動循環(huán)播放視頻還可以在<video>和</video>之間添加文本，用于在不支持video標記的瀏覽器中顯示。Video的其他常用屬性可以自行查表學習。2.音頻標記<audio>在HTML5中，audio標記用于定義播放音頻文件的標準，它支持以下三種音頻格式WAV、MP3、Ogg。語法格式：<audiosrc=“音頻文件路徑”controls="controls"></audio>同video標記一樣，src屬性用于設置音頻文件的路徑，controls屬性用于為音頻提供播放控件。示例：可以在網(wǎng)頁中聽音頻，并用控制條控制音頻播放。audio常用其他屬性（表）和video基本類似。3.制作視頻宣傳頁將newsDetail.html頁面復制一份，改名為video.html，添加HTML和CSS代碼。（帶領(lǐng)同學一起操作）=3\*ROMANIII.課堂小結(jié)：（5分鐘）Video標記Audio標記作業(yè)：完成詳情頁面。凡事預則立,不預則廢。網(wǎng)頁效果圖設計是網(wǎng)站項目開發(fā)中非常重要的一環(huán)，是通過技術(shù)手段來設計網(wǎng)頁的視覺效果。效果圖的好壞，直接影響到整個網(wǎng)站的質(zhì)量。通過設計網(wǎng)頁效果圖，網(wǎng)頁設計師可以把對網(wǎng)站的理解通過圖像的方式表現(xiàn)出來，然后讓客戶直觀地進行審核，客戶也可以通過對效果圖的審核，提出自己的意見和建議，讓設計師進行修改。最終實現(xiàn)一個能夠讓雙方都滿意的設計效果。溝通在網(wǎng)站設計過程中同樣發(fā)揮重要作用。按照從上到下的順序，把主頁劃分為頁首、導航、滾動文本、主體部分、友情鏈接、頁腳。主體部分劃分為五行。每一塊內(nèi)容單獨來做，把復雜的問題分割，簡單化，逐項突破。今天我以學校為驕傲,明天學校以我為自豪。愛校