HTML5+CSS3 Web前端開發(fā)技術(shù) 教案全套 制作HTML5歡迎頁面-開發(fā)網(wǎng)上店鋪微信小程序_第1頁
HTML5+CSS3 Web前端開發(fā)技術(shù) 教案全套 制作HTML5歡迎頁面-開發(fā)網(wǎng)上店鋪微信小程序_第2頁
HTML5+CSS3 Web前端開發(fā)技術(shù) 教案全套 制作HTML5歡迎頁面-開發(fā)網(wǎng)上店鋪微信小程序_第3頁
HTML5+CSS3 Web前端開發(fā)技術(shù) 教案全套 制作HTML5歡迎頁面-開發(fā)網(wǎng)上店鋪微信小程序_第4頁
HTML5+CSS3 Web前端開發(fā)技術(shù) 教案全套 制作HTML5歡迎頁面-開發(fā)網(wǎng)上店鋪微信小程序_第5頁
已閱讀5頁，還剩66頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

PAGE17HTML5+CSS3Web前端開發(fā)技術(shù)課程教案授課題目：制作HTML5歡迎頁面教學(xué)時數(shù)：2授課類型：理實一體教學(xué)目的、要求：1.理解HTML5基本結(jié)構(gòu)2.掌握HTML5文檔聲明的用法3.掌握HTML5頭部標(biāo)簽的用法4.能夠使用HBuilder創(chuàng)建Web項目5.能夠使用Chrome預(yù)覽、調(diào)試網(wǎng)頁教學(xué)重點：1.HBuilder的下載、安裝及基本操作2.Web項目目錄結(jié)構(gòu)3.HTML5基本結(jié)構(gòu)4.HTML5文檔聲明的用法5.HTML5頭部標(biāo)簽的用法6.頁面預(yù)覽調(diào)試教學(xué)難點：理解HTML5的基本結(jié)構(gòu)教學(xué)方法和手段：1.采用“教、學(xué)、做”三位一體教學(xué)法和訓(xùn)練學(xué)習(xí)法。通過啟發(fā)式提問進行師生互動和課堂討論，加深對課程內(nèi)容的理解。2.采用廣播軟件演示進行任務(wù)前指導(dǎo)，再由學(xué)生模仿老師演示的操作進行上機練習(xí)。教學(xué)條件：多媒體機房參考資料：《HTML5+CSS3Web前端開發(fā)技術(shù)》劉德山章增安孫美喬人民郵電出版社《HTML5基礎(chǔ)知識核心技術(shù)與前沿案例》劉歡人民郵電出版社《HTML5權(quán)威指南》弗里曼著，謝延晟，?；?，劉美英譯人民郵電出版社

HTML5+CSS3Web前端開發(fā)技術(shù)課程教案教學(xué)內(nèi)容及過程旁批教學(xué)內(nèi)容與教學(xué)設(shè)計：HBuilder工具下載、安裝1.HBuilder下載HBuilderX下載地址:https://www.dcloud.io/hbuilderx.html。2.HBuilder安裝HBuilder的Windows為zip壓縮文件，解壓后才能使用。如圖1-3所示，首先，選中下載的zip包，點擊右鍵菜單，點擊解壓到當(dāng)前文件夾；進入解壓后的文件夾，找到HBuilderX.exe，直接點擊打開。1.1.2HTML5HTML指超文本標(biāo)記語言(HyperTextMarkupLanguage)，是一種用來描述網(wǎng)頁的語言。HTML不是一種編程語言，而是一種標(biāo)記語言，它使用標(biāo)記標(biāo)簽來描述網(wǎng)頁。HTML文檔就等于我們所見的網(wǎng)頁，瀏覽器能夠讀取HTML文檔，并以網(wǎng)頁的形式顯示出它們。HTML5是最新的HTML標(biāo)準(zhǔn)，擁有新的語義、圖形以及多媒體元素，提供的新元素和新的API簡化了web應(yīng)用程序的搭建。1.1.3HTML5基本結(jié)構(gòu)HTML5最基本的結(jié)構(gòu)，即最小的HTML5文檔，其內(nèi)容如下。示例：<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title></title> </head> <body> </body></html><!DOCTYPEhtml>聲明當(dāng)前文檔為HTML5文檔，必須位于HTML5文檔中的第一行。<html>元素是HTML頁面的根元素。<head>元素包含了文檔的元數(shù)據(jù)、標(biāo)題、外部引入的文件等，這些內(nèi)容不會顯示在客戶端，但是會被瀏覽器解析。<meta>標(biāo)簽提供了HTML文檔的元數(shù)據(jù)。元數(shù)據(jù)通常用于指定網(wǎng)頁的描述、關(guān)鍵詞、文件的最后修改時間，作者及其他元數(shù)據(jù)。如<metacharset="utf-8">定義網(wǎng)頁編碼格式為utf-8，中文網(wǎng)頁需要使用<metacharset="utf-8">聲明編碼，否則可能出現(xiàn)亂碼。<title>元素描述了文檔的標(biāo)題，會顯示在瀏覽器的標(biāo)題欄。<body>元素包含了可見的頁面內(nèi)容，即只有<body>元素的開始標(biāo)記和結(jié)束標(biāo)記之間的內(nèi)容會在瀏覽器中顯示。1.1.4HTML5標(biāo)簽HTML標(biāo)記標(biāo)簽通常被稱為HTML標(biāo)簽或HTML元素，HTML標(biāo)簽是由尖括號“<>”包圍的關(guān)鍵詞，如“<html>”，HTML標(biāo)簽通常是成對出現(xiàn)的，比如“<a>”和“</a>”，標(biāo)簽對中的第一個標(biāo)簽是開始標(biāo)簽，第二個標(biāo)簽是結(jié)束標(biāo)簽，也被稱為開放標(biāo)簽和閉合標(biāo)簽。HTML標(biāo)簽解釋了網(wǎng)頁的內(nèi)容。開始標(biāo)簽與結(jié)束標(biāo)簽之間的內(nèi)容是HTML元素的內(nèi)容，某些HTML元素具有空內(nèi)容，空元素在開始標(biāo)簽中關(guān)閉，沒有單獨的關(guān)閉標(biāo)簽，如“<br/>”；大多數(shù)HTML元素可擁有屬性，屬性書寫在開始標(biāo)簽中，形式為：屬性名=“屬性值”。創(chuàng)建web項目下載安裝Hbuilder開發(fā)工具并啟動，在啟動的HBuilder開發(fā)工具中，選擇“文件”—“新建”—“1.項目”菜單，創(chuàng)建web項目；也可以直接點擊主界面中的“新建項目”。在彈出的“新建項目”面板中，默認(rèn)創(chuàng)建“普通項目”，填入“項目名稱”，“瀏覽”并選擇項目存儲路徑，選擇“基本HTML項目”模板，單擊“創(chuàng)建”按鈕完成Web項目創(chuàng)建。css文件夾存儲網(wǎng)頁樣式文件、img文件夾存儲網(wǎng)頁所需圖片資源，js存儲JavaScript腳本文件。1.1.6創(chuàng)建HTML5網(wǎng)頁在HBuilder開發(fā)工具左側(cè)的項目管理器中，右鍵選擇根目錄“HTML5”—“新建”—“7.html文件”菜單，創(chuàng)建html頁面。在彈出的“新建html文件”面板中填入網(wǎng)頁文件名稱，選擇“default”模板，單擊“創(chuàng)建”按鈕完成HTML5網(wǎng)頁創(chuàng)建。1.1.7制作HTML5基礎(chǔ)頁面在打開的HTML5.html文件中編寫HTML代碼，在<title></title>標(biāo)記之間設(shè)置網(wǎng)頁標(biāo)題，在<body></body>標(biāo)記之間輸入網(wǎng)頁內(nèi)容。<!DOCTYPEhtml><html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"> <title>HTML5歡迎頁面</title> </head> <body> 歡迎訪問本站！ </body></html>1.1.8預(yù)覽調(diào)試頁面選擇“運行”—“運行到瀏覽器”—“Chrome”菜單，Hbuilder將啟動內(nèi)置服務(wù)器，并通過內(nèi)置服務(wù)器運行網(wǎng)頁?？晒┻x擇的瀏覽器包括Chrome、Firefox、IE、Edge，其中Chrome、Firefox、Edge對HTML5、CSS3有較好支持及完善的網(wǎng)頁調(diào)試工具。網(wǎng)頁預(yù)覽效果如圖。上文所述主流瀏覽器均提供開發(fā)人員調(diào)試工具，在瀏覽器的頁面上使用鍵盤上的F12按鍵可以開啟調(diào)試模式，也可以通過瀏覽器“菜單”—“更多工具”—“開發(fā)者工具”開啟調(diào)試模式。在調(diào)試模式窗口，可以看到當(dāng)前網(wǎng)頁的組成標(biāo)簽，鼠標(biāo)選中頁面中的元素可以在調(diào)試窗口定位到其HTML代碼，在右側(cè)欄目中查看其樣式。課后作業(yè)：1．網(wǎng)站在進行頁面設(shè)計時涉及哪些頁面元素？2．網(wǎng)頁頭部的元信息可以包含哪些信息，有什么作用？課后小結(jié)：HTML5+CSS3Web前端開發(fā)技術(shù)課程教案授課題目：制作招聘網(wǎng)站賬號登錄頁面教學(xué)時數(shù)：6授課類型：理實一體教學(xué)目的、要求：1.掌握頁面中div、input、span、button、header、footer等元素的樣式設(shè)計2.掌握頁面中登錄頁頭、頁腳元素的樣式設(shè)計方法教學(xué)重點：1.HTML5語義和結(jié)構(gòu)標(biāo)簽的用法2.HTML5表單元素的用法3.HTML5表格元素的用法4.CSS3背景設(shè)置的用法5.CSS3偽類選擇器的用法6.CSS3屬性選擇器的用法7.CSS3偽元素選擇器的用法9.CSS3陰影效果的用法10.CSS3圓角的用法教學(xué)難點：1.HTML5新增表單元素的用法2.CSS3偽類、偽元素、屬性選擇器的用法教學(xué)方法和手段：1.采用“教、學(xué)、做”三位一體教學(xué)法和訓(xùn)練學(xué)習(xí)法。通過啟發(fā)式提問進行師生互動和課堂討論，加深對課程內(nèi)容的理解。2.采用廣播軟件演示進行任務(wù)前指導(dǎo)，再由學(xué)生模仿老師演示的操作進行上機練習(xí)。教學(xué)條件：多媒體機房參考資料：《HTML5+CSS3Web前端開發(fā)技術(shù)》劉德山章增安孫美喬人民郵電出版社《HTML5基礎(chǔ)知識核心技術(shù)與前沿案例》劉歡人民郵電出版社《HTML5權(quán)威指南》弗里曼著，謝延晟，牛化成，劉美英譯人民郵電出版社

