《商務(wù)網(wǎng)頁設(shè)計(jì)與制作》 教案全套 第1-6章 商務(wù)網(wǎng)站項(xiàng)目策劃與建設(shè)- 商務(wù)網(wǎng)頁制作實(shí)戰(zhàn)

第1課（1.1-1.2）第1章商務(wù)網(wǎng)站項(xiàng)目策劃與建設(shè)1.1理解傳統(tǒng)商務(wù)與電子商務(wù)1.2商務(wù)網(wǎng)站項(xiàng)目的策劃與實(shí)施課時(shí)2學(xué)時(shí)教學(xué)方法講授、啟發(fā)式進(jìn)程第1次課教學(xué)目的1．理解電子商務(wù)面臨的安全問題2．理解商務(wù)網(wǎng)站項(xiàng)目的策劃與實(shí)施重點(diǎn)電子商務(wù)與傳統(tǒng)商務(wù)的關(guān)系，商務(wù)網(wǎng)站項(xiàng)目策劃難點(diǎn)商務(wù)網(wǎng)站項(xiàng)目設(shè)計(jì)與開發(fā)實(shí)施步驟：一、熟悉學(xué)生情況（3ˊ）二、課程簡介、前期知識儲備要求（5ˊ）三、進(jìn)入本次課講授內(nèi)容（包括課堂練習(xí)）（77ˊ）四、小結(jié)鞏固（重申教學(xué)目的、重點(diǎn)、難點(diǎn)）（5ˊ）講授內(nèi)容：第1章商務(wù)網(wǎng)站項(xiàng)目策劃與建設(shè)1.1理解傳統(tǒng)商務(wù)與電子商務(wù)1.1.1傳統(tǒng)商務(wù)介紹傳統(tǒng)商務(wù)的概念及應(yīng)用的場景。1.1.2電子商務(wù)介紹電子商務(wù)的概念及應(yīng)用場景。1.1.3傳統(tǒng)商務(wù)與電子商務(wù)的關(guān)系介紹兩者的區(qū)別和聯(lián)系。1.1.4電子商務(wù)的優(yōu)勢和不足1．電子商務(wù)的優(yōu)勢（1）交易虛擬化（2）交易成本低（3）交易效率高（4）交易透明化2．電子商務(wù)的不足（1）缺乏安全性（2）沒有真實(shí)的觸感1.1.5電子商務(wù)的載體電子商務(wù)的主要載體就是商務(wù)網(wǎng)站。商務(wù)網(wǎng)站應(yīng)當(dāng)建在哪里？如何實(shí)現(xiàn)商務(wù)功能？1.互聯(lián)網(wǎng)：九大功能。2.萬維網(wǎng)：平時(shí)說的上網(wǎng)是啥意思？萬維網(wǎng)的功能很強(qiáng)大，幾乎可以實(shí)現(xiàn)所有互聯(lián)網(wǎng)的功能。所以，平時(shí)所說的上網(wǎng)，通常指上萬維網(wǎng)，即訪問瀏覽WEB網(wǎng)站。什么是萬維網(wǎng)？萬維網(wǎng)（WWW或Web）就是互聯(lián)網(wǎng)上所有支持WWW協(xié)議和超文本傳輸協(xié)議（HTTP）的客戶機(jī)與服務(wù)器的集合，透過它可以存取世界各地的超媒體文件，內(nèi)容包括文字、圖像、聲音、動畫、資料庫及各式各樣的軟件。萬維網(wǎng)的核心是什么？①統(tǒng)一資源定位符（UniformResourceLocator，URL）②超文本傳輸協(xié)議（HyperTextTransferProtocol，HTTP）③超文本標(biāo)記語言（HyperTextMarkupLanguage，HTML）1.2商務(wù)網(wǎng)站項(xiàng)目的策劃與實(shí)施1.2.1網(wǎng)站概述1.網(wǎng)站的概念及構(gòu)成什么是網(wǎng)頁？網(wǎng)頁是怎么生成的？什么是靜態(tài)網(wǎng)頁？什么是動態(tài)網(wǎng)頁？2.網(wǎng)站的服務(wù)方式與訪問方法網(wǎng)站是通過統(tǒng)一資源定位符提供服務(wù)的入口，訪問的方法是使用瀏覽器區(qū)訪問統(tǒng)一資源定位符。網(wǎng)站提供web服務(wù)的步驟：完成網(wǎng)站開發(fā)，確定首頁部署WEB站點(diǎn)服務(wù)器（或租用）發(fā)布網(wǎng)站申請固定的互聯(lián)網(wǎng)IP地址，通常也需要申請域名通過互聯(lián)網(wǎng)服務(wù)商的域名管理服務(wù)器，綁定互聯(lián)網(wǎng)IP地址和域名（內(nèi)部網(wǎng)絡(luò)的WEB域名管理服務(wù)器有用戶自行部署管理）繳納費(fèi)用統(tǒng)一資源定位符的表達(dá)形式：可以用域名或者網(wǎng)絡(luò)地址（固定的互聯(lián)網(wǎng)IP地址）兩種方式來表示。例如人民郵電出版社統(tǒng)一資源定位符為：網(wǎng)站域名形式：/網(wǎng)絡(luò)地址形式為：281.2.2商務(wù)網(wǎng)站及類型1．按照商務(wù)目的和業(yè)務(wù)功能分類（1）基本型商務(wù)網(wǎng)站（2）宣傳型商務(wù)網(wǎng)站（3）客戶型服務(wù)網(wǎng)站（4）完全電子商務(wù)運(yùn)作型網(wǎng)站2．按照網(wǎng)站建設(shè)的主體分類（1）行業(yè)電子商務(wù)網(wǎng)站（2）企業(yè)電子商務(wù)網(wǎng)站（3）政府電子商務(wù)網(wǎng)站（4）服務(wù)機(jī)構(gòu)電子商務(wù)網(wǎng)站3．按照電子商務(wù)模式分類（1）B2B商務(wù)網(wǎng)站（2）B2C商務(wù)網(wǎng)站（3）C2C商務(wù)網(wǎng)站1.2.3商務(wù)網(wǎng)站功能組成1．前臺系統(tǒng)（1）商品展示功能（2）信息檢索功能（3）商品訂購功能（4）網(wǎng)上支付功能（5）客戶服務(wù)功能（6）信息發(fā)布功能（根據(jù)網(wǎng)站不同，也可能屬于后臺系統(tǒng)）2．后臺系統(tǒng)（1）商品管理功能（2）訂單管理功能（3）庫存管理功能（4）商品促銷管理功能（5）客戶管理功能（6）統(tǒng)計(jì)分析功能（7）系統(tǒng)管理及其他功能1.2.4商務(wù)網(wǎng)站項(xiàng)目建設(shè)與管理1．主要工作范疇項(xiàng)目策劃項(xiàng)目實(shí)施項(xiàng)目運(yùn)維2．項(xiàng)目實(shí)施團(tuán)隊(duì)項(xiàng)目實(shí)施中主要涉及以下兩項(xiàng)工作：業(yè)務(wù)相關(guān)工作：主要包括處理哪些業(yè)務(wù)、業(yè)務(wù)模式怎么確定、采用何種方式方法、達(dá)到什么業(yè)務(wù)目標(biāo)等；技術(shù)相關(guān)工作：主要包括采用何種技術(shù)解決方案、功能模塊如何設(shè)計(jì)、網(wǎng)站如何開發(fā)制作、網(wǎng)站如何維護(hù)等。當(dāng)然，網(wǎng)站建設(shè)與管理過程中還涉及法律、財(cái)務(wù)等方面的問題，也一并歸入業(yè)務(wù)相關(guān)工作中。（1）業(yè)務(wù)團(tuán)隊(duì)（2）信息技術(shù)團(tuán)隊(duì)（3）業(yè)務(wù)團(tuán)隊(duì)與信息技術(shù)團(tuán)隊(duì)的負(fù)責(zé)人（4）業(yè)務(wù)團(tuán)隊(duì)與信息技術(shù)團(tuán)隊(duì)的籌建方式①企業(yè)自行策劃與建設(shè)模式②企業(yè)網(wǎng)站建設(shè)實(shí)行技術(shù)團(tuán)隊(duì)外包模式③企業(yè)網(wǎng)站建設(shè)全部外包模式1.2.5商務(wù)網(wǎng)站項(xiàng)目策劃商務(wù)網(wǎng)站的項(xiàng)目策劃非常重要，決定著網(wǎng)站項(xiàng)目是否可行。商務(wù)網(wǎng)站項(xiàng)目策劃是根據(jù)本企業(yè)的實(shí)際情況，判斷市場變化的趨勢，針對客戶的需求，對未來的網(wǎng)站服務(wù)功能和開發(fā)建設(shè)進(jìn)行系統(tǒng)的規(guī)劃和設(shè)計(jì)，確定商務(wù)網(wǎng)站為什么做、能否做、做什么、何時(shí)做、怎么做、誰來做、誰運(yùn)營、誰維護(hù)等問題。1.項(xiàng)目策劃的主要環(huán)節(jié)（1）需求調(diào)查網(wǎng)站需求調(diào)查是網(wǎng)站策劃的第一步，是確定項(xiàng)目建設(shè)必要性的重要工作步驟，由業(yè)務(wù)團(tuán)隊(duì)牽頭負(fù)責(zé)。①用戶調(diào)查（業(yè)務(wù)調(diào)查）②市場調(diào)研（2）網(wǎng)站定位網(wǎng)站定位是最根本的業(yè)務(wù)需求，決定網(wǎng)站開發(fā)建設(shè)的方向，由業(yè)務(wù)團(tuán)隊(duì)牽頭負(fù)責(zé)。（3）編制需求概要需求概要是明確做什么、怎么做、做到什么程度的。要求業(yè)務(wù)目標(biāo)清晰、業(yè)務(wù)需求全面、業(yè)務(wù)邊界清楚、業(yè)務(wù)規(guī)則嚴(yán)謹(jǐn)。需求概要的編制工作應(yīng)當(dāng)由業(yè)務(wù)團(tuán)隊(duì)牽頭負(fù)責(zé)，信息技術(shù)團(tuán)隊(duì)配合?！俄?xiàng)目需求概要》應(yīng)當(dāng)由業(yè)務(wù)團(tuán)隊(duì)所在單位簽字蓋章予以認(rèn)可。（4）需求分析與功能規(guī)劃需求分析與功能規(guī)劃將需求概要的內(nèi)容進(jìn)一步梳理、歸納、系統(tǒng)化，形成系統(tǒng)功能規(guī)劃。該項(xiàng)工作是以及技術(shù)為主的，由信息技術(shù)團(tuán)隊(duì)牽頭負(fù)責(zé)，業(yè)務(wù)團(tuán)隊(duì)協(xié)助配合（5）工作步驟與工作進(jìn)度（6）網(wǎng)站開發(fā)制作（7）網(wǎng)站發(fā)布與運(yùn)維（8）網(wǎng)站運(yùn)營模式運(yùn)營模式運(yùn)營說明搜索引擎+百科知識以百度為代表，采用競價(jià)排名、廣告和點(diǎn)擊的運(yùn)營模式。百度為客戶投放與網(wǎng)頁內(nèi)容相關(guān)聯(lián)的廣告，從而實(shí)現(xiàn)盈利。它立足于搜索引擎，建立了一個(gè)完善又全面的百科知識庫即時(shí)通信+游戲+門戶新聞+郵箱以騰訊為代表，采用會員制、游戲和廣告的運(yùn)營模式。收入來自互聯(lián)網(wǎng)增值服務(wù)、移動及通信增值服務(wù)與網(wǎng)絡(luò)廣告安全+瀏覽器+搜索引擎以奇虎360為代表，采用免費(fèi)+有償增值服務(wù)的運(yùn)營模式。公司主要依靠在線廣告及互聯(lián)網(wǎng)增值業(yè)務(wù)創(chuàng)收門戶新聞+微博以新浪為代表，運(yùn)營模式是廣告。公司收入大部分來自網(wǎng)絡(luò)廣告，少部分來自移動增值服務(wù)郵箱+新聞代表企業(yè)是網(wǎng)易，運(yùn)營模式為郵箱、游戲、廣告。絕大部分收入來自網(wǎng)絡(luò)游戲下載+游戲+視頻代表企業(yè)是迅雷，運(yùn)營模式為會員制、游戲、廣告輸入法+地圖搜索+游戲代表企業(yè)是搜狐，目前搜狐的收入主要由品牌廣告、在線游戲、無線增值3部分組成（9）投資估算（10）可行性分析2．編制商務(wù)網(wǎng)站項(xiàng)目策劃書1.2.6商務(wù)網(wǎng)站項(xiàng)目設(shè)計(jì)開發(fā)在《商務(wù)網(wǎng)站項(xiàng)目策劃書》通過立項(xiàng)審批后，就轉(zhuǎn)入項(xiàng)目實(shí)施階段。項(xiàng)目實(shí)施最重要的工作包括：1．詳細(xì)功能設(shè)計(jì)編制《系統(tǒng)規(guī)格說明書》，由技術(shù)團(tuán)隊(duì)為主，業(yè)務(wù)團(tuán)隊(duì)配合。詳細(xì)功能設(shè)計(jì)應(yīng)重點(diǎn)考慮的內(nèi)容：（1）欄目與版塊的編排（2）目錄結(jié)構(gòu)（3）網(wǎng)頁設(shè)計(jì)（4）鏈接結(jié)構(gòu)（5）功能設(shè)計(jì)（6）數(shù)據(jù)庫設(shè)計(jì)2．網(wǎng)站原型設(shè)計(jì)網(wǎng)站原型設(shè)計(jì)的大部分工作都屬于網(wǎng)頁設(shè)計(jì)，網(wǎng)站原型設(shè)計(jì)與網(wǎng)頁設(shè)計(jì)可同時(shí)進(jìn)行。原型設(shè)計(jì)方案需要通過項(xiàng)目建設(shè)單位組織的評審。3．網(wǎng)站開發(fā)制作商務(wù)網(wǎng)站開發(fā)制作是在詳細(xì)設(shè)計(jì)的基礎(chǔ)上，按照工作計(jì)劃進(jìn)度安排和技術(shù)路線，組織網(wǎng)站開發(fā)。1.2.7商務(wù)網(wǎng)站SEO營銷1．網(wǎng)站SEO作用2．網(wǎng)站SEO途徑3．SEO目的4．?dāng)?shù)據(jù)挖掘與客戶分析5．網(wǎng)站營銷1.2.8?商務(wù)網(wǎng)站維護(hù)1.2.9?商務(wù)網(wǎng)站項(xiàng)目管理崗位職業(yè)素養(yǎng)1．崗位技能2．職業(yè)道德3．法律素養(yǎng)4．價(jià)值觀教學(xué)提示：【課程介紹、課程地位、總體概論】【以日常商務(wù)活動為例進(jìn)行對比說明】12306動態(tài)網(wǎng)站示例說明通過大學(xué)生運(yùn)動鞋有用數(shù)量調(diào)查的意義，啟示需求調(diào)查的重要性通過項(xiàng)目策劃書模版強(qiáng)化教學(xué)小結(jié)鞏固傳統(tǒng)商務(wù)與電子商務(wù)的關(guān)系，以及電子商務(wù)的優(yōu)勢；商務(wù)網(wǎng)站的概念、功能組成；項(xiàng)目策劃與建設(shè)管理的主要工作內(nèi)容，商務(wù)網(wǎng)站項(xiàng)目建設(shè)與管理的實(shí)施團(tuán)隊(duì)的工作職責(zé)，商務(wù)網(wǎng)站策劃的主要環(huán)節(jié)及相關(guān)事項(xiàng)，編制商務(wù)網(wǎng)站項(xiàng)目策劃書，商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)制作的工作范疇及工作要求。課堂練習(xí)重點(diǎn)概念：電子商務(wù)、萬維網(wǎng)、網(wǎng)站與商務(wù)網(wǎng)站、商務(wù)網(wǎng)站項(xiàng)目策劃課后作業(yè)思考：1.舉例說明電子商務(wù)和傳統(tǒng)商務(wù)的關(guān)系。2.編制需求概要應(yīng)當(dāng)由信息技術(shù)團(tuán)隊(duì)還是業(yè)務(wù)團(tuán)隊(duì)牽頭負(fù)責(zé)？為什么？3.網(wǎng)站項(xiàng)目策劃與建設(shè)的主要環(huán)節(jié)有哪些？4.簡述SEO的主要途徑。參考資料教材1章；“互聯(lián)網(wǎng)”及期刊雜志的相關(guān)內(nèi)容。

