網(wǎng)頁設(shè)計(jì)與制作（活頁式） 課件 情景2-4 課中案例

網(wǎng)頁設(shè)計(jì)與制作課中案例授課教師：劉磊JavaScriptCSSHTMLHTML目錄CONTENTS1案例分析2思政育人3知識(shí)導(dǎo)圖4案例操練5創(chuàng)新拓展案例分析01案例分析

隨著人們文化素質(zhì)的不斷提高和相關(guān)項(xiàng)目的不斷推進(jìn)，紅色旅游的市場規(guī)模日益擴(kuò)大。這種傳承文明、振奮精神、增加體驗(yàn)的旅游形式正在旅游市場上不斷升溫。紅色革命根據(jù)地是黨和國家紅色基因庫，今天我們需要實(shí)現(xiàn)的案例就是以“紅色革命根據(jù)地”為主題的純文本網(wǎng)頁。學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)01能夠熟練建立站點(diǎn)學(xué)習(xí)目標(biāo)02能夠熟練使用段落標(biāo)簽、水平線標(biāo)簽、標(biāo)題標(biāo)簽、換行標(biāo)簽學(xué)習(xí)目標(biāo)03能夠正確設(shè)置水平線屬性知識(shí)要點(diǎn)知識(shí)要點(diǎn)01段落標(biāo)簽、水平線標(biāo)簽、標(biāo)題標(biāo)簽、換行標(biāo)簽知識(shí)要點(diǎn)02水平線標(biāo)簽及屬性設(shè)置案例分析

01需要使用哪些標(biāo)簽？

02如何設(shè)置水平線標(biāo)簽的樣式？在制作網(wǎng)頁之前，請大家思考幾個(gè)問題：02思政育人思政育人

革命根據(jù)地是中國共產(chǎn)黨在十年內(nèi)戰(zhàn)時(shí)期、抗日戰(zhàn)爭和解放戰(zhàn)爭時(shí)期建立的“紅色政權(quán)”。中國共產(chǎn)黨人歷經(jīng)艱苦奮斗，根據(jù)地的“星星之火”終成“燎原之勢”，取得了抗日戰(zhàn)爭、解放戰(zhàn)爭的偉大勝利。

作為中國未來發(fā)展的新力軍,新一代青年大學(xué)生要堅(jiān)技先烈們艱黃奮頭的精神,要勇于承擔(dān)新一代的歷史使命，要努力使自己的人生價(jià)值符合社會(huì)的發(fā)展方向。艱苦奮斗勇?lián)姑?3知識(shí)導(dǎo)圖案例探究

本次案例所需要的知識(shí)線路圖：04案例操練案例實(shí)施

打開開發(fā)工具“HBuilderX”，選擇“文件”------>“新建”------>“項(xiàng)目”，打開如下圖所示對(duì)話框：Step01案例實(shí)施

在body標(biāo)簽中開始編寫代碼，注意代碼編寫要規(guī)范，統(tǒng)一小寫。插入一個(gè)標(biāo)題標(biāo)簽和一個(gè)段落標(biāo)簽，并設(shè)置標(biāo)題標(biāo)簽居中。Step02案例實(shí)施

接下來插入一個(gè)條水平線，并設(shè)置水平線的樣式，代碼如下：Step03案例實(shí)施

重復(fù)步驟2和3，添加多個(gè)標(biāo)題標(biāo)簽和段落標(biāo)簽、水平線標(biāo)簽，代碼如右圖：Step04案例實(shí)施

案例最終效果圖：Step0505創(chuàng)新拓展任務(wù)拓展根據(jù)課中已完成的案例方法，靈活運(yùn)用已掌握的知識(shí)點(diǎn)，發(fā)散思維，制作以紅色教育、科技強(qiáng)國、綠水青山、防疫抗疫為主題的頁面?？筛鶕?jù)自己的實(shí)踐經(jīng)歷，比如自己所知道的科技成就、歷史人物故事、家鄉(xiāng)的生態(tài)文明史，或者自己參觀的科技館、革命歷史紀(jì)念館、祖國的大好河山等，善于發(fā)現(xiàn)案例，制作以紅色教育、科技強(qiáng)