HTML5+CSS3Web前端開發(fā)技術(shù)課程教案教學(xué)內(nèi)容及過程旁批教學(xué)內(nèi)容與教學(xué)設(shè)計：2.1.1區(qū)塊元素大多數(shù)HTML元素被定義為塊級元素或內(nèi)聯(lián)元素。塊級元素在瀏覽器顯示時，默認(rèn)會從新的一行開始，并占據(jù)父元素的全部寬度；內(nèi)聯(lián)元素在顯示時不會從新行開始，默認(rèn)寬度為其內(nèi)容的必要寬度。1.塊元素<div><div>元素是塊級元素，用來定義文檔的區(qū)域，作為包裹其他HTML元素的容器。<body><div>標(biāo)題</div><div>正文</div></body><div>元素沒有特定的含義，由于它屬于塊級元素，使用<div>包裹的內(nèi)容被劃分為單獨的塊，瀏覽器會使其在新的一行中顯示。<div>元素的一個常見的用途是進行頁面布局。2.內(nèi)聯(lián)元素<span><span>元素是內(nèi)聯(lián)元素，用來組合文檔中的行內(nèi)元素，可用作文本的容器。<span>元素也沒有特定的含義，通常結(jié)合CSS使用為部分文本設(shè)置樣式屬性。2.1.2語義結(jié)構(gòu)元素HTML5新增了大量語義元素，語義元素即擁有語義的元素，能夠清楚地向瀏覽器和開發(fā)者描述其意義。非語義元素如上文介紹的<div>和<span>，無法提供關(guān)于其內(nèi)容的信息；而語義元素如<header>、<footer>清晰地定義了其包裹的內(nèi)容分別是文檔的頭部區(qū)域和頁腳。標(biāo)簽描述<article>定義頁面獨立的內(nèi)容區(qū)域。<aside>定義頁面的側(cè)邊欄內(nèi)容。<footer>定義section或document的頁腳。<header>定義了文檔的頭部區(qū)域<nav>定義導(dǎo)航鏈接的部分。<section>定義文檔中的節(jié)（section、區(qū)段）。2.1.3文本標(biāo)簽標(biāo)題元素<h1>~<h6>標(biāo)題通過<h1>~<h6>標(biāo)簽進行定義，<h1>用作最重要的主標(biāo)題，其后是次重要的<h2>，再其次是<h3>，以此類推。瀏覽器會自動在標(biāo)題的前后添加空行。示例：<h1>這是一級標(biāo)題</h1><h2>這是二級標(biāo)題</h2><h3>這是三級標(biāo)題</h3><h4>這是四級標(biāo)題</h4><h5>這是五級標(biāo)題</h5><h6>這是六級標(biāo)題</h6>搜索引擎使用標(biāo)題為網(wǎng)頁的結(jié)構(gòu)和內(nèi)容編制索引，用戶可以通過標(biāo)題快速瀏覽網(wǎng)頁，所以用標(biāo)題呈現(xiàn)文檔結(jié)構(gòu)是很重要的。2．段落元素<p>HTML允許我們將文本分割為若干段落，段落通過<p>標(biāo)簽定義。<p>是塊級元素，因此每個段落會從新的一行開始顯示，瀏覽器會自動在段落的前后添加空行。在顯示頁面時，瀏覽器會移除源代碼中多余的空格和空行，所有連續(xù)的空格、換行、空行都會被算作一個空格。當(dāng)我們需要在段落中顯示多個空格時，可以使用字符實體“ ”；希望在不產(chǎn)生新段落的情況下進行換行時，可以使用<br/>標(biāo)簽。示例：<p>這個段落在源代碼中包含多個換行及大量空格 但是瀏覽器忽略了它們均只保留為一個空格<br/>換行應(yīng)當(dāng)使用<br/>標(biāo)簽<br/>空多格      使用字符實體&nbsp;</p>2.1.4超鏈接元素<a>HTML使用標(biāo)簽<a>來設(shè)置超文本鏈接。HTML使用超鏈接可以與網(wǎng)絡(luò)上的另一個文檔相連，幾乎所有網(wǎng)頁內(nèi)容中都包含超鏈接。超鏈接可以是文字，也可以是圖片，點擊超鏈接能夠從一個頁面跳轉(zhuǎn)到另一個頁面或者當(dāng)前頁面中的某個部分。屬性值描述\o"HTMLahref屬性"hrefURL規(guī)定鏈接的目標(biāo)URL。\o"HTMLatarget屬性"target_blank_parent_self_topframename規(guī)定在何處打開目標(biāo)URL。僅在href屬性存在時使用。_blank：新窗口打開。_parent：在父窗口中打開鏈接。_self：默認(rèn)，當(dāng)前頁面跳轉(zhuǎn)。_top：在當(dāng)前窗體打開鏈接，并替換當(dāng)前的整個窗體(框架頁)。示例：<ahref="/"target="_blank"rel="noopenernoreferrer">前往百度搜索</a><a>元素使用href屬性描述鏈接的地址，使用

