Web頁(yè)面設(shè)計(jì)基礎(chǔ)第3課超鏈接、表格

1、主講人：薛 波超鏈接 瀏覽者通過(guò)單擊文本或圖片對(duì)象單擊文本或圖片對(duì)象，會(huì)立即被引導(dǎo)到另一個(gè)位置被引導(dǎo)到另一個(gè)位置，這個(gè)位置可以是網(wǎng)頁(yè)、FTP，或者是文件可以供瀏覽者打開(kāi)或下載，也可以直接鏈接到E-Mail郵箱，實(shí)現(xiàn)這樣功能的對(duì)象叫做超鏈接超鏈接。E-MailFTPhtmldoc、exe、rar、zip超鏈接標(biāo)記屬性屬性作用作用href指定鏈接路徑(必須設(shè)置)target在指定目標(biāo)窗口打開(kāi)鏈接文檔title設(shè)置鏈接提示文字name定義書(shū)簽名稱(chēng)target屬性取值target值值描述描述_blank在新窗口中打開(kāi)文檔_self在當(dāng)前運(yùn)行窗口中打開(kāi)鏈接文檔(默認(rèn))_parent框架網(wǎng)頁(yè)中，在上一級(jí)窗

2、口中打開(kāi)_top在瀏覽器整個(gè)窗口中打開(kāi)，如果有框架，忽略框架窗口名稱(chēng)在指定框架窗口中打開(kāi)鏈接文檔示例示例鏈接路徑路徑 href=“style.css”href=“doExp.js”路徑 href=“css/style.css”href=“js/doExp.js”路徑 href=“./css/style.css”href=“./js/doExp.js”同同級(jí)級(jí)目目錄錄下下級(jí)級(jí)目目錄錄上上級(jí)級(jí)目目錄錄超鏈接類(lèi)型l 內(nèi)部鏈接同一個(gè)網(wǎng)站內(nèi)部不同網(wǎng)頁(yè)之間的鏈接關(guān)系。超鏈接類(lèi)型l 外部鏈接鏈接到當(dāng)前網(wǎng)站外部，其他網(wǎng)站中頁(yè)面和元素。超鏈接類(lèi)型l 文件下載鏈接鏈接的目標(biāo)文檔類(lèi)型為doc、exe、rar、zip

3、等。超鏈接類(lèi)型l 書(shū)簽鏈接利用實(shí)現(xiàn)書(shū)簽鏈接需要?jiǎng)?chuàng)建書(shū)簽創(chuàng)建書(shū)簽和創(chuàng)建書(shū)簽鏈接創(chuàng)建書(shū)簽鏈接兩步。1. 創(chuàng)建書(shū)簽2. 創(chuàng)建書(shū)簽鏈接用法：文字/圖片內(nèi)部書(shū)簽：源端點(diǎn)外部書(shū)簽：源端點(diǎn)示例示例網(wǎng)頁(yè)中如何畫(huà)一個(gè)表格表格設(shè)置行設(shè)置行設(shè)置列設(shè)置列設(shè)置表頭設(shè)置表頭設(shè)置表格標(biāo)題設(shè)置表格標(biāo)題橫向單元格合并橫向單元格合并縱向單元格合并縱向單元格合并表格示例表格示例 鉛筆鉛筆 0.5元元/支支 橡皮橡皮 0.6元元/塊塊 tr設(shè)置行 td設(shè)置列表格示例表格示例 鉛筆鉛筆 0.5元元/支支 商品名稱(chēng)商品名稱(chēng) 商品單價(jià)商品單價(jià)th添加表頭表格示例表格示例 鉛筆鉛筆 0.5元元/支支 商品名稱(chēng)商品名稱(chēng) 商品單價(jià)商品單價(jià)商品價(jià)

4、格一覽商品價(jià)格一覽caption設(shè)置表格標(biāo)題 文具文具 價(jià)格價(jià)格 數(shù)量數(shù)量 合計(jì)合計(jì) 鋼筆鋼筆 ￥2.5元元/支支 3 ￥12.5 鉛筆鉛筆 ￥0.50元元/支支 10rowspan跨行設(shè)置 文具文具 價(jià)格價(jià)格 數(shù)量數(shù)量 鋼筆鋼筆 ￥2.5元元/支支 3 鉛筆鉛筆 ￥0.50元元/支支 10 合計(jì)合計(jì) ￥12.5colspan跨列設(shè)置cellpadding設(shè)置表格邊距contentcontentcontentcontent單元格內(nèi)容表格邊距指單元格內(nèi)容與單元格邊框之間的間距用法：用法：cellspacing設(shè)置表格間距contentcontentcontentcontent表格間距指單元格之間的間距用法：用法：屬性屬性描述描述align設(shè)置單元格內(nèi)容水平對(duì)齊方式，取值left、center、right，默認(rèn)值left，默認(rèn)值centervalign設(shè)置單元格內(nèi)容垂直對(duì)齊方式，取值top、middle、bottom，默認(rèn)值為middlebgcolor設(shè)置單元格背景顏色background設(shè)置單元格背景圖像