HTML CSS DIV網(wǎng)頁設(shè)計與布局（第3版）（微課版）-教案全套 劉小嬌 第1-15章 認識網(wǎng)站開發(fā)-網(wǎng)頁布局綜合案例BABY HOUSING網(wǎng)上商店_第1頁
HTML CSS DIV網(wǎng)頁設(shè)計與布局（第3版）（微課版）-教案全套 劉小嬌 第1-15章 認識網(wǎng)站開發(fā)-網(wǎng)頁布局綜合案例BABY HOUSING網(wǎng)上商店_第2頁
HTML CSS DIV網(wǎng)頁設(shè)計與布局（第3版）（微課版）-教案全套 劉小嬌 第1-15章 認識網(wǎng)站開發(fā)-網(wǎng)頁布局綜合案例BABY HOUSING網(wǎng)上商店_第3頁
HTML CSS DIV網(wǎng)頁設(shè)計與布局（第3版）（微課版）-教案全套 劉小嬌 第1-15章 認識網(wǎng)站開發(fā)-網(wǎng)頁布局綜合案例BABY HOUSING網(wǎng)上商店_第4頁
HTML CSS DIV網(wǎng)頁設(shè)計與布局（第3版）（微課版）-教案全套 劉小嬌 第1-15章 認識網(wǎng)站開發(fā)-網(wǎng)頁布局綜合案例BABY HOUSING網(wǎng)上商店_第5頁
已閱讀5頁，還剩125頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

網(wǎng)頁設(shè)計與制作授課教案學(xué)年第學(xué)期學(xué)院（部）專業(yè)（學(xué)部）課程名稱網(wǎng)頁設(shè)計與制作任課教師課內(nèi)形式理論教學(xué)□課內(nèi)實踐□理實一體習題復(fù)習□考核評價□其他活動□學(xué)習量安排課內(nèi)：課外形式調(diào)查分析小組研討□實踐任務(wù)理論探究□考核評價□匯報展示□其他活動課外：序號1授課日期月日月日月日月日授課班級課內(nèi)教學(xué)內(nèi)容：第1章認識網(wǎng)站開發(fā)課外學(xué)習任務(wù)：（1）課前：以小組為單位，分析了解常用的網(wǎng)站開發(fā)的知識；分析網(wǎng)站構(gòu)建的流程以及網(wǎng)站開發(fā)所需要使用到的開發(fā)工具和展示工具并將了解的內(nèi)容以PPT的形式記錄下來。（2）課后：=1\*GB3①通過練習熟練掌握網(wǎng)頁基礎(chǔ)知識。=2\*GB3②獨立編寫自己的第一個網(wǎng)頁。教學(xué)目標：知識目標掌握網(wǎng)頁構(gòu)成元素；掌握網(wǎng)站建設(shè)流程；初步了解HTML基礎(chǔ)結(jié)構(gòu)；初步了解網(wǎng)頁頭部相關(guān)標簽的使用。能力目標能夠獨立開發(fā)一個簡單的靜態(tài)網(wǎng)頁；素質(zhì)目標較強的專業(yè)知識和自學(xué)能力；豐富知識結(jié)構(gòu)，提升專業(yè)知識；在掌握制作第一個靜態(tài)網(wǎng)頁的基礎(chǔ)上，理解網(wǎng)頁開發(fā)的專業(yè)知識。重點難點及解決方法：（1）重點：HTML頁面結(jié)構(gòu)解決方法：通過課堂練習+視頻式教學(xué)的方法，教師講解網(wǎng)頁的基本結(jié)構(gòu)和相關(guān)的HTML標簽的使用。引導(dǎo)學(xué)生積極思考，掌握靜態(tài)網(wǎng)頁開發(fā)的相關(guān)知識知識；同時通過課堂練習，使學(xué)生可以HTML結(jié)構(gòu)的相關(guān)知識；培養(yǎng)學(xué)生的思維能力和分析問題解決問題的能力。（2）難點：掌握頁面中的標簽解決方法：通過案例演示+啟發(fā)式教學(xué)講解的方式，細致講解每個頁面標簽的功能和位置。幫助學(xué)生了解網(wǎng)頁結(jié)構(gòu)標簽所在位置以及其對應(yīng)的功能。課內(nèi)教學(xué)授課地點：教學(xué)媒體：微課、PPT課件、網(wǎng)頁圖片、相關(guān)教學(xué)視頻等。設(shè)備及材料：多媒體計算機、多媒體教學(xué)廣播軟件、網(wǎng)頁素材圖片、教學(xué)載體源文件等。其它資源：與本次課相關(guān)的專業(yè)技術(shù)論文電子版。學(xué)習效果評價方式：對理論知識學(xué)習效果評價：采用課堂提問、課后習題和查閱技術(shù)論文研讀筆記的方式；對技能的評價：教師對學(xué)生上交網(wǎng)頁作品按制作要求進行綜合性評價；對職業(yè)素養(yǎng)的評價：采用學(xué)生自評、小組內(nèi)評價和教師評價相結(jié)合的方式。課后小結(jié)：填表說明：1.序號，指該課程授課的順序號，應(yīng)與授課計劃一致；2.授課形式在相應(yīng)的選項打“√”。課內(nèi)教學(xué)內(nèi)容及過程時間分配方法及手段【導(dǎo)引示例】在網(wǎng)頁設(shè)計中，使用jQuery框架可以實現(xiàn)更加豐富的網(wǎng)頁交互效果。1.網(wǎng)站開發(fā)概述【網(wǎng)頁構(gòu)成元素】網(wǎng)頁是用HTML編寫而成的一種文件，將這種文件放在Web服務(wù)器上可以讓互聯(lián)網(wǎng)上的其他用戶瀏覽。比如訪問百度網(wǎng)站，看到的就是百度網(wǎng)站的網(wǎng)頁。網(wǎng)頁是通過HTTP傳遞給瀏覽者的。網(wǎng)站顯示的第一個網(wǎng)頁稱為首頁。網(wǎng)頁具體構(gòu)成元素如下。1．文本2．圖像3．超鏈接4．表格5．表單6．導(dǎo)航欄7．其他元素【網(wǎng)站建設(shè)流程】1．網(wǎng)站需求分析2．網(wǎng)站整體規(guī)劃3．收集資料與素材4．制作網(wǎng)頁5．域名和服務(wù)器空間的申請6．測試與發(fā)布網(wǎng)站7．后期維護與更新【網(wǎng)站開發(fā)軟件】Dreamweaver

CS6

