iT邦幫忙

2023 iThome 鐵人賽
DAY 16
0
Modern Web

從零寫出捷運美食介紹網頁(HTML/CSS)系列 第 16 篇

[Day16]實作：捷運地圖首頁

15th鐵人賽
237 瀏覽

  • 分享至 

  • xImage
    •  

事前準備

  • 首先我們需要先準備一張捷運地圖。
    • 這邊找的是板南線的地圖，附上圖片網址。
    • 只找板南線的原因，一是我必較熟悉的生活圈，二是我覺得後面都是一樣的做法，只差在蒐集美食資料，其實不需要寫到整個台北捷運地圖。
  • 為了區分平常練習和最終實作檔案，需要再建一個資料夾「30days」。
  • 再來和之前提過的一樣：建HTML檔、建img資料夾，將剛剛的捷運地圖放進去。

https://ithelp.ithome.com.tw/upload/images/20230926/20162303iYiPCMfsBR.png

正式開始！

<head>

  • 宣告HTML、設定語言為中文、網頁名稱定為「板南線美食介紹」。
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
    <meta charset="UTF-8">
    <title>板南線美食介紹</title>
</head>

<body>

  • 設定網頁主標題<h1>，再加入板南線簡介<p>。
<h1>板南線美食介紹主頁</h1>
<p>台北捷運「板南線」路線代號為BL，代表色為藍色，由土城區的「頂埔」一路行駛到南港區的「南港展覽館」，全線皆為地下路線，全長28.2公里。為北捷運路網中首條東西向路線，也是全路網運量最大的路線，連結了板橋車站、台北車站、南港車站三座三鐵共構車站。</p>
  • 插入一開始存的捷運地圖及<map>元素並設定usemap和name屬性。
<img src="img\板南線地圖.png" usemap="#Bannan">
<map name="Bannan">

  • 接下來要寫<area>

    因為還要對座標，看起來是最麻煩的部分，但是！網路上有好用的工具，只要把區塊框起來就可以生成程式碼，十分方便省時。

    • 這邊用三個區塊生成程式碼做示範。連結的部分因為我們還沒有做美食介紹網頁，所以可以先找隨便其他網頁的網址測試看看。
      https://ithelp.ithome.com.tw/upload/images/20230926/20162303lPkJQxtKyf.png
      https://ithelp.ithome.com.tw/upload/images/20230926/201623038QphrogWJd.png

  • 以下為最終程式碼，之後會再進行美化排版的部分！

<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
    <meta charset="UTF-8">
    <title>板南線美食介紹</title>