target屬性定義被鏈接的網(wǎng)頁打開方式。2.1.5圖像元素<img>在HTML中使用<img>標(biāo)簽定義圖像，<img>是空標(biāo)簽，即它只包含屬性，沒有閉合標(biāo)簽。<img>元素必需的屬性是src，即資源“source”，該屬性指向圖像的存儲位置，即URL地址。此外，可以使用alt屬性為圖像定義一串預(yù)備的可替換的文本，瀏覽器無法載入圖像時，將顯示alt屬性值，告知用戶未能成功加載的內(nèi)容，有助于更好地顯示信息。示例：<imgsrc="logo.png"alt="BrandLogo"/>2.1.6表單元素HTML表單用于收集用戶輸入的信息，不同類型的數(shù)據(jù)需要使用不同的表單元素。1．表單域元素<form>HTML使用使用<form>標(biāo)簽設(shè)置表單域，表單域是一個包含表單元素的區(qū)域，可以視為一個容器，表單元素是允許用戶在其中輸入內(nèi)容的元素。2．輸入元素<input>輸入元素<input>是使用最多的表單元素，允許用戶輸入數(shù)據(jù)的類型由<input>元素的type屬性定義。登錄頁面制作情境下，應(yīng)用最廣泛的輸入類型包括文本類型與密碼類型。（1）文本類型text當(dāng)需要用戶在表單中鍵入字母、數(shù)字等內(nèi)容時，使用文本類型輸入元素，文本類型通過定義<input>元素的屬性type="text"實現(xiàn)。（2）密碼類型password當(dāng)需要用戶在表單中輸入密碼等保密內(nèi)容時，使用密碼類型輸入元素，密碼類型通過定義<input>元素的屬性type="password"實現(xiàn)。（3）普通按鈕button當(dāng)用戶想要清空表單、編輯表單、提交表單時，表單中需要提供按鈕以便操作。按鈕也是輸入元素<input>的一種類型，可以通過<inputtype=”button”>來定義一個普通按鈕，其功能需要結(jié)合JavaScript技術(shù)實現(xiàn)。（4）重置按鈕reset<inputtype="reset">可以定義特殊的重置按鈕，當(dāng)用戶單擊重置按鈕時，表單中填入的內(nèi)容會被清空，恢復(fù)原始狀態(tài)。（5）提交按鈕submit<inputtype="submit">可以定義特殊的提交按鈕，當(dāng)用戶單擊提交按鈕時，表單中填入的內(nèi)容會被傳送到網(wǎng)站服務(wù)器進行相關(guān)的處理。示例：<form>用戶名:<inputtype="text"name="username"placeholder="手機/郵箱"><br/>密碼:<inputtype="password"name="password"placeholder="請輸入6-16位密碼"><br/><inputtype="reset"value=”清空”><inputtype="submit"value=”登錄”><inputtype="button"value=”去注冊”></form>此外，如果我們希望為輸入元素設(shè)置簡短的提示信息，以告知用戶此處預(yù)期輸入的內(nèi)容，可以使用placeholder屬性進行定義；當(dāng)輸入元素為按鈕時，value屬性設(shè)置了按鈕上顯示的功能提示文字；name屬性規(guī)定<input>元素的名稱。3．按鈕元素<button>HTML也允許我們使用<button>標(biāo)簽定義一個按鈕，它也有三種類型，即其type屬性可選的值有button、reset、submit，功能與<input>元素創(chuàng)建的按鈕相似，此處不做贅述。<button>元素內(nèi)部可以放置內(nèi)容，比如文本或圖像。這是該元素與使用<input>元素創(chuàng)建的按鈕之間的不同之處。示例：<buttontype=”button”><imgsrc=”return_top.jpg”alt=”返回頂部”/></button>2.1.7CSS文件導(dǎo)入CSS指層疊樣式表(CascadingStyleSheets)，是一種描述HTML文檔樣式的語言，樣式定義如何顯示HTML元素。Web開發(fā)中我們應(yīng)遵循內(nèi)容與表現(xiàn)像分離的原則，——HTML確定網(wǎng)頁內(nèi)容，CSS定義網(wǎng)頁元素樣式，這樣可以極大提高工作效率。當(dāng)瀏覽器讀到一個樣式表，它就會按照這個樣式表來對渲染并顯示HTML書寫的網(wǎng)頁內(nèi)容。有以下三種方式來插入層疊樣式表：1．外部樣式表一個網(wǎng)站內(nèi)幾乎所有的網(wǎng)頁都具有相同的頭部和頁腳，它們的樣式需要被應(yīng)用到很多頁面，此時外部樣式表是最理想的選擇。外部樣式表是一個單獨的以“.css”為后綴的文件，保存在項目的css文件夾中，在HTMl文檔的<head>標(biāo)簽中使用如下代碼即可引入。示例：<head><linkrel="stylesheet"type="text/css"href="mystyle.css"></head><link>標(biāo)簽定義HTML文檔與外部資源的關(guān)系，其最常見的用途就是鏈接外部樣式表，href屬性定義被鏈接文檔的位置，即要引入的外部CSS文件存儲位置；type屬性規(guī)定被鏈接文檔的媒體類型；rel屬性定義當(dāng)前文檔與被鏈接文檔之間的關(guān)系。2．內(nèi)部樣式表當(dāng)單個HTML文件需要特別樣式時，可以使用內(nèi)部樣式表。內(nèi)部樣式表書寫在HTML文檔中，在<head>標(biāo)簽內(nèi)部通過<style>標(biāo)簽定義。示例：<head><styletype="text/css">body{background-color:red}p{margin-left:20px}</style></head>3．內(nèi)聯(lián)樣式當(dāng)特殊的樣式需要應(yīng)用到個別元素時，可以使用內(nèi)聯(lián)樣式。內(nèi)聯(lián)樣式書寫在HTML文檔中需要設(shè)置特殊樣式的元素標(biāo)簽內(nèi)，使用樣式style屬性。示例：<pstyle="color:red;margin-left:20px">Thisisaparagraph</p>2.1.8CSS基本選擇器CSS規(guī)則由兩個主要的部分構(gòu)成：選擇器，以及一條或多條聲明，如圖2-4所示。選擇器是需要改變樣式的HTML元素。每條聲明由一個屬性和一個值組成，屬性是希望設(shè)置的樣式屬性，每個屬性有一個值，屬性和值以冒號“:”分隔；每條聲明以分號“;”結(jié)束。同一選擇器的多條聲明可以使用大括號“{}”括起來，為了讓CSS可讀性更強，可以每行只描述一個屬性。圖2-4CSS語法為了在HTML文檔眾多的元素中準(zhǔn)確找到需要設(shè)置樣式的元素，我們需要使用不同的選擇器，CSS中有三種基本選擇器。標(biāo)簽選擇器標(biāo)簽選擇器根據(jù)元素的標(biāo)簽名稱，如p、a、img等來選擇HTML元素。示例：h1{color:red;}ID選擇器id選擇器使用HTML元素的id屬性來選擇特定元素。每個HTML文檔中，元素的id屬性值是唯一的，因此id選擇器用于選擇一個唯一的元素，需要注意的是id屬性的值不能以數(shù)字開頭。要選擇具有特定id的HTML元素，需要在CSS代碼中選擇器部分使用“#”，后跟該元素的id。示例：#logo{width:490px;}3．類選擇器類選擇器選擇具有特定class屬性值的HTML元素。HTML文檔中，可以為多個元素設(shè)置相同的class屬性值，因此類選擇器能夠為多個HTML元素同時設(shè)置樣式。如需選擇擁有特定class的元素，需要在CSS代碼中選擇器部分使用點“.”，后跟元素的類名。示例：.left{text-align:left;}三種CSS基本選擇器可以組合使用。示例：p.center{color:red;}此外，通用選擇器“*”能夠選擇頁面上的所有的HTML元素，CSS允許用“,”組合多個選擇器，設(shè)置相同的樣式。2.1.9CSS組合選擇器CSS選擇器可以包含多個基本選擇器。在基本選擇器之間，可以包含一個組合器。組合器是解釋選擇器之間關(guān)系的某種機制。CSS中有四種不同的組合器：類型選擇器示例示例描述后代選擇器\o"CSSelementelement選擇器"element