2.HTML簡介（教學(xué)重點）【HTML基本概念】超文本標記語言（HypertextMarkedLanguage，HTML）是一種用來制作超文本文件的簡單標記語言。用HTML編寫的超文本文件稱為HTML文件，它能獨立于各種操作系統(tǒng)平臺。自1990年以來，HTML就被全球廣域網(wǎng)用作其信息表示語言?！綡TML基本結(jié)構(gòu)】HTML文件包括文件頭和文件體兩部分。文件頭中主要是對這個HTML文件進行一些必要的定義，文件體中的內(nèi)容才是真正要顯示的各種文件信息。一個HTML文件包含各種HTML元素，如圖片、段落、表格等。這些HTML元素在頁面中需要使用標簽來分隔，因此也可以說HTML文件就是由各種HTML元素和標簽組成的。一般情況下，HTML文件的基本結(jié)構(gòu)如下。1 <html> /*HTML文件的開始標簽，表示這是一個HTML文件*/2 <head> /*文件頭的開始標簽，這對標簽之間的是頭部信息*/3 頭部信息 /*文件頭的內(nèi)容，也叫作文件的頭部信息*/4 </head> /*文件頭的結(jié)束標簽*/5 <body> /*文件體開始標簽*/6 文件主體，正文部分 /*文件的主體部分，是文件真正要顯示的信息*/7 </body> /*文件體結(jié)束標簽*/8 </html> /*HTML文件的結(jié)束標簽*/3.一個簡單的HTML實例【編寫HTML代碼】（1）在計算機桌面上右擊并在彈出的快捷菜單中選擇“新建”|“文本文檔”命令，打開記事本，如圖1.3所示。（2）在文本文檔中直接輸入如下內(nèi)容。1 <!DOCTYPEhtml>2 <html>3 <head>4 <title>一個簡單的HTML實例</title>5 </head>6 <body>7 <h2align="center">第一個HTML文件</h2>8 <hrwidth="70%">9 <p>下面跟我進入HTML的領(lǐng)域</p>10 <p>來領(lǐng)略這個奇妙而多彩的世界??！</p>11 </body>12 </html>（3）輸入代碼以后，選擇“文件”|“保存”命令。（4）在桌面上右擊“新建文本文檔.txt”，在彈出的快捷菜單中選擇“重命名”命令，然后設(shè)置文本文檔的名稱為1.1.html，如圖1.4所示?！具\行HTML文件查看效果】4.HTML基本標簽（教學(xué)難點）【文件類型指令標簽】（1）在HTML5中，說明文件類型的語法如下所示。<!DOCTYPEhtml>（2）在HTML4.0中，說明文件類型需要引用DTD。DTD會規(guī)定標記語言的規(guī)則，語法如下所示。<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd">【文件類型標簽】文件類型標簽<html>是雙標簽，用來標識該文件是HTML類型的文件并標記文件的起始和結(jié)束位置，其語法如下。1 <html>2 </html>【HTML頭標簽】HTML頭標簽是以<head>為開始標簽、以</head>為結(jié)束標簽的雙標簽。它用于包含當前文件的相關(guān)信息，一般包括標題、基底信息、元信息等。一般情況下，CSS樣式也定義在頭標簽中。通常HTML頭標簽之間的內(nèi)容被稱為HTML的頭部。定義在HTML頭部的內(nèi)容一般不會在網(wǎng)頁上直接顯示，而是通過另外的方式起作用。例如，定義在HTML頭部的標題不會顯示在頁面中，但是會在頁面的標題欄中出現(xiàn)。HTML的頭部通常包含表1.1所示的部分或全部標簽。當然，這些標簽也可以省略。表1.1HTML的頭部包含的標簽標簽或?qū)傩怨δ?lt;base>用于設(shè)置當前文件的URL基準，被稱為基底網(wǎng)址<basefont>用于設(shè)置基準文字的樣式，包括文字的字體、字號、顏色等<title>用于設(shè)置頁面的標題（顯示在瀏覽器的標題欄中）。該標簽屬于HTML的基本標簽，開發(fā)人員一般情況下都會設(shè)置該標簽的內(nèi)容，以幫助瀏覽者了解頁面的主題<isindex>用于說明該文件可檢索的網(wǎng)關(guān)腳本，由服務(wù)器自動建立<meta>文件的元信息標簽，用于設(shè)置文件本身的一些信息，如設(shè)置關(guān)鍵字、頁面的作者等<style>用于設(shè)置CSS樣式表的內(nèi)容<link>用于設(shè)置該文件相關(guān)的外部文件的鏈接<script>用于設(shè)置頁面腳本程序的內(nèi)容、語言等【頁面標題標簽】在HTML文件中，頁面標題信息設(shè)置在頁面的頭部，也就是位于<head>與</head>標簽之間。頁面標題標簽以<title>開始、以</title>結(jié)束，是一個雙標簽，其語法如下。<title>標題內(nèi)容</title>【HTML主體標簽】HTML主體標簽是以<body>為開始標簽、以</body>為結(jié)束標簽的雙標簽。它用于包含當前文件的頁面內(nèi)容。也就是說，在<body>與</body>標簽之間的內(nèi)容是頁面中真正要顯示的內(nèi)容，包括文字、圖像、表格等。在<body>標簽中可以包含多種屬性，用于設(shè)置頁面的背景、字體等屬性。這些屬性在后面的章節(jié)中會詳細介紹，這里不多說明。5.HTML頁面的元信息（教學(xué)難點）【頁面的關(guān)鍵字】keywords的中文意思是“關(guān)鍵字”，它用于說明頁面包含的關(guān)鍵字等信息，提高被搜索引擎搜索到的概率。其語法格式如下。<metaname="keywords"content="關(guān)鍵字"/>content屬性的值為設(shè)置的具體關(guān)鍵字。注意：一般可設(shè)置多個關(guān)鍵字，它們之間用英文半角逗號分開。由于很多搜索引擎限制關(guān)鍵字的數(shù)量，因此關(guān)鍵字要簡潔精練。【頁面的對外說明】description的中文意思是“描述”，它用于描述頁面的主要內(nèi)容、主題等（合理設(shè)置也可以提高被搜索引擎搜索到的概率）。其語法格式如下。<metaname="description"content="對頁面的描述"/>content屬性的值為設(shè)置的頁面具體描述內(nèi)容。content屬性的值最多可以包括1024個字符，但因為搜索引擎一般只顯示大約前175個字符，所以描述內(nèi)容還是短小、簡潔為好?！揪W(wǎng)頁的作者信息】author的中文意思是“作者”，它用于設(shè)置網(wǎng)頁作者的名稱，在比較專業(yè)的網(wǎng)站網(wǎng)頁上經(jīng)常會被用到。其語法格式如下。<metaname="author"content="作者名稱"/>content屬性的值為設(shè)置的作者名稱?！揪W(wǎng)頁的開發(fā)語言】content-type的中文意思是“內(nèi)容類別”，它用于設(shè)置網(wǎng)頁的類別和語言字符集。其語法格式如下。<metahttp-equiv="content-type"content="text/html;charset=utf-8"/>說明：語言字符集是比較復(fù)雜的知識領(lǐng)域，讀者初學(xué)時，將charset設(shè)置為utf-8即可。【頁面的定時跳轉(zhuǎn)】refresh的中文意思是“刷新”，它用于設(shè)置多長時間頁面自動刷新一次，或者過多長時間自動跳轉(zhuǎn)到其他頁面。其語法格式如下。<metahttp-equiv="refresh"content="5"/>例如以上代碼中，content屬性的值代表頁面自動刷新的時間間隔為5s。另一種編寫格式如下。<metahttp-equiv="refresh"content="30;URL="/>content屬性的值代表30s后，頁面跳轉(zhuǎn)到網(wǎng)站。6、上機指導(dǎo)【上機指導(dǎo)】在瀏覽器中通過開發(fā)者工具查看網(wǎng)頁的源代碼和網(wǎng)頁結(jié)構(gòu)。在記事本工具中輸入一段簡單的網(wǎng)頁代碼，即編寫一個包含文件頭、標題、主體3部分的HTML文件?！窘M織階段考核與學(xué)生自評互評、展示考核結(jié)果】本次課的考核注重過程評價：課上考核包括專業(yè)能力與職業(yè)素養(yǎng)兩方面。展示本次課《職業(yè)素養(yǎng)評價表》，組織學(xué)生自評、互評。7.板書設(shè)計第1章網(wǎng)頁設(shè)計基礎(chǔ)網(wǎng)站開發(fā)概述HTML簡介一個簡單的HTML實例HTML基本標簽HTML頁面的元信息上機指導(dǎo)課外學(xué)習任務(wù)及學(xué)習指導(dǎo)課前：【教師布置調(diào)研任務(wù)】調(diào)研主題：《收集網(wǎng)站開發(fā)的相關(guān)知識》要求：以小組為單位，通過搜索收集網(wǎng)站開發(fā)的相關(guān)知識，包括常見的域名、服務(wù)器售賣網(wǎng)站，常見的各種設(shè)計風格網(wǎng)站等相關(guān)知識制作為PPT提交到“微信群”?！緦W(xué)生調(diào)研，教師線上指導(dǎo)】學(xué)生采用線上調(diào)研的方式，開展調(diào)研。教師使用“微信群”對學(xué)生進行指導(dǎo)?！窘處煂Ω鹘M調(diào)研成果進行評價】教師查閱學(xué)生調(diào)研結(jié)果PPT，對每個小組的PPT進行評價，記錄評價成績，并挑選出優(yōu)秀作品。課后：【學(xué)生完成個人第一個靜態(tài)網(wǎng)頁的編寫】小組成員團結(jié)協(xié)作，實現(xiàn)Dreamweaver的安裝并編寫自己的第一個網(wǎng)頁。教師使用“微信群”對學(xué)生進行指導(dǎo)。填表說明：1.本頁可續(xù)頁；2.教學(xué)方法如：項目教學(xué)、案例分析、分組討論、角色扮演、啟發(fā)引導(dǎo)等；3.教學(xué)手段如：課件演示、模型講解、實物講解、掛圖講解、視頻講解、網(wǎng)絡(luò)課程等。網(wǎng)頁設(shè)計與制作授課教案學(xué)年第學(xué)期學(xué)院（部）專業(yè)（學(xué)部）課程名稱電子商務(wù)網(wǎng)頁設(shè)計與制作任課教師課內(nèi)形式理論教學(xué)□課內(nèi)實踐□理實一體習題復(fù)習□考核評價□其他活動□學(xué)習量安排課內(nèi)：課外形式調(diào)查分析小組研討□實踐任務(wù)理論探究□考核評價□匯報展示□其他活動課外：序號2授課日期月日月日月日月日授課班級課內(nèi)教學(xué)內(nèi)容：第2章網(wǎng)頁文字和圖片課外學(xué)習任務(wù)：（1）課前：以小組為單位，討論網(wǎng)頁中出現(xiàn)的文本和圖片內(nèi)容并以PPT的形式記錄下來。（2）課后：在網(wǎng)頁中可以輕松展示文本和圖片。教學(xué)目標：知識目標掌握文字在網(wǎng)頁中的使用；掌握圖片在網(wǎng)頁中的使用；能力目標能夠了解文字在網(wǎng)頁中的各種排版方式；能夠掌握在網(wǎng)頁中添加圖片；能夠?qū)崿F(xiàn)對圖片樣式的設(shè)置。素質(zhì)目標較強的專業(yè)知識和技術(shù)能力；豐富知識結(jié)構(gòu)，提升專業(yè)知識；能高效的掌握網(wǎng)頁中文本和圖片如何使用的相關(guān)內(nèi)容。重點難點及解決方法：（1）重點：掌握通過HTML對文本樣式的的設(shè)置解決方法：通過課堂練習+啟發(fā)式教學(xué)的方法，教師通過講解HTML對文本樣式的設(shè)置，引導(dǎo)學(xué)生積極思考，掌握各種文本相關(guān)的標簽和屬性使用規(guī)則；同時通過配套示例，使學(xué)生深入掌握HTML中與文本相關(guān)的各種標簽和屬性的使用；培養(yǎng)學(xué)生的思維能力和分析問題解決問題的能力。（2）難點：掌握通過HTML設(shè)置圖片的各種樣式解決方法：通過案例解析+啟發(fā)式教學(xué)講解的方式，細致講解使用網(wǎng)頁中設(shè)置圖片的相關(guān)內(nèi)容。幫助學(xué)生加深掌握圖片相關(guān)標簽和屬性的相關(guān)知識。從實用的角度幫助學(xué)生提高專業(yè)知識。課內(nèi)教學(xué)授課地點：教學(xué)媒體：微課、PPT課件、網(wǎng)頁圖片、相關(guān)教學(xué)視頻等。設(shè)備及材料：多媒體計算機、多媒體教學(xué)廣播軟件、網(wǎng)頁素材圖片、教學(xué)載體源文件等。其它資源：與本次課相關(guān)的專業(yè)技術(shù)論文電子版。學(xué)習效果評價方式：對理論知識學(xué)習效果評價：采用課堂提問、課后習題和查閱技術(shù)論文研讀筆記的方式；對技能的評價：教師對學(xué)生上交網(wǎng)頁作品按制作要求進行綜合性評價；對職業(yè)素養(yǎng)的評價：采用學(xué)生自評、小組內(nèi)評價和教師評價相結(jié)合的方式。課后小結(jié)：填表說明：1.序號，指該課程授課的順序號，應(yīng)與授課計劃一致；2.授課形式在相應(yīng)的選項打“√”。課內(nèi)教學(xué)內(nèi)容及過程時間分配方法及手段1.文字格式（教學(xué)重點）【文字大小】在HTML中，<font>標簽可以通過屬性設(shè)置文字的樣式，包括文字的大小、顏色、字體等。其中，設(shè)置文字大小的屬性為size。其語法格式如下。<fontsize="n">文字</font>其中，n的有效范圍是1~7。【字體】1．設(shè)置網(wǎng)頁字體設(shè)置網(wǎng)頁文字字體可使用<font>標簽的face屬性，其語法格式如下。<fontface="字體名稱">文字</font>其中，face屬性值為字體的名稱。要想知道自己計算機中安裝了什么字體，可以在操作系統(tǒng)所在磁盤的Windows\Fonts目錄下看到，如圖2.2所示，在“預(yù)覽、刪除或者顯示和隱藏計算機上安裝的字體”欄下的都是可用的字體。圖2.2計算機上安裝的字體2．設(shè)置瀏覽器默認字體需要注意的是，在示例2-2中顯示的字體在設(shè)計者的計算機上可以正常瀏覽，但是換成在其他計算機上就不一定可以正常瀏覽了。例如，在該文件中指定了“華文行楷”字體，如果讀者的計算機中沒有安裝這種字體，瀏覽器就會用默認的字體來顯示這種字體。不同的瀏覽器中都可以設(shè)置指定的字體為網(wǎng)頁默認字體?！咀煮w顏色】如果沒有設(shè)置網(wǎng)頁文字字體的顏色，那么這個網(wǎng)頁中的文字就是黑白的。使用<font>標簽的color屬性可以為文字設(shè)置不同的顏色，其語法格式如下。<fontcolor="顏色">文字</font>顏色可以有兩種表示方法：顏色名稱與RGB顏色數(shù)值。顏色名稱就是類似red、blue等顏色的英文名。RGB顏色是由紅色、綠色、藍色的組合來指定的一種顏色，任何一種顏色都可以用0~255的一個數(shù)值表示，但必須使用十六進制的數(shù)字來表示這些組合。例如，一種顏色的RGB代碼為“#FFC0CB”，就代表它是用強度為FF（也就是255）的紅色、強度為C0的綠色與強度為CB的藍色混合成的顏色，也就是粉紅色。注意：使用RGB顏色，必須在十六進制組合前加上“#”字符。絕大多數(shù)瀏覽器都能識別以下16種預(yù)定義的顏色：red（紅色）、yellow（黃色）、blue（藍色）、navy（深藍色）、green（綠色）、lime（淺綠色）、aqua（碧綠色）、olive（橄欖綠）、black（黑色）、gray（灰色）、silver（銀色）、maroon（栗色）、purple（紫色）、fuchsia（紫紅色）、teal（深青色）和white（白色）。【加粗與斜體】通常在處理文字時，都會對比較重要的內(nèi)容使用加粗、斜體來引起讀者的注意。在網(wǎng)頁上同樣可以使用加粗與斜體來達到相同的效果。在HTML中，可以用<b>標簽來加粗文字，用<i>標簽來使文字傾斜。除了<b>標簽與<i>標簽之外，還可以用<strong>標簽來加粗文字，用<em>標簽來使文字傾斜。設(shè)置加粗與斜體的語法格式如下。<b>加粗的文字</b><i>傾斜的文字</i><strong>加粗的文字</strong><em>傾斜的文字</em>【插入線與刪除線】在文字展示過程中，我們有時需要強調(diào)一些新插入的內(nèi)容和被刪除的內(nèi)容，此時就需要使用到插入線（在文本下方添加一條橫線）和刪除線（在文本上覆蓋一條橫線）來標明插入的文字和刪除的文字。在HTML中可以使用<ins>標簽實現(xiàn)向指定文字添加插入線的效果，并使用<del>標簽實現(xiàn)向指定文字添加刪除線的效果。插入線與刪除線標簽的語法格式如下。<ins>插入的文本內(nèi)容</ins><del>刪除的文本內(nèi)容</del>【上標與下標】在描述一些復(fù)雜的表達式，特別是一些數(shù)學(xué)公式時，經(jīng)常會用到上標和下標，如3的平方（32）。在HTML頁面中，上標使用<sup>標簽實現(xiàn)，下標使用<sub>標簽實現(xiàn)。上標和下標標簽的語法格式如下。<sup>作為上標的文字</sup><sub>作為下標的文字</sub>2.文字排版【文本縮進】在HTML中，文本縮進使用<blockquote>標簽實現(xiàn)。該標簽主要用于設(shè)置文本的縮進效果，從而使頁面的文字布局更加錯落有致。文本縮進標簽的語法格式如下。<blockquote>需要進行縮排的文字</blockquote>需要注意的是，<blockquote>標簽可以嵌套使用，每使用一次，文本就縮進一次。【段落】在HTML中，使用<p>標簽可以區(qū)分一個段落與另一個段落，在<p>與</p>標簽之間的文字是一個段落。其語法格式如下。<p>一段文字</p>【預(yù)定義格式】通過前面的學(xué)習可以知道，在HTML源代碼中，即使文字已經(jīng)換行，但是只要沒有使用<br/>標簽，在瀏覽器里顯示出來的文字也不會換行。如果想在瀏覽器中顯示源代碼中保留所有文本內(nèi)容的排版格式，包括文字之間的空白（如空格、制表符等），可以使用<pre>標簽。使用<pre>標簽相當于設(shè)置了一個“塊”，這個塊中可以保留源代碼中的所有文本格式，讓文本的格式（除HTML標簽外）在瀏覽器中按原樣顯示出來。其語法格式如下。<pre>設(shè)置了格式的文字</pre>例如，源代碼中的文本內(nèi)容之間有10個空格，在瀏覽器也會顯示這10個空格；源代碼中有一個換行，在瀏覽器中也會顯示一個換行，不再需要使用<br/>標簽來強制換行。【水平分隔線】當頁面內(nèi)容比較煩瑣時，可以在段與段之間插入一條水平分隔線來使頁面層次分明、便于閱讀。在HTML中可以使用<hr/>標簽來創(chuàng)建一條水平分隔線，其語法格式如下。<hralign="對齊方式"width="寬度"size="高度"color="顏色"noshade/><hr/>標簽中的屬性說明如下。align屬性的值可以為left（左對齊）、center（居中）和right（右對齊）3種。width屬性代表寬度。其值可以有兩種表示法：一種是百分數(shù)，代表水平分隔線占瀏覽器窗口寬度的百分比；另一種是像素，代表水平分隔線寬度占多少像素。size屬性代表水平分隔線的高度，其值為數(shù)字。color屬性代表水平分隔線的顏色，默認為黑色。noshade屬性代表水平分隔線不顯示陰影，默認情況下水平分隔線是顯示陰影的。3.在網(wǎng)頁中插入圖片（教學(xué)難點）在網(wǎng)頁中可以插入Logo（網(wǎng)站標志）、Banner（橫幅廣告）、照片等各種圖片。合理應(yīng)用圖片，可以讓網(wǎng)頁看起來更美觀、重點更突出、形式更活潑，也可以使瀏覽更方便。在HTML中可以通過<img>標簽插入圖片，其語法格式如下。<imgsrc="url"alt="替代文本"name="名字"width="寬度"height="高度"border="邊框"align="對齊方式"id="編號"><img>標簽的屬性很多，上面的語法格式中只包含了常用的8個屬性。這8個屬性的具體說明如下。src：用于指定圖片所在位置，可以是相對路徑或絕對路徑。alt：用于指定替代圖片的文本。當圖片不能正常顯示出來時，可以使用該文本替代圖片。name：用于設(shè)置圖片的名稱，很多時候可以被省略。width：用于指定圖片的寬度。height：用于指定圖片的高度。border：用于指定圖片的邊框大小。該屬性的值越大，邊框的線條就越粗。align：用于設(shè)置圖片的對齊方式。該屬性有5個值：left、right、top、middle和bottom，分別表示左對齊、右對齊、頂部對齊、居中對齊和底部對齊方式。id：用于設(shè)置圖片的編號，也可以被省略。在同一個HTML文件中不允許出現(xiàn)相同的id，但可以出現(xiàn)相同的name。4.HTML5文檔結(jié)構(gòu)標簽HTML5標準中提供了很多個關(guān)于文檔結(jié)構(gòu)方面的標簽，這些標簽可以更加準確地表達網(wǎng)頁的結(jié)構(gòu)和語義。HTML5新增的文檔結(jié)構(gòu)標簽可以更好地輔助搜索引擎對網(wǎng)頁的結(jié)構(gòu)和內(nèi)容進行識別，讓搜索引擎更容易實現(xiàn)對網(wǎng)頁內(nèi)容的抓取和收錄，但是這些標簽不能為網(wǎng)頁內(nèi)容添加樣式。HTML5的文檔結(jié)構(gòu)標簽如下所示。<article>：用于定義內(nèi)容，內(nèi)容本身必須是有意義的且必須是獨立于文件的其余部分，如一篇文章、一個帖子、博客的博文、一段評論等。<header>：用于定義文件或者文件的一部分區(qū)域的頁眉，如一段介紹內(nèi)容。<nav>：用于定義頁面中的導(dǎo)航部分，導(dǎo)航包括頂部導(dǎo)航、側(cè)邊欄導(dǎo)航、頁內(nèi)導(dǎo)航等。<section>：用于定義文件的指定區(qū)域，如章節(jié)、文件頭部、文件底部或者文件的其他區(qū)域。<aside>：用于定義頁面正文之外的內(nèi)容。該標簽定義的內(nèi)容要與附近的內(nèi)容相關(guān)，如附屬信息、引用、相關(guān)推薦、廣告等。<footer>：用于定義頁腳部分，如該標簽會包含文件創(chuàng)作者的姓名、文件的版權(quán)信息、使用條款的鏈接、聯(lián)系信息等。5.教學(xué)評價【組織階段考核與學(xué)生自評互評、展示考核結(jié)果】本次課的考核注重過程評價：課上考核包括專業(yè)能力與職業(yè)素養(yǎng)兩方面。展示本次課《職業(yè)素養(yǎng)評價表》，組織學(xué)生自評、互評。6.上機指導(dǎo)使用<font>標簽設(shè)置網(wǎng)頁中文字的大小、顏色和字體樣式。使用與文字排版相關(guān)的標簽來設(shè)置段落文字的樣式。7.板書設(shè)計文字格式文字排版在網(wǎng)頁中插入圖片HTML5文檔結(jié)構(gòu)標簽上機指導(dǎo)課外學(xué)習任務(wù)及學(xué)習指導(dǎo)課前：【教師布置調(diào)研任務(wù)】調(diào)研主題：《了解文字和圖片相關(guān)標簽和屬性的使用規(guī)則》要求：以小組為單位，通過網(wǎng)絡(luò)查找的方式了解文字和圖片相關(guān)標簽和屬性的使用規(guī)則。制作匯報PPT，提交到“微信群”?！緦W(xué)生調(diào)研，教師線上指導(dǎo)】學(xué)生采用線上調(diào)研的方式，開展調(diào)研。教師使用“微信群”對學(xué)生進行指導(dǎo)。【教師對各組調(diào)研成果進行評價】教師查閱學(xué)生調(diào)研結(jié)果PPT，對每個小組的PPT進行評價，記錄評價成績，并挑選出優(yōu)秀作品。課后：【學(xué)生使用JavaScrip代碼設(shè)計一個圖文混排的靜態(tài)網(wǎng)頁】小組成員團結(jié)協(xié)作，練習使用文本和圖片標簽的相關(guān)內(nèi)容；使學(xué)生掌握使用HTML標簽實現(xiàn)圖文混排的能力。教師使用“微信群”對學(xué)生進行指導(dǎo)。填表說明：1.本頁可續(xù)頁；2.教學(xué)方法如：項目教學(xué)、案例分析、分組討論、角色扮演、啟發(fā)引導(dǎo)等；3.教學(xué)手段如：課件演示、模型講解、實物講解、掛圖講解、視頻講解、網(wǎng)絡(luò)課程等。網(wǎng)頁設(shè)計與制作授課教案學(xué)年第學(xué)期學(xué)院（部）專業(yè)（學(xué)部）課程名稱電子商務(wù)網(wǎng)頁設(shè)計與制作任課教師課內(nèi)形式理論教學(xué)□課內(nèi)實踐□理實一體習題復(fù)習□考核評價□其他活動□學(xué)習量安排課內(nèi)：課外形式調(diào)查分析小組研討□實踐任務(wù)理論探究□考核評價□匯報展示□其他活動課外：序號3授課日期月日月日月日月日授課班級課內(nèi)教學(xué)內(nèi)容：第3章超鏈接課外學(xué)習任務(wù)：（1）課前：以小組為單位，討論超鏈接的相關(guān)知識，分析超鏈接的標簽和屬性使用規(guī)則并以PPT的形式記錄下來。（2）課后：eq\o\ac(○,1)使用<a>標簽來創(chuàng)建一個以新窗口打開的超鏈接。eq\o\ac(○,2)使用<a>標簽創(chuàng)建一個鏈接到其他網(wǎng)頁的錨點。eq\o\ac(○,3)使用<img>標簽的usemap屬性和<map>標簽設(shè)置一個矩形的圖片熱點區(qū)域。教學(xué)目標：知識目標掌握超鏈接的使用掌握錨點的創(chuàng)建和使用掌握熱點的創(chuàng)建和使用能力目標能夠掌握超鏈接的各種使用方法；能夠正確使用錨點和圖像熱點區(qū)域。素質(zhì)目標較強的專業(yè)知識和技術(shù)能力；豐富知識結(jié)構(gòu)，提升專業(yè)知識。重點難點及解決方法：（1）重點：掌握超鏈接使用規(guī)則解決方法：通過課堂示例+啟發(fā)式教學(xué)的方法，教師講解在講解超鏈接的創(chuàng)建和使用等相關(guān)知識的同時，引導(dǎo)學(xué)生積極思考，掌握錨點連接的創(chuàng)建和使用，以及錨點的創(chuàng)建和使用等相關(guān)知識；同時通過課堂示例，使學(xué)生深入掌握超鏈接的相關(guān)使用規(guī)則。（2）難點：熟練通過各種方式創(chuàng)建超鏈接解決方法：通過實戰(zhàn)案例解析+啟發(fā)式教學(xué)講解的方式，細致講解各種形式超鏈接的使用方法。幫助學(xué)生加深掌握如何使用超鏈接實現(xiàn)頁面之間，頁面之內(nèi)等多種方式的跳轉(zhuǎn)。課內(nèi)教學(xué)授課地點：教學(xué)媒體：微課、PPT課件、網(wǎng)頁圖片、相關(guān)教學(xué)視頻等。設(shè)備及材料：多媒體計算機、多媒體教學(xué)廣播軟件、網(wǎng)頁素材圖片、教學(xué)載體源文件等。其它資源：與本次課相關(guān)的專業(yè)技術(shù)論文電子版。學(xué)習效果評價方式：對理論知識學(xué)習效果評價：采用課堂提問、課后習題和查閱技術(shù)論文研讀筆記的方式；對技能的評價：教師對學(xué)生上交網(wǎng)頁作品按制作要求進行綜合性評價；對職業(yè)素養(yǎng)的評價：采用學(xué)生自評、小組內(nèi)評價和教師評價相結(jié)合的方式。課后小結(jié)：填表說明：1.序號，指該課程授課的順序號，應(yīng)與授課計劃一致；2.授課形式在相應(yīng)的選項打“√”。課內(nèi)教學(xué)內(nèi)容及過程時間分配方法及手段1.創(chuàng)建超鏈接【超鏈接標簽】<aname="錨名稱"href="url"title="標題"target="目標">超鏈接文字</a>超鏈接標簽的屬性很多，上面的語法格式中只包含了常用的4個屬性。這4個屬性的具體說明如下。name：用于設(shè)置超鏈接當前位置的錨名稱。href：用于設(shè)置超鏈接的鏈接地址。title：用于設(shè)置超鏈接的標題。target：用于設(shè)置打開超鏈接的目標地址。從上面的超鏈接語法格式可以看出，超鏈接主要包括目標地址、鏈接文字、標題、目標窗口及錨。【鏈接地址】鏈接地址用于設(shè)置超鏈接的路徑，可以使用<a>標簽中的href屬性來設(shè)置。設(shè)置鏈接地址的語法格式如下。<ahref="鏈接地址">用來設(shè)置超鏈接的標簽</a>其中，鏈接地址可以是相對路徑，也可以是絕對路徑。絕對路徑實際就是完整路徑。絕對路徑可以是硬盤文件的真正路徑，也可以是域名的完整網(wǎng)頁路徑。使用絕對路徑定位鏈接目標文件比較清晰，但是如果該文件被移動了，就需要重新設(shè)置所有的相關(guān)鏈接。例如，設(shè)置路徑為“C:\ProgramFiles\1.htm”，在本地確實可以找到，但是到了網(wǎng)站上，因為該文件不一定在這個路徑下，所以就會出問題。相對路徑，顧名思義就是相對目標位置的路徑。使用相對路徑時，無論將這些文件放到哪里，只要它們的相對關(guān)系沒有變，就不會出錯。一般有如下3種相對路徑的寫法。同一目錄下的文件：只需要輸入鏈接文件的名稱即可，如01.html。上一級目錄中的文件：在目錄名和文件名之前加入“../”，如../04/02.html；如果是上兩級，則需要加兩個“../”，如../../file/01.html。下一級目錄：目錄名和文件名之間以“/”隔開，如Html/05/01.html?！敬蜷_鏈接的方式】單擊網(wǎng)頁中的超鏈接時，通常都會在當前窗口打開目標頁面。如果想保留當前網(wǎng)頁的內(nèi)容，讓鏈接的頁面從一個新建窗口中打開，應(yīng)該怎么辦？使用<a>標簽的target屬性可以實現(xiàn)這個功能。target屬性用來設(shè)置打開鏈接的方式，其語法格式如下。<ahref="鏈接地址"target="目標頁面的打開方式">用來鏈接的標簽</a>在HTML中，超鏈接的target屬性可以取4個值，這些值的具體含義如表3.1所示。表3.1target屬性值屬性值含義屬性值含義_parent在上一級窗口打開（常在框架頁面中使用）_self在同一窗口打開，是默認值_blank新建一個窗口打開_top2.錨點【創(chuàng)建錨點】要使用錨點引導(dǎo)瀏覽者，首先要創(chuàng)建頁面中的錨點。創(chuàng)建的錨點將用于確定鏈接的目標位置，其語法格式如下。<aname="錨點名稱">錨點的鏈接文字</a>通過錨點名稱可以標注相應(yīng)的錨點，name屬性是創(chuàng)建錨點所必需的設(shè)置。錨點的鏈接文字則有助于區(qū)分不同的錨點。在實際應(yīng)用中可以不設(shè)置鏈接文字，這是因為設(shè)置的錨點僅僅是為鏈接提供一個位置，瀏覽頁面時并不會在頁面中出現(xiàn)錨點的標簽?！炬溄拥奖卷撳^點】如果要鏈接到本頁的命名錨上，只要在<a>標簽的href屬性中指定錨點名稱，并在該名稱前加上“#”字符。錨點名稱就是3.2.1節(jié)中name屬性的值。鏈接到本頁錨點的語法格式如下。<ahref="#錨點名稱">錨點的鏈接文字</a>【鏈接到其他網(wǎng)頁的錨點】通常單擊一個超鏈接時，會打開一個網(wǎng)頁，并且默認顯示該網(wǎng)頁的頂端，而不是顯示網(wǎng)頁的底端或網(wǎng)頁的其他位置。例如，網(wǎng)頁中有一個超鏈接要鏈接示例3-4中的軟件最終用戶許可協(xié)議的客戶端訪問許可證方面的內(nèi)容，如果直接將href屬性值設(shè)置為3-4.html，那么在單擊超鏈接時，看到的只是該網(wǎng)頁的頂端，瀏覽者還要自己尋找客戶端許可證在哪個位置，十分不方便。要想打開一個網(wǎng)頁，并且顯示網(wǎng)頁的某個區(qū)域，就必須創(chuàng)建命名錨。使用<a>標簽的name屬性可以在網(wǎng)頁上設(shè)置鏈接到其他網(wǎng)頁的錨點，其語法格式如下。<ahref="頁面地址#錨點名稱">用于鏈接錨點的文字</a>3.圖片的超鏈接【將整個圖片設(shè)置為超鏈接】將整個圖片設(shè)置為超鏈接的方法很簡單，只需要將<a>標簽中的文字換成<img>標簽，并在<img>標簽中添加需要設(shè)置為超鏈接的圖片即可。其語法格式如下。<ahref="鏈接地址"><imgsrc="源文件地址"></a>【設(shè)置圖片熱點區(qū)域】除了可以為整個圖片設(shè)置超鏈接，還可以為圖片設(shè)置熱點區(qū)域，也就是將一個圖片劃分成多個可單擊的區(qū)域，單擊不同的區(qū)域?qū)⑻讲煌逆溄由?。在定義圖片熱點區(qū)域時，除了要定義圖片熱點區(qū)域名稱，還要設(shè)置其熱點區(qū)域范圍，此時可以使用<img>標簽中的usemap屬性和<map>標簽來創(chuàng)建，其語法格式如下。<imgsrc="url"usemap="#map名"><mapname="map名"><areashap="圖像熱點區(qū)域形狀"coords="熱點區(qū)域坐標"href="鏈接地址"></map>其中，usemap屬性值的“map名”必須是<map>標簽中的name屬性值，因為可以為不同的圖片創(chuàng)建單擊區(qū)域，每個圖片都會對應(yīng)一個<map>標簽，不同的圖片以usemap的屬性值來區(qū)別不同的<map>標簽。需要注意的是，usemap屬性值中的“map名”前面必須加上#。<map>標簽中至少包含一個<area>標簽，如果一個圖片上有多個可單擊區(qū)域，將會有多個<area>標簽。在<area>標簽中，必須指定coords屬性，該屬性值是一組用逗號隔開的數(shù)字，通過這些數(shù)字可以決定可單擊區(qū)域的位置，但是coords屬性值的具體含義取決于shape的屬性值；shape屬性用于指定可單擊區(qū)域的形狀；其值可以為以下幾種。circle：指定可單擊區(qū)域為圓形，此時coords的值應(yīng)該是類似x,y,z的表示方法。其中，(x,y)代表圓心的坐標，該坐標是相對圖片的左上角而言的，也就是說，圖片左上角的坐標是(0,0)，而z代表圓的半徑，單位為px。circle也可以簡寫為circ。polygon：指定可單擊區(qū)域為多邊形，此時coords的值應(yīng)該是類似x1,y1,x2,y2,x3,y3,…的表示方法。其中，(x1,y1)是多邊形的一個頂點的坐標，(x2,y2)是多邊形的另一個頂點的坐標，至少3個頂點才能形成一個區(qū)域（三角形區(qū)域）。同樣地，這些坐標也是相對圖片左上角而言的。因為在HTML中多邊形會自動閉合，所以在coords中不用重復(fù)第一個坐標來閉合整個區(qū)域。polygon也可以簡寫成poly。rectangle：指定可單擊區(qū)域為矩形，此時coords的值應(yīng)該是類似x1,y1,x2,y2的表示方法。其中，(x1,y2)是矩形的一個角的頂點坐標，(x2,y2)是該角對角的頂點坐標。同樣地，這些坐標也是相對圖片左上角而言的。rectangle也可以簡寫成rect。4.教學(xué)評價【組織階段考核與學(xué)生自評互評、展示考核結(jié)果】本次課的考核注重過程評價：課上考核包括專業(yè)能力與職業(yè)素養(yǎng)兩方面。展示本次課《職業(yè)素養(yǎng)評價表》，組織學(xué)生自評、互評。5．上機指導(dǎo)使用<a>標簽來創(chuàng)建一個以新窗口打開的超鏈接。使用<a>標簽創(chuàng)建一個鏈接到其他網(wǎng)頁的錨點。使用<img>標簽的usemap屬性和<map>標簽設(shè)置一個矩形的圖片熱點區(qū)域。6.板書設(shè)計創(chuàng)建超鏈接錨點圖片的超鏈接教學(xué)評價上機指導(dǎo)課外學(xué)習任務(wù)及學(xué)習指導(dǎo)課前：【教師布置調(diào)研任務(wù)】調(diào)研主題：《討論超鏈接在網(wǎng)頁中的重要性》要求：以小組為單位，討論超鏈接的功能和重要性，分析超鏈接各種使用方法的優(yōu)缺點。制作匯報PPT，提交到“微信群”?！緦W(xué)生調(diào)研，教師線上指導(dǎo)】學(xué)生采用線上調(diào)研的方式，開展調(diào)研。教師使用“微信群”對學(xué)生進行指導(dǎo)。【教師對各組調(diào)研成果進行評價】教師查閱學(xué)生調(diào)研結(jié)果PPT，對每個小組的PPT進行評價，記錄評價成績，并挑選出優(yōu)秀作品。課后：【使用<a>標簽來創(chuàng)建一個以新窗口打開的超鏈接】小組成員團結(jié)協(xié)作，練習創(chuàng)建一個超鏈接并指定新窗口的打開方式；使學(xué)生掌握超鏈接的使用方法。教師使用“微信群”對學(xué)生進行指導(dǎo)。【使用<a>標簽創(chuàng)建一個鏈接到其他網(wǎng)頁的錨點】學(xué)生通過創(chuàng)建錨點和創(chuàng)建超鏈接的方式，實現(xiàn)用戶點擊指定超級解后，跳轉(zhuǎn)到指定網(wǎng)頁的指定位置。教師使用“微信群”對學(xué)生進行?！臼褂?lt;img>標簽的usemap屬性和<map>標簽設(shè)置一個矩形的圖片熱點區(qū)域】學(xué)生選擇一張自己喜愛的圖片，并將該圖片插入到網(wǎng)頁中。在網(wǎng)頁中為該圖片添加一個圖片熱點區(qū)域，實現(xiàn)用戶點擊圖片中指定位置后發(fā)生鏈接跳轉(zhuǎn)。教師使用“微信群”對學(xué)生進行。教師設(shè)置“數(shù)組與函數(shù)”主題討論題目，學(xué)生均可參與討論，分享心得。填表說明：1.本頁可續(xù)頁；2.教學(xué)方法如：項目教學(xué)、案例分析、分組討論、角色扮演、啟發(fā)引導(dǎo)等；3.教學(xué)手段如：課件演示、模型講解、實物講解、掛圖講解、視頻講解、網(wǎng)絡(luò)課程等。網(wǎng)頁設(shè)計與制作授課教案學(xué)年第學(xué)期學(xué)院（部）專業(yè)（學(xué)部）課程名稱電子商務(wù)網(wǎng)頁設(shè)計與制作任課教師課內(nèi)形式理論教學(xué)□課內(nèi)實踐□理實一體習題復(fù)習□考核評價□其他活動□學(xué)習量安排課內(nèi)：課外形式調(diào)查分析小組研討□實踐任務(wù)理論探究□考核評價□匯報展示□其他活動課外：序號4授課日期月日月日月日月日授課班級課內(nèi)教學(xué)內(nèi)容：第4章表格課外學(xué)習任務(wù)：（1）課前：以小組為單位，分析表格的使用方法以及屬性的使用并以PPT的形式記錄下來。（2）課后：=1\*GB3①練習使用對應(yīng)標簽創(chuàng)建表格。=2\*GB3②創(chuàng)建一個課程表。eq\o\ac(○,3)創(chuàng)建嵌套表格。教學(xué)目標：知識目標掌握表格的創(chuàng)建掌握表格屬性的使用掌握表格邊框和對齊掌握表格的合并掌握表格的結(jié)構(gòu)和嵌套能力目標能夠掌握表格的使用；能夠使用表格的屬性對表格樣式進行設(shè)置。素質(zhì)目標較強的專業(yè)知識和自學(xué)能力；豐富知識結(jié)構(gòu)，提升專業(yè)知識；掌握類和對象的使用，理解并應(yīng)用專業(yè)知識。重點難點及解決方法：（1）重點：掌握表格的創(chuàng)建和屬性的使用解決方法：通過課堂示例+各種知識點相結(jié)合的方法，教師講解表格和表格屬性的使用方法，引導(dǎo)學(xué)生積極思考，掌握相應(yīng)知識；同時通過課堂示例展示，使學(xué)生可以掌握創(chuàng)建表格、使用屬性修改表格等相關(guān)知識；培養(yǎng)學(xué)生的思維能力和分析問題解決問題的能力。（2）難點：掌握表格邊框、背景、單元格合并等知識解決方法：通過案例解析+啟發(fā)式教學(xué)講解的方式，細致講解設(shè)置邊框表格和表格結(jié)構(gòu)等相關(guān)內(nèi)容。幫助學(xué)生掌握表格相關(guān)樣式的處理方法和技巧。從實用的角度幫助學(xué)生提高專業(yè)知識。課內(nèi)教學(xué)授課地點：教學(xué)媒體：微課、PPT課件、網(wǎng)頁圖片、相關(guān)教學(xué)視頻等。設(shè)備及材料：多媒體計算機、多媒體教學(xué)廣播軟件、網(wǎng)頁素材圖片、教學(xué)載體源文件等。其它資源：與本次課相關(guān)的專業(yè)技術(shù)論文電子版。學(xué)習效果評價方式：對理論知識學(xué)習效果評價：采用課堂提問、課后習題和查閱技術(shù)論文研讀筆記的方式；對技能的評價：教師對學(xué)生上交網(wǎng)頁作品按制作要求進行綜合性評價；對職業(yè)素養(yǎng)的評價：采用學(xué)生自評、小組內(nèi)評價和教師評價相結(jié)合的方式。課后小結(jié)：填表說明：1.序號，指該課程授課的順序號，應(yīng)與授課計劃一致；2.授課形式在相應(yīng)的選項打“√”。課內(nèi)教學(xué)內(nèi)容及過程時間分配方法及手段1.創(chuàng)建表格表格的開始標簽是<table>，結(jié)束標簽是</table>。所有的表格內(nèi)容都位于這兩個標簽之間。一個完整的表格除了包含<table>標簽外，還要有行標簽<tr>和單元格標簽<td>?？梢哉f，在頁面中要創(chuàng)建一個完整的表格，至少要包含這3個標簽。創(chuàng)建表格的語法格式如下。<table><tr><td>表格的內(nèi)容</td></tr></table>2.表格屬性（教學(xué)重點）【表格寬度】表格的默認寬度是以內(nèi)容為標準的。如果要設(shè)置表格的寬度為某一特定值，而與其中的內(nèi)容無關(guān)，則可以使用width屬性，其語法格式如下。<tablewidth="表格寬度"><tr><td>表格的內(nèi)容</td></tr></table>其中，表格寬度可以是表格的絕對寬度（單位為px），也可以設(shè)置為相對寬度，即相對窗口的百分比?！颈砀窀叨取砍丝梢詾楸砀裰付▽挾戎?，還可以為表格指定高度。通常表格的高度都是由表格的行數(shù)及單元格中的內(nèi)容決定的。為表格設(shè)置高度后，如果表格的行數(shù)與單元格中的內(nèi)容使表格的高度高于指定的高度，則瀏覽器將以實際的高度顯示表格；如果實際高度低于指定高度，則瀏覽器以指定高度顯示表格。<table>標簽的height屬性可以用來指定表格的高度，其語法格式如下。<tableheight="表格高度"><tr><td>表格的內(nèi)容</td></tr></table>【表格背景圖片】通過<table>標簽的background屬性可以為表格指定背景圖片，這種指定方法有點類似為網(wǎng)頁指定背景圖片。如果背景圖片比表格小，則會平鋪該背景圖片以充滿整個表；如果背景圖片比表格大，則會對背景圖片進行裁剪，以適應(yīng)該表格。設(shè)置表格背景圖片的語法格式如下。<tablebackground="圖像源文件地址"><tr><td>表格的內(nèi)容</td></tr></table>background的屬性值也是一個標準的URL地址，其圖片可以為GIF或JPEG格式?！締卧耖g距】單元格間距是指表格中兩個相鄰單元格之間的距離和單元格與表格邊框的距離。在默認情況下，單元格間距是2px。設(shè)置<table>標簽的cellspacing屬性值，可以增大或縮小單元格的間距，其語法格式如下。<tablecellspacing="間距大小"><tr><td>表格的內(nèi)容</td></tr></table>【表格內(nèi)單元格與文字的距離】表格內(nèi)單元格與文字的距離是指在單元格內(nèi)，文字與單元格邊框的距離。在默認情況下，文字是緊貼著單元格的邊框出現(xiàn)的，這樣會顯得頁面的內(nèi)容有些擁擠。這時可以通過<table>標簽的cellpadding屬性來調(diào)整這一距離，其語法格式如下。<tablecellpadding="單元格與文字距離的值"><tr><td>表格的內(nèi)容</td></tr></table>其中，單元格與文字的距離以px為單位，默認設(shè)置為0px。3.表格邊框（教學(xué)重點）【邊框?qū)挾取吭贖TML中，默認表格的邊框?qū)挾葹?，即不顯示表格的邊框。如果要顯示表格的邊框，就必須指定表格邊框?qū)挾?。在HTML中，可以使用<table>標簽的border屬性來設(shè)置表格邊框的寬度，其語法格式如下。<tableborder="表格的邊框?qū)挾?><tr><td>表格的內(nèi)容</td></tr></table>【邊框顏色】在默認情況下，邊框是灰色的。如果整個頁面設(shè)置了特定的顏色，為了使表格和整個頁面協(xié)調(diào)一致，就應(yīng)該為表格的邊框設(shè)置配色。在HTML中，可以使用<table>標簽的bordercolor屬性來設(shè)置表格邊框的顏色，其語法格式如下。<tableborder="表格的邊框?qū)挾?bordercolor="邊框顏色"><tr><td>表格的內(nèi)容</td></tr></table>與其他頁面標簽一樣，這里的邊框顏色可以是顏色的英文名稱，也可以是十六進制的顏色碼。需要注意的是，要想為邊框設(shè)置顏色，必須先為邊框設(shè)置寬度，否則看不到效果。4.設(shè)置表格行的對齊方式【垂直對齊方式】valign屬性可以設(shè)置行的垂直對齊方式，以使行中的內(nèi)容都垂直對齊。其默認值為垂直居中對齊。垂直對齊方式的語法格式如下。<table><trvalign=""><td>表格內(nèi)容</td></tr></table>valign屬性有3個值：middle、top、bottom，分別表示居中對齊、居上對齊、居下對齊。這3個屬性值除了可以寫在<tr>標簽中，還可以寫在<td>標簽中。寫在<td>標簽中，用來控制每個列中的內(nèi)容垂直對齊，其用法與寫在<tr>標簽中的用法一樣?！舅綄R方式】align屬性可以設(shè)置行的水平對齊方式，以使行中的內(nèi)容都水平對齊。其默認值為水平居左對齊。水平對齊方式的語法格式如下。<table><tralign=""><td>表格內(nèi)容</td></tr></table>align屬性有3個值：center、right、left，分別表示居中對齊、居右對齊和居左對齊。5.列和行的合并【列的合并】colspan屬性可以合并列，就是把一行中的某個單元格與其右側(cè)的一個或多個單元格合并。其語法格式如下。<table><tr><tdcolspan="所跨的列數(shù)">表格的內(nèi)容</td></tr></table>這里設(shè)置的是單元格所跨的列數(shù)，而不是像素數(shù)。需要注意的是，設(shè)置水平跨度時，某一行單元格的跨度總和不能超過表格內(nèi)的總列數(shù)，否則表格將會出現(xiàn)無法編輯的空白區(qū)域。【行的合并】rowspan屬性可以合并行，就是合并單元格與其下方的一個或幾個單元格。其語法格式如下。<table><tr><tdrowspan="所跨的行數(shù)">表格的內(nèi)容</td></tr></table>這里設(shè)置的是單元格所跨的行數(shù)。同樣地，設(shè)置垂直跨度時，某一列單元格的跨度總和不能超過表格的總行數(shù)，否則表格內(nèi)也會出現(xiàn)無法編輯的空白區(qū)域。6.表格結(jié)構(gòu)【表頭】通常表格的第1行都是用于說明本列數(shù)據(jù)含義的表頭行，如圖4.14所示的第1行。表頭標簽<thead>用于組合表格的表頭內(nèi)容。使用表頭標簽<thead>可以讓網(wǎng)頁中過長的表格在打印時，每頁的最前面都顯示表頭標簽<thead>的內(nèi)容。表頭的語法格式如下。<thead><tr><td>單元格內(nèi)的文字</td></tr></thead>【主體】表格的主體就是表格真正要表達的內(nèi)容和數(shù)據(jù)，一般占表格的大部分內(nèi)容。通過表主體標簽<tbody>可以更好地劃分表格的結(jié)構(gòu)。設(shè)置表格主體部分的語法格式如下。<tbody><tr><td>單元格內(nèi)的文字</td></tr></tbody>【表尾】表格的表尾主要用于標注表格的額外信息，如內(nèi)容的設(shè)計者、創(chuàng)建日期、總和等。使用表格的表尾標簽<tfoot>可以讓網(wǎng)頁中過長的表格在打印時，每頁的最后面都顯示表尾標簽<tfoot>的內(nèi)容。表尾的語法格式如下。<tfoot><tr><td>單元格內(nèi)的文字</td></tr></tfoot>7.表格標題表格經(jīng)常包括標題。在默認情況下，表格的標題是在表格的上方居中顯示。在HTML中，表格標題用<caption>標簽來設(shè)置。通常<caption>標簽是緊跟在<table>標簽之后的，但是它可以出現(xiàn)在<table>標簽與<tr>標簽之間的任何位置。其語法格式如下。<caption>表格的標題文字</caption>8.表格嵌套在實際應(yīng)用中，表格并不是單一出現(xiàn)的，往往需要在表格內(nèi)嵌套其他的表格來實現(xiàn)頁面的整體布局。雖然這種方式已經(jīng)被div布局取代，但某些情況下還在使用這種方式。一般布局情況下，需要使用一些可視化軟件來布局，這樣看起來比較直觀，容易達到預(yù)期的效果，但是也可以直接輸入代碼來實現(xiàn)。下面舉例說明表格的嵌套。9.教學(xué)評價【組織階段考核與學(xué)生自評互評、展示考核結(jié)果】本次課的考核注重過程評價：課上考核包括專業(yè)能力與職業(yè)素養(yǎng)兩方面。展示本次課《職業(yè)素養(yǎng)評價表》，組織學(xué)生自評、互評。10．上機指導(dǎo)【疑難解答】練習使用對應(yīng)標簽創(chuàng)建表格。創(chuàng)建一個課程表創(chuàng)建嵌套表格11.板書設(shè)計第4章表格創(chuàng)建表格表格屬性表格邊框設(shè)置表格行的對齊方式列和行的合并表格結(jié)構(gòu)表格標題表格嵌套教學(xué)評價思考與練習課外學(xué)習任務(wù)及學(xué)習指導(dǎo)課前：【教師布置調(diào)研任務(wù)】調(diào)研主題：《在網(wǎng)頁中如何使用表格元素》要求：以小組為單位，分析如何實現(xiàn)在靜態(tài)網(wǎng)頁布局中實現(xiàn)多種表格樣式的設(shè)置；同時制作匯報PPT（PPT不得不于5頁，圖文并茂），提交到“微信群”?！緦W(xué)生調(diào)研，教師線上指導(dǎo)】學(xué)生采用線上調(diào)研的方式，開展調(diào)研。教師使用“微信群”對學(xué)生進行指導(dǎo)?！窘處煂Ω鹘M調(diào)研成果進行評價】教師查閱學(xué)生調(diào)研結(jié)果PPT，對每個小組的PPT進行評價，記錄評價成績，并挑選出優(yōu)秀作品。課后：【練習使用對應(yīng)標簽創(chuàng)建表格】小組成員團結(jié)協(xié)作，通過表格標簽創(chuàng)建一個3行3列的表格，并為表格添加背景圖片。教師使用“微信群”對學(xué)生進行指導(dǎo)?！緞?chuàng)建一個課程表】學(xué)生通過之前所學(xué)的知識，創(chuàng)建一個擁有3行6列的基礎(chǔ)表格，然后通過<table>標簽的屬性設(shè)置表格的文本為居中對齊，設(shè)置表格邊框顏色為藍色、表格高度為150px、表格寬度為600px。教師使用“微信群”對學(xué)生進行?！緞?chuàng)建嵌套表格】學(xué)生通過之前所學(xué)的知識，創(chuàng)建一個基礎(chǔ)表格，然后在該表格第二行第二列的單元格中再次創(chuàng)建一個新表格。教師使用“微信群”對學(xué)生進行。填表說明：1.本頁可續(xù)頁；2.教學(xué)方法如：項目教學(xué)、案例分析、分組討論、角色扮演、啟發(fā)引導(dǎo)等；3.教學(xué)手段如：課件演示、模型講解、實物講解、掛圖講解、視頻講解、網(wǎng)絡(luò)課程等。網(wǎng)頁設(shè)計與制作授課教案學(xué)年第學(xué)期學(xué)院（部）專業(yè)（學(xué)部）課程名稱電子商務(wù)網(wǎng)頁設(shè)計與制作任課教師課內(nèi)形式理論教學(xué)□課內(nèi)實踐□理實一體習題復(fù)習□考核評價□其他活動□學(xué)習量安排課內(nèi)：課外形式調(diào)查分析小組研討□實踐任務(wù)理論探究□考核評價□匯報展示□其他活動課外：序號5授課日期月日月日月日月日授課班級課內(nèi)教學(xué)內(nèi)容：第5章多媒體和列表課外學(xué)習任務(wù)：（1）課前：以小組為單位，分析如何在網(wǎng)頁中添加和使用使用多媒體和列表并以PPT的形式記錄下來。（2）課后：=1\*GB3①為網(wǎng)頁插入指定的視頻文件，并設(shè)置視頻的播放模式。=2\*GB3②使用<audio>標簽為網(wǎng)頁插入一個音頻文件，并顯示音頻文件的播放控件。=3\*GB3③使用<ul>標簽和<ol>標簽創(chuàng)建嵌套列表教學(xué)目標：知識目標掌握向網(wǎng)頁中插入視頻和音頻文件；掌握設(shè)置視頻和音頻文件自動播放與循環(huán)播放；掌握為視頻文件設(shè)置封面；掌握無序列表和有序列表的使用。能力目標能夠?qū)⒁曨l和音頻文件插入到網(wǎng)頁效果；能夠控制視頻和音頻的播放模式；能夠靈活使用有序和無序列表。素質(zhì)目標較強的專業(yè)知識和自學(xué)能力；豐富知識結(jié)構(gòu)，提升專業(yè)知識；掌握對象模型和事件的使用，理解并應(yīng)用專業(yè)知識。重點難點及解決方法：（1）重點：掌握視頻和音頻文件的在網(wǎng)頁中的使用方法解決方法：通過知識點講解+課堂示例相結(jié)合的方法，教師講解視頻和音頻元素如何在網(wǎng)頁中使用，引導(dǎo)學(xué)生積極思考，掌握相應(yīng)知識；同時通過課堂示例展示，使學(xué)生可以掌握視頻和音頻播放的相關(guān)知識；培養(yǎng)學(xué)生的思維能力和分析問題解決問題的能力。（2）難點：有序和無序列表的使用解決方法：通過案例解析+啟發(fā)式教學(xué)講解的方式，細致講解無序列表和有序列表的使用方法。幫助學(xué)生掌握無序列表和有序列表的相關(guān)屬性的使用方法和技巧。從實用的角度幫助學(xué)生提高專業(yè)知識。課內(nèi)教學(xué)授課地點：教學(xué)媒體：微課、PPT課件、網(wǎng)頁圖片、相關(guān)教學(xué)視頻等。設(shè)備及材料：多媒體計算機、多媒體教學(xué)廣播軟件、網(wǎng)頁素材圖片、教學(xué)載體源文件等。其它資源：與本次課相關(guān)的專業(yè)技術(shù)論文電子版。學(xué)習效果評價方式：對理論知識學(xué)習效果評價：采用課堂提問、課后習題和查閱技術(shù)論文研讀筆記的方式；對技能的評價：教師對學(xué)生上交網(wǎng)頁作品按制作要求進行綜合性評價；對職業(yè)素養(yǎng)的評價：采用學(xué)生自評、小組內(nèi)評價和教師評價相結(jié)合的方式。課后小結(jié)：填表說明：1.序號，指該課程授課的順序號，應(yīng)與授課計劃一致；2.授課形式在相應(yīng)的選項打“√”。課內(nèi)教學(xué)內(nèi)容及過程時間分配方法及手段1.多媒體元素Web的最大魅力就是可以將圖像、動畫、音頻和視頻等文件插入網(wǎng)頁中，這些圖像、動畫、音頻和視頻等統(tǒng)稱為多媒體或多媒體文件。在網(wǎng)頁中插入多媒體，可以讓網(wǎng)頁的內(nèi)容更生動、豐富。HTML支持的多媒體文件格式如表5.1所示。表5.1HTML支持的多媒體文件格式多媒體格式文件擴展名說明AVI.aviAVI（AudioVideoInterleave）格式是由微軟公司開發(fā)的WMV.wmvWMV（WindowsMediaVideo）格式是由微軟公司開發(fā)的MPEG.mpg.mpegMPEG（MovingPictureExpertsGroup）格式是因特網(wǎng)上最流行的格式之一，并得到主流瀏覽器的支持QuickTime.movQuickTime格式是由蘋果公司開發(fā)的RealVideo.rm.ramFlash.swf.flvFlash格式是由Macromedia公司開發(fā)的。這種文件格式需要對應(yīng)瀏覽器安裝Flash播放器插件MPEG-4.mp4MPEG-4（帶H.264視頻壓縮）格式是一種針對因特網(wǎng)的格式，也是HTML支持的主要視頻文件

