第2章 圖像與超鏈接

1、預(yù) 科圖像與超鏈接圖像與超鏈接第二章第二章回顧與檢查 HTML由那些元素組成？ 使用Dreamweaver制作網(wǎng)頁(yè)時(shí)有幾種編輯模式？ HTML中常見(jiàn)的特殊符號(hào)有哪些？ 在HTML中可以設(shè)定幾種標(biāo)題類(lèi)型？本章任務(wù) 制作百度首頁(yè) 當(dāng)當(dāng)網(wǎng)圖書(shū)頁(yè)面 制作添加鏈接的百度首頁(yè)本章目標(biāo) 掌握?qǐng)D像的創(chuàng)建方法 學(xué)會(huì)制作圖文混排的頁(yè)面 掌握超級(jí)鏈接的創(chuàng)建方法圖像與HTML 圖像的應(yīng)用場(chǎng)合 新聞圖片 產(chǎn)品說(shuō)明 LOGO設(shè)計(jì) Banner設(shè)計(jì) 廣告宣傳 圖像的作用 圖文并茂、直觀、生動(dòng)向HTML中插入圖像 圖像的插入的步驟 在設(shè)計(jì)模式下，選擇“插入”“圖像” 選擇圖片位置 設(shè)置輔助功能屬性 教師演示操作過(guò)程圖像的路徑

2、 路徑的幾種情況 圖像與網(wǎng)頁(yè)在相同的目錄下圖像的路徑 圖像位于網(wǎng)頁(yè)目錄下的某個(gè)子目錄圖像的路徑 圖像位于網(wǎng)頁(yè)目錄之上圖像相關(guān)屬性 圖像的基本屬性 圖像地址 圖像尺寸 可替換的文本圖像地址 圖像地址 通過(guò)“源文件”指定圖像存放路徑 通過(guò)“源文件”修改圖像的路徑圖像尺寸 圖像尺寸 插入圖像后，圖像為默認(rèn)尺寸顯示 可通過(guò)寬高屬性進(jìn)行調(diào)整文本替換 文本替換 文本用于在圖片無(wú)法正常顯示時(shí)的提供的說(shuō)明 可通過(guò)設(shè)置進(jìn)行修改演示案例-百度首頁(yè) 頁(yè)面效果演示案例-百度首頁(yè) 思路分析 在網(wǎng)頁(yè)適當(dāng)位置插入百度圖片 按照頁(yè)面效果添加文字 插入百度搜索圖片 在網(wǎng)頁(yè)末尾插入工商圖標(biāo) 在網(wǎng)頁(yè)空白區(qū)域內(nèi)輸入內(nèi)容 教師講解實(shí)現(xiàn)

3、思路并演示HTML的圖文混排 圖文混排的屬性設(shè)置 邊距 對(duì)齊方式邊距 邊距 圖像與文字默認(rèn)無(wú)邊距，導(dǎo)致很緊密 設(shè)置邊距，保持圖像與文字的間距，確保頁(yè)面美觀對(duì)齊方式 常見(jiàn)的對(duì)齊方式 左對(duì)齊 右對(duì)齊 居中對(duì)齊演示案例-制作“怪笑小說(shuō)”頁(yè)面 頁(yè)面效果演示案例-制作“怪笑小說(shuō)”頁(yè)面 思路分析 設(shè)置圖像的對(duì)齊方式 設(shè)置圖像與文字的間距 圖文混排的美觀 教師演示操作步驟超級(jí)鏈接 什么是超級(jí)鏈接 超級(jí)鏈接又稱(chēng)超鏈接 使相互獨(dú)立的頁(yè)面可以互相訪問(wèn)超級(jí)鏈接 超鏈接的創(chuàng)建 選中需要設(shè)置連接的文本 在屬性面板中設(shè)置連接對(duì)象鏈接的目標(biāo)窗口 常見(jiàn)的超鏈接窗口打開(kāi)方式 _blank:在彈出的新窗口中顯示打開(kāi)的內(nèi)容 _se

4、lf:在本窗口中顯示打開(kāi)的內(nèi)容 教師演示操作步驟鏈接的應(yīng)用 使用超鏈接打開(kāi)電子郵件 電子郵件：以“mailto：”作為鏈接的起始 教師演示操作步驟鏈接的應(yīng)用 書(shū)簽標(biāo)記 又稱(chēng)錨記或錨點(diǎn) 用于頁(yè)面指定位置內(nèi)容的訪問(wèn) 教師演示案例效果鏈接的應(yīng)用 創(chuàng)建錨記的步驟一 在指定位置，選擇“插入”“命名錨記”鏈接的應(yīng)用 查看錨記命名效果 命名錨記后，在設(shè)計(jì)模式中顯示錨記標(biāo)示鏈接的應(yīng)用 創(chuàng)建錨記的步驟二 為錨記添加鏈接，格式為：#+錨記名稱(chēng) 教師演示操作步驟鏈接的應(yīng)用 空鏈接 以鏈接形式顯示，但無(wú)具體的指向 使用#表示空鏈接鏈接的應(yīng)用 圖像鏈接 使用圖像代替文本實(shí)現(xiàn)鏈接效果 選中圖片，在屬性面板中進(jìn)行設(shè)置 圖像鏈接默認(rèn)帶有邊框，通過(guò)設(shè)置屬性面板進(jìn)行調(diào)整 教師演示操作步驟演示案例-帶鏈接的百度首頁(yè) 頁(yè)面效果 為百度首頁(yè)添加超鏈接 思路分析 首先按照效果制作無(wú)鏈接的首頁(yè) 分別為圖片和文字添加鏈接 設(shè)置圖像鏈接的邊框?qū)挾葹? 教師演示操作步驟總結(jié) 請(qǐng)簡(jiǎn)要描述如何在HTML頁(yè)面中插入圖像？ 圖文混排有幾種常見(jiàn)方式？如何進(jìn)行調(diào)整？ 超鏈接的作用是什么？如何設(shè)置超鏈接？ 常見(jiàn)的超鏈接有哪些分類(lèi)？作業(yè) 課后作