網(wǎng)頁設(shè)計(jì)與制作（活頁式） 課件 綜合案例

網(wǎng)頁設(shè)計(jì)與制作紅色文化網(wǎng)站授課教師：喬振華HTMLCSSJavaScript目錄CONTENTS1任務(wù)導(dǎo)航2操作準(zhǔn)備3引導(dǎo)訓(xùn)練任務(wù)導(dǎo)航01任務(wù)導(dǎo)航

任務(wù)目標(biāo)思政目標(biāo)03滲透中國傳統(tǒng)文化、滲透社會(huì)主義先進(jìn)文化教育、滲透生態(tài)文明教育、紅色文化教育。能力目標(biāo)02能靈活運(yùn)用整本教程所學(xué)知識(shí)和技能到本次綜合案例和小組作業(yè)防疫抗疫、紅色教育、綠水青山主題網(wǎng)頁中知識(shí)目標(biāo)01應(yīng)用DIV+CSS設(shè)計(jì)網(wǎng)頁的布局結(jié)構(gòu)、掌握表單的焦點(diǎn)事件、將多個(gè)網(wǎng)頁整合為一個(gè)完整的網(wǎng)站。任務(wù)導(dǎo)航

重點(diǎn)難點(diǎn)教學(xué)重點(diǎn)難點(diǎn)：1、使用DIV+CSS設(shè)計(jì)網(wǎng)頁的布局結(jié)構(gòu)

2、使用Javascript實(shí)現(xiàn)表單交互功能3、將多個(gè)網(wǎng)頁整合為一個(gè)完整的網(wǎng)站02操作準(zhǔn)備操作準(zhǔn)備操作準(zhǔn)備步驟1準(zhǔn)備所需的圖片、音頻、視頻等素材01步驟3創(chuàng)建本地站點(diǎn)03步驟2啟動(dòng)HBuilderX0203引導(dǎo)訓(xùn)練引導(dǎo)訓(xùn)練

項(xiàng)目描述紅色文化蘊(yùn)涵了黨在長期領(lǐng)導(dǎo)中國革命與建設(shè)的偉大實(shí)踐中所創(chuàng)造和積累的豐富歷史經(jīng)驗(yàn)，包括重要革命紀(jì)念地、紀(jì)念物、標(biāo)志物及其所承載的革命歷史、革命精神等，其中包含的革命歷史、革命傳統(tǒng)精神和黨的理想信念等都是我們學(xué)習(xí)紅色文化的獨(dú)特資源。引導(dǎo)訓(xùn)練

項(xiàng)目描述本次紅色文化網(wǎng)，旨在綜合運(yùn)用多方面的知識(shí)和技能來設(shè)計(jì)與制作網(wǎng)站，詳細(xì)講述網(wǎng)站的主體布局結(jié)構(gòu)和局部布局結(jié)構(gòu)的設(shè)計(jì)過程。運(yùn)用Div+CSS布局網(wǎng)頁，該網(wǎng)頁中包含多種網(wǎng)頁元素；文字、圖像、導(dǎo)航欄、表單、視頻等，展示這些頁面元素的綜合運(yùn)用效果。引導(dǎo)訓(xùn)練

項(xiàng)目分析網(wǎng)站首頁整體可以劃分為以下幾個(gè)部分：頭部、導(dǎo)航欄、通知公告欄、主體內(nèi)容（可劃分為左右兩大部分）、網(wǎng)站尾部?？筛鶕?jù)劃分，逐步實(shí)現(xiàn)HTML結(jié)構(gòu)，并通過CSS去調(diào)整樣式和布局；主頁整體樣式可通過body標(biāo)簽來設(shè)置。引導(dǎo)訓(xùn)練

項(xiàng)目實(shí)施Step01

在HBulider中建立一個(gè)本地站點(diǎn)，并將所需圖片資源存放在images文件夾下;引導(dǎo)訓(xùn)練

項(xiàng)目實(shí)施

網(wǎng)站頭部、導(dǎo)航欄以及通知公告欄的HTML代碼如下：Step02引導(dǎo)訓(xùn)練

項(xiàng)目實(shí)施網(wǎng)站主體中的左部分HTML代碼如下：網(wǎng)站右部分的代碼，大家把前面所學(xué)的情景案例插入在右部分中，每插入一個(gè)案例，要新建一個(gè)頁面，這樣可以做多個(gè)頁面，并通過導(dǎo)航實(shí)現(xiàn)跳轉(zhuǎn)不同頁面上。Step03引導(dǎo)訓(xùn)練

項(xiàng)目實(shí)施Step04

網(wǎng)站尾部HTML代碼如下：引導(dǎo)訓(xùn)練

項(xiàng)目實(shí)施Step05

設(shè)置首頁字體及背景引導(dǎo)訓(xùn)練

項(xiàng)目實(shí)施Step06設(shè)置頭部div的樣式；設(shè)置a標(biāo)簽的樣式引導(dǎo)訓(xùn)練

項(xiàng)目實(shí)施Step07設(shè)置導(dǎo)航欄div的樣式；設(shè)置導(dǎo)航欄列表的樣式引導(dǎo)訓(xùn)練

項(xiàng)目實(shí)施Step08設(shè)置導(dǎo)航欄中a標(biāo)簽的樣式引導(dǎo)訓(xùn)練

項(xiàng)目實(shí)施Step09設(shè)置通知公告欄的樣式引導(dǎo)訓(xùn)練

項(xiàng)目實(shí)施Step10設(shè)置主體左部分的樣式；及左部標(biāo)題的樣式引導(dǎo)訓(xùn)練

項(xiàng)目實(shí)施Step11設(shè)置主體左部分的列表樣式引導(dǎo)訓(xùn)練

項(xiàng)目實(shí)施Step12

設(shè)置首頁尾部的樣式最終效果最終效果引導(dǎo)訓(xùn)練

課后提升課后A制作“防疫抗疫”