第2課（2.1-2.3）第2章商務(wù)網(wǎng)頁設(shè)計(jì)2.1商務(wù)網(wǎng)頁視覺設(shè)計(jì)2.2商務(wù)網(wǎng)頁創(chuàng)意設(shè)計(jì)2.3商務(wù)網(wǎng)頁原型設(shè)計(jì)課時(shí)2學(xué)時(shí)教學(xué)方法講授、啟發(fā)式進(jìn)程第2次課教學(xué)目的1.理解商務(wù)網(wǎng)頁視覺設(shè)計(jì)2.理解商務(wù)網(wǎng)頁創(chuàng)意設(shè)計(jì)要點(diǎn)3.掌握商務(wù)網(wǎng)頁原型設(shè)計(jì)重點(diǎn)商務(wù)網(wǎng)頁視覺設(shè)計(jì)對象及要點(diǎn)，商務(wù)網(wǎng)頁風(fēng)格與形象創(chuàng)意設(shè)計(jì)，商務(wù)網(wǎng)頁原型設(shè)計(jì)步驟難點(diǎn)網(wǎng)頁網(wǎng)頁風(fēng)格設(shè)計(jì)，商務(wù)網(wǎng)頁原型設(shè)計(jì)方法實(shí)施步驟：一、組織教學(xué)、課前提問（5ˊ）二、教學(xué)引導(dǎo)（3ˊ）三、進(jìn)入本次課講授內(nèi)容（77ˊ）四、小結(jié)鞏固（重申教學(xué)目的、重點(diǎn)、難點(diǎn)）（5ˊ）講授內(nèi)容：第2章商務(wù)網(wǎng)頁設(shè)計(jì)2.1商務(wù)網(wǎng)頁視覺設(shè)計(jì)2.1.1商務(wù)網(wǎng)頁賞析網(wǎng)頁布局網(wǎng)頁配色導(dǎo)航欄設(shè)計(jì)主橫幅（Banner）設(shè)計(jì)企業(yè)標(biāo)志（Logo）設(shè)計(jì)按鈕、文字、多媒體資料綜合分析網(wǎng)頁布局與公司業(yè)務(wù)的關(guān)系2.1.2網(wǎng)頁視覺設(shè)計(jì)概述2.1.3網(wǎng)頁視覺設(shè)計(jì)的原則1．針對性強(qiáng)2．主題鮮明3．界面與內(nèi)容統(tǒng)一4．美觀5．簡潔6．體驗(yàn)為王（1）少等于多（2）合理導(dǎo)航（3）訪問速度（4）保護(hù)用戶數(shù)據(jù)安全2.1.4網(wǎng)頁視覺設(shè)計(jì)對象1．文字（1）文字標(biāo)題（2）文字信息（3）文字鏈接2．圖像3．多媒體（1）音頻（2）視頻（3）動畫2.1.5網(wǎng)頁視覺設(shè)計(jì)要點(diǎn)1．網(wǎng)頁布局2．網(wǎng)頁配色3．導(dǎo)航欄4．Logo（企業(yè)徽標(biāo)）5．Banner（廣告條）6．按鈕7．文字、圖片及其他2.2商務(wù)網(wǎng)頁創(chuàng)意設(shè)計(jì)2.2.1商務(wù)網(wǎng)頁創(chuàng)意設(shè)計(jì)概述2.2.2商務(wù)網(wǎng)頁創(chuàng)意設(shè)計(jì)的思路1．服務(wù)于企業(yè)的市場策劃2．服務(wù)于目標(biāo)客戶（1）目標(biāo)客戶概念（2）目標(biāo)客戶市場分類（3）目標(biāo)客戶的消費(fèi)分析（4）吸引目標(biāo)客戶①放大產(chǎn)品信息去抓住用戶。②用視頻代替現(xiàn)場體驗(yàn)。③提供免運(yùn)費(fèi)服務(wù)。④放大折扣信息。⑤提供盡可能多的支付方式。⑥錢不是萬能的，沒有錢是萬萬不能的！2.2.3商務(wù)網(wǎng)頁創(chuàng)意設(shè)計(jì)1．商務(wù)網(wǎng)頁風(fēng)格創(chuàng)意2．形象設(shè)計(jì)（1）設(shè)計(jì)企業(yè)徽標(biāo)（Logo）（2）設(shè)計(jì)網(wǎng)頁字體（3）設(shè)計(jì)網(wǎng)頁宣傳語（4）設(shè)置背景音樂2.3商務(wù)網(wǎng)頁原型設(shè)計(jì)2.3.1繪制網(wǎng)頁草圖1．徒手繪制草圖2．計(jì)算機(jī)繪制草圖2.3.2繪制網(wǎng)頁效果圖2.3.3制作網(wǎng)頁原型方案2.3.4網(wǎng)頁原型方案評審教學(xué)提示：賞析代表性的商務(wù)網(wǎng)頁，討論其優(yōu)點(diǎn)和不足。小結(jié)鞏固商務(wù)網(wǎng)站視覺設(shè)計(jì)的概念、原則、視覺設(shè)計(jì)對象、商務(wù)網(wǎng)頁設(shè)計(jì)要點(diǎn)；商務(wù)網(wǎng)站創(chuàng)意設(shè)計(jì)、網(wǎng)頁原型設(shè)計(jì)。課堂練習(xí)重點(diǎn)概念：商務(wù)網(wǎng)站視覺設(shè)計(jì)、創(chuàng)意設(shè)計(jì)、網(wǎng)頁原型設(shè)計(jì)課后作業(yè)思考：1．賞析商務(wù)網(wǎng)頁，通常從哪些方面入手？2．網(wǎng)頁原型設(shè)計(jì)有什么作用？3.繪制網(wǎng)頁原型草圖。參考資料教材2章；“互聯(lián)網(wǎng)”及期刊雜志的相關(guān)內(nèi)容。

