網站制作教程之如何創建圖像和鏈接?
上一節中,3個村民排列了自家的產品,這回, 其中第一個村民為了和其他村民競爭,給產品加上了圖片。圖形化網頁列表如代碼1-3所示。
打開記事本,輸入以上代碼,另存文件名為“img.htm"至桌面,雙擊“img.htm”文件,顯示結果如圖1.5所示。
提示:此時是看不到圖片的,趕緊上網找幾張冬瓜、西瓜、南瓜的圖片,然后在桌面新建文件夾“images",將找到的圖片放入“images’文件夾,重新打開img.htm看看,就能看到了。
網站建設代碼分析:在網頁中加入圖片用<img>標簽,在本例中,<img>標簽有3個屬性,屬性之間用空格分隔,其中“src"屬性指定圖片的徑,"width"屬性指定圖片的寬度,"height"屬性指定圖片的高度。
自從第一個村民給冬瓜、西瓜、南瓜加上圖片后,其他村民紛紛效仿,直到后來每個人的產品都越來越多時.一個頁面就放不下所有的圖片了。這時,第蘭個村民潛心學習幾天后,決定進行改版,將原有的圖片分離列表頁,列表僅用于顯示產品的名稱和說明,名稱上加鏈接,單擊名稱就可以看到圖片。
第三個村民共有4個頁面源代碼。打開記事本,輸入代碼1-4,另存文件名為“links.htm"至桌面。
打開記事本,輸入以下代碼,另存文件名為"donggua.htm"至桌面。
打開記事本,輸入以下代碼,另存文件名為“nangua.htm”至桌面。
都保存好后,回到桌面,雙擊"links.htm”文件,瀏覽器顯示結果如圖1.6所示。
頁面內容中的冬瓜、西瓜和南瓜都有了顏色和下畫線,這說明冬瓜、西瓜和南瓜分別都有一個鏈接,單擊后會跳轉到另一個地方。單擊任意一個鏈接,例如冬瓜,瀏覽器跳轉到“donggua.htm",到達"donggua.htm"后,還可以單擊“返回列表”鏈接回到“links.htm", 如圖11.7所示。
推薦新聞
更多行業-
查看域名是否解析的方法有哪些?
如何查看域名是否已經解析:1.開始-運行- cmd2.ping + 域...
2018-08-10 -
移動WAP網站制作教程全攻略
WAP(wml)開發教程WAP(無線應用協議)是在數字移動電話、因特網...
2015-04-30 -
互聯網是如何在中國發展的
1987年9月20日,錢天自教授發出我國第一封電子郵件“越...
2012-08-23 -
網站優化常見的問題有哪些?
1、網站每天更新,可是百度快照卻不更新并不是你更新了,快照就一定會走的...
2018-08-13 -
網絡證券交易的概念
所謂網絡證券交易.是指投資者利用互聯網網絡資源.包括公用互聯網、局域網...
2014-09-26 -
網站建設公司教你網站標題優化技巧
可以寫成:濟南SEO-**SEO技能教程博客,標題可以簡短,讓用戶記住...
2021-04-02
預約專業咨詢顧問溝通!
免責聲明
非常感謝您訪問我們的網站。在您使用本網站之前,請您仔細閱讀本聲明的所有條款。
1、本站部分內容來源自網絡,涉及到的部分文章和圖片版權屬于原作者,本站轉載僅供大家學習和交流,切勿用于任何商業活動。
2、本站不承擔用戶因使用這些資源對自己和他人造成任何形式的損失或傷害。
3、本聲明未涉及的問題參見國家有關法律法規,當本聲明與國家法律法規沖突時,以國家法律法規為準。
4、如果侵害了您的合法權益,請您及時與我們,我們會在第一時間刪除相關內容!
聯系方式:010-60259772
電子郵件:394588593@qq.com