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

下載本文檔

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

文檔簡介

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

溫馨提示

  • 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)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論