網頁設計與制作案例教程（第2版）（胡秀娥） 項目五（網頁列表與超鏈接）_第1頁
網頁設計與制作案例教程（第2版）（胡秀娥） 項目五（網頁列表與超鏈接）_第2頁
網頁設計與制作案例教程（第2版）（胡秀娥） 項目五（網頁列表與超鏈接）_第3頁
網頁設計與制作案例教程（第2版）（胡秀娥） 項目五（網頁列表與超鏈接）_第4頁
網頁設計與制作案例教程（第2版）（胡秀娥） 項目五（網頁列表與超鏈接）_第5頁
已閱讀5頁，還剩62頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

項目五項目導讀任務一在網頁中添加列表HTML5中的列表元素分為無序列表、有序列表等。使用DreamweaverCC可以直接在網頁文檔中添加列表，將插入點置于想要插入列表的位置，若單擊“插入”面板中的“無序列表”和“列表項”按鈕，可添加無序列表；若單擊“插入”面板中的“有序列表”和“列表項”按鈕，可添加有序列表，如圖所示。需要注意的是，列表項標簽應嵌套在無序列表或有序列表標簽之內。ul無序列表ol有序列表無序列表會將列表項的內容依次排列，并在每一個列表項前添加項目<li></li>符號(默認為實心圓)。無序列表的列表項之間沒有先后、主次、輕添加有序列表：文檔窗口中自動生成有序列表的代碼，如圖所<li></1i>字序號，默認為阿拉伯數字。在HTML5中，使用<ol>列表，同樣使用<li>標簽標記列表項，且一個<ol>標簽同樣也可以包在“CSS設計器”面板中，可以直接設置列表的3個樣式，分別為項目符號的位置、自定義項目符號與項目符號樣式，如圖所示。顯示集示項目符號在列表項之內；outside是默認值，表示項目符號在列表項左側。(2)list-style-image屬性用于設置自定義項目符號。設置方法為，單擊該屬性右側的下拉列表，在展開的列表中選擇"url"選項，單擊編輯框右側的“瀏覽”按鈕，打開“選擇圖像源文件”對話框，選擇圖像文件后單擊“確定”按鈕，即可自定義項目符號。(3)list-style-type屬性用于設置列表項的項目符號，其屬性值及說明如表所示。屬性值說明屬性值說明不使用項目符號小寫英文字母實心圓(默認值)大寫英文字母空心圓小寫羅馬數字實心方塊大寫羅馬數字阿拉伯數字日文平假名中文數字日文片假名任務實施——為“傳承經典網”主頁添加列表+例好，請登錄或免費注冊體驗更多功能傳承經典網詩詞佳作poetry傳承經典“傳承經典網”主頁導航列表的頁面效果任務二在網頁中添加超鏈接超鏈接像文本和圖像一樣，是組成網頁的基本元本任務首先介紹使用DreamweaverCC在網頁中超鏈接并設置樣式的基礎知識，通過實際操作加在瀏覽網頁時，有時會通過單擊一段文本實現向目標資源的跳轉，這些“文本”就是超鏈接。使用DreamweaverCC可以直接在網頁文檔中添加超鏈接，將插入點置于想要插入超鏈接的位置；單擊“插入”面板中的“Hyperlink”按鈕，打開“Hyperlink”對話框；接著在“文本”文本框中輸入超鏈接的文本內容，在“鏈接”文本框中輸入目標資源的地址(或單擊其右側的“瀏覽”按鈕，直接選擇資源文件),在“目標”下拉列表中選擇打開目標資源的方式；單擊“確定”按鈕，如圖所示。添加超鏈接后，文檔窗口中自動生成超鏈接標簽的代碼，如圖所示。</body>在DreamweaverCC中單擊“文件”菜單，在展開的列表中選擇“打開”選項，打開“打開”對話框，在其中選擇本書配套素材“項目認拆分視圖切換為“代碼+設計”。單擊“屬性”面板左下角的矩形熱點工具，在圖像上按下鼠標并拖動繪制矩形熱點區(qū)域，如圖所示。55使用同樣方法為左側的兩道菜繪制熱點區(qū)域。單擊“屬性”面板左下角的圓形熱點工具，在圖像上方繪制3個圓形熱點區(qū)域，如圖所示。代碼自動生成完畢，其中<area>標簽的href屬性值默認為“#”,如圖所示。imgsrcimgfmjpgwidthheightusemapimapalt=""/>coords="317,187,444hrefcoords="171,190,298hrefcoords="25,189,1href根據img文件夾中的圖像文件及其名稱補全第一個矩形熱點區(qū)域的href屬性值，修改代碼如下。<<areashape="rect"coords="318,188,445,356"href="img/豹子金錢蛋.jpg">參照步驟7補全剩余熱點區(qū)域的href屬性值，為各個熱點區(qū)域設置圖像鏈接。完成后將網頁文件保存，按“F12”鍵，在瀏覽器中查看頁面效果，如圖所示。通訪問前訪問后在<body>標簽中添加一個<nav>標簽，在其中添加_hrefr+backgroumd+backgroumd_添加navaa選擇器，設置導航欄中超鏈接的顯示方式為“block”,外邊距為“0auto”內邊距為“10px000”,文本顏色為“#5d5d5d”,水平對齊方式為(居中對齊),文本劃線為(無劃線),邊框為“1pxdotted#5D5D5D”,如圖所示。_文本邊征①:previewappndexhtm首頁限時優(yōu)惠品牌特賣實用家電超市生鮮服飾鞋帽兒童娛樂橫向導的欄☆2CC中創(chuàng)建一個名為“nav2.html"在<body>標簽中添加一個<nav>標簽；在<nav>標簽中添加一個<div>標簽；接著在<div>標簽中添加一個無序列表并添加7個列表項；為每一個列表項都添加一個<a>標簽，具體代碼如圖所示。<li><ahref="#">限時優(yōu)惠</a></li><li><ahref="#">品牌特賣</a></li><li><ahref="#">實用家電</a></li><li><ahref="#">超市生鮮</a></li><li><ahref="#">服飾鞋帽</a></li><li><ahref="#">兒童娛樂</a></li></ul></div>打開“CSS設計器”面板，在“源”窗格中單擊“添加CSS源”按鈕，在展開的列表中選擇“在頁面中定義”選項，網頁文檔的<head>標簽中生成<style>標簽，在該標簽中添加樣式。pxpx設置導航欄整體的樣式設置導航欄容器元素的樣式為“inline-為“inline-block”,左外邊距為“10px”內邊距均為"10px",圓角均為“10px”背景顏色為“#E0EOAD”,如圖所示。:4r:4r共品布局00:設置速記padding內邊距為“10px0”,如圖所示。②“#D2C78A”背景T text-設置列表項其余樣式對于內容較多的網頁，一層導航欄無法將導航內容全部顯示出來，這時一些網站會通過制作下拉菜單將導航欄進行折疊來節(jié)省空間，同時豐富導航欄的功能。例：制作帶下拉菜單的橫向導航欄，頁面效果圖。XX帶下拉菜魚的橫向導航欄+127.0.contenvGHyzDUSwqwshAAAlirfGKSYKyaOVwaBrbwolxmsjGvykh在Dreamweaver橫向導航欄”。CC中創(chuàng)建一個名為“nav3.html”的網頁文檔，將其網頁標題修改為“帶下拉菜單的在<body>標簽中添加一個<nav>標簽；然后在<nav>標簽中添加一個class屬性值為navt的<div>標簽，并在該<div>標簽中再添加一個class屬性值為td的<div>標簽；接著在第二個<div>標簽中添加一個class屬性值為til的<a>標簽，并在<a>標簽下方添加一個class屬性值為down的<div>標簽；在第三個<div>標簽中添加5個<a>標簽，表示下拉菜單的子選項，具體代碼如圖所示。<ahref="#"class="til">電視</a><ahref="#">全面屏電視</a><ahref="#"教育電視</a><ahref="#">0LED電視</a><ahref="#">智慧屏</a>打開“CSS設計器”面板，在“源”窗格中單擊“添加CSS源”按鈕，在展開的列表中選擇“在頁面中定義”選項，網頁文檔的<head>標簽中生成<style>標簽，在該標簽中添加樣式。設置選項容器元素的樣式設置選項容器元素的樣式color設置導航欄的樣式寬度為“550px”,外邊距為“0auto”如圖所示。?顯示集設置導航欄容器元素的樣式添加.td選擇器，設置導航欄選項容器元素的顯示方式為…布局+箭布局:120px區(qū)背畏pxrgba(0,0,0,0.2):px:pxbackgroundcokr添加.til選擇器，設置導航欄選項超鏈接的顯示方式(白色),字號大小為”16px”,文本劃線為(無劃線),圓角均為“5px”,背景顏色為“#5e9bb0”,鼠標指針形狀為?顯示集:block:5px品布局本顏色為“black”,文本劃線為(無劃線),如圖所示。指針移動至導航欄子選項超鏈接上時超鏈勝勝顯示集.=e7e7e7.=e7e7e7添加.td:hover.down選擇器，設置當block十#417e7f項項目實訓——制作“圖書交易網”主頁的導航欄(1)此處可使用本書配套素材“項目五”→“項目實訓”文件夾中的“bsonline.ste”站點進行操換本地磁盤中站點文件夾中的文件。(2)內容標簽添加在<body>→<header>→<nav>標簽內，先創(chuàng)建一個無序列表，然后在其中添加5個列表項，再分別為每個列表項添加一個

溫馨提示

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

評論

0/150

提交評論