任務(wù)11 完整項(xiàng)目：制作學(xué)院網(wǎng)站

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

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