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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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