《網(wǎng)頁設(shè)計制作》課件-項目2

《網(wǎng)頁設(shè)計制作》項目22.1圖像標(biāo)簽2.2超級鏈接標(biāo)簽2.3列表標(biāo)簽?zāi)?/p>

錄【任務(wù)目標(biāo)】1.

掌握圖像標(biāo)簽的寫法2.

熟悉圖像格式及用法3.

了解圖像存儲方法4.

掌握圖像路徑原理2.1圖像標(biāo)簽2.1.1圖像格式2.1.1圖像格式網(wǎng)頁中常用圖像格式及用途如下圖像格式即圖像文件存放的格式，通常有JPEG、TIFF、RAW、BMP、GIF、PNG等圖像格式特點用途是否透明是否動畫JPG/JPEG通過有損壓縮來減少圖片的大小使用真彩色或平滑過渡式的照片和圖片否否GIF通過無損壓縮來減少圖片大小，最多只能支持256色線條圖（如最多含有256色）的剪貼畫以及使用大塊純色的圖片是是PNG無損壓縮來減少圖片大小，保留圖片中的透明區(qū)域，文件略大，有的Web瀏覽器不支持任何類型，任何顏色深度的圖片是是小圖片一般使用GIF或PNG-8，半透明圖一般使用PNG-24，照片等色彩豐富大圖一般使用JPG。2.1.2圖片標(biāo)簽2.1.2圖片標(biāo)簽圖片標(biāo)簽及常用屬性——單標(biāo)簽<imgsrc=""width=""height=""alt=""border=""

align=""

vspace=""

hspace=""title=""/>屬性用途src圖片路徑，站內(nèi)圖片一般放在img文件夾內(nèi)width圖片寬度，可以修改，但如果任意改大，或者不等比修改，會讓圖片變形height圖片高度，與寬度屬性類似alt圖片文字描述，在圖片不能顯示時會以文字形式描述圖片border圖片邊框，設(shè)置圖片邊框及寬度，顏色默認為黑色，需要使用CSS才能修改邊框顏色align圖片對齊，調(diào)整圖像位置vspace垂直邊距，圖片與其他內(nèi)容垂直方向距離hspace水平邊距，圖片與其他內(nèi)容水平方向距離title提示文字，鼠標(biāo)懸停在圖片上時的提示文字2.1.2圖片標(biāo)簽舉例：代碼效果如下圖圖片路徑圖片寬度（等比修改尺寸）文字描述左對齊垂直邊距5像素水平邊距5像素2.1.３圖片路徑2.1.3圖片路徑一、路徑分類絕對路徑：目錄（域名）的文件的完整路徑。目錄路徑：“D:\網(wǎng)頁設(shè)計制作\第二章\img\logo.gif”完整的網(wǎng)絡(luò)地址：“/images/logo.gif”。相對路徑：HTML網(wǎng)頁文件與目標(biāo)文件（圖片或者其他文件）層級關(guān)系。注意：站內(nèi)圖片路徑一般使用相對路徑。2.1.3圖片路徑二、相對路徑的設(shè)置分類圖像文件和html文件位于同一文件夾：只需輸入圖像文件的名稱即可，如<imgsrc=“l(fā)ogo.gif”/>。圖像文件位于html文件的下一級文件夾：輸入文件夾名和文件名，之間用“/”隔開，如<imgsrc="img/img01/logo.gif"/>。圖像文件位于html文件的上一級文件夾：在文件名之前加入“../”，如果是上兩級，則需要使用“../../”，以此類推，如<imgsrc="../logo.gif"/>。2.1圖像標(biāo)簽2.2超級鏈接標(biāo)簽2.3列表標(biāo)簽?zāi)?/p>

錄【任務(wù)目標(biāo)】1.

掌握圖像標(biāo)簽的寫法2.

熟悉圖像格式及用法3.

了解圖像存儲方法4.

掌握圖像路徑原理2.1圖像標(biāo)簽2.1.1圖像格式2.1.1圖像格式網(wǎng)頁中常用圖像格式及用途如下圖像格式即圖像文件存放的格式，通常有JPEG、TIFF、RAW、BMP、GIF、PNG等圖像格式特點用途是否透明是否動畫JPG/JPEG通過有損壓縮來減少圖片的大小使用真彩色或平滑過渡式的照片和圖片否否GIF通過無損壓縮來減少圖片大小，最多只能支持256色線條圖（如最多含有256色）的剪貼畫以及使用大塊純色的圖片是是PNG無損壓縮來減少圖片大小，保留圖片中的透明區(qū)域，文件略大，有的Web瀏覽器不支持任何類型，任何顏色深度的圖片是是小圖片一般使用GIF或PNG-8，半透明圖一般使用PNG-24，照片等色彩豐富大圖一般使用JPG。2.1.2圖片標(biāo)簽2.1.2圖片標(biāo)簽圖片標(biāo)簽及常用屬性——單標(biāo)簽<imgsrc=""width=""height=""alt=""border=""

