HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作課件：添加宣傳圖片_第1頁(yè)
HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作課件：添加宣傳圖片_第2頁(yè)
HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作課件：添加宣傳圖片_第3頁(yè)
HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作課件：添加宣傳圖片_第4頁(yè)
HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作課件：添加宣傳圖片_第5頁(yè)
已閱讀5頁(yè)，還剩21頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(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àng)目將通過“制作一個(gè)D清單網(wǎng)頁(yè)廣告單頁(yè)”項(xiàng)目，即通過制作一個(gè)HTML頁(yè)面來承載網(wǎng)頁(yè)制作知識(shí)，完成網(wǎng)頁(yè)開發(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)行訪問。前端工程師小王所在的科技公司已經(jīng)拿到了設(shè)計(jì)稿，如圖1所示。主管希望他擔(dān)任本次項(xiàng)目的前端工作，開發(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清單前端開發(fā)甘特圖時(shí)間進(jìn)度任務(wù)制作網(wǎng)頁(yè)內(nèi)容能夠說出適合在網(wǎng)頁(yè)中使用的圖片格式。能夠分辨和應(yīng)用網(wǎng)頁(yè)中的圖片絕對(duì)路徑和相對(duì)路徑。能夠?yàn)镈清單網(wǎng)頁(yè)正確添加圖片并設(shè)置屬性。任務(wù)目標(biāo)

添加宣傳圖片本次任務(wù)要求在基礎(chǔ)上為D清單網(wǎng)頁(yè)添加宣傳圖片。完成后的效果圖如圖1-7所示。任務(wù)描述圖1-7添加宣傳圖片后的網(wǎng)頁(yè)效果截圖

添加宣傳圖片要添加D清單網(wǎng)頁(yè)宣傳圖片，需要：學(xué)習(xí)常見的網(wǎng)頁(yè)圖片格式；學(xué)習(xí)并比較HTML圖片的絕對(duì)路徑和相對(duì)路徑，并正確使用；合理運(yùn)用圖像的屬性。管理網(wǎng)站圖片文件并在頁(yè)面中添加代碼以實(shí)現(xiàn)在D清單網(wǎng)頁(yè)中添加宣傳圖片。任務(wù)分析

添加宣傳圖片任務(wù)分析圖1-7-1D清單網(wǎng)頁(yè)宣傳圖片分析分析D清單效果圖可知宣傳圖片所在位置，如圖1-7-1所示。

