HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作課件：添加段落和文字_第1頁
HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作課件：添加段落和文字_第2頁
HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作課件：添加段落和文字_第3頁
HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作課件：添加段落和文字_第4頁
HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作課件：添加段落和文字_第5頁
已閱讀5頁，還剩24頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作添加段落和文字項(xiàng)目將通過“制作一個D清單網(wǎng)頁廣告單頁”項(xiàng)目，即通過制作一個HTML頁面來承載網(wǎng)頁制作知識，完成網(wǎng)頁開發(fā)環(huán)境搭建、HTML5標(biāo)簽、CSS3疊層樣式和響應(yīng)式布局等的學(xué)習(xí)。項(xiàng)目目標(biāo)D清單是某公司推出的一款跨平臺同步的待辦事項(xiàng)和任務(wù)提醒軟件,旨在協(xié)助您完成待辦事務(wù)比如生日提醒,旅行安排,會議準(zhǔn)備等以便更好的進(jìn)行時間和事項(xiàng)管理。為了方便D清單應(yīng)用的推廣，其公司需要制作一個該應(yīng)用產(chǎn)品的介紹網(wǎng)頁。該頁面主要用于手機(jī)端進(jìn)行分享推廣，同時也要求能夠在電腦端進(jìn)行訪問。前端工程師小王所在的科技公司已經(jīng)拿到了設(shè)計(jì)稿，如圖1所示。主管希望他擔(dān)任本次項(xiàng)目的前端工作，開發(fā)完成后將成果交付給程序員完成邏輯制作、測試和發(fā)布。項(xiàng)目情境圖1-1-1項(xiàng)目移動端和電腦端頁面截圖網(wǎng)頁制作的一般流程如下：項(xiàng)目分析項(xiàng)目發(fā)布需求分析規(guī)劃設(shè)計(jì)實(shí)施測試交付根據(jù)“移動優(yōu)先”原則，我們需要制定項(xiàng)目完成的計(jì)劃：項(xiàng)目分析時間段1時間段2時間段3時間段4時間段5分析規(guī)劃實(shí)施階段1移動端內(nèi)容制作階段2移動端格式制作階段3響應(yīng)式制作測試與交付D清單前端開發(fā)甘特圖時間進(jìn)度任務(wù)制作網(wǎng)頁內(nèi)容能夠表述常見HTML格式化文本標(biāo)簽的含義。能夠在網(wǎng)頁中按內(nèi)容語義正確應(yīng)用HTML文本標(biāo)簽。能夠在分析D清單網(wǎng)頁效果圖基礎(chǔ)上，使用HTML添加網(wǎng)頁中的段落和文字內(nèi)容。任務(wù)目標(biāo)

添加段落和文字本次任務(wù)要求根據(jù)D清單網(wǎng)頁內(nèi)容，使用HTML格式化標(biāo)簽，在基礎(chǔ)上添加文字和段落內(nèi)容。完成后的效果圖如圖1-3所示。任務(wù)描述圖1-3添加文字和段落內(nèi)后的網(wǎng)頁效果圖

添加段落和文字要完成D清單網(wǎng)頁文本和段落內(nèi)容的編寫，需要：學(xué)習(xí)標(biāo)題、段落和其它常見文本標(biāo)簽的使用；分析D清單頁面中的文本和段落內(nèi)容，正確使用格式化標(biāo)簽完成D清單網(wǎng)頁內(nèi)容制作。任務(wù)分析圖1-3-1D清單網(wǎng)頁部分標(biāo)題與段落分析圖

