JavaScriptCSSHTMLHTMLCSS網(wǎng)頁(yè)設(shè)計(jì)與制作情景案例授課教師：胡文利目錄CONTENTS案例分析思政育人知識(shí)導(dǎo)圖案例操練12345創(chuàng)新拓展案例分析01案例分析

01如何使用圖片標(biāo)簽在網(wǎng)頁(yè)中正確的插入圖片？

02如何通過(guò)設(shè)置圖片的屬性，調(diào)整圖片的大小？

03如何設(shè)置鼠標(biāo)懸浮在圖片上，能顯示提示文字？那么，我們?nèi)绾螌?shí)現(xiàn)一個(gè)中國(guó)古代科技文化成就網(wǎng)頁(yè)面呢，我們先思考幾個(gè)問(wèn)題：案例分析中國(guó)古代科技文化成就案例分析案例知識(shí)要點(diǎn)文本控制標(biāo)簽：段落標(biāo)簽、格式化標(biāo)簽、列表標(biāo)簽圖像標(biāo)簽及屬性設(shè)置路徑的正確表示方法案例學(xué)習(xí)目標(biāo)能夠熟練建立站點(diǎn)能夠熟練使用文本控制標(biāo)簽、列表標(biāo)簽?zāi)軌蛘_使用圖像標(biāo)簽在網(wǎng)頁(yè)中插入圖像02思政育人思政育人通過(guò)對(duì)中國(guó)古代科技文化成就介紹頁(yè)面的設(shè)計(jì)，靈活運(yùn)用圖像標(biāo)簽及屬性設(shè)置的知識(shí)，學(xué)以致用，在具體實(shí)現(xiàn)過(guò)程中，選擇有代表性的中國(guó)古代科技文化作為素材，引起學(xué)生的學(xué)習(xí)興趣，同時(shí)，網(wǎng)頁(yè)整體設(shè)計(jì)主題要突出，內(nèi)容要豐富，能給人留下深刻印象。另外，也可以通過(guò)下發(fā)課后任務(wù)的方式，讓學(xué)生自己搜集其他古代科技文化成就或者現(xiàn)代科技文化成就的素材，制作相關(guān)網(wǎng)頁(yè)，培養(yǎng)學(xué)生搜集信息的能力及對(duì)科技文化的探索創(chuàng)新能力。03知識(shí)導(dǎo)圖案例探究本次案例所需要的知識(shí)線路圖頁(yè)面設(shè)計(jì)思路1、確定網(wǎng)頁(yè)主題

我們的知識(shí)、智慧、創(chuàng)造力并不是一生下來(lái)就有的本能，而是在學(xué)習(xí)過(guò)去人們的科技智慧的基礎(chǔ)上形成的。中國(guó)古代科技文明是一個(gè)系列的整體，通過(guò)教育讓學(xué)生了解這一文明，繼承這一文明。這對(duì)學(xué)生的創(chuàng)新能力將有及大的幫助。2、準(zhǔn)備素材：搜集中國(guó)古代科技文化成就相關(guān)文本、圖片3、確定圖片的路徑、大小、寬高，文本的內(nèi)容、段落、格式4、確定頁(yè)面風(fēng)格，編碼實(shí)現(xiàn)5、測(cè)試運(yùn)行04案例操練案例實(shí)施

開(kāi)發(fā)工具“HBuilderX”，選擇“文件”------>“新建”------>“項(xiàng)目”，打開(kāi)如下圖所示對(duì)話框：Step01命名好相應(yīng)的項(xiàng)目名稱(chēng)后，選擇基本的HTML項(xiàng)目，點(diǎn)擊創(chuàng)建，即可完成項(xiàng)目的創(chuàng)建。創(chuàng)建項(xiàng)目案例實(shí)施

將課前搜集好的圖片素材，復(fù)制粘貼到新建項(xiàng)目的“img”文件夾中，如下圖所示Step02案例實(shí)施

插入二級(jí)標(biāo)題<h2>，標(biāo)題文字為“中國(guó)古代科技文化成就介紹”，并設(shè)置標(biāo)題對(duì)齊屬性值為居中；接著使用圖片標(biāo)簽將圖片“top.png”插入到網(wǎng)頁(yè)中，注意圖片標(biāo)簽的屬性設(shè)置，并使用水平線標(biāo)簽進(jìn)行美化，代碼如下圖所示：Step03案例實(shí)施

運(yùn)行效果圖如所示：Step03案例實(shí)施

在第三步的水平線標(biāo)簽后面，添加兩個(gè)段落標(biāo)簽和一個(gè)水平線標(biāo)簽，代碼如圖所示：Step04CSS代碼圖案例實(shí)施

運(yùn)行效果如圖所示：Step04案例實(shí)施

接下來(lái)需要插入四張圖片，可以把這四張圖片放在<p>標(biāo)簽里面，通過(guò)設(shè)置p標(biāo)簽對(duì)齊屬性，使得插入的四張圖片居中，也可以把四張圖片放在<marquee>標(biāo)簽里面，實(shí)現(xiàn)圖片的滾動(dòng)效果，代碼如下圖所示：Step05案例實(shí)施

運(yùn)行效果如下圖所示：Step05案例實(shí)施

接下來(lái)插入一個(gè)三級(jí)標(biāo)題標(biāo)簽，并輸入文字，然后使用組合標(biāo)簽<details>和<summary>，實(shí)現(xiàn)信息的折疊和展開(kāi)（該組合標(biāo)簽介紹參考本案例步驟的結(jié)束位置），依次寫(xiě)四個(gè)<li>標(biāo)簽，將四大發(fā)明內(nèi)容補(bǔ)全，代碼如圖所示：Step06案例實(shí)施

運(yùn)行效果如圖所示：Step06案例實(shí)施

接下來(lái)，按照步驟六的方法，依次編寫(xiě)其他科技文化成就。最終效果圖如下圖所示：Step07案例實(shí)施

寫(xiě)好后保存，選擇“運(yùn)行”，最終效果圖如下圖所示：Step0705創(chuàng)新拓展任務(wù)拓展根據(jù)課中已完成的案例，靈活運(yùn)用已掌握的知識(shí)點(diǎn)，發(fā)散思維，使用文本和圖像，制作一個(gè)以科技強(qiáng)國(guó)為主題圖文混排的頁(yè)面。可根據(jù)自己的實(shí)踐經(jīng)歷，比如自己所知道的科技成就，或者自己參觀的科技館等，善于發(fā)現(xiàn)案例，制作科技強(qiáng)國(guó)為主題的圖文混排頁(yè)面。通過(guò)思政素材搜集及專(zhuān)業(yè)知識(shí)訓(xùn)練，可以加強(qiáng)學(xué)生科技意識(shí)教育