第3課（3.1-3.3.5）第3章HTML網(wǎng)頁制作技術(shù)3.1網(wǎng)頁基礎(chǔ)知識3.2頭文檔設(shè)置方法3.3文本設(shè)置方法3.3.1設(shè)置文字屬性3.3.2設(shè)置文本排版3.3.3設(shè)置文檔標(biāo)題3.3.4設(shè)置文本列表3.3.5制作文本網(wǎng)頁綜合范例課時(shí)2學(xué)時(shí)教學(xué)方法講授、示例講解進(jìn)程第3次課教學(xué)目的1．熟悉網(wǎng)頁基礎(chǔ)知識2．掌握設(shè)置網(wǎng)頁文字標(biāo)題、文字屬性和文檔標(biāo)題的設(shè)置方法重點(diǎn)標(biāo)簽的概念及屬性，文字屬性、文本列表設(shè)置方法。難點(diǎn)標(biāo)簽的概念及屬性，文字屬性、文本列表設(shè)置方法。實(shí)施步驟：一、組織教學(xué)、課前提問（5ˊ）二、教學(xué)引導(dǎo)（3ˊ）三、進(jìn)入本次課講授內(nèi)容（77ˊ）四、小結(jié)鞏固（重申教學(xué)目的、重點(diǎn)、難點(diǎn)）（5ˊ）講授內(nèi)容：第3章HTML網(wǎng)頁制作技術(shù)3.1網(wǎng)頁基礎(chǔ)知識3.1.1網(wǎng)頁源文件1．網(wǎng)頁源文件的概念2．網(wǎng)頁源文件的存儲格式3．網(wǎng)頁源文件的運(yùn)行方式3.1.2網(wǎng)頁解釋代碼1．網(wǎng)頁解釋代碼的產(chǎn)生2．網(wǎng)頁解釋代碼的查看與保存3.1.3網(wǎng)頁制作語言介紹1．HTML語言（1）HTML定義（2）HTML發(fā)展（3）HTML與XML、XHTML的關(guān)系①HTML與XML的關(guān)系②HTML與XHTML的關(guān)系2．CSS語言3.1.4HTML基礎(chǔ)知識1．網(wǎng)頁元素2．HTML標(biāo)簽的作用和特點(diǎn)（1）HTML標(biāo)簽的概念（2）HTML標(biāo)簽的作用（3）HTML標(biāo)簽的特點(diǎn)3．HTML標(biāo)簽的種類基礎(chǔ)標(biāo)簽、格式標(biāo)簽、表單標(biāo)簽、框架標(biāo)簽、圖像標(biāo)簽、視音頻標(biāo)簽、鏈接標(biāo)簽、列表標(biāo)簽、表格標(biāo)簽、樣式標(biāo)簽、元信息標(biāo)簽、編程標(biāo)簽、全局標(biāo)簽4.HTML標(biāo)簽屬性形象理解：標(biāo)簽是定義類別的，屬性是個(gè)性化描述的。5．HTML事件6．設(shè)置標(biāo)簽及標(biāo)簽屬性的方法<標(biāo)簽標(biāo)簽屬性1="屬性值"標(biāo)簽屬性2="屬性值"標(biāo)簽屬性3="屬性值">標(biāo)簽內(nèi)容</標(biāo)簽><標(biāo)簽1標(biāo)簽1屬性="屬性值"><標(biāo)簽2標(biāo)簽2屬性="屬性值">標(biāo)簽實(shí)例</標(biāo)簽2></標(biāo)簽1>7．HTML基本結(jié)構(gòu)標(biāo)記語言含義文檔頭部分<html>html為標(biāo)記語言聲明的標(biāo)簽，告訴瀏覽器以下文件為超文本標(biāo)記語言<head><head>是html文檔頭部的標(biāo)簽，網(wǎng)頁頭部及頭部以上的信息不在網(wǎng)頁中顯示，主要作用是描述整個(gè)網(wǎng)頁，定義或聲明CSS樣式等。如網(wǎng)頁標(biāo)題、字符格式、語言、兼容性、關(guān)鍵字等<title>網(wǎng)頁結(jié)構(gòu)介紹</title><title>為網(wǎng)頁標(biāo)題的標(biāo)簽。指明“網(wǎng)頁結(jié)構(gòu)介紹”標(biāo)題顯示在瀏覽器標(biāo)題欄中</head></head>是文檔頭部結(jié)束的標(biāo)簽文檔體部分<body>這里是正文內(nèi)容</body><body>是網(wǎng)頁文檔體正文開始的標(biāo)簽。所有網(wǎng)頁需要顯示的內(nèi)容，均應(yīng)在此標(biāo)識后面處理。本例中的正文內(nèi)容是“這里是正文內(nèi)容”。</body>是網(wǎng)頁文檔體結(jié)束的標(biāo)簽</html></html>是超文本標(biāo)記語言結(jié)束的標(biāo)簽，也代表了網(wǎng)頁結(jié)束3.2頭文檔設(shè)置方法3.2.1頭文檔的作業(yè)3.2.2設(shè)置網(wǎng)頁標(biāo)題3.3文本設(shè)置方法3.3.1設(shè)置文字屬性3.3.2設(shè)置文本排版3.3.3設(shè)置文檔標(biāo)題3.3.4設(shè)置文本列表1.有序列表2.無序列表3.3.5制作文本網(wǎng)頁綜合范例教學(xué)提示：舉例說明示例演示小結(jié)鞏固網(wǎng)頁源文件和解釋代碼，網(wǎng)頁元素、HTML標(biāo)簽及屬性，設(shè)置網(wǎng)頁標(biāo)題、文字屬性、文檔標(biāo)簽、文檔段落、文本列表的方法課堂練習(xí)重點(diǎn)概念：網(wǎng)頁源文件、網(wǎng)頁元素、網(wǎng)頁元素、HTML標(biāo)簽課后作業(yè)思考：簡述HTML與XML、HTML的關(guān)系。作業(yè)：制作一個(gè)設(shè)置段落的網(wǎng)頁，寫出完整的HTML代碼。具體要求如下：（1）制作一個(gè)文本段落，內(nèi)容為“詩歌是一種語言凝練而形象，結(jié)構(gòu)自由而跳躍，富有節(jié)奏和韻律，飽含聯(lián)想與想象，高度集中與概括地反映社會生活、表達(dá)思想感情的文學(xué)體裁。詩歌的基本特點(diǎn)為：”。字體為黑體，字號為5號，字的顏色為藍(lán)色，段落中的文本居中顯示；（2）制作一個(gè)文本段落，在其中再制作一個(gè)文本列表，文本列表的字體為楷體，字號為5號，字的顏色為紫色，文本列表的內(nèi)容如下：A．生活美：對生活高度的提煉、集中、概括；B．思想美：飽含深切的思想感情；C．意境美：用豐富的想象和聯(lián)想力營造出優(yōu)美的意境；D．語言美：文字色彩鮮活、語言節(jié)奏分明。參考資料教材3章；“互聯(lián)網(wǎng)”及期刊雜志的相關(guān)內(nèi)容。

第4課（3.4-3.4.2）第3章HTML網(wǎng)頁制作技術(shù)3.4圖像設(shè)置方法3.4.1圖像文件的存儲管理3.4.2圖像引用課時(shí)2學(xué)時(shí)教學(xué)方法講授、示例講解進(jìn)程第4次課教學(xué)目的1．掌握圖像文件的存儲管理2．掌握引用圖像的方法重點(diǎn)圖像文件的存儲管理、引用圖像的方法。難點(diǎn)圖像文件的存儲路徑及其引用方法實(shí)施步驟：一、組織教學(xué)、課前提問（5ˊ）二、教學(xué)引導(dǎo)（3ˊ）三、進(jìn)入本次課講授內(nèi)容（77ˊ）四、小結(jié)鞏固（重申教學(xué)目的、重點(diǎn)、難點(diǎn)）（5ˊ）講授內(nèi)容：第3章HTML網(wǎng)頁制作技術(shù)3.3圖像設(shè)置方法3.3.1圖像文件的存儲管理網(wǎng)站通常有很多圖像文件，需要對這些圖像文件進(jìn)行有效的管理。一是起好文件名稱。文件名稱應(yīng)當(dāng)有助于理解圖片內(nèi)容，言簡意賅。二是規(guī)劃好圖像文件存儲目錄。3.3.2圖像引用1．相對路徑引用（1）引用當(dāng)前目錄下的文件（同級目錄）（2）引用下級目錄下的圖像文件（3）引用上級目錄下的圖像文件（4）引用上兩級目錄下的一個(gè)子目錄中的文件2．絕對路徑引用教學(xué)提示：示例講解小結(jié)鞏固課堂練習(xí)重點(diǎn)概念：相對路徑、絕對路徑練習(xí)：引用相對路徑“photo”下的圖像文件“l(fā)x1.jpg”。引用絕對路徑“C:/Class3/”下的“l(fā)x2.jpg”課后作業(yè)參考資料教材3章；“互聯(lián)網(wǎng)”及期刊雜志的相關(guān)內(nèi)容。

第5課（3.4.3-3.4.7）第3章HTML網(wǎng)頁設(shè)計(jì)與制作3.4.3設(shè)置圖像顯示尺寸3.4.4設(shè)置圖像對齊方式3.4.5設(shè)置圖像替換文本3.4.6設(shè)置網(wǎng)頁背景圖像與背景顏色3.4.7制作圖文網(wǎng)頁綜合范例課時(shí)2學(xué)時(shí)教學(xué)方法講授、示例講解進(jìn)程第5次課教學(xué)目的1．掌握圖像尺寸、對齊方式、替換文本、背景圖像和背景顏色的設(shè)置方法；2．掌握簡單圖文網(wǎng)頁的制作方法。重點(diǎn)圖像屬性的設(shè)置方法，圖文網(wǎng)頁制作。難點(diǎn)圖文網(wǎng)頁制作實(shí)施步驟：一、組織教學(xué)、課前提問（5ˊ）二、教學(xué)引導(dǎo)（3ˊ）三、進(jìn)入本次課講授內(nèi)容（77ˊ）四、小結(jié)鞏固（重申教學(xué)目的、重點(diǎn)、難點(diǎn)）（5ˊ）講授內(nèi)容：第3章HTML網(wǎng)頁制作技術(shù)3.4.3設(shè)置圖像顯示尺寸固定數(shù)值、百分比兩種賦值形式。3.4.4設(shè)置圖像對齊方式水平對齊：左中右垂直對齊：上中下3.4.5設(shè)置圖像替換文本3.4.6設(shè)置網(wǎng)頁背景圖像與背景顏色3.4.7制作圖文網(wǎng)頁綜合范例教學(xué)提示：示例講解小結(jié)鞏固回顧圖像尺寸的賦值形式，設(shè)置圖像對齊的方法，以及設(shè)置圖像替換文本、背景圖像和背景顏色的方法。課堂練習(xí)練習(xí)：制作一個(gè)網(wǎng)頁，設(shè)置圖像“l(fā)x.jpg”的寬度屬性值為60%、高度屬性值為200px。課后作業(yè)作業(yè)：制作一個(gè)設(shè)置圖像的網(wǎng)頁，寫出完整的HTML代碼，具體要求如下：（1）設(shè)置網(wǎng)頁的背景圖像，該圖像存儲在該網(wǎng)頁所在目錄的下一級目錄“images”中，圖像文件名稱為“photo.jpg”；（2）網(wǎng)頁中引用一個(gè)圖像，該圖像為該網(wǎng)頁所在目錄的上兩級目錄中，這個(gè)圖像的名稱是“computer.jpg”，設(shè)置其顯示尺寸為寬200px、高180px。參考資料教材3章；“互聯(lián)網(wǎng)”及期刊雜志的相關(guān)內(nèi)容。