添加宣傳圖片知識(shí)與技能準(zhǔn)備各類網(wǎng)站中的圖片不計(jì)其數(shù)，使用主要有三種常用格式的圖片，分別是GIF、JPEG、PNG格式。1、圖像格式圖片格式擴(kuò)展名透明性動(dòng)畫壓縮使用場(chǎng)景GIF.gif全透明、全不透明支持無(wú)損只有256種顏色，適合對(duì)顏色要求不高的圖形JPEG.jpeg或.jpg不支持不支持有損適合web上面的攝影圖片和數(shù)字照相機(jī)中的圖片PNG.png支持alpha透明不支持有損適用于顏色數(shù)量較少的圖像，Android資源推薦使用表1-7-1三種圖片格式對(duì)比知識(shí)與技能準(zhǔn)備網(wǎng)頁(yè)中需要插入圖片，可以使用<img>標(biāo)簽進(jìn)行添加，<img>標(biāo)簽是個(gè)單標(biāo)簽，一般需要搭配src屬性來實(shí)現(xiàn)圖片的鏈接，并且以右斜線“/”結(jié)束。具體格式為：2、圖片標(biāo)簽<img><imgsrc=”圖片文件的地址”/>知識(shí)與技能準(zhǔn)備在上面的圖片標(biāo)簽格式中，src參數(shù)用來設(shè)置圖片文件的地址路徑，該路徑可以是絕對(duì)路徑，也可以是相對(duì)路徑。3、絕對(duì)路徑和相對(duì)路徑3.1絕對(duì)路徑絕對(duì)路徑是指文件在磁盤上真正存在的路徑。例如：“ps.jpg”這個(gè)圖片存放在D盤的images文件夾下，那么該圖片的真正存放路徑為：“D:\images\ps.jpg”。此時(shí)，如果要采用絕對(duì)路徑進(jìn)行鏈接，則鏈接的語(yǔ)句為：<imgsrc=”D:\images\ps.jpg”/>知識(shí)與技能準(zhǔn)備3.2相對(duì)路徑（1）目標(biāo)圖片文件和網(wǎng)頁(yè)在同個(gè)路徑下鏈接的地址可直接寫出圖片的名稱。如：網(wǎng)頁(yè)index.html和圖片ps.jpg放在同一個(gè)文件夾下，則網(wǎng)頁(yè)鏈接圖片的語(yǔ)句為：（2）目標(biāo)圖片文件在網(wǎng)頁(yè)的下N級(jí)路徑鏈接的地址為從網(wǎng)頁(yè)文件開始到目標(biāo)圖片文件的路徑。如圖1-7-2所示，目標(biāo)圖片“ps.jpg”在網(wǎng)頁(yè)文件“index.html”的下2級(jí)路徑，路徑為：”images/bg/ps.jpg”，其網(wǎng)頁(yè)鏈接圖片的語(yǔ)句為：（3）目標(biāo)圖片文件在網(wǎng)頁(yè)的上N級(jí)路徑鏈接的地址為從網(wǎng)頁(yè)文件開始，每返回一級(jí)用一個(gè)“../”表示，返回N級(jí)則用N個(gè)“../”。如圖1-7-3所示，目標(biāo)圖片“ps.jpg”在網(wǎng)頁(yè)文件“index.html”的上2級(jí)路徑，路徑為“../../ps.jpg”，其網(wǎng)頁(yè)鏈接圖片的語(yǔ)句為：<imgsrc=”ps.jpg”/>圖1-7-2相對(duì)路徑-目標(biāo)圖片文件在網(wǎng)頁(yè)的下N級(jí)路徑圖1-7-3相對(duì)路徑-目標(biāo)圖片文件在網(wǎng)頁(yè)的上N級(jí)路徑<imgsrc=”images/bg/ps.jpg”/><imgsrc=”../../ps.jpg”/>課堂練習(xí)1-7-1請(qǐng)寫出下列相對(duì)路徑的地址文件和圖片的絕對(duì)路徑網(wǎng)頁(yè)鏈接語(yǔ)句（相對(duì)路徑）文件：d:\exam\html5\a1.html圖片：d:\exam\html5\ps.jpg

文件：d:\exam\html5\a1.html圖片：d:\exam\html5\images\ps.jpg

文件：d:\exam\html5\a1.html圖片：d:\exam\ps.jpg