elementdivp選擇<div>內(nèi)的所有<p>子元素選擇器\o"CSSelement>element選擇器"element>elementdiv>p選擇其父元素是<div>的所有<p>相鄰兄弟選擇器\o"CSSelement+element選擇器"element+elementdiv+p選擇所有緊隨<div>之后的<p>通用兄弟選擇器\o"CSSelement1~element2選擇器"element1~element2p~ul選擇前面有<p>的每個<ul>2.1.10CSS偽類選擇器CSS偽類選擇器用于定義元素的特殊狀態(tài)，可以與其他選擇器結(jié)合使用。偽類選擇元素基于的是當(dāng)前元素處于的狀態(tài)，狀態(tài)是動態(tài)變化的，當(dāng)元素達(dá)到特定狀態(tài)時，它可能得到一個偽類的樣式；當(dāng)狀態(tài)改變時，它會失去這個樣式?？梢娝墓δ芎蚦lass類似，但它是基于文檔之外的抽象，所以叫偽類。:hover是最常用的偽類選擇器，它用于設(shè)置鼠標(biāo)懸停在元素上時的樣式。示例：a:hover{text-decoration:underline;}在此例聲明了當(dāng)鼠標(biāo)懸停在超鏈接上時，超鏈接將出現(xiàn)下劃線裝飾。CSS中還可以使用:link、:visited、:active偽類選擇器分別設(shè)置未訪問、已訪問、已選擇狀態(tài)鏈接對應(yīng)的樣式；使用:focus設(shè)置元素獲得焦點時的樣式，使用:focus-within設(shè)置元素或其后代元素獲得焦點時的樣式。選擇器示例示例描述\o"CSS:active選擇器":activea:active選擇活動的鏈接。\o"CSS:checked選擇器":checkedinput:checked選擇每個被選中的<input>元素。\o"CSS:disabled選擇器":disabledinput:disabled選擇每個被禁用的<input>元素。\o"CSS:empty選擇器":emptyp:empty選擇沒有子元素的每個<p>元素。\o"CSS:enabled選擇器":enabledinput:enabled選擇每個已啟用的<input>元素。\o"CSS:first-child選擇器":first-childp:first-child選擇作為其父的首個子元素的每個<p>元素。\o"CSS:first-of-type選擇器":first-of-typep:first-of-type選擇作為其父的首個<p>元素的每個<p>元素。\o"CSS:focus選擇器":focusinput:focus選擇獲得焦點的<input>元素。:focus-withindiv:focus-within選擇獲得焦點，或該元素的后代元素獲得焦點的元素\o"CSS:hover選擇器":hovera:hover選擇鼠標(biāo)懸停其上的鏈接。\o"CSS:in-range選擇器":in-rangeinput:in-range選擇具有指定范圍內(nèi)的值的<input>元素。\o"CSS:invalid選擇器":invalidinput:invalid選擇所有具有無效值的<input>元素。\o"CSS:lang(language)選擇器":lang(language)p:lang(it)選擇每個lang屬性值以"it"開頭的<p>元素。\o"CSS:last-child選擇器":last-childp:last-child選擇作為其父的最后一個子元素的每個<p>元素。\o"CSS:last-of-type選擇器":last-of-typep:last-of-type選擇作為其父的最后一個<p>元素的每個<p>元素。\o"CSS:link選擇器":linka:link選擇所有未被訪問的鏈接。\o"CSS:not(selector)選擇器":not(selector):not(p)選擇每個非<p>元素的元素。\o"CSS:nth-child(n)選擇器":nth-child(n)p:nth-child(2)選擇作為其父的第二個子元素的每個<p>元素。\o"CSS:nth-last-child(n)選擇器":nth-last-child(n)p:nth-last-child(2)選擇作為父的第二個子元素的每個<p>元素，從最后一個子元素計數(shù)。\o"CSS:nth-last-of-type(n)選擇器":nth-last-of-type(n)p:nth-last-of-type(2)選擇作為父的第二個<p>元素的每個<p>元素，從最后一個子元素計數(shù)\o"CSS:nth-of-type(n)選擇器":nth-of-type(n)p:nth-of-type(2)選擇作為其父的第二個<p>元素的每個<p>元素。\o"CSS:only-of-type選擇器":only-of-typep:only-of-type選擇作為其父的唯一<p>元素的每個<p>元素。\o"CSS:only-child選擇器":only-childp:only-child選擇作為其父的唯一子元素的<p>元素。\o"CSS:optional選擇器":optionalinput:optional選擇不帶"required"屬性的<input>元素。\o"CSS:out-of-range選擇器":out-of-rangeinput:out-of-range選擇值在指定范圍之外的<input>元素。\o"CSS:read-only選擇器":read-onlyinput:read-only選擇指定了"readonly"屬性的<input>元素。\o"CSS:read-write選擇器":read-writeinput:read-write選擇不帶"readonly"屬性的<input>元素。\o"CSS:required選擇器":requiredinput:required選擇指定了"required"屬性的<input>元素。\o"CSS:root選擇器":rootroot選擇元素的根元素。\o"CSS:target選擇器":target#news:target選擇當(dāng)前活動的#news元素（單擊包含該錨名稱的URL）。\o"CSS:valid選擇器":validinput:valid選擇所有具有有效值的<input>元素。\o"CSS:visited選擇器":visiteda:visited選擇所有已訪問的鏈接。2.1.11CSS盒模型盒模型，即boxmodel——在CSS中把所有HTML元素都看作盒子，這一術(shù)語在設(shè)計和布局頁面時使用。CSS盒模型本質(zhì)上是一個盒子，封裝內(nèi)部的HTML元素，由內(nèi)到外分別是實際內(nèi)容、填充padding、邊框border、邊距margin。內(nèi)容content：元素內(nèi)的實際內(nèi)容，可以顯示文本、圖像、表單等內(nèi)容。填充padding：實際內(nèi)容外圍的區(qū)域，填充是透明的。邊框border：圍繞在實際內(nèi)容和填充之外的邊框，可以設(shè)置為可見的實線或虛線。邊距margin：邊框外的區(qū)域，該區(qū)域內(nèi)不可放置其他元素，即邊距是透明的。當(dāng)我們指定一個元素的寬度width和高度height屬性時，只是設(shè)置了實際內(nèi)容區(qū)域的寬度和高度。完整大小的元素，還必須添加內(nèi)邊距，邊框和外邊距。 2.1.12CSS文本對齊1．水平對齊text-alignCSS中使用text-align屬性用于設(shè)置文本的水平對齊方式。文本可以左對齊left或右對齊right，或居中對齊center、兩端對齊justify。2．垂直對齊vertical-alignvertical-align屬性設(shè)置一個元素的垂直對齊方式。該屬性定義行內(nèi)元素的基線相對于該元素所在行的基線的垂直對齊，常用于設(shè)置行內(nèi)圖像與文本的垂直對齊方式，baseline為默認(rèn)值元素放置在父元素的基線上；text-top把元素的頂端與父元素字體的頂端對齊；middle把此元素放置在父元素的中部；bottom使元素及其后代元素的底部與整行的底部對齊；text-bottom把元素的底端與父元素字體的底端對齊。2.1.13CSS背景樣式backgroundCSS提供了一組用于定義元素的背景效果的屬性。1．背景顏色background-colorbackground-color屬性指定元素的背景色。可以通過有效的顏色名稱、十六進制值顏色碼、RGB色彩值等方式指定顏色。2．背景圖像background-imagebackground-image屬性指定用作元素背景的圖像，其值通過url()函數(shù)指定背景圖像的URL地址。3．背景重復(fù)background-repeat默認(rèn)情況下，背景圖像會在水平和垂直方向上重復(fù)鋪貼，以覆蓋整個元素。background-repeat允許我們設(shè)置背景圖像的重復(fù)方式，有三種可選的值：no-repeat，水平、垂直方向均不重復(fù)，只顯示一次背景圖像；repeat-x，僅在水平方向重復(fù)；repeat-y，僅在垂直方向重復(fù)。4．背景位置background-positionbackground-position屬性用于指定背景圖像的位置，它的值分別設(shè)置背景圖像在水平、垂直方向的起始位置，以空格隔開，默認(rèn)值是背景圖像左上角與元素左上角重合。值描述lefttopleftcenterleftbottomrighttoprightcenterrightbottomcentertopcentercentercenterbottom如果僅指定一個關(guān)鍵字，其他值將會是"center"x%y%第一個值是水平位置，第二個值是垂直。左上角是0％0％。右下角是100％100％。如果僅指定了一個值，其他值將是50％。默認(rèn)值為：0％0％xposypos第一個值是水平位置，第二個值是垂直。左上角是0。單位可以是像素（0px0px）或任何其他