添加段落和文字知識與技能準(zhǔn)備HTML文檔中包含有各種級別的標(biāo)題，各種級別的標(biāo)題由<h1>到<h6>標(biāo)簽來定義，<h1>到<h6>標(biāo)題標(biāo)簽中的字母h是英文headline（標(biāo)題行）的簡稱。其語法形式如下：1、標(biāo)題標(biāo)簽<h1>~<h6>1級標(biāo)題：<h1></h1>2級標(biāo)題：<h2></h2>……6級標(biāo)題：<h6></h6>打開VisualStudioCode軟件，在<body>標(biāo)簽中輸入如下代碼：課堂練習(xí)1-3-1顯示6級標(biāo)題的效果123456<h1>這是一級標(biāo)題</h1><h2>這是二級標(biāo)題</h2><h3>這是三級標(biāo)題</h3><h4>這是四級標(biāo)題</h4><h5>這是五級標(biāo)題</h5><h6>這是六級標(biāo)題</h6>顯示效果如下：課堂練習(xí)1-3-1顯示6級標(biāo)題的效果圖1-3-2標(biāo)題標(biāo)簽的使用知識與技能準(zhǔn)備段落標(biāo)簽為<p></p>，在<p>開始標(biāo)簽和</p>結(jié)束標(biāo)簽之間的內(nèi)容形成一個段落。段落標(biāo)簽中的p是英文單詞paragraph（段落）的首字母，用來定義網(wǎng)頁中的一段文本，文本在一個段落中會自動換行。其語法形式如下：2、段落標(biāo)簽<p><p>段落文字</p>打開VisualStudioCode軟件，在<body>標(biāo)簽中輸入如下代碼：課堂練習(xí)1-3-2使用標(biāo)題和段落的網(wǎng)頁1234567891011121314<h1>W3C的介紹</h1><p>W3C指萬維網(wǎng)聯(lián)盟，它是建立于1994年的組織，其宗旨是通過促進(jìn)通用協(xié)議的發(fā)展并確保其通用型，以激發(fā)web世界的全部潛能。</p><p>W3C標(biāo)準(zhǔn)不是某一個標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。網(wǎng)頁主要由三部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。對應(yīng)的標(biāo)準(zhǔn)也分三方面：結(jié)構(gòu)化標(biāo)準(zhǔn)語言主要包括XHTML和XML，表現(xiàn)標(biāo)準(zhǔn)語言主要包括CSS，行為標(biāo)準(zhǔn)主要包括對象模型（如W3CDOM）、ECMAScript等。這些標(biāo)準(zhǔn)大部分由W3C起草和發(fā)布，也有一些是其他標(biāo)準(zhǔn)組織制訂的標(biāo)準(zhǔn)，比如ECMA的ECMAScript標(biāo)準(zhǔn)。</p><p>為了簡化網(wǎng)站代碼，降低網(wǎng)站建設(shè)的成本，保證網(wǎng)站在長期互聯(lián)網(wǎng)環(huán)境中能有效，加強(qiáng)網(wǎng)站的兼容性，能適應(yīng)不同的網(wǎng)絡(luò)設(shè)備和網(wǎng)絡(luò)終端。我們在建設(shè)網(wǎng)站時應(yīng)該要保證代碼符合W3C規(guī)范。</p>顯示效果如下：課堂練習(xí)1-3-2使用標(biāo)題和段落的網(wǎng)頁圖1-3-3使用了標(biāo)題和段落的網(wǎng)頁知識與技能準(zhǔn)備在HTML中，換行需要使用<br/>標(biāo)簽來完成。換行標(biāo)簽<br/>是一個單標(biāo)簽，它沒有結(jié)束標(biāo)答，是英文單詞break的縮寫，作用是將文字在一個段內(nèi)強(qiáng)制換行。使用換行標(biāo)簽時，在需要換行的位置添加<br/>標(biāo)簽即可。其語法形式如下：3、換行標(biāo)簽<br/>換行標(biāo)簽<br/>打開VisualStudioCode軟件，在<body>標(biāo)簽中輸入如下代碼：課堂練習(xí)1-3-3使用換行標(biāo)簽編寫網(wǎng)頁123456<p>

我輕輕的來<br/>

正如我靜靜的走<br/>

揮一揮衣袖<br/>

