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

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

01如何使用表格進(jìn)行排版

02如何在表格中插入圖片使頁面更加美觀那么，我們?nèi)绾螌?shí)現(xiàn)一個(gè)歷史人物故事網(wǎng)頁面呢，首先我們先思考幾個(gè)問題：案例分析歷史人物故事網(wǎng)案例分析案例學(xué)習(xí)目標(biāo)能夠熟練建立站點(diǎn)能夠了解并熟練使用表格。案例知識要點(diǎn)表格標(biāo)簽及屬性設(shè)置表格的布局02思政育人少年興則國興，少年強(qiáng)則國強(qiáng)當(dāng)代大學(xué)生是建設(shè)祖國的強(qiáng)大力量，要適應(yīng)時(shí)代的開展要求，努力學(xué)習(xí)先進(jìn)的科學(xué)文化知識，正確的認(rèn)識祖國的歷史和現(xiàn)實(shí)。增強(qiáng)愛國的情感和振興祖國的職責(zé)感，樹立民族自尊心和自信心，弘揚(yáng)偉大的中華民族精神，高舉愛國主義旗幟，銳意進(jìn)取，自強(qiáng)不息，艱苦奮斗，頑強(qiáng)拼搏，真正的把愛國之志變成愛國之行。思政育人通過對歷史人物故事頁面的設(shè)計(jì)，靈活運(yùn)用表格標(biāo)簽及屬性設(shè)置的知識，學(xué)以致用，在具體實(shí)現(xiàn)過程中，選擇有代表性的部分歷史愛國名人作為素材，引起學(xué)生的學(xué)習(xí)興趣，同時(shí)，網(wǎng)頁整體設(shè)計(jì)主題要突出，內(nèi)容要豐富，能給人留下深刻印象。使學(xué)生更加有動力去完成網(wǎng)頁的設(shè)計(jì)與制作，培養(yǎng)學(xué)生的不屈不饒的中華民族精神。確定網(wǎng)頁主題設(shè)計(jì)思路本次歷史人物故事網(wǎng)的制作，旨在通過歷史愛國名人事跡，喚起學(xué)生的家國情懷、社會責(zé)任感和理想信念。準(zhǔn)備素材：搜集中國古代科技文化成就相關(guān)文本、圖片；確定表格的寬度、行列等設(shè)置，圖片的路徑、大小、寬高；確定頁面風(fēng)格，編碼實(shí)現(xiàn)；測試運(yùn)行03知識導(dǎo)圖案例探究本次案例所需要的知識線路圖04案例操練案例實(shí)施

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

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

插入一個(gè)4行4列的表格，并設(shè)置表格屬性及表格標(biāo)題，代碼如下所示。代碼如下圖所示：Step03<tableborder="1“align=“center"cellpadding="0"cellspacing="0"><caption>歷史人物故事</caption><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr>

<tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr></table>案例實(shí)施

先完成第一行，將第一行的4個(gè)單元格作為標(biāo)題，將其<td>改成<th>，并設(shè)置第一行的背景顏色屬性，最后將準(zhǔn)備好的文本復(fù)制到每個(gè)標(biāo)題單元格內(nèi)，代碼如圖所示：Step04

CSS代碼圖

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

接下來完成第二行，在第二行的每個(gè)單元格中插入圖片，注意對應(yīng)第一行的人物。代碼如下圖所示：Step05

代碼圖

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

接下來，第三行對應(yīng)第一行的人物，寫上相應(yīng)的詩句，代碼如圖所示：Step06最終效果圖如下圖所示：案例實(shí)施

最后對應(yīng)第一行的人物，補(bǔ)全第四行的人物介紹，最終效果圖如圖所示。Step0705創(chuàng)新拓展任務(wù)拓展根據(jù)課中已完成的案例，靈活運(yùn)用已掌握的知識點(diǎn)，發(fā)散思維，使用表格進(jìn)行布局，制作一個(gè)以紅色教育、科技強(qiáng)國、綠水青山為主題的頁面?？筛鶕?jù)自己的實(shí)踐經(jīng)歷，比如自己所知道的科技成就、歷史人物故事、家鄉(xiāng)的生態(tài)文明史等，或者自己參觀過的科技館、革命歷史紀(jì)念館、祖國的大好河山等，善于發(fā)現(xiàn)案例，