HTML CSS DIV網(wǎng)頁設(shè)計(jì)與布局（第3版）（微課版）-教案 第1章 認(rèn)識(shí)網(wǎng)站開發(fā)_第1頁
HTML CSS DIV網(wǎng)頁設(shè)計(jì)與布局（第3版）（微課版）-教案 第1章 認(rèn)識(shí)網(wǎng)站開發(fā)_第2頁
HTML CSS DIV網(wǎng)頁設(shè)計(jì)與布局（第3版）（微課版）-教案 第1章 認(rèn)識(shí)網(wǎng)站開發(fā)_第3頁
HTML CSS DIV網(wǎng)頁設(shè)計(jì)與布局（第3版）（微課版）-教案 第1章 認(rèn)識(shí)網(wǎng)站開發(fā)_第4頁
HTML CSS DIV網(wǎng)頁設(shè)計(jì)與布局（第3版）（微課版）-教案 第1章 認(rèn)識(shí)網(wǎng)站開發(fā)_第5頁
已閱讀5頁，還剩2頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

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

CS6

2.HTML簡(jiǎn)介（教學(xué)重點(diǎn)）【HTML基本概念】超文本標(biāo)記語言（HypertextMarkedLanguage，HTML）是一種用來制作超文本文件的簡(jiǎn)單標(biāo)記語言。用HTML編寫的超文本文件稱為HTML文件，它能獨(dú)立于各種操作系統(tǒng)平臺(tái)。自1990年以來，HTML就被全球廣域網(wǎng)用作其信息表示語言。【HTML基本結(jié)構(gòu)】HTML文件包括文件頭和文件體兩部分。文件頭中主要是對(duì)這個(gè)HTML文件進(jìn)行一些必要的定義，文件體中的內(nèi)容才是真正要顯示的各種文件信息。一個(gè)HTML文件包含各種HTML元素，如圖片、段落、表格等。這些HTML元素在頁面中需要使用標(biāo)簽來分隔，因此也可以說HTML文件就是由各種HTML元素和標(biāo)簽組成的。一般情況下，HTML文件的基本結(jié)構(gòu)如下。1 <html> /*HTML文件的開始標(biāo)簽，表示這是一個(gè)HTML文件*/2 <head> /*文件頭的開始標(biāo)簽，這對(duì)標(biāo)簽之間的是頭部信息*/3 頭部信息 /*文件頭的內(nèi)容，也叫作文件的頭部信息*/4 </head> /*文件頭的結(jié)束標(biāo)簽*/5 <body> /*文件體開始標(biāo)簽*/6 文件主體，正文部分 /*文件的主體部分，是文件真正要顯示的信息*/7 </body> /*文件體結(jié)束標(biāo)簽*/8 </html> /*HTML文件的結(jié)束標(biāo)簽*/3.一個(gè)簡(jiǎn)單的HTML實(shí)例【編寫HTML代碼】（1）在計(jì)算機(jī)桌面上右擊并在彈出的快捷菜單中選擇“新建”|“文本文檔”命令，打開記事本，如圖1.3所示。（2）在文本文檔中直接輸入如下內(nèi)容。1 <!DOCTYPEhtml>2 <html>3 <head>4 <title>一個(gè)簡(jiǎn)單的HTML實(shí)例</title>5 </head>6 <body>7 <h2align="center">第一個(gè)HTML文件</h2>8 <hrwidth="70%">9 <p>下面跟我進(jìn)入HTML的領(lǐng)域</p>10 <p>來領(lǐng)略這個(gè)奇妙而多彩的世界！！</p>11 </body>12 </html>（3）輸入代碼以后，選擇“文件”|“保存”命令。（4）在桌面上右擊“新建文本文檔.txt”，在彈出的快捷菜單中選擇“重命名”命令，然后設(shè)置文本文檔的名稱為1.1.html，如圖1.4所示?！具\(yùn)行HTML文件查看效果】4.HTML基本標(biāo)簽（教學(xué)難點(diǎn)）【文件類型指令標(biāo)簽】（1）在HTML5中，說明文件類型的語法如下所示。<!DOCTYPEhtml>（2）在HTML4.0中，說明文件類型需要引用DTD。DTD會(huì)規(guī)定標(biāo)記語言的規(guī)則，語法如下所示。<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd">【文件類型標(biāo)簽】文件類型標(biāo)簽<html>是雙標(biāo)簽，用來標(biāo)識(shí)該文件是HTML類型的文件并標(biāo)記文件的起始和結(jié)束位置，其語法如下。1 <html>2 </html>【HTML頭標(biāo)簽】HTML頭標(biāo)簽是以<head>為開始標(biāo)簽、以</head>為結(jié)束標(biāo)簽的雙標(biāo)簽。它用于包含當(dāng)前文件的相關(guān)信息，一般包括標(biāo)題、基底信息、元信息等。一般情況下，CSS樣式也定義在頭標(biāo)簽中。通常HTML頭標(biāo)簽之間的內(nèi)容被稱為HTML的頭部。定義在HTML頭部的內(nèi)容一般不會(huì)在網(wǎng)頁上直接顯示，而是通過另外的方式起作用。例如，定義在HTML頭部的標(biāo)題不會(huì)顯示在頁面中，但是會(huì)在頁面的標(biāo)題欄中出現(xiàn)。HTML的頭部通常包含表1.1所示的部分或全部標(biāo)簽。當(dāng)然，這些標(biāo)簽也可以省略。表1.1HTML的頭部包含的標(biāo)簽標(biāo)簽或?qū)傩怨δ?lt;base>用于設(shè)置當(dāng)前文件的URL基準(zhǔn)，被稱為基底網(wǎng)址<basefont>用于設(shè)置基準(zhǔn)文字的樣式，包括文字的字體、字號(hào)、顏色等<title>用于設(shè)置頁面的標(biāo)題（顯示在瀏覽器的標(biāo)題欄中）。該標(biāo)簽屬于HTML的基本標(biāo)簽，開發(fā)人員一般情況下都會(huì)設(shè)置該標(biāo)簽的內(nèi)容，以幫助瀏覽者了解頁面的主題<isindex>用于說明該文件可檢索的網(wǎng)關(guān)腳本，由服務(wù)器自動(dòng)建立<meta>文件的元信息標(biāo)簽，用于設(shè)置文件本身的一些信息，如設(shè)置關(guān)鍵字、頁面的作者等<style>用于設(shè)置CSS樣式表的內(nèi)容<link>用于設(shè)置該文件相關(guān)的外部文件的鏈接<script>用于設(shè)置頁面腳本程序的內(nèi)容、語言等【頁面標(biāo)題標(biāo)簽】在HTML文件中，頁面標(biāo)題信息設(shè)置在頁面的頭部，也就是位于<head>與</head>標(biāo)簽之間。頁面標(biāo)題標(biāo)簽以<title>開始、以</title>結(jié)束，是一個(gè)雙標(biāo)簽，其語法如下。<title>標(biāo)題內(nèi)容</title>【HTML主體標(biāo)簽】HTML主體標(biāo)簽是以<body>為開始標(biāo)簽、以</body>為結(jié)束標(biāo)簽的雙標(biāo)簽。它用于包含當(dāng)前文件的頁面內(nèi)容。也就是說，在<body>與</body>標(biāo)簽之間的內(nèi)容是頁面中真正要顯示的內(nèi)容，包括文字、圖像、表格等。在<body>標(biāo)簽中可以包含多種屬性，用于設(shè)置頁面的背景、字體等屬性。這些屬性在后面的章節(jié)中會(huì)詳細(xì)介紹，這里不多說明。5.HTML頁面的元信息（教學(xué)難點(diǎn)）【頁面的關(guān)鍵字】keywords的中文意思是“關(guān)鍵字”，它用于說明頁面包含的關(guān)鍵字等信息，提高被搜索引擎搜索到的概率。其語法格式如下。<metaname="keywords"content="關(guān)鍵字"/>content屬性的值為設(shè)置的具體關(guān)鍵字。注意：一般可設(shè)置多個(gè)關(guān)鍵字，它們之間用英文半角逗號(hào)分開。由于很多搜索引擎限制關(guān)鍵字的數(shù)量，因此關(guān)鍵字要簡(jiǎn)潔精練。【頁面的對(duì)外說明】description的中文意思是“描述”，它用于描述頁面的主要內(nèi)容、主題等（合理設(shè)置也可以提高被搜索引擎搜索到的概率）。其語法格式如下。<metaname="description"content="對(duì)頁面的描述"/>content屬性的值為設(shè)置的頁面具體描述內(nèi)容。content屬性的值最多可以包括1024個(gè)字符，但因?yàn)樗阉饕嬉话阒伙@示大約前175個(gè)字符，所以描述內(nèi)容還是短小、簡(jiǎn)潔為好?！揪W(wǎng)頁的作者信息】author的中文意思是“作者”，它用于設(shè)置網(wǎng)頁作者的名稱，在比較專業(yè)的網(wǎng)站網(wǎng)頁上經(jīng)常會(huì)被用到。其語法格式如下。<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ù)雜的知識(shí)領(lǐng)域，讀者初學(xué)時(shí)，將charset設(shè)置為utf-8即可?！卷撁娴亩〞r(shí)跳轉(zhuǎn)】refresh的中文意思是“刷新”，它用于設(shè)置多長(zhǎng)時(shí)間頁面自動(dòng)刷新一次，或者過多長(zhǎng)時(shí)間自動(dòng)跳轉(zhuǎn)到其他頁面。其語法格式如下。<metahttp-equiv="refresh"content="5"/>例如以上代碼中，content屬性的值代表頁面自動(dòng)刷新的時(shí)間間隔為5s。另一種編寫格式如下。<metahttp-equiv="refresh"content="30;URL="/>content屬性的值代表30s后，頁面跳轉(zhuǎn)到網(wǎng)站。6、上機(jī)指導(dǎo)【上機(jī)指導(dǎo)】在瀏覽器中通過開發(fā)者工具查看網(wǎng)頁的源代碼和網(wǎng)頁結(jié)構(gòu)。在記事本工具中輸入一段簡(jiǎn)單的網(wǎng)頁代碼，即編寫一個(gè)包含文件頭、標(biāo)題、主體3部分的HTML文件?！窘M織階段考核與學(xué)生自評(píng)互評(píng)、展示考核結(jié)果】本次課的考核注重過程評(píng)價(jià)：課上考核包括專業(yè)能力與職業(yè)素養(yǎng)兩方面。展示本次課《職業(yè)素養(yǎng)評(píng)價(jià)表》，組織學(xué)生自評(píng)、互評(píng)。7.板書設(shè)計(jì)第1章網(wǎng)頁設(shè)計(jì)基礎(chǔ)網(wǎng)站開發(fā)概述HTML簡(jiǎn)介一個(gè)簡(jiǎn)單的HTML實(shí)例HTML基本標(biāo)簽HTML頁面的元信息上機(jī)指導(dǎo)課外學(xué)習(xí)任務(wù)及學(xué)習(xí)指導(dǎo)課前：【教師布置調(diào)研任務(wù)】調(diào)研主題：《收集網(wǎng)站開發(fā)的相關(guān)知識(shí)》要求：以小組為單位，通過搜索收集網(wǎng)站開發(fā)的相關(guān)知識(shí)，包括常見的域名、服務(wù)器售賣網(wǎng)站，常見的各種設(shè)計(jì)風(fēng)格網(wǎng)站等相關(guān)知識(shí)制作為PPT提交到“微信群”?！緦W(xué)生調(diào)研，教師線上指導(dǎo)】學(xué)生采用線上調(diào)

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(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)論