文件：d:\exam\html5\mac\a1.html圖片：d:\exam\images\ps.jpg知識(shí)與技能準(zhǔn)備（1）圖片的大小（width屬性和height屬性）在網(wǎng)頁(yè)中默認(rèn)添加圖片時(shí)，圖片是原圖尺寸。但在日常使用時(shí)，往往需要根據(jù)網(wǎng)頁(yè)的需求來調(diào)整圖片的大小。這時(shí)可通過width屬性和height屬性來設(shè)置圖片的寬度和高度。其語(yǔ)法形式如下：4、圖片的屬性<imgsrc=”圖片文件的地址”width=圖片的寬度height=圖片的高度/>打開VisualStudioCode軟件，在<body>標(biāo)簽中輸入如下代碼：課堂練習(xí)1-7-2設(shè)置圖片大小12<imgsrc="images/gg.jpg"width=”450”height=”300”/><imgsrc="images/gg.jpg"width=”180height=”120”/>顯示效果如下：圖1-7-4設(shè)置圖片大小知識(shí)與技能準(zhǔn)備（2）圖片的說明（title屬性）title屬性是對(duì)圖片的文字說明，由用戶自己定義。如果把鼠標(biāo)移動(dòng)到圖片上并停留，title屬性的值就會(huì)以浮動(dòng)的形式顯示出來；在瀏覽器尚未完全讀入圖像時(shí)，在圖像位置處會(huì)顯示該文字說明。其語(yǔ)法形式如下：說明：不同瀏覽器title屬性顯示的效果可能略有不同。4、圖片的屬性<imgsrc=”圖片文件的地址”title=”圖片的說明”>打開VisualStudioCode軟件，在<body>標(biāo)簽中輸入如下代碼：課堂練習(xí)1-7-3設(shè)置圖片title屬性1<imgsrc="gg.jpg"title="故宮的照片">當(dāng)鼠標(biāo)指針經(jīng)過圖片并稍作停留時(shí)，顯示效果如下：圖1-7-5添加圖片title屬性知識(shí)與技能準(zhǔn)備（3）圖片的替換文本（alt屬性）在瀏覽器無(wú)法載入圖像或圖像失效時(shí)，替換文本屬性會(huì)提示讀者她們失去的信息。此時(shí)，瀏覽器將顯示這個(gè)替換文本而不是圖像。這樣有助于網(wǎng)頁(yè)開發(fā)者及時(shí)發(fā)現(xiàn)圖片的問題，從而及時(shí)改正。為頁(yè)面上的圖像全部加上替換文本屬性是個(gè)良好習(xí)慣，因?yàn)檫@樣有助于更好的顯示信息以及后期的維護(hù)。同時(shí)，從搜索引擎的角度上說，alt屬性非常重要，alt屬性的關(guān)鍵字內(nèi)容將作為網(wǎng)頁(yè)權(quán)重的一部分被計(jì)算入內(nèi)。其語(yǔ)法形式如下：4、圖片的屬性<imgsrc=”圖片文件的地址”alt=”圖片的替換文本”>打開VisualStudioCode軟件，在<body>標(biāo)簽中輸入如下代碼：課堂練習(xí)1-7-4設(shè)置圖片替換文本1<imgsrc="gg1.jpg"title="故宮的照片"alt=這里有一張故宮的照片">上面的代碼中，因圖片名稱gg.jpg不小心打錯(cuò)成gg1.jpg，導(dǎo)致圖片鏈接失效，因此無(wú)法正常顯示圖片，取而代之的是圖片的替代文本，如圖1-7-6所示。圖1-7-6添加圖片的替換文本知識(shí)與技能準(zhǔn)備網(wǎng)頁(yè)中使用的圖片不是越多越好，加載圖片是需要時(shí)間的，過多的圖片會(huì)導(dǎo)致網(wǎng)頁(yè)響應(yīng)時(shí)間過長(zhǎng)從而影響閱讀。例如：某個(gè)HTML文件包含二十個(gè)圖像，那么為了正確顯示這個(gè)頁(yè)面，需要加載二十個(gè)文件，這將影響網(wǎng)頁(yè)打開速度。所以我們需要：慎用圖片。5、圖片使用的注意事項(xiàng)任務(wù)實(shí)施1、打開完成的網(wǎng)頁(yè)文件index.html所在目錄，創(chuàng)建一個(gè)img名稱的文件夾，截取效果圖中的logo圖片和宣傳圖片儲(chǔ)存到該目錄，分別命名為logo.png和gn1.png。2、打開網(wǎng)頁(yè)文件index.html，完成logo圖片的添加代碼:3、找到內(nèi)容代碼對(duì)應(yīng)位置完成宣傳圖片的添加：4、完成后運(yùn)行頁(yè)面，測(cè)試圖片是否正常顯示，如不能顯示圖片可重點(diǎn)檢查圖片的鏈接路徑屬性src。12345<header><ahref="#"class='logo'alt="LOGO"><imgsrc="img/logo.png"><

溫馨提示

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

評(píng)論

0/150

提交評(píng)論