上一節(jié)，3位村民布置了自己的產(chǎn)品。這一次，第一個(gè)村民為了與其他村民競爭，給產(chǎn)品加上了圖片。圖形網(wǎng)頁列表如代碼1-3所示。

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

提示：此時(shí)看不到圖片，趕快在網(wǎng)上找一些冬瓜、西瓜、南瓜的圖片，然后在桌面新建一個(gè)文件夾“images”，把找到的圖片放到“images”里文件夾，然后重新打開img。 htm 看看，你可以看看。建站代碼分析：給網(wǎng)頁添加圖片使用img標(biāo)簽。在本例中，img 標(biāo)簽有3 個(gè)屬性，以空格分隔。 “src”屬性指定圖片的路徑，“width”屬性指定圖片的寬度。寬度，'height'屬性指定圖像的高度。

自從第一個(gè)村民貼上了冬瓜、西瓜、南瓜的圖片，其他村民就紛紛效仿，直到每個(gè)人的產(chǎn)品越來越多。一頁放不下所有圖片。這時(shí)，第一個(gè)村民研究了幾天，決定修改版本。原圖與列表頁分離。列表僅用于顯示產(chǎn)品的名稱和描述，并在名稱中添加鏈接。單擊名稱可查看圖片。

第三個(gè)村民共有4頁源代碼。打開記事本，輸入代碼1-4，將文件另存為“l(fā)inks.htm”到桌面。

打開記事本，輸入以下代碼，將文件命名為'donggua.htm'保存到桌面。

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

全部保存后，回到桌面，雙擊“l(fā)inks.htm”文件，瀏覽器顯示結(jié)果如圖1.6。

頁面內(nèi)容中的冬瓜、西瓜、南瓜都是帶顏色加下劃線的，表示冬瓜、西瓜、南瓜各有一個(gè)鏈接，點(diǎn)擊后會(huì)跳轉(zhuǎn)到另一個(gè)地方。點(diǎn)擊任意鏈接，如冬瓜，瀏覽器會(huì)跳轉(zhuǎn)到“donggua.htm”，到達(dá)“donggua.htm”后，也可以點(diǎn)擊“返回列表”鏈接返回“l(fā)inks.htm”，如如圖11.7所示。

營銷型網(wǎng)站建設(shè)代碼分析：從一個(gè)頁面跳轉(zhuǎn)到另一個(gè)頁面，可以使用鏈接標(biāo)簽a。在此示例中，a 標(biāo)記具有屬性“href”以指定要訪問的頁面。有了鏈接，就不用每次都在瀏覽器地址欄輸入地址，直接點(diǎn)擊鏈接就可以到達(dá)想去的地方，就像現(xiàn)在人們使用的互聯(lián)網(wǎng)一樣，一個(gè)網(wǎng)站鏈接到另一個(gè)網(wǎng)站網(wǎng)站，另一個(gè)網(wǎng)站鏈接到另一個(gè)網(wǎng)站。其他網(wǎng)站最終形成了一個(gè)規(guī)模不詳?shù)木W(wǎng)絡(luò)。

我們專注高端建站，小程序開發(fā)、軟件系統(tǒng)定制開發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開發(fā)、各類API接口對接開發(fā)等。十余年開發(fā)經(jīng)驗(yàn)，每一個(gè)項(xiàng)目承諾做到滿意為止，多一次對比，一定讓您多一份收獲！