HTML5+CSS3網頁設計與制作課件：添加宣傳圖片_第1頁
HTML5+CSS3網頁設計與制作課件：添加宣傳圖片_第2頁
HTML5+CSS3網頁設計與制作課件：添加宣傳圖片_第3頁
HTML5+CSS3網頁設計與制作課件：添加宣傳圖片_第4頁
HTML5+CSS3網頁設計與制作課件：添加宣傳圖片_第5頁
已閱讀5頁，還剩21頁未讀， 繼續免費閱讀

下載本文檔

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

文檔簡介

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

添加宣傳圖片本次任務要求在基礎上為D清單網頁添加宣傳圖片。完成后的效果圖如圖1-7所示。任務描述圖1-7添加宣傳圖片后的網頁效果截圖

添加宣傳圖片要添加D清單網頁宣傳圖片，需要：學習常見的網頁圖片格式；學習并比較HTML圖片的絕對路徑和相對路徑，并正確使用；合理運用圖像的屬性。管理網站圖片文件并在頁面中添加代碼以實現在D清單網頁中添加宣傳圖片。任務分析

添加宣傳圖片任務分析圖1-7-1D清單網頁宣傳圖片分析分析D清單效果圖可知宣傳圖片所在位置，如圖1-7-1所示。

添加宣傳圖片知識與技能準備各類網站中的圖片不計其數，使用主要有三種常用格式的圖片，分別是GIF、JPEG、PNG格式。1、圖像格式圖片格式擴展名透明性動畫壓縮使用場景GIF.gif全透明、全不透明支持無損只有256種顏色，適合對顏色要求不高的圖形JPEG.jpeg或.jpg不支持不支持有損適合web上面的攝影圖片和數字照相機中的圖片PNG.png支持alpha透明不支持有損適用于顏色數量較少的圖像，Android資源推薦使用表1-7-1三種圖片格式對比知識與技能準備網頁中需要插入圖片，可以使用<img>標簽進行添加，<img>標簽是個單標簽，一般需要搭配src屬性來實現圖片的鏈接，并且以右斜線“/”結束。具體格式為：2、圖片標簽<img><imgsrc=”圖片文件的地址”/>知識與技能準備在上面的圖片標簽格式中，src參數用來設置圖片文件的地址路徑，該路徑可以是絕對路徑，也可以是相對路徑。3、絕對路徑和相對路徑3.1絕對路徑絕對路徑是指文件在磁盤上真正存在的路徑。例如：“ps.jpg”這個圖片存放在D盤的images文件夾下，那么該圖片的真正存放路徑為：“D:\images\ps.jpg”。此時，如果要采用絕對路徑進行鏈接，則鏈接的語句為：<imgsrc=”D:\images\ps.jpg”/>知識與技能準備3.2相對路徑（1）目標圖片文件和網頁在同個路徑下鏈接的地址可直接寫出圖片的名稱。如：網頁index.html和圖片ps.jpg放在同一個文件夾下，則網頁鏈接圖片的語句為：（2）目標圖片文件在網頁的下N級路徑鏈接的地址為從網頁文件開始到目標圖片文件的路徑。如圖1-7-2所示，目標圖片“ps.jpg”在網頁文件“index.html”的下2級路徑，路徑為：”images/bg/ps.jpg”，其網頁鏈接圖片的語句為：（3）目標圖片文件在網頁的上N級路徑鏈接的地址為從網頁文件開始，每返回一級用一個“../”表示，返回N級則用N個“../”。如圖1-7-3所示，目標圖片“ps.jpg”在網頁文件“index.html”的上2級路徑，路徑為“../../ps.jpg”，其網頁鏈接圖片的語句為：<imgsrc=”ps.jpg”/>圖1-7-2相對路徑-目標圖片文件在網頁的下N級路徑圖1-7-3相對路徑-目標圖片文件在網頁的上N級路徑<imgsrc=”images/bg/ps.jpg”/><imgsrc=”../../ps.jpg”/>課堂練習1-7-1請寫出下列相對路徑的地址文件和圖片的絕對路徑網頁鏈接語句（相對路徑）文件：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知識與技能準備（1）圖片的大小（width屬性和height屬性）在網頁中默認添加圖片時，圖片是原圖尺寸。但在日常使用時，往往需要根據網頁的需求來調整圖片的大小。這時可通過width屬性和height屬性來設置圖片的寬度和高度。其語法形式如下：4、圖片的屬性<imgsrc=”圖片文件的地址”width=圖片的寬度height=圖片的高度/>打開VisualStudioCode軟件，在<body>標簽中輸入如下代碼：課堂練習1-7-2設置圖片大小12<imgsrc="images/gg.jpg"width=”450”height=”300”/><imgsrc="images/gg.jpg"width=”180height=”120”/>顯示效果如下：圖1-7-4設置圖片大小知識與技能準備（2）圖片的說明（title屬性）title屬性是對圖片的文字說明，由用戶自己定義。如果把鼠標移動到圖片上并停留，title屬性的值就會以浮動的形式顯示出來；在瀏覽器尚未完全讀入圖像時，在圖像位置處會顯示該文字說明。其語法形式如下：說明：不同瀏覽器title屬性顯示的效果可能略有不同。4、圖片的屬性<imgsrc=”圖片文件的地址”title=”圖片的說明”>打開VisualStudioCode軟件，在<body>標簽中輸入如下代碼：課堂練習1-7-3設置圖片title屬性1<imgsrc="gg.jpg"title="故宮的照片">當鼠標指針經過圖片并稍作停留時，顯示效果如下：圖1-7-5添加圖片title屬性知識與技能準備（3）圖片的替換文本（alt屬性）在瀏覽器無法載入圖像或圖像失效時，替換文本屬性會提示讀者她們失去的信息。此時，瀏覽器將顯示這個替換文本而不是圖像。這樣有助于網頁開發者及時發現圖片的問題，從而及時改正。為頁面上的圖像全部加上替換文本屬性是個良好習慣，因為這樣有助于更好的顯示信息以及后期的維護。同時，從搜索引擎的角度上說，alt屬性非常重要，alt屬性的關鍵字內容將作為網頁權重的一部分被計算入內。其語法形式如下：4、圖片的屬性<imgsrc=”圖片文件的地址”alt=”圖片的替換文本”>打開VisualStudioCode軟件，在<body>標簽中輸入如下代碼：課堂練習1-7-4設置圖片替換文本1<imgsrc="gg1.jpg"title="故宮的照片"alt=這里有一張故宮的照片">上面的代碼中，因圖片名稱gg.jpg不小心打錯成gg1.jpg，導致圖片鏈接失效，因此無法正常顯示圖片，取而代之的是圖片的替代文本，如圖1-7-6所示。圖1-7-6添加圖片的替換文本知識與技能準備網頁中使用的圖片不是越多越好，加載圖片是需要時間的，過多的圖片會導致網頁響應時間過長從而影響閱讀。例如：某個HTML文件包含二十個圖像，那么為了正確顯示這個頁面，需要加載二十個文件，這將影響網頁打開速度。所以我們需要：慎用圖片。5、圖片使用的注意事項任務實施1、打開完成的網頁文件index.html所在目錄，創建一個img名稱的文件夾，截取效果圖中的logo圖片和宣傳圖片儲存到該目錄，分別命名為logo.png和gn1.png。2、打開網頁文件index.html，完成logo圖片的添加代碼:3、找到內容代碼對應位置完成宣傳圖片的添加：4、完成后運行頁面，測試圖片是否正常顯示，如不能顯示圖片可重點檢查圖片的鏈接路徑屬性src。12345<header><ahref="#"class='logo'alt="LOGO"><imgsrc="img/logo.png"><

溫馨提示

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

評論

0/150

提交評論