第6課（3.5）第3章HTML網(wǎng)頁設(shè)計(jì)與制作3.5超鏈接設(shè)置方法3.5.1超鏈接的概念及類型3.5.2指向網(wǎng)站內(nèi)部的超鏈接3.5.3指向網(wǎng)站外部的超鏈接3.5.4給文本設(shè)置超鏈接3.5.5給圖像設(shè)置超鏈接3.5.6設(shè)置超鏈接的打開窗口3.5.7制作圖文超鏈接網(wǎng)頁綜合范例課時(shí)2學(xué)時(shí)教學(xué)方法講授、示例講解進(jìn)程第6次課教學(xué)目的1．理解超鏈接的概念及類型；2．掌握指向網(wǎng)站內(nèi)部、外部的超鏈接設(shè)置方法；3.掌握文本、圖像超鏈接設(shè)置方法；4.掌握設(shè)定超鏈接打開窗口的方法；5.掌握制作簡單的圖文超鏈接網(wǎng)頁的制作方法。重點(diǎn)超鏈接的概念、超鏈接的設(shè)置方法難點(diǎn)圖文超鏈接網(wǎng)頁制作實(shí)施步驟：一、組織教學(xué)、課前提問（5ˊ）二、教學(xué)引導(dǎo)（3ˊ）三、進(jìn)入本次課講授內(nèi)容（77ˊ）四、小結(jié)鞏固（重申教學(xué)目的、重點(diǎn)、難點(diǎn)）（5ˊ）講授內(nèi)容：第3章HTML網(wǎng)頁制作技術(shù)3.5.1超鏈接的概念及類型1．超鏈接的概念什么是超鏈接？超鏈接的鏈接目標(biāo)、超鏈接的載體。2．超鏈接的類型內(nèi)部鏈接、外部鏈接3．超鏈接的標(biāo)簽及屬性3.5.2指向網(wǎng)站內(nèi)部的超鏈接1．指向站點(diǎn)內(nèi)部文件的鏈接2．指向本頁面中特定部分的鏈接3．指向空鏈接3.5.3指向網(wǎng)站外部的超鏈接1．指向其他網(wǎng)站的超鏈接2．指向電子郵箱的超鏈接3.5.4給文本設(shè)置超鏈接3.5.5給圖像設(shè)置超鏈接3.5.6設(shè)置超鏈接的打開窗口3.5.7制作圖文超鏈接網(wǎng)頁綜合范例教學(xué)提示：示例講解小結(jié)鞏固回顧超鏈接的概念、超鏈接的設(shè)置方法、超鏈接的打開窗口的設(shè)置方法。課堂練習(xí)練習(xí)：1.制作一個(gè)網(wǎng)頁，設(shè)置圖像“l(fā)x.jpg”的超鏈接指向當(dāng)前路徑下的文件“study.apk”;2.制作一個(gè)網(wǎng)頁，設(shè)置設(shè)置文本“淘寶網(wǎng)”的超鏈接指向“”，并在一個(gè)新窗口打開超鏈接。課后作業(yè)作業(yè)：制作一個(gè)設(shè)置超鏈接的網(wǎng)頁，寫出完整的HTML代碼，具體要求如下：（1）設(shè)置一行文本，內(nèi)容為“搜狐網(wǎng)站”，并給該文本設(shè)置指向搜狐網(wǎng)的超鏈接；（2）設(shè)置一行文本，內(nèi)容為“發(fā)郵件”，并給該文本設(shè)置指向“test2018@126.com”的超鏈接；（3）引用本級路徑下的圖像（名稱為image009.png），并給該圖像設(shè)置指向同級路徑的“computer.html”文件；（4）設(shè)置全網(wǎng)在新窗口中打開超鏈接。參考資料教材3章；“互聯(lián)網(wǎng)”及期刊雜志的相關(guān)內(nèi)容。

第7課（3.6-3.6.4）第3章HTML網(wǎng)頁設(shè)計(jì)與制作3.6表格制作方法3.6.1表格的代碼結(jié)構(gòu)3.6.2制作表格的方法3.6.3單元格或表頭的合并方法3.6.4制作單元格內(nèi)容課時(shí)2學(xué)時(shí)教學(xué)方法講授、示例講解進(jìn)程第7次課教學(xué)目的1．理解網(wǎng)頁表格的概念及代碼結(jié)構(gòu)；2．掌握表格的制作方法；3.掌握單元格或表頭的合并方法；4.掌握制作單元格內(nèi)容的方法。重點(diǎn)表格的概念及代碼結(jié)構(gòu)、表格的制作方法、單元格和表頭合并的設(shè)置方法、制作單元格內(nèi)容。難點(diǎn)網(wǎng)頁表格的概念、單元格合并實(shí)施步驟：一、組織教學(xué)、課前提問（5ˊ）二、教學(xué)引導(dǎo)（3ˊ）三、進(jìn)入本次課講授內(nèi)容（77ˊ）四、小結(jié)鞏固（重申教學(xué)目的、重點(diǎn)、難點(diǎn)）（5ˊ）講授內(nèi)容：第3章HTML網(wǎng)頁制作技術(shù)3.6表格制作方法表格的概念、表格的作用3.6.1表格的代碼結(jié)構(gòu)表行表頭或單元格3.6.2制作表格的方法（1）先創(chuàng)建表；（2）創(chuàng)建行，創(chuàng)建本行內(nèi)的單元格或表頭；（3）重復(fù)第二步，直至表格內(nèi)容創(chuàng)建結(jié)束。3.6.3單元格與表頭的合并方法1．多列單元格合并2．多行單元格合并3．多行多列單元格同時(shí)合并3.6.4制作單元格內(nèi)容1．引用文本2．引用圖像教學(xué)提示：示例講解小結(jié)鞏固回顧網(wǎng)頁表格的概念、表格的代碼結(jié)構(gòu)，表格制作方法，單元格合并，以及單元格內(nèi)容制作方法。課堂練習(xí)練習(xí)：1.制作一個(gè)含有5行3列表格的網(wǎng)頁;2.制作一個(gè)1行2列的表格，表格式樣如下：奔馳SUN課后作業(yè)作業(yè)：參考資料教材3章；“互聯(lián)網(wǎng)”及期刊雜志的相關(guān)內(nèi)容。

第8課（3.6.5-3.6.6）第3章HTML網(wǎng)頁設(shè)計(jì)與制作3.6.5設(shè)置表格外觀3.6.6運(yùn)用表格技術(shù)布局網(wǎng)頁綜合范例課時(shí)2學(xué)時(shí)教學(xué)方法講授、示例講解進(jìn)程第8次課教學(xué)目的1．理解表格外觀設(shè)置方法；2．掌握利用表格技術(shù)布局網(wǎng)頁的制作方法。重點(diǎn)表格外觀的設(shè)置方法，包括行、列、單元格、表格線等的設(shè)置。難點(diǎn)統(tǒng)一設(shè)置行、列的有關(guān)屬性。實(shí)施步驟：一、組織教學(xué)、課前提問（5ˊ）二、教學(xué)引導(dǎo)（3ˊ）三、進(jìn)入本次課講授內(nèi)容（77ˊ）四、小結(jié)鞏固（重申教學(xué)目的、重點(diǎn)、難點(diǎn)）（5ˊ）講授內(nèi)容：第3章HTML網(wǎng)頁制作技術(shù)3.6.5設(shè)置表格外觀1．設(shè)置表的外觀（1）設(shè)置表的標(biāo)題（2）設(shè)置表的寬度（3）設(shè)置表的高度（4）設(shè)置表的水平對齊方式（5）設(shè)置表的背景顏色（6）設(shè)置表的背景圖像2．設(shè)置表頭與單元格（1）設(shè)置表頭水平對齊（2）設(shè)置表頭垂直對齊（3）設(shè)置單元格水平對齊（4）設(shè)置單元格垂直對齊方式（5）設(shè)置表頭和單元格的寬度（6）設(shè)置表頭和單元格的高度（7）設(shè)置背景圖像（8）設(shè)置背景顏色3．統(tǒng)一設(shè)置列的寬度與行的高度（1）統(tǒng)一設(shè)置列的寬度（2）統(tǒng)一設(shè)置行的高度4．統(tǒng)一設(shè)置行的對齊方式水平對齊、垂直對齊5．設(shè)置表格邊框3.6.6運(yùn)用表格技術(shù)布局網(wǎng)頁綜合范例教學(xué)提示：示例講解小結(jié)鞏固回顧網(wǎng)頁表格的外觀設(shè)置，包括表的標(biāo)題、寬度和高度、水平對齊方式，以及表的背景圖像和背景顏色的設(shè)置；設(shè)置表格與單元格；以及統(tǒng)一設(shè)置列寬、行高的方法，設(shè)置行的對齊方式；設(shè)置表格邊框的方法，隱形邊框的設(shè)置。課堂練習(xí)課后作業(yè)作業(yè)：制作一個(gè)設(shè)置表格的網(wǎng)頁，寫出完整的HTML代碼，具體要求如下：制作一個(gè)表格，設(shè)置表格水平居中對齊，表格內(nèi)容及其水平對齊、垂直對齊的效果如下。參考資料教材3章；“互聯(lián)網(wǎng)”及期刊雜志的相關(guān)內(nèi)容。第9課（3.7）第3章HTML網(wǎng)頁設(shè)計(jì)與制作3.7多媒體引用方法3.7.1設(shè)置視頻3.7.2設(shè)置音頻課時(shí)2學(xué)時(shí)教學(xué)方法講授、示例講解進(jìn)程第9次課教學(xué)目的1．掌握音頻引用的方法；2．掌握視頻引用的方法。重點(diǎn)多媒體引用的方法難點(diǎn)多媒體引用的方法實(shí)施步驟：一、組織教學(xué)、課前提問（5ˊ）二、教學(xué)引導(dǎo)（3ˊ）三、進(jìn)入本次課講授內(nèi)容（77ˊ）四、小結(jié)鞏固（重申教學(xué)目的、重點(diǎn)、難點(diǎn)）（5ˊ）講授內(nèi)容：第3章HTML網(wǎng)頁制作技術(shù)3.7多媒體引用方法3.7.1設(shè)置視頻1．設(shè)置視頻手動播放2．設(shè)置視頻自動播放3.7.2設(shè)置音頻1．設(shè)置音頻手動播放2．設(shè)置音頻自動播放3．隱藏音頻4．設(shè)置網(wǎng)頁背景音樂教學(xué)提示：示例講解小結(jié)鞏固總結(jié)多媒體引用的方法，滾動字幕的制作方法。課堂練習(xí)練習(xí)：制作一個(gè)網(wǎng)頁，引用一個(gè)音頻文件，將其制作成背景音樂。素材網(wǎng)上自選。課后作業(yè)作業(yè)：制作一個(gè)網(wǎng)頁，引用一個(gè)視頻文件，網(wǎng)頁打開后自動播放，并有播放控件。參考資料教材3章；“互聯(lián)網(wǎng)”及期刊雜志的相關(guān)內(nèi)容。第10課（3.8）第3章HTML網(wǎng)頁設(shè)計(jì)與制作3.8表單制作方法3.8.1定義表單3.8.2定義輸入項(xiàng)3.8.3制作下拉菜單和數(shù)據(jù)列表3.8.4制作元素分組和輸入項(xiàng)標(biāo)注標(biāo)簽3.8.5制作文件項(xiàng)與進(jìn)度條3.8.6數(shù)據(jù)驗(yàn)證與數(shù)據(jù)輸出3.8.7制作學(xué)生信息編輯表單綜合范例課時(shí)2學(xué)時(shí)教學(xué)方法講授、示例講解進(jìn)程第10次課教學(xué)目的1．掌握網(wǎng)頁表單的制作方法；2．掌握網(wǎng)頁表單輸入項(xiàng)的使用方法。重點(diǎn)網(wǎng)頁表單、表單輸入項(xiàng)。難點(diǎn)表單輸入項(xiàng)的屬性及其使用方法。實(shí)施步驟：一、組織教學(xué)、課前提問（5ˊ）二、教學(xué)引導(dǎo)（3ˊ）三、進(jìn)入本次課講授內(nèi)容（77ˊ）四、小結(jié)鞏固（重申教學(xué)目的、重點(diǎn)、難點(diǎn)）（5ˊ）講授內(nèi)容：第3章HTML網(wǎng)頁制作技術(shù)3.8表單制作方法3.8.1定義表單3.8.2定義輸入項(xiàng)3.8.3制作下拉菜單和數(shù)據(jù)列表3.8.4制作元素分組和輸入項(xiàng)標(biāo)注標(biāo)簽3.8.5制作文件項(xiàng)與進(jìn)度條3.8.6數(shù)據(jù)驗(yàn)證與數(shù)據(jù)輸出3.8.7制作學(xué)生信息編輯表單綜合范例教學(xué)提示：示例講解小結(jié)鞏固理解網(wǎng)頁框架的概念，掌握框架的制作方法。課堂練習(xí)練習(xí)：制作表單及下拉菜單。課后作業(yè)作業(yè)：制作一個(gè)表單，表單數(shù)據(jù)項(xiàng)目及布局見下圖。其中，圖書類別為下拉菜單，下拉選擇項(xiàng)內(nèi)容包括：計(jì)算機(jī)類、文學(xué)類、法律類、建筑類、其它。參考資料教材3章；“互聯(lián)網(wǎng)”及期刊雜志的相關(guān)內(nèi)容。第11課（3.9）第3章HTML網(wǎng)頁設(shè)計(jì)與制作3.9元數(shù)據(jù)設(shè)置3.9.1設(shè)置字符編碼3.9.2設(shè)置name和content屬性3.9.3設(shè)置http-equiv和content屬性3.9.4制作SEO關(guān)鍵詞3.9.5設(shè)置元數(shù)據(jù)示例課時(shí)2學(xué)時(shí)教學(xué)方法講授、示例講解進(jìn)程第11次課教學(xué)目的1．理解元數(shù)據(jù)的作用；2．掌握元數(shù)據(jù)的name和content屬性的聯(lián)合使用方法；3.掌握元數(shù)據(jù)的http-equiv和content屬性的聯(lián)合使用方法。重點(diǎn)元數(shù)據(jù)的概念、元數(shù)據(jù)的name、http-equiv、content屬性。難點(diǎn)元數(shù)據(jù)的name、http-equiv、content屬性的聯(lián)合使用方法。實(shí)施步驟：一、組織教學(xué)、課前提問（5ˊ）二、教學(xué)引導(dǎo)（3ˊ）三、進(jìn)入本次課講授內(nèi)容（77ˊ）四、小結(jié)鞏固（重申教學(xué)目的、重點(diǎn)、難點(diǎn)）（5ˊ）講授內(nèi)容：第3章HTML網(wǎng)頁制作技術(shù)3.9元數(shù)據(jù)設(shè)置3.9.1設(shè)置字符編碼3.9.2設(shè)置name和content屬性3.9.3設(shè)置http-equiv和content屬性3.9.4制作SEO關(guān)鍵詞3.9.5設(shè)置元數(shù)據(jù)示例教學(xué)提示：示例講解小結(jié)鞏固理解網(wǎng)頁元數(shù)據(jù)的概念，掌握元數(shù)據(jù)及其屬性的使用方法。課堂練習(xí)練習(xí)：設(shè)置name和content屬性。課后作業(yè)作業(yè)：制作一個(gè)通過元數(shù)據(jù)設(shè)置SEO的網(wǎng)頁。網(wǎng)頁標(biāo)題為“云之雷電器商城”。搜索關(guān)鍵詞為“電器商城,冰箱,洗衣機(jī),電視,電飯煲,空調(diào)”，網(wǎng)站描述為“本電器商城實(shí)行一條龍服務(wù)，送貨上門安裝調(diào)試，所有商品均提供3年上門免費(fèi)保修服務(wù)，為您解除后顧之憂！”，作者為“云之雷科技”。網(wǎng)頁的內(nèi)容為“歡迎光臨云之雷電器商城！”，要求采用<h1>文檔標(biāo)題制作，水平居中顯示。參考資料教材3章；“互聯(lián)網(wǎng)”及期刊雜志的相關(guān)內(nèi)容。

