商務網頁設計與制作（第2版）課件 第4課 圖像設置方法_第1頁
商務網頁設計與制作（第2版）課件 第4課 圖像設置方法_第2頁
商務網頁設計與制作（第2版）課件 第4課 圖像設置方法_第3頁
商務網頁設計與制作（第2版）課件 第4課 圖像設置方法_第4頁
商務網頁設計與制作（第2版）課件 第4課 圖像設置方法_第5頁
已閱讀5頁，還剩8頁未讀， 繼續免費閱讀

下載本文檔

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

文檔簡介

第3章 HTML網頁制作技術3.4圖像設置方法3.4.1圖像文件的存儲管理3.4.2圖像引用3.4圖像設置方法網頁中，文本是直接存放在（寫進）網頁源文件中的，圖像、多媒體等文檔則不能直接存放在網頁源文件中，需要以獨立文件行形式存儲，通過標簽來引用。3.4.1圖像文件的存儲管理網站通常有很多圖像文件，需要對這些圖像文件進行有效的管理。一是起好文件名稱。文件名稱應當有助于理解圖片內容，言簡意賅。二是規劃好圖像文件存儲目錄。圖像文件應當獨立保存在一個目錄下，與網站文件整體存儲目錄結構保持一致。優點：一是利于模塊化設計。每個模塊的功能相對獨立，其關聯的文件也能集中存放在一起，可以獨立進行模塊化設計制作。二是利于團隊協作。大型網站往往需要一個團隊共同制作，這種模塊化、結構化的目錄體系使得團隊溝通協調更高效、模塊組合、集成更高效。三是利于后期運維。模塊化、結構化的文件存儲目錄，利于后期網站運維，提高運維效率。3.4.2圖像引用在網頁中引用圖像，很多時候都是指在網頁中嵌入圖像，在生成網頁時直接將圖像嵌入在網頁中，作為該網頁的組成部分一同顯示。也有其他使用圖像的場景（如在新窗口打開圖像、下載圖像等），本節所說的引用圖像，都是指嵌入圖像。嵌入圖像必須知道圖像的存儲路徑，必須保證引用圖像文件的路徑是正確的，否則會造成圖像引用失敗無法正常顯示。在HTML中，引用文件（包括圖像文件）的路徑包括絕對路徑和相對路徑兩種方式。絕對路徑是指文件存儲在計算機存儲目錄下的絕對位置，也就是直接到達目標的位置，通常是從盤符開始的路徑；相對路徑是指從當前位置到達目標文件的路徑，是相對于當前位置而言的。例如：圖像文件“logo.jpg”存儲在D盤中school路徑下的wuliu子路徑下，則其絕對路徑為“D:/school/wuliu/logo.jpg”。如果當前路徑為“D:/school”，則引用“logo.jpg”的相對路徑為“wuliu/logo.jpg”；如果當前路徑為“D:”，則引用“logo.jpg”的相對路徑為：“school/wuliu/logo.jpg”；如果當前路徑為“D:/school/wuliu”，則引用“logo.jpg”的相對路徑為：“logo.jpg”。引用文件通常都使用相對路徑，利于模塊化設計和源文件遷移（例如：更換開發機器、發布網站等都會引起源文件的位置遷移）。引用本網站之外的文件，才需要考慮絕對路徑方式。在HTML中引用文件時，使用“/”符號表示路徑，有的系統和語言使用“\”表示路徑。1．相對路徑引用在HTML中，當前目錄用“./”表示。如果省略路徑，也指當前路徑，與使用“./”效果相同；上級路徑用“../”表示，再上級路徑用“../../”表示，以此類推；下級路徑用“./路徑名/圖像實例文件名”表示，再下級路徑同樣也要寫清楚路徑名稱，如“./下一級路徑名稱/下二級路徑名稱/圖像實例文件名稱”，以此類推。如何判斷當前路徑？以當前網頁源文件所在路徑位置為當前路徑。<html><head><title>當前路徑</title></head><body><h1align="center">圖像引用示例</h1><fontcolor="black"face="宋體"size=5>

這是云之雷企業Logo</font><br><imgsrc="sdlogo.png"/><imgsrc="./sdlogo.png"/></body></html>（1）引用當前目錄下的文件，引用方法為

<imgsrc="圖像實例文件名"/>或<imgsrc="./圖像實例文件名"/>其中，“./”表示當前路徑。如果未指明“./”也表示從當前路徑開始。<html><head><title>下級路徑</title></head><body><h1align="center">

圖像引用示例

</h1><imgsrc="book/book1.jpg"/><imgsrc="./book/book3.jpg"/></body></html>（2）引用下級目錄下的圖像文件，需要直接標明下級目錄，引用方法為<imgsrc="images/圖像實例文件名"/>或<imgsrc="./images/圖像實例文件名"/>其中，“images”是下級目錄的名稱，在實際引用圖像時應當根據實際的目錄名稱來寫。<html><head><title>上級路徑</title></head><body><h1align="center">圖像引用示例</h1><imgsrc="../computer2.jpg"/></body></html>（3）引用上級目錄下的圖像文件，引用方法為<imgsrc="../圖像實例文件名"/>其中，“../”表示上級路徑，“../../”表示上兩級路徑，以此類推。（4）引用上兩級目錄下的子目錄images中的文件，引用方法為<imgsrc="../../images/圖像實例文件名"/>2．絕對路徑引用引用絕對路徑方式不提倡使用，除非是必須使用絕對路徑的場景。引用絕對路徑的方法為<imgsrc="絕對路徑/圖像實例文件名"/>其中，src的路徑必須為完整的儲存路徑。假定banji.jpg文件存儲在D:/school/class路徑下，則引用該圖像絕對路徑的代碼為<imgsrc="file://D:/school/class/banji.jpg"/>其中，“file://”為目標機器地址，本例中為本客戶機的地址，故采用“file://”形式表示，如果為互聯網地址，可以表示為“”“11”等。以上我們介紹了幾種文件引用的方法，引用文件必須表達好文件路徑和文件名稱。為了簡化書寫表達，本教材中后面凡是提到“文件名”的，均指包括了引用該文件的路徑和名稱，即“引用路徑+文件名”。課堂練習：在D盤上建立tree1\tree2\tree3路徑，分別在tree1、tree2、tree3路徑下存放pic1.jpg、pic2.jpg、pic3.jpg圖像文件（圖像可從互聯網上獲取，另存為相應的文件名即可）。1.編寫網頁源文件web1.html，保存在tree2路徑下，采用相對路徑引用的方式，分別引用pic1.jpg、pic2.jpg、pic3.jpg。2.編寫網頁源文

溫馨提示

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

評論

0/150

提交評論