CSS單位。如果僅指定了一個值，其他值將是50％。你可以混合使用％和positions5．背景尺寸background-sizebackground-size屬性用于指定背景圖像的大小，可以指定像素或相對于父元素的寬度和高度的百分比的大小。2.1.14CSS圓角邊框border-radius在CSS3中可以創(chuàng)建圓角邊框、添加陰影框。border-radius屬性被用于創(chuàng)建圓角，其值為圓角的半徑大小，該半徑大小可以是像素也可以是元素寬高的百分比，并且可以按照上右下左的順序為元素指定不同大小的圓角。2.1.15CSS盒陰影box-shadowCCS3中還允許我們使用box-shadow屬性未元素添加陰影，而不用借助Photoshop等設(shè)計軟件，其值由四個部分組成：陰影向右、向下的偏移量，為0時從邊框外側(cè)開始，為負(fù)數(shù)時向左、向上偏移；陰影邊緣虛化擴散的大??；陰影的顏色。示例：div{ width:200px; height:100px; background-color:yellow; border:20px#000solid; border-radius:50%50%20px20px; box-shadow:10px10px0px#888888;}2.1.16CSS布局displaydisplay屬性是用于控制布局的最重要的CSS屬性。display屬性規(guī)定是否以及如何顯示元素。1．塊級元素block塊級元素總是從新行開始，會獨占一行，默認(rèn)情況下寬度自動填滿其父元素寬度，塊級元素可以設(shè)置寬高、margin，padding。<div>、<h1>~<h6>、<p>、<form>、<header>、<footer>、<section>等元素都屬于塊級元素。2．行內(nèi)元素inline內(nèi)聯(lián)元素不從新行開始，不會獨占一行，相鄰的內(nèi)聯(lián)元素會排在同一行，其寬度隨內(nèi)容的變化而變化。內(nèi)聯(lián)元素設(shè)置寬高不生效，可以設(shè)置margin、padding，但只在水平方向生效。<span>、<a>、<img>、<label>等元素屬于行內(nèi)元素。text-align屬性對塊級元素起作用，對行內(nèi)元素不起作用。3．行內(nèi)塊元素inline-block行內(nèi)塊元素結(jié)合行內(nèi)元素和塊級元素的優(yōu)點，既可以設(shè)置長寬，可以讓padding和margin生效，又可以和其他行內(nèi)元素并排顯示。display屬性能夠?qū)崿F(xiàn)行內(nèi)元素、塊狀元素、行內(nèi)塊元素之間的轉(zhuǎn)換。值描述none此元素不會被顯示。block此元素將顯示為塊級元素，此元素前后會帶有換行符。inline默認(rèn)。此元素會被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。inline-block行內(nèi)塊元素。（CSS2.1新增的值）table此元素會作為塊級表格來顯示（類似<table>），表格前后帶有換行符。inline-table此元素會作為內(nèi)聯(lián)表格來顯示（類似<table>），表格前后沒有換行符。table-row-group此元素會作為一個或多個行的分組來顯示（類似<tbody>）。table-header-group此元素會作為一個或多個行的分組來顯示（類似<thead>）。table-footer-group此元素會作為一個或多個行的分組來顯示（類似<tfoot>）。table-row此元素會作為一個表格行顯示（類似<tr>）。table-column-group此元素會作為一個或多個列的分組來顯示（類似<colgroup>）。table-column此元素會作為一個單元格列顯示（類似<col>）table-cell此元素會作為一個表格單元格顯示（類似<td>和<th>）table-caption此元素會作為一個表格標(biāo)題顯示（類似<caption>）2.1.17CSS定位positionposition屬性指定了元素的定位類型，即規(guī)定了元素定位時的參照物，在設(shè)定position屬性的前提下，元素可以使用頂部top、底部bottom、左側(cè)left和右側(cè)right屬性進行元素的定位，top、bottom、left、right是元素相對參照物上、下、左、右邊緣的距離。常用的定位方式position取值有：靜態(tài)定位static、相對定位relative、絕對定位absolute。1．靜態(tài)定位static靜態(tài)定位static是HTML元素的默認(rèn)值定位方式，即沒有定位，遵循正常的文檔流。靜態(tài)定位的元素top、bottom、left、right屬性不生效，元素位置不受影響。2．相對定位relative相對定位relative的元素相對其正常位置，即靜態(tài)定位下元素所在位置進行定位。此時top、bottom、left、right屬性生效，top定義元素相對其靜態(tài)位置頂端的距離，bottom定義元素相對其靜態(tài)位置地段的距離，left定義元素相對其靜態(tài)位置左側(cè)的距離，right定義元素相對其靜態(tài)位置右側(cè)的距離，距離的值可為負(fù)數(shù)。移動相對定位元素，它原本所占的空間不會改變，后續(xù)元素仍遵循正常的文檔流。因此相對定位元素經(jīng)常被用來作為絕對定位元素的容器塊。3．絕對定位absolute絕對定位absolute的元素相對其最近的已定位父元素，即最近的設(shè)置了positions屬性且其值不為static的父元素，如果元素沒有已定位的父元素，那么它的位置相對于<html>，此時top、bottom、left、right屬性生效。需要注意的是，absolute定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間，absolute定位的元素和其他元素可能重疊。元素的定位與文檔流無關(guān)，所以它們可以覆蓋頁面上的其它元素，z-index屬性指定了一個元素的堆疊順序，一個元素可以有正數(shù)或負(fù)數(shù)的堆疊順序：元素的z-index屬性值越大，排列越靠前；如果兩個定位元素重疊，沒有指定z-index，最后定位在HTML代碼中的元素將被顯示在最前面。2.1.18實操練習(xí)考慮與網(wǎng)站登錄頁面制作相關(guān)的各種內(nèi)容，如頁首、頁腳、導(dǎo)航條、背景、表單等，通過將新學(xué)的知識技能與前面學(xué)習(xí)的內(nèi)容相結(jié)合，進行綜合運用，從而完成招聘網(wǎng)站登錄頁面的開發(fā)制作。完成效果如圖：課后作業(yè)：1.不同類型的網(wǎng)站在進行登錄頁面設(shè)計時主要考慮哪些因素？2.網(wǎng)頁中的內(nèi)容比較少的時候有沒有合理的設(shè)計形式？課后小結(jié)：HTML5+CSS3Web前端開發(fā)技術(shù)課程教案授課題目：制作招聘網(wǎng)站求職申請頁面教學(xué)時數(shù)：6授課類型：理實一體教學(xué)目的、要求：1.掌握在靜態(tài)網(wǎng)站中的對于表單的布局樣式設(shè)計2.掌握靜態(tài)網(wǎng)站中對于輸入框、下拉框的樣式設(shè)計3.掌握靜態(tài)網(wǎng)站中的對于按鈕的樣式設(shè)計教學(xué)重點：HTML5表單元素的用法CSS3左右布局的實現(xiàn)方法教學(xué)難點：HTML5新增表單元素的用法CSS3左右布局的方法教學(xué)方法和手段：1.采用“教、學(xué)、做”三位一體教學(xué)法和訓(xùn)練學(xué)習(xí)法。2.采用廣播軟件演示進行任務(wù)前指導(dǎo)，再由學(xué)生模仿老師演示的操作進行上機練習(xí)。教學(xué)條件：多媒體機房參考資料：《HTML5+CSS3Web前端開發(fā)技術(shù)》劉德山章增安孫美喬人民郵電出版社《HTML5基礎(chǔ)知識核心技術(shù)與前沿案例》劉歡人民郵電出版社《HTML5權(quán)威指南》弗里曼著，謝延晟，?；?，劉美英譯人民郵電出版社

HTML5+CSS3Web前端開發(fā)技術(shù)課程教案教學(xué)內(nèi)容及過程旁批教學(xué)內(nèi)容與教學(xué)設(shè)計：2.2.1HTML5新增類型輸入元素<input>1．日期date類型date類型輸入元素在輸入框后新增一個日期選擇器圖標(biāo)，允許用戶通過日期選擇器選擇日期。使用日期類型輸入元素，通過定義<input>元素的屬性type="date"實現(xiàn)。2．?dāng)?shù)值number類型數(shù)值number類型輸入元素用于應(yīng)該包含數(shù)值的輸入域，通過定義<input>元素的屬性type="number"實現(xiàn)，可以設(shè)置min、max、step等屬性設(shè)定對所接受數(shù)字的限定，具體限定如下：屬性描述max規(guī)定允許的最大值min規(guī)定允許的最小值step規(guī)定輸入字段的合法數(shù)字間隔value規(guī)定輸入字段的默認(rèn)值3．文件上傳file類型文件上傳file類型輸入元素用于定義文件選擇字段和"瀏覽..."按鈕，供文件上傳使用，通過定義<input>元素的屬性type="file"實現(xiàn)。2.2.2輸入元素<input>的特殊狀態(tài)屬性1．必需required屬性輸入元素<input>的required屬性規(guī)定必需在提交表單之前填寫當(dāng)前輸入字段。required屬性是一個布爾屬性，一旦在HTML代碼中為元素設(shè)置該屬性，無論其值是多少，都表示該項必填，HTML允許布爾屬性最小化。required屬性適用于以下input類型：text、search、url、tel、email、password、datepickers、number、checkbox、radio和file。2．選中checked屬性輸入元素<input>的checked屬性規(guī)定在頁面加載時應(yīng)該被預(yù)先選定的<input>元素，checked屬性適用于<inputtype="checkbox">輸入元素，即復(fù)選框，和<inputtype="radio">輸入元素，即單選框。checked屬性是一個布爾屬性，一旦在HTML代碼中為元素設(shè)置該屬性，無論其值是多少，都表示選中該項，HTML允許布爾屬性最小化。3．禁用disabled屬性輸入元素<input>的disabled屬性規(guī)定應(yīng)該禁用的<input>元素。被禁用的input元素?zé)o法使用、無法點擊。disabled屬性通常結(jié)合JavaScript技術(shù)實現(xiàn)在用戶滿足某些條件時，如選中復(fù)選框等才能使用<input>元素。disabled屬性不適用于<inputtype="hidden">，即被隱藏、用戶不可見的輸入元素，disabled屬性也是一個布爾屬性。4．只讀readonly屬性輸入元素<input>的readonly屬性規(guī)定輸入字段是只讀的。只讀字段是不能修改的。單用戶仍然可以使用tab鍵切換到該字段，還可以選中或拷貝其文本。readonly屬性可以防止用戶對值進行修改，結(jié)合JavaScript技術(shù)在用戶滿足某些條件時，將輸入字段切換到可編輯狀態(tài)。readonly屬性也是一個布爾屬性。2.2.3表格元素<table>HTML中表格由<table>標(biāo)簽來定義；每個表格均有若干行，行由<tr>標(biāo)簽定義，tr指表格行tablerow；每行被分割為若干單元格，有兩種單元格類型：表頭單元格包含頭部信息，由<th>元素創(chuàng)建，標(biāo)準(zhǔn)單元格由<td>標(biāo)簽定義，td指表格數(shù)據(jù)tabledata。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。在表單域元素<form>中應(yīng)用表格元素<table>可以創(chuàng)建漂亮的多列布局。表格不是布局工具，設(shè)計表格的目的是呈現(xiàn)表格化數(shù)據(jù)，創(chuàng)建此類表單時，可以為單元格元素<td>設(shè)置colspan、rowspan屬性規(guī)定單元格可橫跨的列數(shù)、縱跨的行數(shù)。2.2.4CSS屬性選擇器屬性選擇器[attribute]

