HTML5+CSS3網頁設計與制作課件：編寫網頁內容的結構_第1頁
HTML5+CSS3網頁設計與制作課件：編寫網頁內容的結構_第2頁
HTML5+CSS3網頁設計與制作課件：編寫網頁內容的結構_第3頁
HTML5+CSS3網頁設計與制作課件：編寫網頁內容的結構_第4頁
HTML5+CSS3網頁設計與制作課件：編寫網頁內容的結構_第5頁
已閱讀5頁，還剩19頁未讀， 繼續免費閱讀

下載本文檔

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

文檔簡介

HTML5+CSS3網頁設計與制作編寫網頁內容的結構項目將通過“制作一個D清單網頁廣告單頁”項目，即通過制作一個HTML頁面來承載網頁制作知識，完成網頁開發環境搭建、HTML5標簽、CSS3疊層樣式和響應式布局等的學習。項目目標D清單是某公司推出的一款跨平臺同步的待辦事項和任務提醒軟件,旨在協助您完成待辦事務比如生日提醒,旅行安排,會議準備等以便更好的進行時間和事項管理。為了方便D清單應用的推廣，其公司需要制作一個該應用產品的介紹網頁。該頁面主要用于手機端進行分享推廣，同時也要求能夠在電腦端進行訪問。前端工程師小王所在的科技公司已經拿到了設計稿，如圖1所示。主管希望他擔任本次項目的前端工作，開發完成后將成果交付給程序員完成邏輯制作、測試和發布。項目情境圖1-1-1項目移動端和電腦端頁面截圖網頁制作的一般流程如下：項目分析項目發布需求分析規劃設計實施測試交付根據“移動優先”原則，我們需要制定項目完成的計劃：項目分析時間段1時間段2時間段3時間段4時間段5分析規劃實施階段1移動端內容制作階段2移動端格式制作階段3響應式制作測試與交付D清單前端開發甘特圖時間進度任務制作網頁內容能夠分析網頁布局圖，運用網頁結構標簽完成D清單頁面結構代碼。能夠根據移動設備與傳統電腦桌面的區別，在D清單網頁輸入正確的移動設備結構標簽。任務目標

編寫網頁內容的結構本次任務要求使用VSCode開發工具，完成D清單網頁HTML結構標簽和移動設備設置代碼的編寫。任務描述圖1-2-1編寫完成的D清單網頁HTML結構標簽截圖和效果圖

編寫網頁內容的結構要完成D清單網頁HTML結構和移動端設備設置代碼的編寫，需要：學習網頁的結構，認識HTML5的結構標簽；簡要分析D清單移動端效果圖的頁面結構，完成其結構標簽代碼的編寫；學習移動設備與傳統桌面電腦的區別，認識移動設備的HTML結構標簽，設置D清單的移動設備結構標簽。任務分析

編寫網頁內容的結構知識與技能準備在HTML5文檔中，必須包含<html></html>標記，并且放在HTML5文檔中的開始和結束位置。其基本結構如下：注意：HTML標記不區分大小寫。1、HTML5文件的基本結構12345678910<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>HTML5基本結構</title></head><!--這是一個空白頁面，在瀏覽器中不會展現任何內容--><body></body></html>知識與技能準備一個基本的HTML5網頁由以下幾部分構成。（1）<!DOCTYPEhtml>聲明。（2）<html></html>標記。（3）<head></head>標記。（4）<body></body>標記。（5）<!-->標記。1、HTML5文件的基本結構知識與技能準備HTML5文件基本結構標簽的層級關系如圖2-2所示。1、HTML5文件的基本結構HTML文檔開始標簽<html>頭標簽<head>標題標簽<title>身體標簽<body>其他標簽樣式代碼

圖1-2-2

HTML5文件基本結構標簽的層級關系打開VisualStudioCode，輸入如下標簽：

