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

網(wǎng)頁(yè)設(shè)計(jì)與制作課中案例授課教師：陳璇JavaScriptCSSHTMLHTML目錄CONTENTS12學(xué)習(xí)目標(biāo)知識(shí)講解學(xué)習(xí)目標(biāo)01案例學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)01能夠熟練建立站點(diǎn)學(xué)習(xí)目標(biāo)02能夠熟練使用文本鏈接、圖片鏈接等02知識(shí)點(diǎn)講解案例知識(shí)要點(diǎn)優(yōu)美環(huán)境清新空氣干凈飲水安全食品綠水青山金山銀山案例知識(shí)要點(diǎn)01引導(dǎo)學(xué)生就樹(shù)立起環(huán)境保護(hù)的良好意識(shí)02從身邊點(diǎn)點(diǎn)滴滴的小事做起，努力做一個(gè)愛(ài)護(hù)環(huán)境，保護(hù)生態(tài)的四有青年案例設(shè)計(jì)思路三山五岳為素材操作步驟操作步驟01打開(kāi)開(kāi)發(fā)工具“HBuilderX”，選擇“文件”------>“新建”------>“項(xiàng)目”，打開(kāi)如下圖5.13所示對(duì)話框：寫(xiě)好相應(yīng)的項(xiàng)目名稱后，選擇基本的HTML項(xiàng)目，點(diǎn)擊創(chuàng)建，即可完成項(xiàng)目的創(chuàng)建。操作步驟操作步驟02將課前搜集好的圖片素材，復(fù)制粘貼到新建項(xiàng)目的“img”文件夾中，如下圖5.10所示操作步驟操作步驟03首先制作導(dǎo)航欄，第一個(gè)頁(yè)面的導(dǎo)航欄可以通過(guò)插入一行三列的表格實(shí)現(xiàn)，每個(gè)單元格的內(nèi)容要實(shí)現(xiàn)錨點(diǎn)效果，代碼如下所示：操作步驟操作步驟03操作步驟操作步驟03注意：代碼中a標(biāo)簽的style屬性取值是什么意思？運(yùn)行效果如下圖5.11所示：圖5.11效果圖操作步驟操作步驟04接下來(lái)插入一個(gè)三行兩列的表格，注意表格的整體寬度和導(dǎo)航的表格寬度設(shè)置一樣寬，圖片的寬度設(shè)置為295像素，可以加入水平線進(jìn)行單元格的美化。操作步驟操作步驟04操作步驟操作步驟04操作步驟操作步驟045.12最終效果圖操作步驟操作步驟05第二個(gè)頁(yè)面同第一個(gè)頁(yè)面的實(shí)現(xiàn)方法，最終效果圖如圖5.13。5.13第二個(gè)頁(yè)面效果圖課堂實(shí)戰(zhàn)整理課前收集的素材，根據(jù)課中的案例步驟，利用已掌握的知識(shí)點(diǎn)，進(jìn)行課堂實(shí)戰(zhàn)演練，并通過(guò)相應(yīng)平臺(tái)提交成品。