第12課（4.1-4.1.3）第4章CSS網(wǎng)頁式樣制作技術(shù)4.1CSS基礎(chǔ)知識4.1.1CSS的作用4.1.2CSS代碼的構(gòu)成規(guī)則4.1.3CSS選擇符類型及使用方法課時(shí)2學(xué)時(shí)教學(xué)方法講授、示例講解進(jìn)程第12次課教學(xué)目的1．熟悉CSS網(wǎng)頁式樣基礎(chǔ)知識，CSS式樣的作用；2．熟悉CSS的構(gòu)成規(guī)則和式樣類別。重點(diǎn)CSS的構(gòu)成規(guī)則、CSS式樣類別。難點(diǎn)CSS式樣類別。實(shí)施步驟：一、組織教學(xué)、課前提問（5ˊ）二、教學(xué)引導(dǎo)（3ˊ）三、進(jìn)入本次課講授內(nèi)容（77ˊ）四、小結(jié)鞏固（重申教學(xué)目的、重點(diǎn)、難點(diǎn)）（5ˊ）講授內(nèi)容：第4章CSS網(wǎng)頁式樣制作技術(shù)CSS就是顯示樣式，專門用來設(shè)置各類網(wǎng)頁元素的顯示效果。我們把元素的顯示效果事先采用CSS技術(shù)封裝成一個(gè)樣式，在主HTML文檔中調(diào)用這個(gè)樣式，就能得到這個(gè)事先設(shè)定的顯示效果。4.1CSS基礎(chǔ)知識CSS是增強(qiáng)網(wǎng)頁顯示效果的超文本標(biāo)記語言，能夠起到代替和增強(qiáng)標(biāo)簽屬性的作用。CSS的突出特點(diǎn)是：簡潔、易用、高效，可以重復(fù)使用，也可以繼承使用。4.1.1CSS的作用CSS是增強(qiáng)網(wǎng)頁顯示效果的超文本標(biāo)記語言，能夠起到代替和增強(qiáng)標(biāo)簽屬性的作用。CSS的突出特點(diǎn)是：簡潔、易用、高效，可以重復(fù)使用，也可以繼承使用。4.1.2CSS代碼的構(gòu)成規(guī)則4.1.3CSS選擇符類型及使用方法CSS的選擇符包括：標(biāo)簽選擇符、類選擇符、ID選擇符、全局選擇符、組合選擇符、繼承選擇符、偽類選擇符、字符串匹配的屬性選擇符等，其中前三者最為常用。1．標(biāo)簽選擇符標(biāo)簽選擇符，就是把HTML的標(biāo)簽作為CSS的選擇符。在HTML中使用該標(biāo)簽時(shí)，自動跟蹤選擇該標(biāo)簽在CSS中定義的顯示樣式。每個(gè)HTML標(biāo)簽均可用作標(biāo)簽選擇符，如<h4>、<font>、<table>等都能作為標(biāo)簽選擇符。2．類選擇符類選擇符是非常靈活的，是由用戶自己定義的。類選擇符相當(dāng)于自定義顯示樣式。類選擇符只能用于內(nèi)部式樣和外部式樣。類選擇符的標(biāo)志：“.”。3．ID選擇符ID選擇符的定義和使用方法跟類選擇符相似，但其只能在HTML中使用一次，因而更具針對性。ID選擇符同樣也只能在內(nèi)部樣式和外部樣式中使用。ID選擇符的標(biāo)志：“#”。教學(xué)提示：示例講解小結(jié)鞏固總結(jié)CSS網(wǎng)頁式樣基礎(chǔ)知識，CSS式樣的作用，CSS的構(gòu)成規(guī)則和式樣類別。課堂練習(xí)課后作業(yè)思考：沒有CSS同樣能做出漂亮的網(wǎng)頁，而且使用CSS式樣制作技術(shù)需要額外增加代碼，所以CSS沒有多少實(shí)用價(jià)值。參考資料教材4章；“互聯(lián)網(wǎng)”及期刊雜志的相關(guān)內(nèi)容。第13課（4.1.4-4.1.6）第4章CSS網(wǎng)頁式樣制作技術(shù)4.1.4CSS樣式類別4.1.5CSS中的度量單位4.1.6CSS注釋4.1.7CSS常用屬性課時(shí)2學(xué)時(shí)教學(xué)方法講授、示例講解進(jìn)程第13次課教學(xué)目的1．掌握CSS選擇符類型及使用方法；2．熟悉CSS中的度量單位；3.掌握CSS注釋的方法。重點(diǎn)CSS選擇符類型及使用方法，度量單位難點(diǎn)CSS選擇符類型實(shí)施步驟：一、組織教學(xué)、課前提問（5ˊ）二、教學(xué)引導(dǎo)（3ˊ）三、進(jìn)入本次課講授內(nèi)容（77ˊ）四、小結(jié)鞏固（重申教學(xué)目的、重點(diǎn)、難點(diǎn)）（5ˊ）講授內(nèi)容：第4章CSS網(wǎng)頁式樣制作技術(shù)4.1.4CSS樣式類別CSS是配合HTML網(wǎng)頁文件使用的，如果沒有HTML，則CSS沒有任何作用。HTML使用CSS樣式時(shí)主要分以下幾種情況：內(nèi)聯(lián)樣式、內(nèi)部樣式、外部樣式（鏈接樣式、導(dǎo)入樣式）。1．內(nèi)聯(lián)樣式內(nèi)聯(lián)樣式，也稱為“行內(nèi)樣式”，就是在HTML的標(biāo)簽中，直接定義并立即使用CSS樣式的應(yīng)用方式。內(nèi)聯(lián)樣式對改進(jìn)網(wǎng)頁制作效率方面幾乎沒有什么作用，所以很少使用。2．內(nèi)部樣式內(nèi)部樣式，也稱為“內(nèi)嵌樣式”，是指將CSS代碼內(nèi)嵌在HTML文檔頭中的應(yīng)用方式。該方式能夠簡化HTML的文檔代碼，提高HTML的制作效率。實(shí)現(xiàn)方法是將CSS代碼封裝在<style>和</style>之間，形成一個(gè)CSS代碼模塊，整體嵌入在HTML文檔的文檔頭中，也就是嵌入在標(biāo)簽<head>與</head>之間。3．外部樣式外部樣式是指把CSS代碼存儲在HTML的文件外部，以“.css”文件格式獨(dú)立存儲的應(yīng)用方式。當(dāng)HTML需要引用CSS樣式時(shí)，需要以鏈接或者導(dǎo)入的方式將CSS文件中定義的樣式全部集成到HTML的文檔頭中，就像在一個(gè)HTML文件中一樣。后續(xù)的引用方法與內(nèi)部樣式的引用方法相同。外部樣式又分為外部鏈接樣式和外部導(dǎo)入樣式兩種類型。（1）外部鏈接式樣外部鏈接樣式是最常用、最實(shí)用的一種CSS使用方法，將HTML網(wǎng)頁內(nèi)容和CSS顯示規(guī)則分離，形成“一個(gè)網(wǎng)頁文件+一個(gè)CSS文件（如果必要，可以形成多個(gè)CSS文件）”的形式。這種分離非常有利于項(xiàng)目人員之間的分工協(xié)作，代碼編寫人員側(cè)重于網(wǎng)頁功能的實(shí)現(xiàn)，美工人員側(cè)重于頁面的美化設(shè)計(jì)，工作效率大大提高。而且，這種分離使得HTML代碼極其精煉，易于項(xiàng)目后期的升級與維護(hù)。（2）外部導(dǎo)入式樣外部導(dǎo)入樣式與外部鏈接樣式的基本作用是相同的，CSS源文件的代碼規(guī)則也完全相同，只是引用CSS代碼文件的技術(shù)實(shí)現(xiàn)方式不同：一種是外部鏈接方式，一種是外部導(dǎo)入方式。但外部導(dǎo)入樣式也有其優(yōu)點(diǎn)，不僅可以導(dǎo)入到HTML中，也可以導(dǎo)入到CSS樣式中。外部導(dǎo)入樣式特別適用于對IO訪問要求高、網(wǎng)頁響應(yīng)速度快的場景。4．樣式的優(yōu)先級內(nèi)聯(lián)樣式>內(nèi)部樣式>外部樣式4.1.5CSS中的度量單位主要有顏色單位、長度單位、時(shí)間單位、角度單位和頻率單位5種。其中，顏色單位、長度單位比較常用。1．顏色單位顏色有英文單詞、16進(jìn)制、RGB（）三種表達(dá)形式。2．長度單位長度單位有固定數(shù)值、百分比兩種形式，或從父輩繼承數(shù)值。4.1.6CSS注釋在CSS代碼中用“/*注釋說明*/”對文檔進(jìn)行注釋說明。4.1.7CSS常用屬性1.CSS背景屬性2.CSS文本屬性3.CSS字體屬性4.CSS邊框?qū)傩?.CSS外邊距屬性6.CSS內(nèi)邊距屬性7.CSS列表屬性8.CSS尺寸屬性9.CSS定位屬性10.CSS表格屬性11.CSS超鏈接屬性教學(xué)提示：示例講解示例講解小結(jié)鞏固總結(jié)CSS選擇符類型及使用方法，度量單位的表達(dá)形式，CSS注釋的方法。課堂練習(xí)練習(xí)：制作一個(gè)網(wǎng)頁，顯示三級文檔標(biāo)題“三級文檔標(biāo)題的CSS式樣”，顯示要求為6號字、楷體、藍(lán)色，采用內(nèi)部式樣制作。課后作業(yè)作業(yè)：制作一個(gè)網(wǎng)頁，顯示三級文檔標(biāo)題“三級文檔標(biāo)題的CSS式樣”，顯示要求為3號字、黑體、紅色，采用外部鏈接式樣制作。參考資料教材4章；“互聯(lián)網(wǎng)”及期刊雜志的相關(guān)內(nèi)容。

