網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（HTML5 CSS3 JavaScript）（微課版）（第2版） 教案 案例26美麗山東網(wǎng)站

教案29案例26美麗山東網(wǎng)站（1）計(jì)劃學(xué)時(shí)2學(xué)時(shí)知識(shí)目標(biāo)掌握網(wǎng)站開發(fā)的一般流程，了解Web發(fā)展歷史及其未來(lái)方向；掌握浮動(dòng)與定位布局的使用技巧，能夠運(yùn)用CSS+DIV為網(wǎng)頁(yè)布局；掌握CSS3的高級(jí)應(yīng)用，實(shí)現(xiàn)過(guò)渡、變形、翻轉(zhuǎn)效果；掌握CSS3動(dòng)畫屬性實(shí)現(xiàn)圖片輪播設(shè)計(jì)。能力目標(biāo)具有根據(jù)企業(yè)的需求撰寫企業(yè)網(wǎng)站建設(shè)、規(guī)劃的能力；具有運(yùn)用所學(xué)知識(shí)與技能進(jìn)行Web前端開發(fā)與制作的能力。素質(zhì)目標(biāo)培養(yǎng)和提高學(xué)生感受美、表現(xiàn)美和創(chuàng)造美的能力；培養(yǎng)學(xué)生嚴(yán)謹(jǐn)?shù)目茖W(xué)態(tài)度，提高分析和解決實(shí)際問(wèn)題的能力；樹立學(xué)生自主學(xué)習(xí)和終生學(xué)習(xí)的觀念。教學(xué)重點(diǎn)圖片切片工具；CSS3過(guò)渡、變形、翻轉(zhuǎn)及動(dòng)畫屬性應(yīng)用。教學(xué)難點(diǎn)CSS3屬性高級(jí)應(yīng)用。教學(xué)模式教學(xué)做一體化線上+線下混合式教學(xué)教學(xué)活動(dòng)及主要環(huán)節(jié)素質(zhì)培養(yǎng)第1學(xué)時(shí)（案例分析、網(wǎng)站規(guī)劃）=1\*ROMANI.問(wèn)題討論：（5分鐘）對(duì)同學(xué)們課前觀看微課過(guò)程中的疑難問(wèn)題展開討論。=2\*ROMANII.案例分析與實(shí)現(xiàn)：（40分鐘）一、案例描述設(shè)計(jì)并制作美麗山東網(wǎng)站，該網(wǎng)站由3個(gè)頁(yè)面構(gòu)成，包括主頁(yè)、初識(shí)山東頁(yè)和景點(diǎn)詳情頁(yè)，從主頁(yè)可以進(jìn)入其他頁(yè)面，從其他頁(yè)面可以返回主頁(yè)。其中，主頁(yè)有使用CSS實(shí)現(xiàn)的輪播圖效果，初識(shí)山東頁(yè)有視頻播放效果，網(wǎng)站瀏覽效果如圖26-1～圖26-3所示。圖26-1美麗山東網(wǎng)站主頁(yè)圖26-2初識(shí)山東頁(yè)圖26-3景點(diǎn)詳情頁(yè)二、網(wǎng)站規(guī)劃1．網(wǎng)站需求分析設(shè)計(jì)美麗山東網(wǎng)站，旨在讓任何人在任何時(shí)間、任何地點(diǎn)都能借助網(wǎng)絡(luò)快速了解和品讀山東的歷史文化，同時(shí)為廣大游客提供詳細(xì)、準(zhǔn)確、全面的旅游信息，如文旅資訊、專題推介等。在內(nèi)容組織上要做到條理清晰、簡(jiǎn)單易懂，能夠讓用戶快速查找到相關(guān)信息。2.網(wǎng)站的風(fēng)格定位3.規(guī)劃草圖4.素材準(zhǔn)備學(xué)生同步操作，做學(xué)教一體（1）選擇切片工具（2）繪制切片區(qū)域（3）導(dǎo)出切片（4）存儲(chǔ)圖片三、制作網(wǎng)站主頁(yè)1.新建項(xiàng)目2.創(chuàng)建樣式表文件3.主頁(yè)效果圖分析（1）HTML結(jié)構(gòu)分析（2）CSS樣式分析4.頁(yè)面整體布局主頁(yè)整體結(jié)構(gòu)代碼編寫學(xué)生同步操作，做學(xué)教一體5.定義公共樣式學(xué)生同步操作，做學(xué)教一體打開樣式文件index.css，編寫通用樣式代碼6.鏈接外部樣式表第2學(xué)時(shí)（制作頭部和導(dǎo)航條、輪播圖）一、制作頭部和導(dǎo)航條1．分析效果圖網(wǎng)頁(yè)的頭部分為左（Logo）、右（導(dǎo)航條）2個(gè)部分，可對(duì)導(dǎo)航條的結(jié)構(gòu)使用無(wú)序列表來(lái)搭建。當(dāng)鼠標(biāo)指針懸停于導(dǎo)航條中的各個(gè)導(dǎo)航條目時(shí)，改變文本顏色和邊框。2．代碼實(shí)現(xiàn)學(xué)生同步操作，做學(xué)教一體（1）搭建頭部和導(dǎo)航條結(jié)構(gòu)代碼略。（2）定義頭部和導(dǎo)航條CSS樣式代碼略。二、制作輪播圖1．分析效果圖觀察效果圖，可以看出只需在該盒子內(nèi)再添加1個(gè)包容所有圖片的盒子。每隔30s的時(shí)間，圖片會(huì)完成1次先向左后向右的交替移動(dòng)動(dòng)畫。2．代碼實(shí)現(xiàn)學(xué)生同步操作，做學(xué)教一體（1）搭建輪播圖結(jié)構(gòu)（2）定義輪播圖CSS樣式三、小結(jié)本案例介紹了美麗山東網(wǎng)站規(guī)劃流程，綜合利用HTML5+CSS3最新網(wǎng)站開發(fā)技術(shù)，制作完成主頁(yè)頭部和導(dǎo)航條、輪播圖部分。作業(yè)1：課本課后習(xí)題與實(shí)訓(xùn)。作業(yè)2：掃碼觀看案例26中主頁(yè)中內(nèi)容部分（山東概況、禮儀之邦）的微課，學(xué)習(xí)制作過(guò)程。課前小組討論過(guò)程中，培養(yǎng)學(xué)生團(tuán)隊(duì)合作，綜合分析問(wèn)題的