HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作課件：編寫(xiě)網(wǎng)頁(yè)內(nèi)容的結(jié)構(gòu)_第1頁(yè)
HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作課件：編寫(xiě)網(wǎng)頁(yè)內(nèi)容的結(jié)構(gòu)_第2頁(yè)
HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作課件：編寫(xiě)網(wǎng)頁(yè)內(nèi)容的結(jié)構(gòu)_第3頁(yè)
HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作課件：編寫(xiě)網(wǎng)頁(yè)內(nèi)容的結(jié)構(gòu)_第4頁(yè)
HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作課件：編寫(xiě)網(wǎng)頁(yè)內(nèi)容的結(jié)構(gòu)_第5頁(yè)
已閱讀5頁(yè)，還剩19頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(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ì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論