第14課（4.2）第4章CSS式樣制作技術(shù)4.2用CSS設(shè)置文本樣式4.2.1設(shè)置文字屬性4.2.2設(shè)置段落屬性4.2.3用CSS設(shè)置文本綜合范例課時(shí)2學(xué)時(shí)教學(xué)方法講授、示例講解進(jìn)程第14次課教學(xué)目的掌握CSS技術(shù)制作文本式樣的方法。重點(diǎn)采用CSS設(shè)置文本屬性、設(shè)置段落屬性。難點(diǎn)設(shè)置段落屬性實(shí)施步驟：一、組織教學(xué)、課前提問（5ˊ）二、教學(xué)引導(dǎo)（3ˊ）三、進(jìn)入本次課講授內(nèi)容（77ˊ）四、小結(jié)鞏固（重申教學(xué)目的、重點(diǎn)、難點(diǎn)）（5ˊ）講授內(nèi)容：第4章CSS網(wǎng)頁式樣制作技術(shù)文本樣式包括文本的文字屬性（包括字體、字號、粗體字、斜體字、字間距等）和文本的段落屬性等4.2.1設(shè)置文字屬性1．設(shè)置字體CSS中，設(shè)置字體的屬性需要使用文字類標(biāo)簽選擇符、類選擇符或ID選擇符，及其字體屬性“font-family”（也可以使用“font”屬性為所有文本設(shè)置字體屬性）。2．設(shè)置字的大小序號表達(dá)形式值含義及描述1英文單詞表示絕對大小xx-small最小x-small很小small小medium中等large大x-large很大xx-large最大2英文單詞表示相對大小smaller把font-size設(shè)置為比父元素更小的尺寸larger把font-size設(shè)置為比父元素更大的尺寸3固定數(shù)值表示度量單位px像素（如果沒有度量單位，系統(tǒng)默認(rèn)為px）pt磅，1pt=1/72inin英寸em指的是字符寬度的倍數(shù)。如：0.8em，1.2em，2em等4百分比%把font-size設(shè)置為基于父元素的一個(gè)百分比5繼承inherit從父元素繼承的屬性值3．設(shè)置粗體字4.設(shè)置斜體字5．設(shè)置文字顏色4.2.2設(shè)置段落屬性1．設(shè)置字符間距和單詞間距2．設(shè)置文本縮進(jìn)3．設(shè)置文本對齊4．設(shè)置行高4.2.3用CSS設(shè)置文本綜合范例教學(xué)提示：示例講解小結(jié)鞏固總結(jié)采用CSS技術(shù)制作文本式樣、段落式樣的方法。課堂練習(xí)練習(xí)：課后作業(yè)作業(yè)：制作一個(gè)采用CSS技術(shù)設(shè)置文本的網(wǎng)頁，寫出完整的HTML及CSS代碼，具體要求如下。（1）制作外部鏈接樣式的CSS文檔，名稱為myCSS.css，保存在HTML文檔同級目錄下。采用標(biāo)簽選擇符定義文檔標(biāo)題<h3>的顯示樣式：字體為“黑體”，字的大小為“20px”，字的顏色為“blue”，水平居中顯示；再采用類選擇符（名稱為“.myparagraph”）定義段落樣式，字體為“宋體”，字的大小為“16px”。字的顏色為“green”，文本縮進(jìn)為2倍目標(biāo)大?。?em），1.5倍行高。（2）制作HTML文檔，聲明外部鏈接樣式“myCSS.css”，按照h3樣式顯示文檔標(biāo)題<h3>，標(biāo)題內(nèi)容為“CSS樣式層疊表”；再按照類選擇符“.myparagraph”的樣式顯示一段文本，文本的內(nèi)容為：“CSS是增強(qiáng)網(wǎng)頁顯示效果的標(biāo)記語言，能夠起到代替和增強(qiáng)標(biāo)簽屬性的作用。CSS的突出特點(diǎn)是：簡單、易用、高效，可以重復(fù)使用、也可以繼承使用?！?。參考資料教材4章；“互聯(lián)網(wǎng)”及期刊雜志的相關(guān)內(nèi)容。

第15課（4.3）第4章CSS網(wǎng)頁式樣制作技術(shù)4.3用CSS設(shè)置圖像效果4.3.1設(shè)置圖像4.3.1圖文混排4.3.2設(shè)置背景圖像課時(shí)2學(xué)時(shí)教學(xué)方法講授、示例講解進(jìn)程第15次課教學(xué)目的掌握采用CSS技術(shù)制作圖像式樣的方法。重點(diǎn)引用圖像、圖文混排、設(shè)置背景圖像。難點(diǎn)引用圖像實(shí)施步驟：一、組織教學(xué)、課前提問（5ˊ）二、教學(xué)引導(dǎo)（3ˊ）三、進(jìn)入本次課講授內(nèi)容（77ˊ）四、小結(jié)鞏固（重申教學(xué)目的、重點(diǎn)、難點(diǎn)）（5ˊ）講授內(nèi)容：第4章CSS網(wǎng)頁式樣制作技術(shù)4.3用CSS設(shè)置圖像效果用圖像主要分為嵌入排列圖像、浮動圖像、背景圖像3種應(yīng)用場景。4.3.1設(shè)置圖像采用CSS引用圖像需要在HTML文檔頭中定義CSS樣式，可以采用內(nèi)部樣式和外部樣式。如果采用CSS外部樣式，外部樣式有CSS文件存放路徑和圖像文件存放路徑，需要注意文件引用的位置。4.3.2圖文混排在HTML中，圖文混排比較困難。但在CSS中，可以實(shí)現(xiàn)很好的圖文混排效果。文字環(huán)繞是網(wǎng)頁中最常見的圖文混排形式，設(shè)置文字環(huán)繞圖文混排需要使用圖像選擇符“img”及其“float”屬性，將圖像和文本放在同一個(gè)文字類容器中。4.3.3設(shè)置背景圖像在HTML中設(shè)置網(wǎng)頁背景圖片的方式為<bodybackground="圖片URL">，而在CSS中設(shè)置背景圖片的屬性為“background-image”，該屬性不但可以設(shè)置網(wǎng)頁背景圖片，還可用于設(shè)置表格、表格單元的背景圖像。教學(xué)提示：示例講解示例講解示例講解小結(jié)鞏固總結(jié)CSS引用圖像、制作圖文混排式樣、制圖背景圖像的方法。課堂練習(xí)練習(xí)：課后作業(yè)作業(yè)：制作一個(gè)采用CSS技術(shù)設(shè)置圖像的網(wǎng)頁，寫出完整的HTML及CSS代碼，具體要求如下。（1）采用內(nèi)部樣式制作。（2）采用標(biāo)簽選擇符定義圖像的顯示樣式：圖像文件名為“img1.gif”，存放在網(wǎng)頁源文件同級目錄下，圖像寬度300px，圖像向左浮動。（3）采用標(biāo)簽選擇符定義網(wǎng)頁背景圖像樣式，背景圖像名稱為“img2.jpg”，存放在網(wǎng)頁源文件同級目錄下。（4）制作主文檔，按照背景圖像樣式設(shè)置背景圖像（img2.jpg）；定義段落，首先在段落中按照圖像選擇符樣式引用圖像文件“img1.gif”，然后顯示一段文本，文本的內(nèi)容為“文字環(huán)繞是網(wǎng)頁中最常見的圖文混排形式，設(shè)置文字環(huán)繞圖文混排需要使用圖像選擇符‘img’及其‘float’屬性，將圖像和文本放在同一個(gè)文字類容器中”。參考資料教材4章；“互聯(lián)網(wǎng)”及期刊雜志的相關(guān)內(nèi)容。

