上一節(jié)中，3個(gè)村民排列了自家的產(chǎn)品，這回, 其中第一個(gè)村民為了和其他村民競(jìng)爭(zhēng)，給產(chǎn)品加上了圖片。圖形化網(wǎng)頁(yè)列表如代碼1-3所示。

打開記事本，輸入以上代碼，另存文件名為“img.htm"至桌面，雙擊“img.htm”文件，顯示結(jié)果如圖1.5所示。

提示：此時(shí)是看不到圖片的，趕緊上網(wǎng)找?guī)讖埗稀⑽鞴?、南瓜的圖片，然后在桌面新建文件夾“images"，將找到的圖片放入“images’文件夾，重新打開img.htm看看，就能看到了。
網(wǎng)站建設(shè)代碼分析：在網(wǎng)頁(yè)中加入圖片用<img>標(biāo)簽，在本例中，<img>標(biāo)簽有3個(gè)屬性，屬性之間用空格分隔，其中“src"屬性指定圖片的徑，"width"屬性指定圖片的寬度，"height"屬性指定圖片的高度。
自從第一個(gè)村民給冬瓜、西瓜、南瓜加上圖片后，其他村民紛紛效仿，直到后來(lái)每個(gè)人的產(chǎn)品都越來(lái)越多時(shí).一個(gè)頁(yè)面就放不下所有的圖片了。這時(shí)，第蘭個(gè)村民潛心學(xué)習(xí)幾天后，決定進(jìn)行改版，將原有的圖片分離列表頁(yè)，列表僅用于顯示產(chǎn)品的名稱和說明，名稱上加鏈接，單擊名稱就可以看到圖片。
第三個(gè)村民共有4個(gè)頁(yè)面源代碼。打開記事本，輸入代碼1-4，另存文件名為“links.htm"至桌面。

打開記事本，輸入以下代碼，另存文件名為"donggua.htm"至桌面。

打開記事本，輸入以下代碼，另存文件名為“nangua.htm”至桌面。

都保存好后，回到桌面，雙擊"links.htm”文件，瀏覽器顯示結(jié)果如圖1.6所示。
頁(yè)面內(nèi)容中的冬瓜、西瓜和南瓜都有了顏色和下畫線，這說明冬瓜、西瓜和南瓜分別都有一個(gè)鏈接，單擊后會(huì)跳轉(zhuǎn)到另一個(gè)地方。單擊任意一個(gè)鏈接，例如冬瓜，瀏覽器跳轉(zhuǎn)到“donggua.htm"，到達(dá)"donggua.htm"后，還可以單擊“返回列表”鏈接回到“links.htm", 如圖11.7所示。

當(dāng)前文章：網(wǎng)站制作教程之如何創(chuàng)建圖像和鏈接?
網(wǎng)站URL：http://www.aaarwkj.com/news18/233018.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、關(guān)鍵詞優(yōu)化、虛擬主機(jī)、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)