《web前端技術(shù)》(趙敏)003-0教案 第5課 超鏈接、表格_第1頁(yè)
《web前端技術(shù)》(趙敏)003-0教案 第5課 超鏈接、表格_第2頁(yè)
《web前端技術(shù)》(趙敏)003-0教案 第5課 超鏈接、表格_第3頁(yè)
《web前端技術(shù)》(趙敏)003-0教案 第5課 超鏈接、表格_第4頁(yè)
《web前端技術(shù)》(趙敏)003-0教案 第5課 超鏈接、表格_第5頁(yè)
已閱讀5頁(yè)，還剩2頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

PAGE7PAGE7PAGE6PAGE6

課題第5課超鏈接、表格課時(shí)2課時(shí)（90min）教學(xué)目標(biāo)知識(shí)技能目標(biāo)：（1）掌握超鏈接標(biāo)簽的使用方法，熟悉不同類型的超鏈接（2）掌握表格標(biāo)簽的使用方法，熟悉表格的常用屬性素質(zhì)目標(biāo)：（1）增加知識(shí)儲(chǔ)備，規(guī)范編碼習(xí)慣，提升職業(yè)素養(yǎng)（2）鍛煉思維方式，加強(qiáng)實(shí)踐練習(xí)，提升專業(yè)技能教學(xué)重難點(diǎn)教學(xué)重點(diǎn)：超鏈接標(biāo)簽、表格標(biāo)簽的使用方法；教學(xué)難點(diǎn)：表格的常用屬性教學(xué)方法問(wèn)答法、討論法、講授法、實(shí)踐練習(xí)法、演示法教學(xué)用具電腦、投影儀、多媒體課件、教材、文旌課堂教學(xué)設(shè)計(jì)第1節(jié)課：→→→傳授新知（25min）→實(shí)戰(zhàn)演練（15min）→第2節(jié)課：→傳授新知（23min）→實(shí)戰(zhàn)演練（15min）→課堂小結(jié)（3min）→教學(xué)反思（2min）教學(xué)過(guò)程主要教學(xué)內(nèi)容及步驟設(shè)計(jì)意圖第一節(jié)課課前任務(wù)【教師】布置課前任務(wù)，將課程素材放到文旌課堂APP或其他學(xué)習(xí)軟件，和學(xué)生負(fù)責(zé)人取得聯(lián)系，把學(xué)生分為5個(gè)隊(duì)，讓其提醒同學(xué)下載素材，提前預(yù)習(xí)第4.1超鏈接課程，每個(gè)隊(duì)負(fù)責(zé)一個(gè)模塊（圖像鏈接、下載鏈接、錨點(diǎn)鏈接、電子郵件鏈接、圖像熱點(diǎn)鏈接），每個(gè)隊(duì)抽人上課進(jìn)行講解【學(xué)生】完成課前任務(wù)通過(guò)課前任務(wù)，分隊(duì)伍布置任務(wù)，增加學(xué)生的團(tuán)隊(duì)精神，以任務(wù)驅(qū)動(dòng)法，激發(fā)學(xué)生的內(nèi)在學(xué)習(xí)動(dòng)力考勤（2min）【教師】使用文旌課堂APP進(jìn)行簽到【學(xué)生】按照老師要求簽到培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況問(wèn)題導(dǎo)入（3min）【教師】提出問(wèn)題超鏈接的全稱為超文本鏈接，是HTML5提供的一個(gè)強(qiáng)大且有價(jià)值的功能，也是實(shí)現(xiàn)網(wǎng)站功能必不可少的元素。一個(gè)網(wǎng)站含有許多頁(yè)面，使用超鏈接可以實(shí)現(xiàn)從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面，或從頁(yè)面的一個(gè)位置跳轉(zhuǎn)到另一個(gè)位置。同學(xué)們知道怎么在網(wǎng)頁(yè)上設(shè)置超鏈接么？超鏈接有哪些類型？【學(xué)生】思考、舉手回答【教師】通過(guò)學(xué)生的回答引入要講的知識(shí)通過(guò)問(wèn)題導(dǎo)入的方法，引導(dǎo)學(xué)生主動(dòng)思考，激發(fā)學(xué)生的學(xué)習(xí)興趣傳授新知（25min）4.1超鏈接4.1.1超鏈接標(biāo)簽【教師】講解超鏈接標(biāo)簽的使用方法，并通過(guò)案例演示效果在HTML5中，使用<a>標(biāo)簽標(biāo)記超鏈接，具體格式為：……（詳見(jiàn)教材）【課堂拓展】<a>標(biāo)簽必須設(shè)置href屬性，如果暫時(shí)還未確定鏈接的目標(biāo)地址，可以將該屬性值設(shè)置為#（如href="#"），……（詳見(jiàn)教材）除了href屬性外，<a>標(biāo)簽還有一個(gè)常用的屬性target，……（詳見(jiàn)教材）【例4-1】設(shè)置超鏈接并使用不同的方式打開(kāi)目標(biāo)資源……（詳見(jiàn)教材）<a>標(biāo)簽中的載體可以是文本、圖像或內(nèi)容塊等，但不能是其他鏈接、音頻、視頻等交互式內(nèi)容。<a>標(biāo)簽中的載體可以是文本、圖像或內(nèi)容塊等，但不能是其他鏈接、音頻、視頻等交互式內(nèi)容。【例4-2】以內(nèi)容塊為載體設(shè)置超鏈接……（詳見(jiàn)教材）【學(xué)生】聆聽(tīng)、記錄、理解、觀看效果4.1.2常見(jiàn)超鏈接類型【教師】讓每個(gè)隊(duì)推選一個(gè)同學(xué)上臺(tái)進(jìn)行講解和演示，讓學(xué)生通過(guò)講解案例引入圖像鏈接、下載鏈接、錨點(diǎn)鏈接、電子郵件鏈接和圖像熱點(diǎn)鏈接的標(biāo)簽的概念講解，之后老師進(jìn)行補(bǔ)充和點(diǎn)評(píng)超鏈接除了可以鏈接到網(wǎng)頁(yè)外，還可以鏈接到其他目標(biāo)資源。因此，除了網(wǎng)頁(yè)鏈接外，常見(jiàn)的超鏈接類型還有圖像鏈接、下載鏈接、錨點(diǎn)鏈接、電子郵件鏈接和圖像熱點(diǎn)鏈接等。1．圖像鏈接圖像鏈接是指鏈接到圖像文件的超鏈接，即href屬性值為圖像文件路徑，如href="img/p2.jpg"，鼠標(biāo)單擊圖像鏈接后可在瀏覽器中全屏查看所鏈接的圖像文件?！纠?-3】設(shè)置圖像鏈接……（詳見(jiàn)教材）2．下載鏈接下載鏈接是指可以將鏈接的文件下載至本地計(jì)算機(jī)的超鏈接。若鏈接的文件不能被瀏覽器解析（如壓縮文件），則只需將href屬性值設(shè)置為鏈接文件的路徑，如href="img/test.zip"，……（詳見(jiàn)教材）【例4-4】設(shè)置下載鏈接……（詳見(jiàn)教材）【課堂拓展】在瀏覽器中直接打開(kāi)本地網(wǎng)頁(yè)文件無(wú)法查看含有download屬性的下載鏈接效果，需要使用HBuliderX以本地網(wǎng)站的形式打開(kāi)網(wǎng)頁(yè)文件，才能查看該下載鏈接的效果。需要注意的是，目前僅Chrome瀏覽器與火狐瀏覽器支持download屬性。3．錨點(diǎn)鏈接錨點(diǎn)鏈接是指向同一頁(yè)面或其他頁(yè)面中特定元素的鏈接。例如，可以在篇幅較長(zhǎng)的網(wǎng)頁(yè)底部設(shè)置一個(gè)返回頂部的錨點(diǎn)鏈接，用戶單擊該鏈接可以快速跳轉(zhuǎn)到網(wǎng)頁(yè)頂部，從而減少移動(dòng)滾動(dòng)條的麻煩。在網(wǎng)頁(yè)中添加錨點(diǎn)鏈接需要執(zhí)行兩步操作。創(chuàng)建錨點(diǎn)……（詳見(jiàn)教材）添加鏈接……（詳見(jiàn)教材）【例4-5】制作分類相冊(cè)……（詳見(jiàn)教材）【課堂拓展】為了更好地展示頁(yè)面效果，本例在<head>標(biāo)簽中添加了<styletype="text/css">…</style>標(biāo)簽，并在其中輸入代碼img{width:500px;height:300px;}，統(tǒng)一設(shè)置HTML文檔中圖像元素的寬度與高度。4．電子郵件鏈接使用電子郵件鏈接可以打開(kāi)瀏覽器默認(rèn)的電子郵件應(yīng)用程序，收件人的郵件地址由電子郵件鏈接指定，無(wú)須手動(dòng)輸入。電子郵件鏈接的href屬性值為……（詳見(jiàn)教材）【例4-6】設(shè)置電子郵件鏈接……（詳見(jiàn)教材）5．圖像熱點(diǎn)鏈接圖像熱點(diǎn)鏈接是指在圖像上創(chuàng)建多個(gè)熱點(diǎn)區(qū)域并分別為這些區(qū)域設(shè)置不同的超鏈接，鼠標(biāo)單擊熱點(diǎn)區(qū)域后可跳轉(zhuǎn)到不同的目標(biāo)資源。使用這種方法可以為圖像的局部區(qū)域設(shè)置鏈接，或根據(jù)需要為一個(gè)圖像設(shè)置多個(gè)鏈接。制作圖像熱點(diǎn)鏈接一般需要執(zhí)行3步操作。……（詳見(jiàn)教材）【例4-7】設(shè)置圖像熱點(diǎn)鏈接……（詳見(jiàn)教材）【學(xué)生】上臺(tái)講解、討論、聆聽(tīng)、記錄、理解、觀看效果通過(guò)翻轉(zhuǎn)課堂的形式，調(diào)動(dòng)學(xué)生學(xué)習(xí)的積極性，活躍課堂氛圍，鍛煉學(xué)生的表達(dá)能力，更好的掌握超鏈接標(biāo)簽的使用方法實(shí)戰(zhàn)演練（15min）制作“金企鵝教育”網(wǎng)站主頁(yè)的導(dǎo)航欄【教師】介紹制作“金企鵝教育”網(wǎng)站主頁(yè)的導(dǎo)航欄項(xiàng)目的重點(diǎn)部分和容易出錯(cuò)的地方并演示，要求學(xué)生制作該項(xiàng)目，遇到不會(huì)的問(wèn)題可以掃描微課二維碼觀看視頻”制作“金企鵝教育”網(wǎng)站主頁(yè)的導(dǎo)航欄“（詳見(jiàn)教材），可以互相討論或詢問(wèn)老師“金企鵝教育”網(wǎng)站主頁(yè)的導(dǎo)航欄用于連接網(wǎng)站其他頁(yè)面，下面使用無(wú)序列表和超鏈接制作導(dǎo)航欄。步驟1在HBuilderX中導(dǎo)入本書配套素材“素材與案例\第4章\實(shí)戰(zhàn)演練\4.1\JinqieProject”文件夾，然后打開(kāi)“index.html”文檔。步驟2添加導(dǎo)航欄列表。使用無(wú)序列表在“index.html”文檔中表示導(dǎo)航欄區(qū)塊的<navid="index_nav">…</nav>標(biāo)簽中的<imgclass="flnav_logo"src="img/logo_1.png"/>標(biāo)簽下面添加導(dǎo)航欄列表，代碼如下：……（詳見(jiàn)教材）步驟3為導(dǎo)航欄列表添加超鏈接。使用<a>標(biāo)簽為導(dǎo)航欄中的列表項(xiàng)添加超鏈接，……（詳見(jiàn)教材）步驟4鏈接CSS樣式表文件。在標(biāo)簽<head>…</head>中添加以下代碼，鏈接CSS樣式表文件“index.css”，……（詳見(jiàn)教材）制作項(xiàng)目、觀看微課、討論通過(guò)制作“金企鵝教育”網(wǎng)站主頁(yè)的導(dǎo)航欄，使學(xué)生鞏固所學(xué)知識(shí)，鍛煉動(dòng)手操作能力第二節(jié)課效果導(dǎo)入（2min）【教師】通過(guò)展示多個(gè)有豐富表格的網(wǎng)頁(yè)，引入新課在人們的日常工作和生活中，表格是用來(lái)組織和管理數(shù)據(jù)的重要工具，其應(yīng)用形式多種多樣，如日歷表、課程表、工資表等。在網(wǎng)頁(yè)中，表格同樣扮演著重要的角色，使用它可以清晰直觀地展示各種數(shù)據(jù)與信息?！緦W(xué)生】觀看效果、聆聽(tīng)、理解通過(guò)效果展示的方法，直觀地展現(xiàn)有表格的網(wǎng)頁(yè)，引起學(xué)生學(xué)習(xí)興趣，引出新課傳授新知（20min）4.2表格4.2.1表格的基本結(jié)構(gòu)【教師】講解表格的基本結(jié)構(gòu)，并演示例子表格由行和列組成，它們的交點(diǎn)稱為單元格，……（詳見(jiàn)教材）在HTML5中，可以使用標(biāo)簽<table>、<tr>和<td>標(biāo)記一個(gè)最基本的表格結(jié)構(gòu)。其中，<table>用于標(biāo)記表格，<tr>用于標(biāo)記表格的行，<td>用于標(biāo)記表格行中的單元格，具體格式為：……（詳見(jiàn)教材）在單元格中可以添加文本、圖像等元素。默認(rèn)情況下，單元格中的文本左對(duì)齊顯示，單元格的寬度根據(jù)文本長(zhǎng)度自動(dòng)調(diào)節(jié)。1.表頭表頭是對(duì)一組數(shù)據(jù)的概括或解釋，表頭信息可以方便用戶理解表格數(shù)據(jù)的含義，提高網(wǎng)頁(yè)的可讀性。在HTML5中，使用<th>標(biāo)簽標(biāo)記表頭單元格，具體格式為：……（詳見(jiàn)教材）【課堂拓展】為了更好地展示頁(yè)面效果，本例在<head>標(biāo)簽中添加了<styletype="text/css">…</style>標(biāo)簽，并在其中輸入代碼img{width:500px;height:300px;}，統(tǒng)一設(shè)置HTML文檔中圖像元素的寬度與高度。2．標(biāo)題標(biāo)題就是表格的名稱，用于表明表格要表達(dá)的內(nèi)容。在HTML5中，使用<caption>標(biāo)簽標(biāo)記表格標(biāo)題，具體格式為：……（詳見(jiàn)教材）【例4-8】制作電影佳作推薦表（以下提供部分代碼），頁(yè)面效果如圖……（詳見(jiàn)教材）【學(xué)生】觀看效果、聆聽(tīng)、記錄、理解4.2.2表格分組【教師】講解表格分組的兩種方式，并演示例子在實(shí)際應(yīng)用中，可以根據(jù)需要將表格按行或列進(jìn)行分組。1．按行分組……（詳見(jiàn)教材）【例4-9】制作第一季度工資單（以下提供部分代碼），頁(yè)面效果如圖4-12所示?！ㄔ斠?jiàn)教材）2．按列分組當(dāng)需要單獨(dú)設(shè)置表格中某一列或多列的樣式時(shí)，可以將表格按列分組。在HTML5中，使用<col>標(biāo)簽對(duì)列進(jìn)行分組，該標(biāo)簽必須包含在<table>標(biāo)簽中?！菊n堂拓展】HTML5中還有一個(gè)與<col>標(biāo)簽功能相似的<colgroup>標(biāo)簽，它與<col>標(biāo)簽的用法基本相同，<col>標(biāo)簽可放在該標(biāo)簽中。目前只能為這兩種標(biāo)簽設(shè)置寬度和背景顏色兩種樣式。【例4-10】制作高中課程表，利用<col>標(biāo)簽為表的多個(gè)列設(shè)置樣式，……（詳見(jiàn)教材）【課堂拓展】<col>標(biāo)簽是只包含屬性的空標(biāo)簽，如需創(chuàng)建列，必須在<tr>標(biāo)簽中創(chuàng)建<td>標(biāo)簽?！ㄔ斠?jiàn)教材）【學(xué)生】回答、聆聽(tīng)、記錄、理解4.2.3表格常用屬性【教師】講解設(shè)置表格的整體邊框、單元格內(nèi)外邊框、表格內(nèi)外邊框，以及單元格跨行、跨列顯示等常用屬性，并演示案例1．整體邊框與單元格內(nèi)外邊距在HTML5中，使用<table>標(biāo)簽的border屬性設(shè)置表格的整體邊框，其屬性值為數(shù)值（省略其單位“px”）?！纠?-11】制作第二季度工資單，使用<table>標(biāo)簽的border屬性設(shè)置表格的整體邊框……（詳見(jiàn)教材）在<table>標(biāo)簽中，使用cellpadding和cellspacing屬性設(shè)置單元格的內(nèi)外邊距，屬性值為數(shù)值（省略其單位“px”）?！ㄔ斠?jiàn)教材）【課堂拓展】設(shè)置單元格內(nèi)外邊距時(shí)，一般不直接使用cellpadding和cellspacing屬性，而是在CSS3樣式表中使用padding和border-spacing屬性2．表格內(nèi)外邊框在HTML5中，使用<table>標(biāo)簽的rules屬性設(shè)置表格的內(nèi)邊框，……（詳見(jiàn)教材）在HTML5中，使用<table>標(biāo)簽的frame屬性設(shè)置表格的外邊框，……（詳見(jiàn)教材）【例4-12】制作第三季度工資單，設(shè)置表格的內(nèi)外邊框，制作特殊的邊框線效果，……（詳見(jiàn)教材）3．單元格跨行、跨列顯示<th>與<td>都是表示單元格的標(biāo)簽，設(shè)置它們的rowspan或colspan屬性可以使單元格跨行或跨列顯示，這兩個(gè)屬性的屬性值為跨行或跨列的個(gè)數(shù)?！纠?-13】制作完整的高中課程表（以下提供部分代碼），……（詳見(jiàn)教材）【學(xué)生】觀看效果、聆聽(tīng)、記錄、理解通過(guò)講解和課堂互動(dòng)，使學(xué)生掌握表格的基本結(jié)構(gòu)和表格分組方式、表格常用屬性實(shí)戰(zhàn)演練（15min）制作“云課堂”頁(yè)面的“精品課程”模塊【教師】要求學(xué)生制作“云課堂”頁(yè)面的“精品課程”模塊，遇到不會(huì)的問(wèn)題可以掃描微課二維碼觀看視頻”制作“云課堂”頁(yè)面的“精品課程”模塊“（詳見(jiàn)教材）或可詢問(wèn)教師，教師進(jìn)行答疑解惑，同時(shí)安排每組做得最快、最好的學(xué)生輔導(dǎo)其他學(xué)生進(jìn)行操作，并解答其遇到的問(wèn)題“云課堂”頁(yè)面的“精品課程”模塊用于展示金企鵝教育平臺(tái)提供的在線課程，下面使用表格實(shí)現(xiàn)該模塊的內(nèi)容。步驟1在HBuilderX中導(dǎo)入本書配套素材“素材與案例\第4章\實(shí)戰(zhàn)演練\4.2\JinqieProject”文件夾，然后打開(kāi)“course.html”文檔。步驟2添加精品課程表格。在“course.html”文檔表示精品課程區(qū)塊的<sectionclass="main_course">…</section>標(biāo)簽中的<divclass="course_title">…</div>標(biāo)簽下面添加精品課程表格，代碼如下：……（詳見(jiàn)教材）步驟3鏈接CSS樣式表文件。在標(biāo)簽<head>…</head>中添加代碼，鏈接CSS樣式表文件“index.css”和“course.css”，代碼如下：……（詳見(jiàn)教材）【課堂拓展】由于“云課堂”頁(yè)面中的部分模塊和“金企鵝教育”主頁(yè)中的相同，所以在制作“云課堂”頁(yè)面時(shí)，可以直接鏈接樣式文件index.css設(shè)置這些模塊的樣式。通過(guò)制作“云課堂”頁(yè)面的“精品課程”模塊，使學(xué)生鞏固所學(xué)知識(shí)，鍛煉動(dòng)手操作能力實(shí)戰(zhàn)拓展（8min）【教師】每個(gè)隊(duì)伍繼續(xù)制作自己項(xiàng)目，要求加上超鏈接和表格部

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論