PPTHTML5+CSS3 Web前端開發(fā)技術(shù) 課件 第2單元-學習情境4-制作招聘網(wǎng)站用戶注冊頁面_第1頁
PPTHTML5+CSS3 Web前端開發(fā)技術(shù) 課件 第2單元-學習情境4-制作招聘網(wǎng)站用戶注冊頁面_第2頁
PPTHTML5+CSS3 Web前端開發(fā)技術(shù) 課件 第2單元-學習情境4-制作招聘網(wǎng)站用戶注冊頁面_第3頁
PPTHTML5+CSS3 Web前端開發(fā)技術(shù) 課件 第2單元-學習情境4-制作招聘網(wǎng)站用戶注冊頁面_第4頁
PPTHTML5+CSS3 Web前端開發(fā)技術(shù) 課件 第2單元-學習情境4-制作招聘網(wǎng)站用戶注冊頁面_第5頁
已閱讀5頁，還剩22頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

HTML5+CSS3Web前端開發(fā)技術(shù)單元2制作表單頁面單元2制作表單頁面學習情境4制作招聘網(wǎng)站用戶注冊頁面學習情境4制作招聘網(wǎng)站用戶注冊頁面01030204情境概述知識準備案例講解總結(jié)PART01情境概述學習情境4制作招聘網(wǎng)站用戶注冊頁面教學概述教學導航知識重點HTML5語義和結(jié)構(gòu)標簽的用法；HTML5表單元素的用法；HTML5表格元素的用法；CSS3背景設置的用法；CSS3偽類選擇器的用法；CSS3屬性選擇器的用法；CSS3偽元素選擇器的用法；CSS3文字水平、垂直方向居中的方法；CSS3陰影效果的用法；CSS3圓角的用法；CSS3居中布局的實現(xiàn)方法；CSS3左右布局的實現(xiàn)方法知識難點HTML5新增表單元素的用法；CSS3偽類、偽元素、屬性選擇器的用法；CSS3居中布局、左右布局的方法推薦教學方式從學習情境入手，通過引導學生制作一個招聘網(wǎng)站的登錄Web頁面，讓學生掌握HTML5語義結(jié)構(gòu)元素、表單元素的用法和CSS3背景設置、偽類選擇器的用法；通過引導學生制作一個招聘網(wǎng)站的注冊Web頁面，讓學生掌握CSS3偽元素選擇器的用法、居中布局的實現(xiàn)方法；通過引導學生制作一個招聘網(wǎng)站的求職Web頁面，讓學生掌握HTML表格的用法，CSS3屬性選擇器的用法、左右布局的實現(xiàn)方法。建議學時18學時推薦學習方法網(wǎng)站的表單頁面通常是一個信息采集頁面，主要運用HTML5表單元素及其屬性，同時涉及多種CSS3選擇器及屬性，需重點理解新知識點，按照效果圖實現(xiàn)網(wǎng)頁。必須掌握的理論知識<header><nav><article><section><footer>等語義結(jié)構(gòu)標簽；date、number、file等；新增input標簽類型及其他屬性；background樣式屬性；:hover偽類選擇器:before、:after偽元素選擇器；box-shaodw樣式屬性；float樣式屬性；position樣式屬性必須掌握的技能使用HTML5語義結(jié)構(gòu)元素；表單元素開發(fā)網(wǎng)頁使用；CSS3偽類、偽元素、屬性選擇器；美化網(wǎng)頁；使用CSS3背景屬性美化網(wǎng)頁；使用CSS3陰影、圓角屬性美化網(wǎng)頁；使用CSS3浮動、定位屬性美化網(wǎng)頁教學概述網(wǎng)站表單頁面通常是信息采集頁面，包含多項不同類型數(shù)據(jù)的輸入框。本單元將學習制作一個招聘網(wǎng)站的登錄、注冊、求職頁面，這三個首頁的內(nèi)容版塊具有一定的通用性和代表性，通過舉一反三，我們可以制作出類似的網(wǎng)站表單頁面。教學概述學習情境描述本學習情境是制作一個招聘網(wǎng)站的注冊頁面,在本學習情境中，我們需要考慮與網(wǎng)站注冊頁面制作相關(guān)的各種內(nèi)容，如頁首、頁腳、導航條、進度條、各類輸入表單元素、表單必填項提示、表單填寫提示等，通過將新學的知識技能與前面學習的內(nèi)容相結(jié)合，進行綜合運用，從而完成招聘網(wǎng)站注冊頁面的開發(fā)制作。教學概述本節(jié)課需要掌握的情境知識點和技能點關(guān)鍵知識點：（1）CSS中對于屬性width、height、position的使用（2）CSS中對于text-overflow屬性的使用（3）CSS中對于padding屬性的使用（4）CSS中對于border、font-size、border-radius屬性使用教學概述本節(jié)課需要掌握的情境知識點和技能點關(guān)鍵技能點：（1）用戶注冊標題樣式設計（2）姓名、手機、身份證等輸入框樣式設計（3）短信驗證按鈕樣式設計（4）同意復選框樣式設計（5）提交按鈕樣式設計教學概述本節(jié)課的學習目標掌握網(wǎng)站中用戶注冊頁面文本框樣式的設計方法掌握網(wǎng)站中用戶注冊頁面復選按鈕樣式設計方法掌握網(wǎng)站中用戶注冊頁面按鈕樣式設計方法教學概述本節(jié)課的任務書開發(fā)一個用戶注冊頁面，完成對用戶注冊頁面文本框樣式的設計開發(fā)一個用戶注冊頁面，完成對用戶注冊頁面復選按鈕樣式的設計開發(fā)一個用戶注冊頁面，完成對用戶注冊頁面按鈕樣式的設計PART02知識準備學習情境4制作招聘網(wǎng)站用戶注冊頁面知識準備知識分布網(wǎng)絡知識準備引導問題在哪些網(wǎng)站需要設計用戶注冊功能？驗證碼功能如何去實現(xiàn)？知識準備知識點介紹1、標簽元素<label>2、CSS行高屬性line-height3、CSS文本陰影屬性text-shadow4、CSS邊距margin屬性實現(xiàn)居中布局標簽元素<label>知識準備<label>標簽為<input>元素定義標注。<label>元素不會向用戶呈現(xiàn)任何特殊效果，但它為鼠標用戶改進了可用性。在label元素內(nèi)點擊文本，就會觸發(fā)相應控件，即當用戶選擇該標簽時，瀏覽器就會自動將焦點轉(zhuǎn)到和標簽相關(guān)的表單控件上。要實現(xiàn)這一效果，<label>元素的for屬性應當與相關(guān)輸入元素<input>的id屬性相同。CSS行高屬性line-height知識準備在CSS中有4中與文本相關(guān)的線條，從上到下四條線分別是頂線top、中線middle、基線baseline、底線bottom。<head> <style> div{ width:300px; height:100px; line-height:100px; text-align:center; border:1px#000solid; </style></head><body> <div>單行文本水平居中</div></body>CSS文本陰影屬性text-shadow知識準備CSS3中，text-shadow屬性用于為文本添加陰影。其值由四個部分組成：水平陰影、垂直陰影、模糊的距離、陰影的顏色。最簡單的用法是只指定水平陰影和垂直陰影；模糊距離和陰影顏色可選；如需為文本添加多個陰影，可添加以“,”分隔陰影列表；使用text-shadow屬性創(chuàng)建4個方向上的無模糊陰影可以實現(xiàn)文本描邊效果。示例：h1{color:white;text-shadow:-3px0black,03pxblack,3px0black,0-3pxblack;}CSS邊距margin實現(xiàn)居中布局知識準備要在水平方向上使.content始終位于.container中間，需要將.content水平方向上的外邊距設置為auto，即根據(jù)父元素寬度自動設置邊距，該邊距值為(父元素寬度-子元素寬度)/2，則子元素距離父元素左右兩側(cè)距離相等，實現(xiàn)居中布局。 <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>知識準備CSS邊距margin實現(xiàn)居中布局知識準備預覽效果：PART03案例講解學習情境4制作招聘網(wǎng)站用戶注冊頁面案例講解1.制作招聘網(wǎng)站注冊頁面實例：使用HBuilder工具制作一個招聘網(wǎng)站注冊頁面案例講解1.制作招聘網(wǎng)站登錄頁面步驟：設計頁面整體布局設計頁頭設計主體內(nèi)容設計頁腳PART04總結(jié)學習情境4制作招聘網(wǎng)站用戶注冊頁面總結(jié)總結(jié)

本單元我們使用HBuilder工具制作了一個招聘網(wǎng)站注冊頁面，在設計頁

溫馨提示

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

提交評論