第16課（4.4-4.4.3）第4章CSS網(wǎng)頁式樣制作技術(shù)4.4用CSS設(shè)置表格樣式4.4.1設(shè)置邊框樣式4.4.2設(shè)置表格內(nèi)容的顯示格式4.4.3設(shè)置thead、tbody、tfoot標(biāo)簽課時(shí)2學(xué)時(shí)教學(xué)方法講授、示例講解進(jìn)程第16次課教學(xué)目的1.CSS技術(shù)制作表邊框和單元格邊框的線型式樣、貼合邊框的式樣；2.表格內(nèi)容的顯示格式式樣；3.thead、tbody、dfoot式樣的制作方法。重點(diǎn)邊框式樣制作，表格內(nèi)容式樣制作，thead、tbody、dfoot式樣的制作方法。難點(diǎn)邊框式樣制作，表格內(nèi)容式樣制作實(shí)施步驟：一、組織教學(xué)、課前提問（5ˊ）二、教學(xué)引導(dǎo)（3ˊ）三、進(jìn)入本次課講授內(nèi)容（77ˊ）四、小結(jié)鞏固（重申教學(xué)目的、重點(diǎn)、難點(diǎn)）（5ˊ）講授內(nèi)容：第4章CSS網(wǎng)絡(luò)式樣制作技術(shù)4.4用CSS設(shè)置表格樣式在CSS中，可以對表格的邊框、邊距、單元格等進(jìn)行設(shè)置，以簡化表格制作編碼，提高效率，美化表格。4.4.1設(shè)置邊框樣式表格中有表邊框和單元格邊框（表頭邊框與單元格邊框的性質(zhì)相同，故此處省略表頭邊框的描述），表邊框是指表格四周的四條邊框，單元格邊框是指每一個(gè)單元格的邊框。默認(rèn)狀態(tài)下，這兩種邊框是分別顯示的，而且單元格之間的邊框也是相互獨(dú)立的，不貼合顯示。1．設(shè)置表邊框與單元格邊框的線型值描述none定義無邊框。none優(yōu)先級最低hidden與none相同。不過應(yīng)用于表時(shí)除外，對于表，hidden用于解決邊框沖突。hidden優(yōu)先級最高dotted定義點(diǎn)狀邊框。在大多數(shù)瀏覽器中呈現(xiàn)為實(shí)線dashed定義虛線。在大多數(shù)瀏覽器中呈現(xiàn)為實(shí)線solid定義實(shí)線double定義雙線。雙線的寬度等于border-width的值groove定義3D凹槽邊框。其效果取決于border-color的值ridge定義3D壟狀邊框。其效果取決于border-color的值inset定義3Dinset邊框。其效果取決于border-color的值outset定義3Doutset邊框。其效果取決于border-color的值inherit規(guī)定應(yīng)該從父元素繼承邊框樣式2．設(shè)置表邊框與單元格邊框貼合顯示4.4.2設(shè)置表格內(nèi)容的顯示格式4.4.3設(shè)置thead、tbody、tfoot標(biāo)簽教學(xué)提示：示例講解示例講解示例講解示例講解示例講解示例講解小結(jié)鞏固總結(jié)CSS技術(shù)制作表邊框和單元格邊框的線型式樣、貼合邊框的式樣、表格內(nèi)容式樣，以及thead、tbody、dfoot式樣的制作方法。課堂練習(xí)練習(xí)：課后作業(yè)作業(yè)：制作一個(gè)采用CSS設(shè)置表格的網(wǎng)頁，寫出完整的HTML及CSS代碼，具體要求如下。（1）采用內(nèi)部樣式制作。（2）采用標(biāo)簽選擇符定義表的樣式：邊框?qū)挾葹?px，邊框顏色為藍(lán)色，邊框線條為雙線（double），邊框貼合顯示。字體為“宋體”，字的大小為“18px”，表格水平居中；（3）采用標(biāo)簽選擇符定義表頭樣式：表頭內(nèi)容水平居中、垂直居中。（4）采用單元格選擇符定義單元格樣式：字體為“楷體”，內(nèi)容水平居中、垂直靠下對齊。（5）制作主文檔。表格的內(nèi)容如下。商務(wù)網(wǎng)站制作與設(shè)計(jì)成績表學(xué)號姓名成績101張三豐98102李小虎91參考資料教材4章；“互聯(lián)網(wǎng)”及期刊雜志的相關(guān)內(nèi)容。第17課（4.4.4）第4章CSS網(wǎng)頁式樣制作技術(shù)4.4.4設(shè)置斑馬紋表格綜合范例課時(shí)2學(xué)時(shí)教學(xué)方法講授、示例講解進(jìn)程第17次課教學(xué)目的1．掌握斑馬紋表格式樣的制作方法。重點(diǎn)多媒體引用的方法、滾動字幕的制作方法難點(diǎn)滾動字幕的屬性設(shè)置實(shí)施步驟：一、組織教學(xué)、課前提問（5ˊ）二、教學(xué)引導(dǎo)（3ˊ）三、進(jìn)入本次課講授內(nèi)容（77ˊ）四、小結(jié)鞏固（重申教學(xué)目的、重點(diǎn)、難點(diǎn)）（5ˊ）講授內(nèi)容：第4章CSS網(wǎng)絡(luò)式樣制作技術(shù)如果表格較寬、行數(shù)較多，很容易看錯(cuò)行。采用斑馬紋顯示風(fēng)格，每行一種顏色，可以很好地解決這個(gè)問題。制作斑馬紋表格，需要熟悉顏色搭配，才能產(chǎn)生較好的顏色交替效果。4.4.4設(shè)置斑馬紋表格綜合范例教學(xué)提示：示例講解小結(jié)鞏固總結(jié)斑馬紋表格的制作方法。課堂練習(xí)課后作業(yè)作業(yè)：制作一個(gè)斑馬紋表格，采用CSS外部鏈接式樣。表格式樣如下：第一小組期末考試成績表學(xué)號姓名性別期末考試501張三男91502李四男87503王五男93504劉玲女98505杜六男89平均分91.6參考資料教材4章；“互聯(lián)網(wǎng)”及期刊雜志的相關(guān)內(nèi)容。

第18課（4.5）第4章CSS網(wǎng)頁式樣制作技術(shù)4.5用CSS設(shè)置超鏈接偽類及偽元素4.5.1設(shè)置超鏈接偽類4.5.2設(shè)置偽元素課時(shí)2學(xué)時(shí)教學(xué)方法講授、示例講解進(jìn)程第18次課教學(xué)目的1．掌握CSS技術(shù)制作超鏈接偽類的方法；2．掌握CSS技術(shù)制作偽元素的方法。重點(diǎn)制作超鏈接偽類、偽元素的方法。難點(diǎn)制作超鏈接偽類的方法。實(shí)施步驟：一、組織教學(xué)、課前提問（5ˊ）二、教學(xué)引導(dǎo)（3ˊ）三、進(jìn)入本次課講授內(nèi)容（77ˊ）四、小結(jié)鞏固（重申教學(xué)目的、重點(diǎn)、難點(diǎn)）（5ˊ）講授內(nèi)容：第4章CSS網(wǎng)絡(luò)式樣制作技術(shù)4.5用CSS設(shè)置超鏈接偽類及偽元素在HTML及CSS中，有一些類或元素，它們不是實(shí)際存在的實(shí)體元素或類，是對實(shí)體元素進(jìn)行修飾和說明的，我們把這些元素或類稱之為偽元素、偽類。什么是偽類？偽類通常都是指某個(gè)元素的某個(gè)狀態(tài)。例如，超鏈接元素有未訪問過的鏈接接、已訪問過的鏈接、鼠標(biāo)指針經(jīng)過時(shí)的鏈接和鼠標(biāo)單擊時(shí)的鏈接4種狀態(tài)。什么是偽元素？偽元素通常是指某個(gè)對象中某個(gè)元素的狀態(tài)。例如，一行文字中第1個(gè)字符的樣式。4.5.1設(shè)置超鏈接偽類超鏈接的偽類分別是link、visited、hover、active，分別代表未訪問過的超鏈接、已訪問過的超鏈接、鼠標(biāo)指針經(jīng)過超鏈接、正在單擊的超鏈接這4個(gè)偽類狀態(tài)。4.5.2設(shè)置偽元素偽元素與偽類的定義和使用方法類似，對文檔中虛構(gòu)的元素進(jìn)行顯示設(shè)置。常用的偽元素有first-letter和first-line兩個(gè)，作用于文字的首字符和首行。教學(xué)提示：示例講解小結(jié)鞏固總結(jié)超鏈接偽類、偽元素的制作方法。課堂練習(xí)練習(xí)：制作超鏈接偽類。課后作業(yè)作業(yè)：制作一個(gè)采用CSS設(shè)置超鏈接狀態(tài)的網(wǎng)頁，寫出完整的HTML及CSS代碼，具體要求如下：（1）采用內(nèi)部樣式制作。（2）分別制作超鏈接未訪問、超鏈接已訪問、鼠標(biāo)指針經(jīng)過超鏈接、單擊超鏈接的偽類顯示樣式。（3）制作文本超鏈接，文本內(nèi)容為“淘寶網(wǎng)”。參考資料教材4章；“互聯(lián)網(wǎng)”及期刊雜志的相關(guān)內(nèi)容。

