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

下載本文檔

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

文檔簡介

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

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(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)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論