HTML5+CSS3網(wǎng)頁設(shè)計與制作課件：添加超鏈接_第1頁
HTML5+CSS3網(wǎng)頁設(shè)計與制作課件：添加超鏈接_第2頁
HTML5+CSS3網(wǎng)頁設(shè)計與制作課件：添加超鏈接_第3頁
HTML5+CSS3網(wǎng)頁設(shè)計與制作課件：添加超鏈接_第4頁
HTML5+CSS3網(wǎng)頁設(shè)計與制作課件：添加超鏈接_第5頁
已閱讀5頁，還剩21頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

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

添加超鏈接本次任務(wù)要求分析D清單網(wǎng)頁中超鏈接內(nèi)容，在的基礎(chǔ)上添加D清單網(wǎng)頁的超鏈接。完成后的部分效果圖如圖1-5所示。任務(wù)描述圖1-5添加超鏈接后的網(wǎng)頁效果圖

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

添加超鏈接任務(wù)分析圖1-5-1D清單網(wǎng)頁效果中的超鏈接內(nèi)容分析

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

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

溫馨提示

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

評論

0/150

提交評論