課堂練習1-2-1錄入一個完整的網頁結構標簽1234567891011<!doctypehtml><html><head><metacharset="UTF-8"><title>HTML5基本結構</title></head><!--這是注釋--><body><p>這是一個完整的網頁結構標簽</p></body></html>知識與技能準備HTML文檔結構定義不清晰，HTML5中為了解決這個問題，專門添加了：頁眉、頁腳、導航、文章內容等跟結構相關的結構元素標簽。圖1-2-2就是HTML5新標簽帶來的新布局：HTML5新增結構標簽分為主體結構標簽和非主體結構標簽。2、HTML5新增的結構標簽圖1-2-2網頁布局知識與技能準備2.1HTML5新增主體結構標簽（元素）（1）article元素article代表文檔，頁面或程序中相對獨立、完整的部分，通常用article包裹。例如文章一樣，里頭依然可以包括header、section等元素。（2）section元素區塊元素，用于頁面內容的獨立分塊，往往是文章的一段。通常由內容和標題組成，沒有標題的內容不推薦使用section。（3）nav元素導航區塊元素，作為導航連接組使用。通常用于導航欄、側邊導航欄等，使用頻率高。（4）aside元素表示當前或文章的附屬信息部分，它可以包含與當前頁面或主要內容相關的引用、側邊欄、廣告、導航條等。（5）time元素定義日期或時間，代表24小時中的某個時刻或某個日期，表示時刻時允許帶時差。知識與技能準備2.2HTML5新增非主體結構標簽（元素）（1）header元素定義文檔的頁眉，具有引導和導航作用的結構元素。header標簽至少包含（但不局限于）一個標題標記（<h1>-<h6>），還可以包括其它標簽，比如表格、列表、表單、nav標簽等，使用頻率極高。（2）footer元素文檔的腳注，一般是一個頁面的尾部信息。通常內容為聯系信息、相關閱讀、版權信息等，使用頻率高。（3）hgroup元素hgroup元素是將標題及其子標題進行分組的元素（標題比較多的場合下使用）。hgroup元素通常會將

h1~h6元素進行分組，使用頻率高。（4）address元素用來呈現用戶的聯系方式，通常內容為作者、網站鏈接、電子郵箱、地址、電話號碼等，使用頻率低。打開VisualStudioCode，輸入如下標簽：課堂練習1-2-2完成圖1-2-2所示網頁布局的結構標簽12345678910111213141516171819202122<!doctypehtml><head><metacharset="UTF-8">

<title>HTML5新增結構標簽</title></head><body><!--網頁內容頭部--><header><nav></nav></header><!--網頁內容主體部分--><divclass="main"><article><section></section><section></section></article><aside></aside></div><!--網頁內容底部--><footer></footer></body></html>知識與技能準備智能手機和平板電腦的Web應用與傳統桌面電腦的應用相比，存在以下兩點區別：（1）硬件的配置。（2）屏幕的大小。為了確保適當的繪制和觸屏縮放，需要在<head>之中添加viewport元數據標簽。3、移動設備的HTML基本結構圖1-2-3瀏覽器默認viewport的寬度知識與技能準備一個常用的針對移動網頁優化過的頁面的viewportmeta標簽大致如下：width：控制viewport的大小，可以指定的一個值。height：和width相對應，指定高度。initial-scale：初始縮放比例，也即是當頁面第一次load的時候縮放比例。maximum-scale：允許用戶縮放到的最大比例。minimum-scale：允許用戶縮放到的最小比例。user-scalabl：是否禁用其縮放（zooming）功能。3、移動設備的HTML基本結構<metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">打開VisualStudioCode，輸入如下標簽：課堂練習1-2-3錄入一個完整的移動設備網頁結構標簽1234567891011121314151617181920<!doctypehtml><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1">

<title>移動設備的HTML網頁結構標簽</title></head><body><!--網頁內容頭部--><header></header><!--網頁內容主體部分-->

<article><section></section><section></section>

</article><!--網頁內容底部--><footer><nav></nav></footer></body></html>任務實施1、打開VisualStudioCode軟件，新建文件，并將該文件保存為index.html。2、簡要分析D清單移動端頁面效果圖，可知其主要包括頭部、主體內容和底部版權信息。3、根據分析完成D清單網頁HTML結構的編寫，并結合前面對移動設備設置的學習，完成D清單的移動端設備設置代碼。參考代碼如下：12345678910111213141516<!doctypehtml><!--聲明--><head><metacharset="UTF-8">

<!--移動端設備設置--><metaname="viewport"content="width=device-width,initial-scale=1">

<title>D清單</title></head><body>

<!--網頁內容頭部--><header><nav></nav></header><!--網頁內容主體部分-->

<article><section></section>171819202122232425262728293031<section></section><section></section>

</article><!--此處內容為網頁主體部分內容，可根據需要自行添加---><article><section><address></address>

<address></address></section><se

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論