采用中括號表示，用于選取帶有指定屬性的元素。 示例：input[disabled]{color:darkgray;}[attribute="value"]選擇器用于選取帶有指定屬性和值的元素。示例：input[type="radio"]{width:14px;}除此之外，屬性選擇器還包括：[attribute~="value"]、[attribute*="value"]選擇器選取屬性值包含指定詞的元素，但前者的值必須是完整或單獨的單詞，而后者值不必是完整單詞；[attribute|="value"]、[attribute^="value"]均選擇器用于選取指定屬性以指定值開頭的元素；[attribute$="value"]選擇器用于選取指定屬性以指定值結(jié)尾的元素。2.2.5CSS偽元素選擇器CSS偽元素選擇器用于設(shè)置元素指定部分的樣式,，可以與其他選擇器結(jié)合使用。設(shè)計偽元素的目的就是去選取諸如元素內(nèi)容第一個字（母）、第一行，選取某些內(nèi)容前面或后面這種普通的選擇器無法完成的工作。它控制的內(nèi)容實際上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文檔中，所以叫偽元素。::before偽元素可用于在元素內(nèi)容之前插入一些內(nèi)容，通過content屬性設(shè)置要插入的內(nèi)容，必須設(shè)置content屬性其他屬性才能夠生效。::after偽元素用于在元素內(nèi)容之后插入一些內(nèi)容。選擇器示例示例描述::afterp::after在每個<p>元素之后插入內(nèi)容。::beforep::before在每個<p>元素之前插入內(nèi)容。::first-letterp::first-letter選擇每個<p>元素的首字母。::first-linep::first-line選擇每個<p>元素的首行。::selectionp::selection選擇用戶選擇的元素部分。2.2.6CSS不透明度opacityopacity屬性指定元素的不透明度，opacity屬性的取值范圍為0.0~1.0，值越低，越透明。opacity屬性通常與:hover選擇器一同使用，實現(xiàn)在鼠標(biāo)懸停時更改不透明度。本學(xué)習(xí)情境下，為了修改file類型<input>元素的默認(rèn)樣式，同時保留其功能，我們將其不透明度設(shè)置為0。2.2.7CSS溢出overflowoverflow屬性指定在元素的內(nèi)容太大而無法放入指定區(qū)域時是剪裁內(nèi)容還是添加滾動條，僅適用于具有指定高度的塊元素。overflow屬性可設(shè)置以下值：visible，可見，為默認(rèn)值。溢出時不剪裁，內(nèi)容在元素框外渲染。hidden，隱藏，溢出被剪裁，多余內(nèi)容不可見。scroll，滾動，溢出被剪裁，同時添加滾動條以查看其余內(nèi)容。auto，自動，與scroll類似，但僅在必要時添加滾動條。2.2.8CSS浮動floatCSS的浮動float屬性會使元素在水平方向向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。HTML文檔中浮動元素之前的元素將不會受到影響，浮動元素之后的元素將圍繞它。HTML元素默認(rèn)的排列順序是從左到右、從上到下的，內(nèi)聯(lián)元素在不超過父元素寬度的前提下優(yōu)先從左到右排列，溢出時顯示到下一行，塊級元素總是在新的一行中從上到下顯示。如果把幾個浮動的元素放到一起，父元素寬度足夠的情況下的話，它們將彼此相鄰。元素浮動之后，在浮動元素的父元素未明確設(shè)置高度時，浮動元素不會自動撐開父元素，周圍的元素會重新排列，為了避免這種情況，可以使用clear屬性指定當(dāng)前元素兩側(cè)不能出現(xiàn)浮動元素，可選的值有l(wèi)eft、right、both，即左側(cè)、右側(cè)、兩側(cè)不可出現(xiàn)浮動元素。清除浮動一種常見的用法是在浮動元素之后添加空的<div>元素，并設(shè)置其兩側(cè)不可出現(xiàn)浮動元素，該空元素會在浮動元素下方新的一行中顯示，此時父元素的高度也是其內(nèi)容的高度，后續(xù)元素顯示將不再受浮動元素影響。2.2.9CSS浮動float實現(xiàn)左右布局利用CSS的浮動float屬性能夠輕松實現(xiàn)左右布局，實現(xiàn)方式如下：<head> <style> .container{ width:300px; } .left{ width:60px; float:left; height:150px; background:#ddd; } .right{ width:230px; float:right; height:150px; background:#bbb; } .clear{ clear:both; } </style></head><body> <divclass="container"> <divclass="left"> </div> <divclass="right"> </div> <divclass="clear"></div> </div></body>外部容器.container內(nèi)包含左、右兩個部分的<div>元素，二者寬度和不超過父元素的寬度，分別設(shè)置向左、向右浮動，為避免元素浮動導(dǎo)致后續(xù)元素重排，在父元素內(nèi)部末尾添加清除浮動的空<div>。2.2.10實操練習(xí)我們需要考慮與網(wǎng)站求職頁面制作相關(guān)的各種內(nèi)容，如頁首、頁腳、左側(cè)導(dǎo)航、面包屑導(dǎo)航、各類輸入表單元素等，通過將新學(xué)的知識技能與前面學(xué)習(xí)的內(nèi)容相結(jié)合，進行綜合運用，從而完成招聘網(wǎng)站注冊頁面的開發(fā)制作。最終效果如圖所示。課后作業(yè)：1．哪些類型的網(wǎng)站，以及哪些頁面可能會運用到左右布局方式？2．網(wǎng)站的哪些頁面可能會運用到大量表單元素，復(fù)雜表單布局選擇<div>布局還是<table>布局更好？課后小結(jié)：HTML5+CSS3Web前端開發(fā)技術(shù)課程教案授課題目：制作招聘網(wǎng)站用戶注冊頁面教學(xué)時數(shù)：6授課類型：理實一體教學(xué)目的、要求：1.掌握網(wǎng)站中用戶注冊頁面文本框樣式的設(shè)計方法2.掌握網(wǎng)站中用戶注冊頁面復(fù)選按鈕樣式設(shè)計方法3.掌握網(wǎng)站中用戶注冊頁面按鈕樣式設(shè)計方法教學(xué)重點：CSS3居中布局的實現(xiàn)方法教學(xué)難點：CSS3居中布局、左右布局的方法教學(xué)方法和手段：1.采用“教、學(xué)、做”三位一體教學(xué)法和訓(xùn)練學(xué)習(xí)法。通過啟發(fā)式提問進行師生互動和課堂討論，加深對課程內(nèi)容的理解。2.采用廣播軟件演示進行任務(wù)前指導(dǎo)，再由學(xué)生模仿老師演示的操作進行上機練習(xí)。教學(xué)條件：多媒體機房參考資料：《HTML5+CSS3Web前端開發(fā)技術(shù)》劉德山章增安孫美喬人民郵電出版社《HTML5基礎(chǔ)知識核心技術(shù)與前沿案例》劉歡人民郵電出版社《HTML5權(quán)威指南》弗里曼著，謝延晟，?；桑瑒⒚烙⒆g人民郵電出版社

HTML5+CSS3Web前端開發(fā)技術(shù)課程教案教學(xué)內(nèi)容及過程旁批教學(xué)內(nèi)容與教學(xué)設(shè)計：2.3.1標(biāo)簽元素<label><label>標(biāo)簽為<input>元素定義標(biāo)注。<label>元素不會向用戶呈現(xiàn)任何特殊效果，但它為鼠標(biāo)用戶改進了可用性。在label元素內(nèi)點擊文本，就會觸發(fā)相應(yīng)控件，即當(dāng)用戶選擇該標(biāo)簽時，瀏覽器就會自動將焦點轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。要實現(xiàn)這一效果，<label>元素的for屬性應(yīng)當(dāng)與相關(guān)輸入元素<input>的id屬性相同。2.3.2CSS行高屬性line-height字體大小font-size：指一行頂線到底線的垂直距離，即圖中綠線到紫線間的距離。行高line-height：指上下文本行的基線間的垂直距離，即圖中兩條紅線間垂直距離。行高line-height屬性常用于設(shè)置文本垂直居中。默認(rèn)情況下，div內(nèi)部的文字顯示在div頂部，可以通過text-align：center屬性設(shè)置文本水平居中，但垂直居中不能直接使用vertical-align:middle實現(xiàn)，因為它定義的是行內(nèi)元素的基線相對于其所在行的垂直對齊方式，而不是所在塊元素。將div的行高設(shè)置為與其高度一致可以實現(xiàn)div內(nèi)單行文本垂直居中對齊。2.3.3CSS文本陰影屬性text-shadowCSS3中，text-shadow屬性用于為文本添加陰影。其值由四個部分組成：水平陰影、垂直陰影、模糊的距離、陰影的顏色。最簡單的用法是只指定水平陰影和垂直陰影；模糊距離和陰影顏色可選；如需為文本添加多個陰影，可添加以“,”分隔陰影列表；使用text-shadow屬性創(chuàng)建4個方向上的無模糊陰影可以實現(xiàn)文本描邊效果。2.3.4CSS邊距margin實現(xiàn)居中布局基于盒模型利用CSS的邊距margin屬性能夠輕松實現(xiàn)居中布局：為父元素.container設(shè)置寬度100%，即隨瀏覽器寬度變化。為內(nèi)部的主體內(nèi)容實際容器.content設(shè)置寬度1200px。要在水平方向上使.content始終位于.container中間，需要將.content水平方向上的外邊距設(shè)置為auto，即根據(jù)父元素寬度自動設(shè)置邊距，該邊距值為(父元素寬度-子元素寬度)/2，則子元素距離父元素左右兩側(cè)距離相等，實現(xiàn)居中布局。示例：<head> <style> .container{ width:100%; height:500px; line-height:500px; font-size:24px; text-align:center; background:#ccc; } .content{ width:1200px; height:100%; background:#ddd; margin:0auto; } </style></head><body> <divclass="container"> <divclass="content"> 主體內(nèi)容寬度1200px </div> </div></body>2.3.5實操練習(xí)考慮與網(wǎng)站注冊頁面制作相關(guān)的各種內(nèi)容，如頁首、頁腳、導(dǎo)航條、進度條、各類輸入表單元素、表單必填項提示、表單填寫提示等，通過將新學(xué)的知識技能與前面學(xué)習(xí)的內(nèi)容相結(jié)合，進行綜合運用，從而完成招聘網(wǎng)站注冊頁面的開發(fā)制作。最終效果如圖所示。課后作業(yè)：1.不同類型的網(wǎng)站在進行注冊頁面設(shè)計時主要考慮哪些因素？2．網(wǎng)站注冊頁面包含大量表單元素，如何復(fù)用典型表單元素的樣式，提高代碼利用率？課后小結(jié)：HTML5+CSS3Web前端開發(fā)技術(shù)課程教案授課題目：制作招聘網(wǎng)站職位列表頁面教學(xué)時數(shù)：8授課類型：理實一體教學(xué)目的、要求：1.掌握綜合運用HTML5和CSS3實現(xiàn)包含頁首、頁腳、導(dǎo)航欄、搜索欄、條件篩選欄、列表版塊等的條件篩選型網(wǎng)頁的技能2.掌握在網(wǎng)頁中下拉菜單的制作方法3.掌握在網(wǎng)頁中實現(xiàn)字體圖標(biāo)效果的方法4.掌握使用CSS樣式實現(xiàn)搜索欄布局的方法5.掌握在在網(wǎng)頁中實現(xiàn)詳情列表顯示的方法教學(xué)重點：<ul>、<li>標(biāo)簽的使用<dl>、<dt>、<dd>標(biāo)簽的使用<datalist>標(biāo)簽的使用@font-faceCSSoverflowCSStext-overflowCSSposition(定位)CSSwhite-space教學(xué)難點：1.<ul><li>標(biāo)簽的使用2.Position樣式的設(shè)置教學(xué)方法和手段：1.采用“教、學(xué)、做”三位一體教學(xué)法和訓(xùn)練學(xué)習(xí)法。2.采用廣播軟件演示進行任務(wù)前指導(dǎo)，再由學(xué)生模仿老師演示的操作進行上機練習(xí)。教學(xué)條件：多媒體機房參考資料：《HTML5+CSS3Web前端開發(fā)技術(shù)》劉德山章增安孫美喬人民郵電出版社《HTML5基礎(chǔ)知識核心技術(shù)與前沿案例》劉歡人民郵電出版社《HTML5權(quán)威指南》弗里曼著，謝延晟，?；桑瑒⒚烙⒆g人民郵電出版社

HTML5+CSS3Web前端開發(fā)技術(shù)課程教案教學(xué)內(nèi)容及過程旁批教學(xué)內(nèi)容與教學(xué)設(shè)計：3.1.1無序列表<ul><ul>標(biāo)簽的作用是定義無序列表。將<ul>標(biāo)簽與<li>標(biāo)簽一起使用，創(chuàng)建無序列表。示例：<ul><li>Coffee</li><li>Tea</li><li>Milk</li></ul>可以在<ul>和</ul>標(biāo)簽之間放置<li>標(biāo)簽，實現(xiàn)無序列表。3.1.2列表項<li><li>標(biāo)簽定義列表項目。<li>標(biāo)簽可用在有序列表（<ol>）、無序列表（<ul>）和菜單列表（<menu>）中。本單元主要將<li>標(biāo)簽與<ul>標(biāo)簽結(jié)合使用，創(chuàng)建無序列表。3.1.3定義列表<dl><dl>標(biāo)簽定義一個描述列表。<dt>標(biāo)簽定義一個描述列表的項目/名字。<dd>標(biāo)簽被用來對一個描述列表中的項目/名字進行描述。在標(biāo)簽內(nèi)能放置段落、換行、圖片、鏈接、列表等等。使用方法：<dl>與<dt>（定義項目/名字）和<dd>（描述每一個項目/名字）一起使用，形成一個描述列表。示例：<dl><dt>Coffee</dt><dd>Blackhotdrink</dd><dt>Milk</dt><dd>Whitecolddrink</dd></dl>3.1.4<datalist>標(biāo)簽<datalist>標(biāo)簽規(guī)定了<input>元素可能的選項列表。<datalist>標(biāo)簽被用來在為<input>元素提供"自動完成"的特性。用戶能看到一個下拉列表，里邊的選項是預(yù)先定義好的，將作為用戶的輸入數(shù)據(jù)。示例：<inputlist="browsers"><datalistid="browsers"><optionvalue="InternetExplorer"><optionvalue="Firefox"><optionvalue="Chrome"><optionvalue="Opera"><optionvalue="Safari"></datalist>3.1.5@font-face規(guī)則應(yīng)用@font-face規(guī)則，可使用自定義字體。屬性描述font-family定義字體的名稱。(必填)src定義該字體下載的網(wǎng)址（S）。(必填)font-style定義該字體應(yīng)該是怎樣樣式?？蛇x值：normal、italic、oblique。默認(rèn)值是"normal"。font-weight定義字體的粗細(xì)。可選值：normal、bold、100、200、300、400、500、600、700、800、900。默認(rèn)值是"normal"。示例：@font-face{font-family:'FontAwesome';src:url('fontawesome-webfont.eot')format('embedded-opentype'),url('fontawesome-webfont.woff2')format('woff2'),url('fontawesome-webfont.woff')format('woff'),url('fontawesome-webfont.ttf')format('truetype'),url('fontawesome-webfont.svg')format('svg');src:url('fontawesome-webfont.eot?v=4.7.0');font-weight:normal;font-style:normal;}3.1.6white-space屬性CSS樣式表中，white-space屬性指定元素內(nèi)的空白怎樣處理。值描述normal默認(rèn)。空白會被瀏覽器忽略。pre空白會被瀏覽器保留。其行為方式類似HTML中的<pre>標(biāo)簽。nowrap文本不會換行，文本會在在同一行上繼續(xù)，直到遇到<br>標(biāo)簽為止。pre-wrap保留空白符序列，但是正常地進行換行。pre-line合并空白符序列，但是保留換行符。inherit規(guī)定應(yīng)該從父元素繼承white-space屬性的值。規(guī)定段落中的文本不進行換行，示例：p{p{white-space:nowrap;}3.1.7overflow屬性CSS樣式表中，overflow屬性指定如果內(nèi)容溢出一個元素的框，會發(fā)生什么值描述visible默認(rèn)值。內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外。hidden內(nèi)容會被修剪，并且其余內(nèi)容是不可見的。scroll內(nèi)容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容。auto如果內(nèi)容被修剪，則瀏覽器會顯示滾動條以便查看其余的內(nèi)容。3.1.8text-overflow屬性CSS樣式表中，text-overflow屬性指定當(dāng)文本溢出包含它的元素時，應(yīng)該如何顯示?？梢栽O(shè)置溢出后，文本被剪切、顯示省略號(…)或顯示自定義字符串（不是所有瀏覽器都支持）。在使用text-overflow的時候，需要以下兩個屬性配合：white-space:nowrap;overflow:hidden;3.1.9cursor屬性cursor屬性定義了鼠標(biāo)指針放在一個元素邊界范圍內(nèi)時所用的光標(biāo)形狀。值描述default默認(rèn)光標(biāo)（通常是一個箭頭）。pointer光標(biāo)呈現(xiàn)為指示鏈接的指針（一只手）。move此光標(biāo)指示某對象可被移動。text此光標(biāo)指示文本。wait此光標(biāo)指示程序正忙。help此光標(biāo)指示可用的幫助。crosshair光標(biāo)呈現(xiàn)為十字線。3.1.10position屬性在CSS樣式表中，position屬性指定一個元素（靜態(tài)的，相對的，絕對或固定）的定位方法的類型。值描述absolute生成絕對定位的元素，相對于static定位以外的第一個父元素進行定位。元素的位置通過"left","top","right"以及"bottom"屬性進行規(guī)定。fixed生成固定定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過"left","top","right"以及"bottom"屬性進行規(guī)定。relative生成相對定位的元素，相對于其正常位置進行定位。因此，"left:20"會向元素的LEFT位置添加20像素。static默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中（忽略top,bottom,left,right或者z-index聲明）。3.1.11實操練習(xí)考慮與網(wǎng)站列表制作相關(guān)的各種內(nèi)容、布局，如頁首、頁腳、導(dǎo)航條、搜索欄、條件篩選欄、列表等，通過將新學(xué)的知識技能與前面學(xué)習(xí)的內(nèi)容相結(jié)合，進行綜合運用，從而完成招聘網(wǎng)站列表頁的開發(fā)制作。最終效果如圖所示。課后作業(yè)：1.參考本學(xué)習(xí)情境，職位搜索框的樣式設(shè)計一般用于設(shè)置組合的表單組件效果，自己可以參考一些設(shè)計優(yōu)秀的作品來參考一下？2.參考本學(xué)習(xí)情境，下拉菜單數(shù)據(jù)在本例中采用的是靜態(tài)的數(shù)據(jù)，如果采用的動態(tài)的數(shù)據(jù)應(yīng)該如何從后臺服務(wù)器獲取？課后小結(jié)：HTML5+CSS3Web前端開發(fā)技術(shù)課程教案授課題目：制作招聘網(wǎng)站職位詳情頁面教學(xué)時數(shù)：8授課類型：理實一體教學(xué)目的、要求：1.掌握綜合運用HTML5和CSS3實現(xiàn)包含頁首、頁腳、導(dǎo)航欄、崗位推薦列表版塊、圖片展示版塊等的聚合型網(wǎng)頁的技能2.掌握在網(wǎng)頁中實現(xiàn)彈性布局的效果3.掌握在網(wǎng)頁中實現(xiàn)響應(yīng)式效果4.掌握使用多種布局結(jié)合形成復(fù)雜布局的方法教學(xué)重點：彈性布局的使用視口viewport的用法多媒體查詢@media的用法教學(xué)難點：彈性布局教學(xué)方法和手段：1.采用“教、學(xué)、做”三位一體教學(xué)法和訓(xùn)練學(xué)習(xí)法。通過啟發(fā)式提問進行師生互動和課堂討論，加深對課程內(nèi)容的理解。2.采用廣播軟件演示進行任務(wù)前指導(dǎo)，再由學(xué)生模仿老師演示的操作進行上機練習(xí)。教學(xué)條件：多媒體機房參考資料：《HTML5+CSS3Web前端開發(fā)技術(shù)》劉德山章增安孫美喬人民郵電出版社《HTML5基礎(chǔ)知識核心技術(shù)與前沿案例》劉歡人民郵電出版社《HTML5權(quán)威指南》弗里曼著，謝延晟，?；?，劉美英譯人民郵電出版社

HTML5+CSS3Web前端開發(fā)技術(shù)課程教案教學(xué)內(nèi)容及過程旁批教學(xué)內(nèi)容與教學(xué)設(shè)計：4.1.1彈性布局FlexCSS3彈性盒（FlexibleBox或flexbox），是一種當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健Ｒ霃椥院胁季帜Ｐ偷哪康氖翘峁┮环N更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。1.CSS3彈性盒子內(nèi)容彈性盒子由彈性容器(Flexcontainer)和彈性子元素(Flexitem)組成。彈性容器通過設(shè)置display屬性的值為flex或inline-flex將其定義為彈性容器。彈性容器內(nèi)包含了一個或多個彈性子元素。注意：彈性容器外及彈性子元素內(nèi)是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內(nèi)布局。彈性子元素通常在彈性盒子內(nèi)一行顯示。默認(rèn)情況每個容器只有一行。flex-direction屬性flex-direction屬性指定了彈性子元素在父容器中的位置。值描述row橫向從左到右排列（左對齊），默認(rèn)的排列方式。row-reverse反轉(zhuǎn)橫向排列（右對齊，從后往前排，最后一項排在最前面。column縱向排列。column-reserve反轉(zhuǎn)縱向排列，從后往前排，最后一項排在最上面。justify-content屬性內(nèi)容對齊（justify-content）屬性應(yīng)用在彈性容器上，把彈性項沿著彈性容器的主軸線（mainaxis）對齊。值描述flex-start彈性項目向行頭緊挨著填充。這個是默認(rèn)值。第一個彈性項的main-start外邊距邊線被放置在該行的main-start邊線，而后續(xù)彈性項依次平齊擺放。flex-end彈性項目向行尾緊挨著填充。第一個彈性項的main-end外邊距邊線被放置在該行的main-end邊線，而后續(xù)彈性項依次平齊擺放。center彈性項目居中緊挨著填充。（如果剩余的自由空間是負(fù)的，則彈性項目將在兩個方向上同時溢出）。space-between彈性項目平均分布在該行上。如果剩余空間為負(fù)或者只有一個彈性項，則該值等同于flex-start。否則，第1個彈性項的外邊距和行的main-start邊線對齊，而最后1個彈性項的外邊距和行的main-end邊線對齊，然后剩余的彈性項分布在該行上，相鄰項目的間隔相等。space-around彈性項目平均分布在該行上，兩邊留有一半的間隔空間。如果剩余空間為負(fù)或者只有一個彈性項，則該值等同于center。否則，彈性項目沿該行分布，且彼此間隔相等（比如是20px），同時首尾兩邊和彈性容器之間留有一半的間隔（1/2*20px=10px）。align-items屬性align-items設(shè)置或檢索彈性盒子元素在側(cè)軸（縱軸）方向上的對齊方式。值描述flex-start彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界。flex-end彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界。center彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。baseline如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條，則該值與flex-start等效。其它情況下，該值將參與基線

溫馨提示

  • 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)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論