</head>        
<body>
    <h1>板南線美食介紹主頁</h1>
    <p>台北捷運「板南線」路線代號為BL，代表色為藍色，由土城區的「頂埔」一路行駛到南港區的「南港展覽館」，全線皆為地下路線，全長28.2公里。為北捷運路網中首條東西向路線，也是全路網運量最大的路線，連結了板橋車站、台北車站、南港車站三座三鐵共構車站。</p>
    <img src="img\板南線地圖.png" usemap="#Bannan" width="1185px">
    <map name="Bannan">
        <!--行政區塊座標-->
        <area title="土城區" shape="rect" coords="15,0,210,20" href="https://yunqi0102.github.io/Bannan/Tucheng/index.html" alt="土城區" target="_blank">
        <area title="板橋區" shape="rect" coords="212,0,464,20" href="https://yunqi0102.github.io/Bannan/Banqiao/index.html" alt="板橋區" target="_blank">
        <area title="萬華區" shape="rect" coords="466,0,536,20" href="https://evdaigoda.github.io/MRT/Wanhua/Wanhua.html" alt="萬華區" target="_blank">
        <area title="中正區" shape="rect" coords="538,0,687,20" href="https://evdaigoda.github.io/MRT/Zhongzheng/Zhongzheng.html" alt="中正區" target="_blank">
        <area title="大安區" shape="rect" coords="690,0,816,20" href="https://yuchun0221.github.io/bannanWeb/daan/daan.html" alt="大安區" target="_blank">
        <area title="信義區" shape="rect" coords="820,0,991,20" href="https://yuchun0221.github.io/bannanWeb/xinyi/xinyi.html" alt="信義區" target="_blank">
        <area title="南港區" shape="rect" coords="995,0,1167,20" href="https://yuchun0221.github.io/bannanWeb/nangang/nangang.html" alt="南港區" target="_blank">
        <!--各站點座標-->
        <area title="土城區(頂埔)" shape="rect" coords="20,50,45,150" href="https://yunqi0102.github.io/Bannan/Tucheng/index.html#4" alt="頂埔" target="_blank">
        <area title="土城區(永寧)" shape="rect" coords="70,50,95,150" href="https://yunqi0102.github.io/Bannan/Tucheng/index.html#3" alt="永寧" target="_blank">
        <area title="土城區(土城)" shape="rect" coords="120,50,145,150" href="https://yunqi0102.github.io/Bannan/Tucheng/index.html#2" alt="土城" target="_blank">
        <area title="土城區(海山)" shape="rect" coords="170,50,195,150" href="https://yunqi0102.github.io/Bannan/Tucheng/index.html#1" alt="海山" target="_blank">
        <area title="板橋區(亞東醫院)" shape="rect" coords="220,50,245,180" href="https://yunqi0102.github.io/Bannan/Banqiao/index.html#5" alt="亞東醫院" target="_blank">
        <area title="板橋區(府中)" shape="rect" coords="270,50,295,150" href="https://yunqi0102.github.io/Bannan/Banqiao/index.html#4" alt="府中" target="_blank">
        <area title="板橋區(板橋)" shape="rect" coords="320,50,350,155" href="https://yunqi0102.github.io/Bannan/Banqiao/index.html#3" alt="板橋" target="_blank">
        <area title="板橋區(新埔)" shape="rect" coords="370,50,400,155" href="https://yunqi0102.github.io/Bannan/Banqiao/index.html#2" alt="新埔" target="_blank">
        <area title="板橋區(江子翠)" shape="rect" coords="420,50,450,160" href="https://yunqi0102.github.io/Bannan/Banqiao/index.html#1" alt="江子翠" target="_blank">
        <area title="萬華區(龍山寺)" shape="rect" coords="470,50,500,160" href="https://evdaigoda.github.io/MRT/Wanhua/Wanhua.html#2" alt="龍山寺" target="_blank">
        <area title="萬華區(西門)" shape="rect" coords="520,50,553,155" href="https://evdaigoda.github.io/MRT/Wanhua/Wanhua.html#1" alt="西門" target="_blank">
        <area title="中正區(台北車站)" shape="rect" coords="570,50,603,190" href="https://evdaigoda.github.io/MRT/Zhongzheng/Zhongzheng.html#3" alt="台北車站" target="_blank">
        <area title="中正區(善導寺)" shape="rect" coords="620,50,650,160" href="https://evdaigoda.github.io/MRT/Zhongzheng/Zhongzheng.html#2" alt="善導寺" target="_blank">
        <area title="大安區(忠孝新生)" shape="rect" coords="670,50,703,190" href="https://yuchun0221.github.io/bannanWeb/daan/daan.html#3" alt="忠孝新生" target="_blank">
        <area title="大安區(忠孝復興)" shape="rect" coords="720,50,753,190" href="https://yuchun0221.github.io/bannanWeb/daan/daan.html#2" alt="忠孝復興" target="_blank">
        <area title="大安區(忠孝敦化)" shape="rect" coords="775,50,803,180" href="https://yuchun0221.github.io/bannanWeb/daan/daan.html#1" alt="忠孝敦化" target="_blank">
        <area title="信義區(國父紀念館)" shape="rect" coords="825,50,853,200" href="https://yuchun0221.github.io/bannanWeb/xinyi/xinyi.html#4" alt="國父紀念館" target="_blank">
        <area title="信義區(市政府)" shape="rect" coords="875,50,906,160" href="https://yuchun0221.github.io/bannanWeb/xinyi/xinyi.html#3" alt="市政府" target="_blank">
        <area title="信義區(永春)" shape="rect" coords="925,50,956,150" href="https://yuchun0221.github.io/bannanWeb/xinyi/xinyi.html#2" alt="永春" target="_blank">
        <area title="信義區(後山埤)" shape="rect" coords="975,50,1006,160" href="https://yuchun0221.github.io/bannanWeb/xinyi/xinyi.html#1" alt="後山埤" target="_blank">
        <area title="南港區(昆陽)" shape="rect" coords="1027,50,1058,150" href="https://yuchun0221.github.io/bannanWeb/nangang/nangang.html#3" alt="昆陽" target="_blank">
        <area title="南港區(南港)" shape="rect" coords="1077,50,1108,150" href="https://yuchun0221.github.io/bannanWeb/nangang/nangang.html#2" alt="南港" target="_blank">
        <area title="南港區(南港展覽館)" shape="rect" coords="1127,40,1162,210" href="https://yuchun0221.github.io/bannanWeb/nangang/nangang.html#1" alt="南港展覽館" target="_blank">
    </map>
</body>
</html>

最後用小插曲作結，之前沒有想到會有工具這件事，第一次做影像地圖的時候是慢慢找座標、慢慢加數字完成的，要不是有這次的鐵人賽我可能很久以後才會發現這麼好用的工具（超笨）。/images/emoticon/emoticon13.gif

雖然用工具的成就感比不上自己徒手找座標，但只能說我們必須適時地向這個講求效率的時代妥協。我是YQ，明天見。


上一篇
[Day15]HTML-影像地圖(下)
下一篇
[Day17]HTML-列表
系列文
從零寫出捷運美食介紹網頁(HTML/CSS) 共 30 篇
  1. 26
    [Day26]CSS-基本美化(下)
  2. 27
    [Day27]實作：美化網頁
  3. 28
    [Day28]CSS-常用特性(上)
  4. 29
    [Day29]CSS-常用特性(下)
  5. 30
    [Day30]完賽心得
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22199 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