HTML5+CSS3網頁設計與制作課件：添加超鏈接_第1頁
HTML5+CSS3網頁設計與制作課件：添加超鏈接_第2頁
HTML5+CSS3網頁設計與制作課件：添加超鏈接_第3頁
HTML5+CSS3網頁設計與制作課件：添加超鏈接_第4頁
HTML5+CSS3網頁設計與制作課件：添加超鏈接_第5頁
已閱讀5頁，還剩21頁未讀， 繼續免費閱讀

下載本文檔

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

文檔簡介

HTML5+CSS3網頁設計與制作添加超鏈接項目將通過“制作一個D清單網頁廣告單頁”項目，即通過制作一個HTML頁面來承載網頁制作知識，完成網頁開發環境搭建、HTML5標簽、CSS3疊層樣式和響應式布局等的學習。項目目標D清單是某公司推出的一款跨平臺同步的待辦事項和任務提醒軟件,旨在協助您完成待辦事務比如生日提醒,旅行安排,會議準備等以便更好的進行時間和事項管理。為了方便D清單應用的推廣，其公司需要制作一個該應用產品的介紹網頁。該頁面主要用于手機端進行分享推廣，同時也要求能夠在電腦端進行訪問。前端工程師小王所在的科技公司已經拿到了設計稿，如圖1所示。主管希望他擔任本次項目的前端工作，開發完成后將成果交付給程序員完成邏輯制作、測試和發布。項目情境圖1-1-1項目移動端和電腦端頁面截圖網頁制作的一般流程如下：項目分析項目發布需求分析規劃設計實施測試交付根據“移動優先”原則，我們需要制定項目完成的計劃：項目分析時間段1時間段2時間段3時間段4時間段5分析規劃實施階段1移動端內容制作階段2移動端格式制作階段3響應式制作測試與交付D清單前端開發甘特圖時間進度任務制作網頁內容能夠表述超鏈接的兩種常見用法。能夠識別和編寫網頁中的超鏈接。能夠應用不同的超鏈接方式完成D清單網頁菜單欄等內容的超鏈接制作。任務目標

添加超鏈接本次任務要求分析D清單網頁中超鏈接內容，在的基礎上添加D清單網頁的超鏈接。完成后的部分效果圖如圖1-5所示。任務描述圖1-5添加超鏈接后的網頁效果圖

添加超鏈接要完成D清單網頁中超鏈接的制作，需要：學習HTML超鏈接標簽的用法、語法；學習HTML超鏈接標簽的href、name、target屬性；分析D清單頁面中的超鏈接內容，正確運用超鏈接標簽完成D清單網頁中的超鏈接制作。D清單網頁效果圖的超鏈接內容分析，如圖1-5-1所示（紅色框部分），包括菜單欄超鏈接、按鈕超鏈接、下載文件超鏈接等內容。任務分析

添加超鏈接任務分析圖1-5-1D清單網頁效果中的超鏈接內容分析

添加超鏈接知識與技能準備超鏈接標簽<a>的兩種使用方式：使用href屬性創建指向另一個文檔的鏈接來跳轉到新的文檔。使用name屬性創建文檔內的書簽來跳轉到文檔中的某個部分。1、超鏈接的用法網頁中使用超級鏈接來跳轉到新的文檔或者當前文檔中的某個部分。這個目標可以是另一個網頁，也可以是相同網頁上的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序。當您把鼠標指針移動到網頁中的某個鏈接上時，箭頭會變為一只小手。知識與技能準備超鏈接標簽<a>是給文本內容加修飾標簽，添加后默認鏈接樣式為藍色文字，有下劃線。其語法形式如下：2、超鏈接的語法<ahref=”鏈接地址”>超鏈接文本內容</a>知識與技能準備href屬性的值可以是任何有效文檔的相對或絕對URL。（1）絕對URL絕對URL是一般指向另一個站點。這種方式通常用于鏈接文檔的位置與目前瀏覽的網頁位于不同的服務器。（2）相對URL相對URL是指向站點內的某個文件。（3）錨URL錨URL是指向頁面中的錨點。錨點能完成頁面的跳轉。3、超鏈接的href屬性打開VisualStudioCode軟件，在<body>標簽中輸入如下代碼：課堂練習1-5-1給文字添加超鏈接1234<p><ahref="test.html">本相對鏈接</a>是一個指向本網站中的一個頁面的鏈接。</p><p><ahref="