不帶走一片云彩</p>顯示效果如下：課堂練習(xí)1-3-3使用換行標(biāo)簽編寫網(wǎng)頁圖1-3-4使用換行標(biāo)簽的網(wǎng)頁知識與技能準(zhǔn)備div標(biāo)簽可以把文檔分割為獨(dú)立的、不同的部分。它可以用作嚴(yán)格的組織工具，并且不使用任何格式與其關(guān)聯(lián)。div元素是通用的，內(nèi)部可以包含其他各種元素包括其他div元素；并且可以通過CSS設(shè)置樣式來完成復(fù)雜的頁面布局。其語法形式如下：注釋：HTML中的元素可分為兩種類型：塊級元素和行級元素。塊級元素：顯示在一塊內(nèi)，會自動換行，元素會從上到下垂直排列，各自占一行，如前面所講過的p，h1，div等標(biāo)簽元素。行內(nèi)元素：元素在一行內(nèi)水平排列，高度由元素的內(nèi)容決定，height（高度）屬性不起作用，如后面要講的span，a等元素。4、通用div塊元素<div><div>…任何網(wǎng)頁元素（標(biāo)簽）</div>打開VisualStudioCode軟件，在<body>標(biāo)簽中輸入如下代碼：課堂練習(xí)1-3-4使用div分割文檔12345678<div><h1></h1><p>制作酒店宣傳單頁的內(nèi)容</p></div><div><h1></h1><p>使用CSS3設(shè)置網(wǎng)頁格式</p></div>顯示效果如下：課堂練習(xí)1-3-4使用div分割文檔圖1-3-5使用div分割文檔知識與技能準(zhǔn)備span標(biāo)簽是被用來組合文檔中的行內(nèi)元素。span沒有固定的格式表現(xiàn)。當(dāng)對它應(yīng)用樣式（在后面的章節(jié)中會進(jìn)行詳細(xì)講解）時，它才會產(chǎn)生視覺上的變化。span標(biāo)簽在行內(nèi)定義一個區(qū)域，也就是一行內(nèi)可以被span劃分成好幾個區(qū)域，從而實(shí)現(xiàn)某種特定效果。span標(biāo)簽本身沒有任何屬性。其語法形式如下：5、通用內(nèi)聯(lián)元素<span><span>要修改樣式的文字</span>打開VisualStudioCode軟件，在<body>標(biāo)簽中輸入如下代碼：課堂練習(xí)1-3-5使用span標(biāo)簽分隔文檔12345678<div><h2></h2><p>這是中的<span>span</span></p></div><div><h2></h2><p>這是中的<span>span</span></p></div>顯示效果如下：課堂練習(xí)1-3-5使用span標(biāo)簽分隔文檔圖1-3-5使用div分割文檔知識與技能準(zhǔn)備除了用段落和標(biāo)題組織文本，有時還需要使用短語元素來指定標(biāo)記之間的文本的上下文與含義。6、常見的短語元素格式標(biāo)簽及應(yīng)用功能應(yīng)用效果<strong>內(nèi)容</strong>強(qiáng)調(diào)文本，加粗顯示內(nèi)容<em>內(nèi)容</em>強(qiáng)調(diào)標(biāo)簽，字體被加斜體效果內(nèi)容<sup>上標(biāo)</sup>上標(biāo)標(biāo)簽內(nèi)容上標(biāo)<sub>下標(biāo)</sub>下標(biāo)標(biāo)簽內(nèi)容下標(biāo)<mark>內(nèi)容</mark>記號文本，高亮顯示內(nèi)容表1-3-1常見的短語元素任務(wù)實(shí)施1、打開中的index.html文件。2、分析D清單效果圖的標(biāo)題、段落等內(nèi)容，完成D清單網(wǎng)頁中標(biāo)題和段落的代碼編寫。參考代碼如下：123456789101112131415161718192021222324<body><header><nav></nav></header><article><h1>達(dá)成更多，用心生活。</h1><p>與全球千萬用戶一起，在D清單中記錄和規(guī)劃大小事務(wù)。<br>

用更少的時間達(dá)成目標(biāo)，從冗雜的待辦事項(xiàng)中解脫出來。</p></article><article><section><h1>使用D清單規(guī)劃好每一天</h1><p>從記錄到管理，D清單能幫你把一切打理得井井有條，你可以充分享受高效生活的樂趣。</p></section><section></section><section><h3>文件夾，清單，任務(wù)和子任務(wù)</h3>

<p>當(dāng)你記錄的事情越來越多，那么合理的組織就尤為重要了。D清單提供了四個層級，你可以根據(jù)任務(wù)的分類進(jìn)行整理，將它們移動到“工作”、“個人”或“家庭”里去。</p>252627282930313233343536373839404142434445464748<h3>標(biāo)簽</h3>

<p>在使用清單分類的基礎(chǔ)上，你還可以為任務(wù)打上標(biāo)簽，用來標(biāo)識“情境”、“狀態(tài)”或其他，以便更加靈活的進(jìn)行篩選。</p><h3>多優(yōu)先級</h3><p>為了保證你將精力花在重要的事情上，D清單提供了四個優(yōu)先級，你可以根據(jù)事情的重要程度進(jìn)行分類。</p><h3>排序</h3><p>D清單共支持6種排序方式，不管是按時間順序查看、還是按重要程度查看，你都能以你希望的方式來排序任務(wù)。</p><h3>統(tǒng)計(jì)</h3><p>你可以查看每周的“完成率”和“最佳工作日”，在“最近已完成”了解近期取得的成果，通過“最佳專注時段”找到注意力最集中的時間段。</p>

<h3>搜索</h3>

溫馨提示

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

評論

0/150

提交評論