align=""

vspace=""

hspace=""title=""/>屬性用途src圖片路徑，站內(nèi)圖片一般放在img文件夾內(nèi)width圖片寬度，可以修改，但如果任意改大，或者不等比修改，會讓圖片變形height圖片高度，與寬度屬性類似alt圖片文字描述，在圖片不能顯示時會以文字形式描述圖片border圖片邊框，設(shè)置圖片邊框及寬度，顏色默認為黑色，需要使用CSS才能修改邊框顏色align圖片對齊，調(diào)整圖像位置vspace垂直邊距，圖片與其他內(nèi)容垂直方向距離hspace水平邊距，圖片與其他內(nèi)容水平方向距離title提示文字，鼠標(biāo)懸停在圖片上時的提示文字2.1.2圖片標(biāo)簽舉例：代碼效果如下圖圖片路徑圖片寬度（等比修改尺寸）文字描述左對齊垂直邊距5像素水平邊距5像素2.1.３圖片路徑2.1.3圖片路徑一、路徑分類絕對路徑：目錄（域名）的文件的完整路徑。目錄路徑：“D:\網(wǎng)頁設(shè)計制作\第二章\img\logo.gif”完整的網(wǎng)絡(luò)地址：“/images/logo.gif”。相對路徑：HTML網(wǎng)頁文件與目標(biāo)文件（圖片或者其他文件）層級關(guān)系。注意：站內(nèi)圖片路徑一般使用相對路徑。2.1.3圖片路徑二、相對路徑的設(shè)置分類圖像文件和html文件位于同一文件夾：只需輸入圖像文件的名稱即可，如<imgsrc=“l(fā)ogo.gif”/>。圖像文件位于html文件的下一級文件夾：輸入文件夾名和文件名，之間用“/”隔開，如<imgsrc="img/img01/logo.gif"/>。圖像文件位于html文件的上一級文件夾：在文件名之前加入“../”，如果是上兩級，則需要使用“../../”，以此類推，如<imgsrc="../logo.gif"/>。2.1圖像標(biāo)簽2.2超級鏈接標(biāo)簽2.3列表標(biāo)簽?zāi)?/p>

錄【任務(wù)目標(biāo)】1.

掌握超級鏈接標(biāo)簽的寫法2.

掌握超級鏈接href屬性3.

掌握超級鏈接target屬性4.

掌握路徑的含義及用法2.2超級鏈接標(biāo)簽2.2超鏈接標(biāo)簽一個網(wǎng)站通常由多個頁面構(gòu)成，進入網(wǎng)站時首先看到的是其首頁。列表頁內(nèi)容頁……首頁通過超鏈接，實現(xiàn)頁面之間的跳轉(zhuǎn)2.2超鏈接標(biāo)簽創(chuàng)建超鏈接如何創(chuàng)建超鏈接？在HTML中創(chuàng)建超鏈接非常簡單，只需用<a></a>標(biāo)簽環(huán)繞需要被鏈接的對象即可。<ahref="跳轉(zhuǎn)目標(biāo)"target="目標(biāo)窗口的彈出方式">

文本或圖像</a>基本語法格式2.2超鏈接標(biāo)簽對超鏈接標(biāo)簽的常用屬性解釋如下：href用于指定鏈接目標(biāo)的url地址，當(dāng)為<a>標(biāo)簽應(yīng)用href屬性時，它就具有了超鏈接的功能。target用于指定鏈接頁面的打開方式，其取值有_self和_blank兩種，其中_self為默認值，意為在原窗口中打開，_blank為在新窗口中打開。創(chuàng)建超鏈接2.2超鏈接標(biāo)簽多學(xué)一招：圖像超鏈接出現(xiàn)邊框解決辦法創(chuàng)建圖像超鏈接時，在某些瀏覽中，圖像會自動添加邊框效果，影響頁面的美觀。去掉邊框最直接的方法是將邊框設(shè)置為0【總結(jié)】<ahref="#"><imgsrc="圖像URL"border="0"/></a>2.2超鏈接標(biāo)簽錨點鏈接如果網(wǎng)頁內(nèi)容較多，頁面過長。瀏覽網(wǎng)頁時就需要不斷地拖動滾動條，來查看所需要的內(nèi)容。效率較低不方便2.2超鏈接標(biāo)簽為了提高信息的檢索