">本絕對鏈接</a>是一個指向萬維網上的頁面的鏈接。</p>顯示效果如下：課堂練習1-5-1給文字添加超鏈接圖1-5-2給文字添加超鏈接知識與技能準備name屬性規定錨的名稱。有些HTML頁面中會有書簽，在網頁中稱為錨點，命名錨有兩個方法，分別是：（1）name命名錨（2）id命名錨id屬性相當于在文檔中放置了一個標識，而href屬性就可以直接鏈接到這個標識中。注意：錨的名稱是由用戶自行命名的，但是要注意錨點名稱不能使用數字開頭，要使用英文開頭。4、超鏈接的name屬性<aname=”錨點名稱”>錨點所在位置文字</a><aid=”錨點名稱”>錨點所在位置文字</a>打開VisualStudioCode軟件，在<body>標簽中輸入如下代碼：課堂練習1-5-2為頁面添加錨點1234567891011121314151617<p><aid="top">唐詩三百首</a></p><p><a>出塞</a></p><p><a>春曉</a></p><p><a>尋隱者不遇</a></p><p><aname="sec1">《出塞》</a></p><h5>[唐]王昌齡</h5><p>秦時明月漢時關，萬里長征人未還。</p><p>但使龍城飛將在，不教胡馬度陰山。</p><p><aname="sec2">《春曉》</a></p><h5>[唐]孟浩然</h5><p>春眠不覺曉，處處聞啼鳥。</p><p>夜來風雨聲，花落知多少。</p><p><aname="sec3">《尋隱者不遇》</a></p><h5>[唐]賈島</h5><p>松下問童子，言師采藥去。</p><p>只在此山中，云深不知處。</p><p><a>回到頂部</a></p>顯示效果如下：課堂練習1-5-2為頁面添加錨點圖1-5-3為頁面添加錨點從圖1-5-3中可以看到加入錨點后頁面中是沒有任何變化的，而且書簽要實現跳轉就要配合href屬性一起使用，要在href屬性中指定對應的錨點名稱，并在名稱前加一個“#”符號。打開課堂練習1-5-2的代碼，在<body>標簽中輸入如下代碼：課堂練習1-5-3在練習1.5-2基礎上修改代碼實現錨點的跳轉1234567891011121314151617<p><aid="top">唐詩三百首</a></p><p><ahref="#sec1">出塞</a></p><p><ahref="#sec2">春曉</a></p><p><ahref="#sec3">尋隱者不遇</a></p><p><aname="sec1">《出塞》</a></p><h5>[唐]王昌齡</h5><p>秦時明月漢時關，萬里長征人未還。</p><p>但使龍城飛將在，不教胡馬度陰山。</p><p><aname="sec2">《春曉》</a></p><h5>[唐]孟浩然</h5><p>春眠不覺曉，處處聞啼鳥。</p><p>夜來風雨聲，花落知多少。</p><p><aname="sec3">《尋隱者不遇》</a></p><h5>[唐]賈島</h5><p>松下問童子，言師采藥去。</p><p>只在此山中，云深不知處。</p><p><ahref="#top">回到頂部</a></p>顯示效果如下：課堂練習1-5-2為頁面添加錨點圖1-5-4為頁面添加錨點知識與技能準備如果不使用href屬性，則不可以使用target如屬性，target屬性是讓用戶定義被鏈接的文檔在何處顯示的。默認情況下，超鏈接打開的新頁面的方式是在當前頁面打開，用戶也可自行修改打開方式，其語法形式如下：5、target屬性<ahref=”鏈接地址”target=”目標頁面打開方式的值”>鏈接文字內容</a>值意義_blank在新窗口中打開目標頁面_self默認值，在當前頁面打開目標頁面_parent在父框架中打開目標頁面_top在整個窗口中打開目標頁面表1-5-2屬性值的取值及其意義打開VisualStudioCode軟件，在<body>標簽中輸入如下代碼：課堂練習1-5-4在新窗口中打開頁面1<ahref="1.5-3.html"target="_blank">在新窗口中打開1.5-3.html文檔</a>顯示效果如下：圖1-5-5在新窗口中打開頁面任務實施1、打開中的index.html文件。2、完成D清單網頁中菜單欄超鏈接代碼。參考代碼如下：3、參照步驟2的方法，完成正文中包含超鏈接的內容。123456789101112<header><nav><ul><li><ahref="#home">首頁</a></li><li><ahref="#about">功能介紹</a></li><li><ahref="#apply">下載應用</a></li><li><ahref="#member">高級會員</a></li><li><ahref="#help">幫助中心

溫馨提示

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

評論

0/150

提交評論