第19課（4.6）第4章CSS網(wǎng)頁式樣制作技術(shù)4.6采用DIV與SPAN制作網(wǎng)頁4.6.1塊級元素與內(nèi)聯(lián)元素4.6.2定義DIV樣式4.6.3定義SPAN樣式4.6.4元素定位4.6.5元素疊加4.6.6元素浮動4.6.7元素的顯示與隱藏課時(shí)2學(xué)時(shí)教學(xué)方法講授、示例講解進(jìn)程第19次課教學(xué)目的1．理解塊級元素與內(nèi)聯(lián)元素的概念；2．掌握DIV、SPAN的使用方法；3.掌握元素定位、疊加、浮動的實(shí)現(xiàn)方法。重點(diǎn)掌握DIV、SPAN的使用方法；掌握元素定位、疊加、浮動的實(shí)現(xiàn)方法。難點(diǎn)元素定位、疊加、浮動的實(shí)現(xiàn)方法。實(shí)施步驟：一、組織教學(xué)、課前提問（5ˊ）二、教學(xué)引導(dǎo)（3ˊ）三、進(jìn)入本次課講授內(nèi)容（77ˊ）四、小結(jié)鞏固（重申教學(xué)目的、重點(diǎn)、難點(diǎn)）（5ˊ）講授內(nèi)容：第4章CSS網(wǎng)絡(luò)式樣制作技術(shù)4.6采用DIV與SPAN制作網(wǎng)頁4.6.1塊級元素與內(nèi)聯(lián)元素塊級元素顯示的是一個(gè)矩形框，一個(gè)塊級元素單獨(dú)占據(jù)一行，與相鄰的塊級元素依次豎向排列，不會排在同一行。例如元素<div>、<p>、<ul>、<h1>～<h6>等都是塊級元素，它們總是以一個(gè)區(qū)塊出現(xiàn)，單獨(dú)占據(jù)一行。內(nèi)聯(lián)元素與塊級元素相反，其與相鄰的內(nèi)聯(lián)元素能夠橫向依次排列成行，就像文本依次排列顯示的效果一樣，先依次橫向排列，排到最右端自動換行。例如元素<span>、<font>、<a>、<img>、<input>都屬于內(nèi)聯(lián)元素。4.6.2使用DIV4.6.3使用SPAN4.6.4元素定位靜態(tài)定位，是指無特殊定位，也是系統(tǒng)默認(rèn)的定位模式。塊級元素生成的是一個(gè)矩形框，是文檔流中的一個(gè)部分，按照在文檔中出現(xiàn)的位置正常定位顯示，沒有偏移量。相對定位，是指相對于靜態(tài)定位生成的塊的位置的偏移量，由top、right、bottom、left4個(gè)偏移屬性聯(lián)合指定相對偏移量。絕對定位，是指按照父級元素的4個(gè)邊框?yàn)榛鶞?zhǔn)，使用由top、right、bottom、left4個(gè)屬性來決定塊的絕對位置。偏移量，是指相對于某個(gè)指定位置的偏移量，分為top、right、bottom、left4個(gè)方向。偏移量的表達(dá)方式有數(shù)值形式和百分比形式。數(shù)值形式可以使用常見的度量單位如像素、磅、毫米等。4.6.5元素疊加如果網(wǎng)頁中有多項(xiàng)容器類元素存在位置重疊時(shí)，需要設(shè)置好這些元素的疊加次序，保證需要顯示的內(nèi)部不被遮住。4.6.6元素浮動浮動屬性可以讓塊級元素“內(nèi)聯(lián)化”，使其具有內(nèi)聯(lián)元素的排列特點(diǎn)。目前，浮動只有向左、向右兩種浮動形式。設(shè)置浮動屬性后，周邊的元素會在該元素周邊“流動”。教學(xué)提示：示例講解示例講解示例講解示例講解示例講解示例講解小結(jié)鞏固總結(jié)塊級元素與內(nèi)聯(lián)元素的概念，DIV、SPAN的使用方法，元素定位、疊加、浮動的實(shí)現(xiàn)方法。課堂練習(xí)練習(xí)：制作一個(gè)網(wǎng)頁，采用內(nèi)部式樣定義1個(gè)DIV塊級元素，DIV內(nèi)的文本內(nèi)容為“我的塊級元素”，采用相對定位顯示，頂部偏移量為10px、左邊偏移量為60px。課后作業(yè)作業(yè)：制作一個(gè)網(wǎng)頁，采用內(nèi)部式樣定義3個(gè)DIV塊級元素，大小均為150px長*120px高。第一個(gè)DIV：文本內(nèi)容為“第一個(gè)DIV”，采用絕對定位方式顯示，頂部偏移量為20px，左邊偏移量為30px，DIV的背景色為藍(lán)色，疊加次序?yàn)?；第二個(gè)DIV：文本內(nèi)容為“第二個(gè)DIV”，采用絕對定位方式顯示，頂部偏移量為100px，左邊偏移量為50px，DIV的背景色為黃色，疊加次序?yàn)?；第三個(gè)DIV：文本內(nèi)容為“第三個(gè)DIV”，采用絕對定位方式顯示，頂部偏移量為60px，左邊偏移量為100px，DIV的背景色為綠色，疊加次序?yàn)?。參考資料教材4章；“互聯(lián)網(wǎng)”及期刊雜志的相關(guān)內(nèi)容。第20課（4.7-4.7.3）第4章CSS網(wǎng)頁式樣制作技術(shù)4.7用CSS設(shè)置元素的邊框與邊距4.7.1元素的邊框與邊距4.7.2設(shè)置元素邊框與邊距4.7.3制作文字按鈕綜合范例課時(shí)2學(xué)時(shí)教學(xué)方法講授、示例講解進(jìn)程第20次課教學(xué)目的1．理解元素邊框、內(nèi)外邊距的概念和位置關(guān)系；2．掌握元素邊框線型、寬度、顏色的設(shè)置方法；3.掌握采用邊框和邊距技術(shù)制作文字按鈕的方法。重點(diǎn)元素邊框線型、寬度、顏色的設(shè)置方法；采用邊框和邊距技術(shù)制作文字按鈕的方法。難點(diǎn)采用邊框和邊距技術(shù)制作文字按鈕的方法。實(shí)施步驟：一、組織教學(xué)、課前提問（5ˊ）二、教學(xué)引導(dǎo)（3ˊ）三、進(jìn)入本次課講授內(nèi)容（77ˊ）四、小結(jié)鞏固（重申教學(xué)目的、重點(diǎn)、難點(diǎn)）（5ˊ）講授內(nèi)容：第4章CSS網(wǎng)絡(luò)式樣制作技術(shù)4.7用CSS設(shè)置元素的邊框與邊距4.7.1元素的邊框與邊距容器類元素都有邊框和邊距，邊距又分為外邊距和內(nèi)邊距，邊框與邊距均有上、下、左、右4條邊。4.7.2設(shè)置元素邊框與邊距1．設(shè)置邊框（1）設(shè)置邊框類型（2）統(tǒng)一設(shè)置邊框的寬度、顏色和邊框類型（3）分別設(shè)置邊框的寬度、顏色和邊框類型2．設(shè)置內(nèi)邊距3．設(shè)置外邊距4.7.3制作文字按鈕綜合范例教學(xué)提示：示例講解示例講解小結(jié)鞏固總結(jié)元素邊框、內(nèi)外邊距的概念；元素邊框線型、寬度、顏色的設(shè)置方法；采用邊框和邊距技術(shù)制作文字按鈕的方法。課堂練習(xí)制作文字按鈕課后作業(yè)參考資料教材4章；“互聯(lián)網(wǎng)”及期刊雜志的相關(guān)內(nèi)容。第21課（4.7.4）第4章CSS網(wǎng)頁式樣制作技術(shù)4.7.4制作導(dǎo)航欄綜合范例課時(shí)2學(xué)時(shí)教學(xué)方法講授、示例講解進(jìn)程第21次課教學(xué)目的掌握采用文本列表和元素邊框邊距技術(shù)制作導(dǎo)航欄的方法。重點(diǎn)采用文本列表和元素邊框邊距技術(shù)制作導(dǎo)航欄的方法。難點(diǎn)采用文本列表和元素邊框邊距技術(shù)制作導(dǎo)航欄的方法。實(shí)施步驟：一、組織教學(xué)、課前提問（5ˊ）二、教學(xué)引導(dǎo)（3ˊ）三、進(jìn)入本次課講授內(nèi)容（77ˊ）四、小結(jié)鞏固（重申教學(xué)目的、重點(diǎn)、難點(diǎn)）（5ˊ）講授內(nèi)容：第4章CSS網(wǎng)絡(luò)式樣制作技術(shù)4.7.4制作導(dǎo)航欄綜合范例采用任務(wù)驅(qū)動的方式，引導(dǎo)學(xué)生學(xué)習(xí)制作導(dǎo)航欄。1．制作縱向排列導(dǎo)航欄需要定義DIV塊的尺寸，適合用于確定導(dǎo)航欄（文本列表）的位置。定義一個(gè)文本列表及其整體樣式，定義好邊距。制作列表項(xiàng)，做出縱向分隔符的美觀效果。制作列表項(xiàng)超鏈接整體樣式。制作列表項(xiàng)超鏈接在未訪問、已訪問的顯示效果，以及鼠標(biāo)指針經(jīng)過時(shí)的顯示效果，通過反差效果增強(qiáng)美感，要充分利用左邊框的顏色做好突出顯示。2．制作橫向排列導(dǎo)航欄教學(xué)提示：示例講解小結(jié)鞏固總結(jié)采用文本列表、元素邊框與邊距技術(shù)制作導(dǎo)航欄的方法。課堂練習(xí)練習(xí)：制作縱向?qū)Ш綑谡n后作業(yè)作業(yè)：制作橫向?qū)Ш綑趨⒖假Y料教材4章；“互聯(lián)網(wǎng)”及期刊雜志的相關(guān)內(nèi)容。

第22課（4.8）第4章CSS網(wǎng)頁式樣制作技術(shù)4.8響應(yīng)式網(wǎng)頁設(shè)計(jì)與制作4.8.1瀏覽器與屏幕尺寸適配4.8.2設(shè)置彈性頁面4.8.3設(shè)置flex彈性容器4.8.4設(shè)計(jì)流式布局4.8.5制作響應(yīng)式網(wǎng)頁范例4.8.6響應(yīng)式網(wǎng)頁開發(fā)前端框架課時(shí)2學(xué)時(shí)教學(xué)方法講授、示例講解進(jìn)程第22次課教學(xué)目的1．掌握瀏覽器與屏幕尺寸適配的方法；2．掌握彈性網(wǎng)頁的設(shè)置方法；3.掌握flex彈性容器的設(shè)置技術(shù)；4.掌握流式布局的制作技術(shù)；5.了解響應(yīng)式網(wǎng)頁開發(fā)前端框架。重點(diǎn)Flex彈性容器、流式布局難點(diǎn)彈性容器設(shè)置技術(shù)、流式布局制作技術(shù)實(shí)施步驟：一、組織教學(xué)、課前提問（5ˊ）二、教學(xué)引導(dǎo)（3ˊ）三、進(jìn)入本次課講授內(nèi)容（77ˊ）四、小結(jié)鞏固（重申教學(xué)目的、重點(diǎn)、難點(diǎn)）（5ˊ）講授內(nèi)容：第4章CSS網(wǎng)頁樣式制作技術(shù)4.8響應(yīng)式網(wǎng)頁設(shè)計(jì)與制作4.8.1瀏覽器與屏幕尺寸適配4.8.2設(shè)置彈性頁面1.移動端優(yōu)先方案2.PC端優(yōu)先方案4.8.3設(shè)置flex彈性容器1.理解Flex橫軸與縱軸2.定義flex彈性容器3.設(shè)置flex容器彈性布局屬性4.設(shè)置子元素彈性布局屬性4.8.4設(shè)計(jì)流式布局1.網(wǎng)頁內(nèi)容模塊化設(shè)計(jì)2.流式布局4.8.5制作響應(yīng)式網(wǎng)頁范例4.8.6響應(yīng)式網(wǎng)頁開發(fā)前端框架教學(xué)提示：示例講解小結(jié)鞏固總結(jié)響應(yīng)式網(wǎng)頁制作技術(shù)和方法。課堂練習(xí)練習(xí)：制作flex彈性容器。課后作業(yè)作業(yè)：采用內(nèi)部樣式制作彈性布局的網(wǎng)頁，寫出完整的HTML及CSS代碼。網(wǎng)頁中定義1個(gè)flex容器盒子，盒子的寬度為100%，高度為600px，采用PC端優(yōu)先方案編寫彈性布局。盒子中定義2個(gè)div塊，背景顏色分別為綠色和藍(lán)色。當(dāng)屏幕尺寸大于768px時(shí)，容器的主軸為橫軸，第一個(gè)div的寬度為50%，高度為100%，第二個(gè)div塊的寬、高也為50%、100%；當(dāng)屏幕尺寸小于768px時(shí)，主軸設(shè)為縱軸，第一個(gè)div的寬度為100%，高度為50%，第二個(gè)div塊的寬、高也為100%、50%，運(yùn)行效果見下圖所示：參考資料教材4章；“互聯(lián)網(wǎng)”及期刊雜志的相關(guān)內(nèi)容。

第23課（5.1-5.2）第5章網(wǎng)頁圖像制作5.1準(zhǔn)備圖像素材5.2制作網(wǎng)頁圖像課時(shí)2學(xué)時(shí)教學(xué)方法講授、示例講解進(jìn)程第23次課教學(xué)目的1．熟悉準(zhǔn)備圖像素材的方法；2．熟悉制作網(wǎng)頁圖像的方法。重點(diǎn)圖像拍攝，網(wǎng)頁圖像制作難點(diǎn)網(wǎng)頁圖像制作實(shí)施步驟：一、組織教學(xué)、課前提問（5ˊ）二、教學(xué)引導(dǎo)（3ˊ）三、進(jìn)入本次課講授內(nèi)容（77ˊ）四、小結(jié)鞏固（重申教學(xué)目的、重點(diǎn)、難點(diǎn)）（5ˊ）講授內(nèi)容：第5章網(wǎng)頁圖像制作5.1準(zhǔn)備圖像素材5.1.1商品圖像拍攝1．商品準(zhǔn)備2．模特與道具準(zhǔn)備3．拍攝準(zhǔn)備（1）制定拍攝計(jì)劃（2）準(zhǔn)備拍攝環(huán)境（3）準(zhǔn)備拍攝相機(jī)（4）準(zhǔn)備專業(yè)攝影師4．拍攝圖像5.1.2商品圖像存檔5.2制作網(wǎng)頁圖像5.2.1圖像格式5.2.2圖像編輯處理1．修改圖片基本屬性2．裁切圖片3．增強(qiáng)圖像效果4．制作透明背景圖像5．圖像的局部修補(bǔ)6．批