




版權(quán)說(shuō)明:本文檔由用戶(hù)提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作編寫(xiě)網(wǎng)頁(yè)內(nèi)容的結(jié)構(gòu)項(xiàng)目將通過(guò)“制作一個(gè)D清單網(wǎng)頁(yè)廣告單頁(yè)”項(xiàng)目,即通過(guò)制作一個(gè)HTML頁(yè)面來(lái)承載網(wǎng)頁(yè)制作知識(shí),完成網(wǎng)頁(yè)開(kāi)發(fā)環(huán)境搭建、HTML5標(biāo)簽、CSS3疊層樣式和響應(yīng)式布局等的學(xué)習(xí)。項(xiàng)目目標(biāo)D清單是某公司推出的一款跨平臺(tái)同步的待辦事項(xiàng)和任務(wù)提醒軟件,旨在協(xié)助您完成待辦事務(wù)比如生日提醒,旅行安排,會(huì)議準(zhǔn)備等以便更好的進(jìn)行時(shí)間和事項(xiàng)管理。為了方便D清單應(yīng)用的推廣,其公司需要制作一個(gè)該應(yīng)用產(chǎn)品的介紹網(wǎng)頁(yè)。該頁(yè)面主要用于手機(jī)端進(jìn)行分享推廣,同時(shí)也要求能夠在電腦端進(jìn)行訪(fǎng)問(wèn)。前端工程師小王所在的科技公司已經(jīng)拿到了設(shè)計(jì)稿,如圖1所示。主管希望他擔(dān)任本次項(xiàng)目的前端工作,開(kāi)發(fā)完成后將成果交付給程序員完成邏輯制作、測(cè)試和發(fā)布。項(xiàng)目情境圖1-1-1項(xiàng)目移動(dòng)端和電腦端頁(yè)面截圖網(wǎng)頁(yè)制作的一般流程如下:項(xiàng)目分析項(xiàng)目發(fā)布需求分析規(guī)劃設(shè)計(jì)實(shí)施測(cè)試交付根據(jù)“移動(dòng)優(yōu)先”原則,我們需要制定項(xiàng)目完成的計(jì)劃:項(xiàng)目分析時(shí)間段1時(shí)間段2時(shí)間段3時(shí)間段4時(shí)間段5分析規(guī)劃實(shí)施階段1移動(dòng)端內(nèi)容制作階段2移動(dòng)端格式制作階段3響應(yīng)式制作測(cè)試與交付D清單前端開(kāi)發(fā)甘特圖時(shí)間進(jìn)度任務(wù)制作網(wǎng)頁(yè)內(nèi)容能夠分析網(wǎng)頁(yè)布局圖,運(yùn)用網(wǎng)頁(yè)結(jié)構(gòu)標(biāo)簽完成D清單頁(yè)面結(jié)構(gòu)代碼。能夠根據(jù)移動(dòng)設(shè)備與傳統(tǒng)電腦桌面的區(qū)別,在D清單網(wǎng)頁(yè)輸入正確的移動(dòng)設(shè)備結(jié)構(gòu)標(biāo)簽。任務(wù)目標(biāo)
編寫(xiě)網(wǎng)頁(yè)內(nèi)容的結(jié)構(gòu)本次任務(wù)要求使用VSCode開(kāi)發(fā)工具,完成D清單網(wǎng)頁(yè)HTML結(jié)構(gòu)標(biāo)簽和移動(dòng)設(shè)備設(shè)置代碼的編寫(xiě)。任務(wù)描述圖1-2-1編寫(xiě)完成的D清單網(wǎng)頁(yè)HTML結(jié)構(gòu)標(biāo)簽截圖和效果圖
編寫(xiě)網(wǎng)頁(yè)內(nèi)容的結(jié)構(gòu)要完成D清單網(wǎng)頁(yè)HTML結(jié)構(gòu)和移動(dòng)端設(shè)備設(shè)置代碼的編寫(xiě),需要:學(xué)習(xí)網(wǎng)頁(yè)的結(jié)構(gòu),認(rèn)識(shí)HTML5的結(jié)構(gòu)標(biāo)簽;簡(jiǎn)要分析D清單移動(dòng)端效果圖的頁(yè)面結(jié)構(gòu),完成其結(jié)構(gòu)標(biāo)簽代碼的編寫(xiě);學(xué)習(xí)移動(dòng)設(shè)備與傳統(tǒng)桌面電腦的區(qū)別,認(rèn)識(shí)移動(dòng)設(shè)備的HTML結(jié)構(gòu)標(biāo)簽,設(shè)置D清單的移動(dòng)設(shè)備結(jié)構(gòu)標(biāo)簽。任務(wù)分析
編寫(xiě)網(wǎng)頁(yè)內(nèi)容的結(jié)構(gòu)知識(shí)與技能準(zhǔn)備在HTML5文檔中,必須包含<html></html>標(biāo)記,并且放在HTML5文檔中的開(kāi)始和結(jié)束位置。其基本結(jié)構(gòu)如下:注意:HTML標(biāo)記不區(qū)分大小寫(xiě)。1、HTML5文件的基本結(jié)構(gòu)12345678910<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>HTML5基本結(jié)構(gòu)</title></head><!--這是一個(gè)空白頁(yè)面,在瀏覽器中不會(huì)展現(xiàn)任何內(nèi)容--><body></body></html>知識(shí)與技能準(zhǔn)備一個(gè)基本的HTML5網(wǎng)頁(yè)由以下幾部分構(gòu)成。(1)<!DOCTYPEhtml>聲明。(2)<html></html>標(biāo)記。(3)<head></head>標(biāo)記。(4)<body></body>標(biāo)記。(5)<!-->標(biāo)記。1、HTML5文件的基本結(jié)構(gòu)知識(shí)與技能準(zhǔn)備HTML5文件基本結(jié)構(gòu)標(biāo)簽的層級(jí)關(guān)系如圖2-2所示。1、HTML5文件的基本結(jié)構(gòu)HTML文檔開(kāi)始標(biāo)簽<html>頭標(biāo)簽<head>標(biāo)題標(biāo)簽<title>身體標(biāo)簽<body>其他標(biāo)簽樣式代碼
圖1-2-2
HTML5文件基本結(jié)構(gòu)標(biāo)簽的層級(jí)關(guān)系打開(kāi)VisualStudioCode,輸入如下標(biāo)簽:
課堂練習(xí)1-2-1錄入一個(gè)完整的網(wǎng)頁(yè)結(jié)構(gòu)標(biāo)簽1234567891011<!doctypehtml><html><head><metacharset="UTF-8"><title>HTML5基本結(jié)構(gòu)</title></head><!--這是注釋--><body><p>這是一個(gè)完整的網(wǎng)頁(yè)結(jié)構(gòu)標(biāo)簽</p></body></html>知識(shí)與技能準(zhǔn)備HTML文檔結(jié)構(gòu)定義不清晰,HTML5中為了解決這個(gè)問(wèn)題,專(zhuān)門(mén)添加了:頁(yè)眉、頁(yè)腳、導(dǎo)航、文章內(nèi)容等跟結(jié)構(gòu)相關(guān)的結(jié)構(gòu)元素標(biāo)簽。圖1-2-2就是HTML5新標(biāo)簽帶來(lái)的新布局:HTML5新增結(jié)構(gòu)標(biāo)簽分為主體結(jié)構(gòu)標(biāo)簽和非主體結(jié)構(gòu)標(biāo)簽。2、HTML5新增的結(jié)構(gòu)標(biāo)簽圖1-2-2網(wǎng)頁(yè)布局知識(shí)與技能準(zhǔn)備2.1HTML5新增主體結(jié)構(gòu)標(biāo)簽(元素)(1)article元素article代表文檔,頁(yè)面或程序中相對(duì)獨(dú)立、完整的部分,通常用article包裹。例如文章一樣,里頭依然可以包括header、section等元素。(2)section元素區(qū)塊元素,用于頁(yè)面內(nèi)容的獨(dú)立分塊,往往是文章的一段。通常由內(nèi)容和標(biāo)題組成,沒(méi)有標(biāo)題的內(nèi)容不推薦使用section。(3)nav元素導(dǎo)航區(qū)塊元素,作為導(dǎo)航連接組使用。通常用于導(dǎo)航欄、側(cè)邊導(dǎo)航欄等,使用頻率高。(4)aside元素表示當(dāng)前或文章的附屬信息部分,它可以包含與當(dāng)前頁(yè)面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、導(dǎo)航條等。(5)time元素定義日期或時(shí)間,代表24小時(shí)中的某個(gè)時(shí)刻或某個(gè)日期,表示時(shí)刻時(shí)允許帶時(shí)差。知識(shí)與技能準(zhǔn)備2.2HTML5新增非主體結(jié)構(gòu)標(biāo)簽(元素)(1)header元素定義文檔的頁(yè)眉,具有引導(dǎo)和導(dǎo)航作用的結(jié)構(gòu)元素。header標(biāo)簽至少包含(但不局限于)一個(gè)標(biāo)題標(biāo)記(<h1>-<h6>),還可以包括其它標(biāo)簽,比如表格、列表、表單、nav標(biāo)簽等,使用頻率極高。(2)footer元素文檔的腳注,一般是一個(gè)頁(yè)面的尾部信息。通常內(nèi)容為聯(lián)系信息、相關(guān)閱讀、版權(quán)信息等,使用頻率高。(3)hgroup元素hgroup元素是將標(biāo)題及其子標(biāo)題進(jìn)行分組的元素(標(biāo)題比較多的場(chǎng)合下使用)。hgroup元素通常會(huì)將
h1~h6元素進(jìn)行分組,使用頻率高。(4)address元素用來(lái)呈現(xiàn)用戶(hù)的聯(lián)系方式,通常內(nèi)容為作者、網(wǎng)站鏈接、電子郵箱、地址、電話(huà)號(hào)碼等,使用頻率低。打開(kāi)VisualStudioCode,輸入如下標(biāo)簽:課堂練習(xí)1-2-2完成圖1-2-2所示網(wǎng)頁(yè)布局的結(jié)構(gòu)標(biāo)簽12345678910111213141516171819202122<!doctypehtml><head><metacharset="UTF-8">
<title>HTML5新增結(jié)構(gòu)標(biāo)簽</title></head><body><!--網(wǎng)頁(yè)內(nèi)容頭部--><header><nav></nav></header><!--網(wǎng)頁(yè)內(nèi)容主體部分--><divclass="main"><article><section></section><section></section></article><aside></aside></div><!--網(wǎng)頁(yè)內(nèi)容底部--><footer></footer></body></html>知識(shí)與技能準(zhǔn)備智能手機(jī)和平板電腦的Web應(yīng)用與傳統(tǒng)桌面電腦的應(yīng)用相比,存在以下兩點(diǎn)區(qū)別:(1)硬件的配置。(2)屏幕的大小。為了確保適當(dāng)?shù)睦L制和觸屏縮放,需要在<head>之中添加viewport元數(shù)據(jù)標(biāo)簽。3、移動(dòng)設(shè)備的HTML基本結(jié)構(gòu)圖1-2-3瀏覽器默認(rèn)viewport的寬度知識(shí)與技能準(zhǔn)備一個(gè)常用的針對(duì)移動(dòng)網(wǎng)頁(yè)優(yōu)化過(guò)的頁(yè)面的viewportmeta標(biāo)簽大致如下:width:控制viewport的大小,可以指定的一個(gè)值。height:和width相對(duì)應(yīng),指定高度。initial-scale:初始縮放比例,也即是當(dāng)頁(yè)面第一次load的時(shí)候縮放比例。maximum-scale:允許用戶(hù)縮放到的最大比例。minimum-scale:允許用戶(hù)縮放到的最小比例。user-scalabl:是否禁用其縮放(zooming)功能。3、移動(dòng)設(shè)備的HTML基本結(jié)構(gòu)<metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">打開(kāi)VisualStudioCode,輸入如下標(biāo)簽:課堂練習(xí)1-2-3錄入一個(gè)完整的移動(dòng)設(shè)備網(wǎng)頁(yè)結(jié)構(gòu)標(biāo)簽1234567891011121314151617181920<!doctypehtml><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1">
<title>移動(dòng)設(shè)備的HTML網(wǎng)頁(yè)結(jié)構(gòu)標(biāo)簽</title></head><body><!--網(wǎng)頁(yè)內(nèi)容頭部--><header></header><!--網(wǎng)頁(yè)內(nèi)容主體部分-->
<article><section></section><section></section>
</article><!--網(wǎng)頁(yè)內(nèi)容底部--><footer><nav></nav></footer></body></html>任務(wù)實(shí)施1、打開(kāi)VisualStudioCode軟件,新建文件,并將該文件保存為index.html。2、簡(jiǎn)要分析D清單移動(dòng)端頁(yè)面效果圖,可知其主要包括頭部、主體內(nèi)容和底部版權(quán)信息。3、根據(jù)分析完成D清單網(wǎng)頁(yè)HTML結(jié)構(gòu)的編寫(xiě),并結(jié)合前面對(duì)移動(dòng)設(shè)備設(shè)置的學(xué)習(xí),完成D清單的移動(dòng)端設(shè)備設(shè)置代碼。參考代碼如下:12345678910111213141516<!doctypehtml><!--聲明--><head><metacharset="UTF-8">
<!--移動(dòng)端設(shè)備設(shè)置--><metaname="viewport"content="width=device-width,initial-scale=1">
<title>D清單</title></head><body>
<!--網(wǎng)頁(yè)內(nèi)容頭部--><header><nav></nav></header><!--網(wǎng)頁(yè)內(nèi)容主體部分-->
<article><section></section>171819202122232425262728293031<section></section><section></section>
</article><!--此處內(nèi)容為網(wǎng)頁(yè)主體部分內(nèi)容,可根據(jù)需要自行添加---><article><section><address></address>
<address></address></section><se
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 敏感元件及傳感器項(xiàng)目效益評(píng)估報(bào)告
- 素質(zhì)教育理念下的課堂管理心得體會(huì)
- 生態(tài)園林景觀綠化養(yǎng)護(hù)與景觀照明服務(wù)協(xié)議
- 抖音火花團(tuán)隊(duì)互動(dòng)合作共贏協(xié)議
- 美團(tuán)餐飲品牌知名度提升合作協(xié)議
- 海洋工程工業(yè)廠(chǎng)房分割轉(zhuǎn)讓與海洋合同
- 商業(yè)寫(xiě)字樓維修基金結(jié)算及管理協(xié)議
- 心理咨詢(xún)服務(wù)機(jī)構(gòu)合伙人權(quán)益保障合作協(xié)議
- 建筑設(shè)計(jì)事務(wù)所合伙人責(zé)任劃分協(xié)議
- 知識(shí)產(chǎn)權(quán)侵權(quán)糾紛調(diào)解與執(zhí)行保障協(xié)議
- 脂肪肝介紹課件
- 2025 年上海社區(qū)工作人員招聘考試模擬卷
- 2024年市場(chǎng)營(yíng)銷(xiāo)師品牌宣傳技巧試題及答案
- 應(yīng)急物資、設(shè)備檢查維護(hù)保養(yǎng)制度
- 2025年醫(yī)療器械全國(guó)總策劃代理協(xié)議書(shū)
- 《數(shù)據(jù)網(wǎng)組建與維護(hù)》課件-8.1任務(wù)1 WLAN基本配置
- 2025解題覺(jué)醒鄧誠(chéng)數(shù)學(xué)(名師大招冊(cè))
- 第四單元第一課 多姿多彩的樂(lè)音世界-《唱臉譜》 課件 2024-2025學(xué)年湘藝版(2024)初中音樂(lè)七年級(jí)下冊(cè)
- 給小朋友科普化學(xué)小知識(shí)
- 中醫(yī)專(zhuān)科護(hù)士進(jìn)修匯報(bào)
- 9.2 法律保障生活課件(共13張)-2024-2025學(xué)年統(tǒng)編版道德與法治七年級(jí)下冊(cè)
評(píng)論
0/150
提交評(píng)論