式MIDI.mid.midiMIDI（MusicInstrumentDigitalInterface）格式是一種針對電子音樂設(shè)備（例如合成器和聲卡）的格式。大多數(shù)流行的網(wǎng)絡(luò)瀏覽器都支持MIDIRealAudio.rm.ramRealAudio格式是由RealMedia公司針對因特網(wǎng)開發(fā)的。該格式也支持視頻WAV.wavWAV格式是由IBM公司和微軟公司開發(fā)的WMA.wmaWMA（WindowsMediaAudio）格式的傳輸質(zhì)量優(yōu)于MP3，并可兼容大多數(shù)播放器。WMA文件可作為連續(xù)的數(shù)據(jù)流來傳輸，這使得它對于網(wǎng)絡(luò)電臺或在線音樂很實用MP3.mp3.mpgaMP3格式是網(wǎng)頁開發(fā)中常用的音頻格式2.視頻元素【插入視頻元素】向頁面中插入視頻元素需要用到<video>標簽，其語法格式如下。<videowidth="播放器寬度"height="播放器高度"src="源文件地址"type="源文件類型"controls><video>標簽用于向網(wǎng)頁中插入一個視頻，width屬性和height屬性用于指定播放器的窗口尺寸，src屬性用于指定視頻源文件的路徑，type屬性用于指定視頻源文件的格式，controls屬性用于指定播放器顯示播放控件。【循環(huán)播放視頻】在默認情況下，視頻在網(wǎng)頁中播放一次以后就會自動停止。如果希望該視頻可循環(huán)播放，則需要在<video>標簽中添加loop屬性。其語法格式如下。<videocontrolssrc="源文件地址"type="源文件類型"loop></video><video>標簽中添加的loop屬性不需要指定屬性值。下面通過一個例子來了解視頻循環(huán)播放的方法?！咀詣硬シ乓曨l】如果要讓視頻在打開頁面后自動播放，就需要在<video>標簽中添加autoplay屬性。其語法格式如下。<videocontrolssrc="源文件地址"type="源文件類型"autoplay></video><video>標簽中添加的autoplay屬性不需要指定屬性值。【設(shè)置視頻封面】視頻封面是觀眾對視頻的第一印象。在快速滾動的瀏覽模式下，用戶往往只有幾秒的時間來決定是否單擊并觀看對應(yīng)的視頻，因此一個設(shè)計精良的視頻封面是十分重要的。如果要為視頻添加封面，就需要在<video>標簽中添加poster屬性。其語法格式如下。<videocontrolssrc="源文件地址"type="源文件格式"poster="圖片地址"></video>poster屬性會通過路徑指定視頻等待播放時的封面。視頻封面可以選擇靜態(tài)圖片，也可以選擇動態(tài)圖片（GIF格式）。3.音頻元素在網(wǎng)頁中加入音頻元素有助于為網(wǎng)頁營造特定的氛圍或情境，從而提升用戶的瀏覽體驗。為網(wǎng)頁添加音頻元素需要用到<audio>標簽，改變其屬性值可以將指定的音頻文件添加到網(wǎng)頁中。其語法格式如下。<audiosrc="源文件地址"><audio>標簽中src屬性用于指定要播放的音頻源文件。該標簽也支持autoplay（自動播放）、controls（顯示播放控件）、loop（循環(huán)播放）的相關(guān)屬性。另外，還可以通過muted屬性控制音頻文件是否為靜音。4.無序列表【無序列表結(jié)構(gòu)】無序列表以<ul>標簽開始、以</ul>標簽結(jié)束。無序列表內(nèi)的列表項用<li>和</li>標簽表示。創(chuàng)建無序列表的語法格式如下。<ul><li>無序列表項1</li><li>無序列表項2</li><li>無序列表項3</li>…</ul>其中，每一個列表項前面都要有一個<li>標簽，它表示一個新列表項的開始。從上面代碼可以看出，<ul>與</ul>標簽之間的內(nèi)容才是無序列表。每個列表可能有一個或多個列表項目，每個<li>標簽與</li>標簽之間的內(nèi)容是一個列表項目?！緹o序列表的列表項樣式】在默認情況下，無序列表的列表項符號是圓點。開發(fā)人員可以使用type屬性將列表項符號設(shè)置為空心圓點或者空心方塊。修改無序列表項符號的語法格式如下。<ultype="符號取值"><li>無序列表項</li><li>無序列表項</li><li>無序列表項</li>…<ul>無序列表的type屬性值有3種，其具體取值如表5.2所示。表5.2無序列表的type屬性值type的取值設(shè)置的符號樣式設(shè)置效果disc圓點符號，為默認值●circle空心圓點○square方塊■5.有序列表【有序列表結(jié)構(gòu)】有序列表以<ol>標簽開始、以</ol>標簽結(jié)束。有序列表內(nèi)的列表項也用<li>和</li>標簽表示。創(chuàng)建有序列表的語法格式如下。<ol><li>有序列表項1</li><li>有序列表項2</li><li>有序列表項3</li>…</ol>【有序列表的列表項樣式】在默認情況下，有序列表的列表項編號是阿拉伯數(shù)字。通過type屬性也可以修改有序列表的編號類型，其語法格式如下。<oltype="符號取值"><li>有序列表項</li><li>有序列表項</li><li>有序列表項</li>…<ol>有序列表的type屬性值有5種，其具體取值如表5.3所示。表5.3有序列表的type屬性值type的取值設(shè)置的符號樣式1默認效果，以數(shù)字1、2、3……排列a以小寫字母a、b、c……排列A以大寫字母A、B、C……排列i以小寫羅馬數(shù)字i、ii、iii、iv……排列I以大寫羅馬數(shù)字Ⅰ、Ⅱ、Ⅲ、Ⅳ……排列6.嵌套列表HTML允許在一個列表中嵌套另一個列表，每個嵌套的列表會再次以縮進方式顯示，但不建議對列表進行多次嵌套，否則瀏覽器中的顯示會有點亂。在HTML中，無序列表中除了可以嵌套無序列表外，還可以嵌套有序列表，反之亦然，這種嵌套稱為混合嵌套?；旌锨短妆葐为毲短卓瓷先ジ烙^。7.定義列表定義列表也稱為字典列表，它是一種包含兩個層次的列表，主要用于名詞解釋或名詞定義。名詞是第一層次，其解釋或定義是第二層次。另外，這種列表不包括項目符號，每個列表項帶有一段縮進的定義文字。創(chuàng)建定義列表的語法格式如下。<dl><dt>名詞1</dt><dd>名詞解釋1</dd><dt>名詞2</dt><dd>名詞解釋2</dd><dt>名詞3</dt><dd>名詞解釋3</dd>……</dl>其中，<dl>標簽表示定義列表的開始，</dl>表示定義列表的結(jié)束，<dt>表示這是一個要解釋的名詞，<dd>表示這段文字是對前面名詞的解釋。8.目錄列表目錄列表主要用于顯示文件列表，因此與無序列表相比，目錄列表項目中的文字數(shù)量應(yīng)該比無序列表中的少。事實上，目錄列表屬于無序列表的一種，大多數(shù)瀏覽器都不再區(qū)分目錄列表與無序列表，對這兩種列表的顯示形式都是一致的；只有少數(shù)瀏覽器還區(qū)分目錄列表與無序列表。目錄列表用<dir>標簽來設(shè)置，其語法格式如下。<dirtype="符號取值"><li>列表項目1</li><li>列表項目2</li><li>列表項目3</li>…</dir>9.教學(xué)評價【組織階段考核與學(xué)生自評互評、展示考核結(jié)果】本次課的考核注重過程評價：課上考核包括專業(yè)能力與職業(yè)素養(yǎng)兩方面。展示本次課《職業(yè)素養(yǎng)評價表》，組織學(xué)生自評、互評。10.上機指導(dǎo)1．為網(wǎng)頁插入指定的視頻文件，并設(shè)置視頻的播放模式。。2．使用<audio>標簽為網(wǎng)頁插入一個音頻文件，并顯示音頻文件的播放控件。3.使用<ul>標簽和<ol>標簽創(chuàng)建嵌套列表。11.板書設(shè)計多媒體元素視頻元素音頻元素無序列表有序列表 嵌套列表定義列表目錄列表教學(xué)評價思考與練習課外學(xué)習任務(wù)及學(xué)習指導(dǎo)課前：【教師布置調(diào)研任務(wù)】調(diào)研主題：《分析如何在網(wǎng)頁中中使用多媒體元素和列表》要求：以小組為單位，分析如何使用視頻和音頻文件，討論無序列表和有序列表的使用方式；同時制作匯報PPT，提交到“微信群”?！緦W(xué)生調(diào)研，教師線上指導(dǎo)】學(xué)生采用線上調(diào)研的方式，開展調(diào)研。教師使用“微信群”對學(xué)生進行指導(dǎo)?！窘處煂Ω鹘M調(diào)研成果進行評價】教師查閱學(xué)生調(diào)研結(jié)果PPT，對每個小組的PPT進行評價，記錄評價成績，并挑選出優(yōu)秀作品。課后：【為網(wǎng)頁插入指定的視頻文件，并設(shè)置視頻的播放模式】小組成員團結(jié)協(xié)作，使用使用<video>標簽在頁面中插入一個視頻文件，并使用該標簽的loop屬性、autoplay屬性和controls屬性來設(shè)置視頻文件在網(wǎng)頁中的播放模式。教師使用“微信群”對學(xué)生進行指導(dǎo)。【使用<audio>標簽為網(wǎng)頁插入一個音頻文件，并顯示音頻文件的播放控件】學(xué)生通過之前所學(xué)的知識，實現(xiàn)使用<audio>標簽在頁面中插入一個音頻文件，并使用<audio>標簽中的controls屬性讓音頻文件播放控件顯示在網(wǎng)頁中。教師使用“微信群”對學(xué)生進行指導(dǎo)?！臼褂?lt;ul>標簽和<ol>標簽創(chuàng)建嵌套列表】學(xué)生通過之前所學(xué)的知識，實現(xiàn)使用<ul>標簽創(chuàng)建一個無序列表，然后在無序列表中使用<ol>標簽嵌套一個有序列表，最后在有序列表中使用<ul>標簽嵌套一個無序列表。教師使用“微信群”對學(xué)生進行指導(dǎo)。填表說明：1.本頁可續(xù)頁；2.教學(xué)方法如：項目教學(xué)、案例分析、分組討論、角色扮演、啟發(fā)引導(dǎo)等；3.教學(xué)手段如：課件演示、模型講解、實物講解、掛圖講解、視頻講解、網(wǎng)絡(luò)課程等。網(wǎng)頁設(shè)計與制作授課教案學(xué)年第學(xué)期學(xué)院（部）專業(yè)（學(xué)部）課程名稱電子商務(wù)網(wǎng)頁設(shè)計與制作任課教師課內(nèi)形式理論教學(xué)□課內(nèi)實踐□理實一體習題復(fù)習□考核評價□其他活動□學(xué)習量安排課內(nèi)：課外形式調(diào)查分析小組研討□實踐任務(wù)理論探究□考核評價□匯報展示□其他活動課外：序號6授課日期月日月日月日月日授課班級課內(nèi)教學(xué)內(nèi)容：第6章表單課外學(xué)習任務(wù)：（1）課前：以小組為單位，討論網(wǎng)頁表單的相關(guān)內(nèi)容并以PPT的形式記錄下來。（2）課后：=1\*GB3①添加一個表單，并為表單設(shè)置鏈接跳轉(zhuǎn)和跳轉(zhuǎn)方式。=2\*GB3②使用表單標簽創(chuàng)建一個問題調(diào)查表。=3\*GB3③在表單中添加下拉列表控件。教學(xué)目標：知識目標掌握添加表單；掌握添加表單；掌握下拉列表；掌握文本域。能力目標能夠掌握表單的各種功能；能夠使用下拉列表和文本域。素質(zhì)目標較強的專業(yè)知識和自學(xué)能力；豐富知識結(jié)構(gòu)，提升專業(yè)知識；掌握表單的使用，理解并應(yīng)用專業(yè)知識。重點難點及解決方法：（1）重點：表單元素的使用解決方法：通過知識點講解+課堂示例相結(jié)合的方法，教師講解表單各種樣式的相關(guān)內(nèi)容內(nèi)容，引導(dǎo)學(xué)生積極思考，掌握相應(yīng)知識；同時通過課堂示例展示，使學(xué)生可以掌握表單的使用規(guī)則；培養(yǎng)學(xué)生的思維能力和分析問題解決問題的能力。（2）難點：下拉列表和文本域解決方法：通過案例解析+啟發(fā)式教學(xué)講解的方式，細致講解下拉列表和文本域的使用。幫助學(xué)生掌握下拉列表和文本域的使用方法和技巧。從實用的角度幫助學(xué)生提高專業(yè)知識。課內(nèi)教學(xué)授課地點：教學(xué)媒體：微課、PPT課件、網(wǎng)頁圖片、相關(guān)教學(xué)視頻等。設(shè)備及材料：多媒體計算機、多媒體教學(xué)廣播軟件、網(wǎng)頁素材圖片、教學(xué)載體源文件等。其它資源：與本次課相關(guān)的專業(yè)技術(shù)論文電子版。學(xué)習效果評價方式：對理論知識學(xué)習效果評價：采用課堂提問、課后習題和查閱技術(shù)論文研讀筆記的方式；對技能的評價：教師對學(xué)生上交網(wǎng)頁作品按制作要求進行綜合性評價；對職業(yè)素養(yǎng)的評價：采用學(xué)生自評、小組內(nèi)評價和教師評價相結(jié)合的方式。課后小結(jié)：填表說明：1.序號，指該課程授課的順序號，應(yīng)與授課計劃一致；2.授課形式在相應(yīng)的選項打“√”。課內(nèi)教學(xué)內(nèi)容及過程時間分配方法及手段1.添加表單表單可以用來收集用戶在客戶端提交的各種信息，例如，在網(wǎng)站登錄或注冊時進行的鍵盤和鼠標操作都是將表單作為載體傳遞給服務(wù)器的。表單其實是頁面中的一個特定區(qū)域，由<form>標簽和</form>標簽定義，所有的表單元素只有在這對標簽之間才有效。表單的基本語法如下。<form表單標簽的各種屬性設(shè)置>設(shè)置各種表單元素</form>在<form>標簽中可以設(shè)置表單的屬性，包括表單名稱、表單處理程序等?！炬溄犹D(zhuǎn)】action屬性用來設(shè)置鏈接跳轉(zhuǎn)，也就是在提交表單的內(nèi)容時，按照鏈接地址跳轉(zhuǎn)到相應(yīng)的頁面進行處理。由于action屬性用來控制整個表單的提交內(nèi)容，因此action屬性要寫在<form>標簽中。其語法格式如下。<formaction="鏈接跳轉(zhuǎn)的地址">設(shè)置各種表單元素</form>鏈接跳轉(zhuǎn)的地址除了可以是絕對地址和相對地址外，還可以是其他的地址形式。如果表單中沒有任何表單元素，這個表單傳遞給處理程序的內(nèi)容就是空的。如果省略action屬性，則默認為提交到本頁，即本頁為接收并處理表單的程序?？梢越邮詹⑻幚肀韱蔚某绦蛘Z言很多，常用的有ASP、ASPX、JSP、PHP等?！炬溄犹D(zhuǎn)方式】設(shè)置鏈接跳轉(zhuǎn)以后，還需要設(shè)置鏈接跳轉(zhuǎn)時使用的跳轉(zhuǎn)方式。此時可以通過method屬性來設(shè)置，它決定了表單中已收集的數(shù)據(jù)以什么樣的方式發(fā)送到服務(wù)器。其語法結(jié)構(gòu)如下。<formmethod="表單的鏈接跳轉(zhuǎn)方式">表單元素</form>表單的鏈接跳轉(zhuǎn)方

溫馨提示

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

最新文檔

評論

0/150

提交評論