[Day19]實作：美食介紹網頁

2023 iThome 鐵人賽

DAY 19

Modern Web

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

15th鐵人賽

zyq1212

2023-10-04 18:31:30

223 瀏覽

分享至

美食介紹實作我分為兩種網頁：一個是以行政區為單位，內容包含此行政區有哪些站點、這些站點又各有哪些美食店家；另一個是以站點為單位，內容包含美食店家的基本資訊介紹。以下將舉「大安區」及「國父紀念館站」為例。

先提供資料夾目錄。

其中「station_style.css」是我為站點網頁做的初步美化（只是加了表格框線），後面會再更多介紹，這邊先提供程式碼。

table { width: 900px; }
table, td, th, tr { border: 1px solid; }

一、行政區網頁

路徑：30days\Daan\index.html

`<head>`

基本上和首頁一樣，宣告、語言設定中文、將title改為「大安區美食」。

<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
    <meta charset="UTF-8">
    <title>大安區美食</title>
</head>

`<body>`

設定大標題「大安區」。

<h1>大安區</h1>

再加上三個次標題「國父紀念館站」、「忠孝敦化站」及「忠孝復興站」。

<h2>國父紀念館站</h2>
<h2>忠孝敦化站</h2>
<h2>忠孝復興站</h2>

接著在相對應的標題下以無序清單加上店家名稱。

<h2>國父紀念館站</h2>
    <ul>
        <li>蘇阿姨披薩屋</li>
        <li>CAFE!N硬咖啡-延吉店</li>
        <li>囍聚精緻鍋物</li>
        <li>Street Churros Taiwan（旗艦店）</li>
    </ul>
<h2>忠孝敦化站</h2>
    <ul>
        <li>豚人拉麵-台灣本店</li>
        <li>食芋堂（凱帝蛋糕）</li>
        <li>Cantina del Gio</li>
        <li>GODIVA生活形象店/li>
    </ul>
<h2>忠孝復興站</h2>
    <ul>
        <li>新高軒</li>
        <li>Fly's Kitchen</li>
        <li>江蘇菜盒店</li>
        <li>JAPOLI義大利餐酒館-忠孝店</li>
    </ul>

顯示結果：

這樣就完成了最基本的內容，但為了之後連接網頁，我們先將超連結製作好，之後有網址就可以直接貼上！

在各站點及店家加上超連結。

<h2><a href="">國父紀念館站</a></h2>
        <ul>
            <li><a href="">蘇阿姨披薩屋</a></li>
            <li><a href="">CAFE!N硬咖啡-延吉店</a></li>
            <li><a href="">囍聚精緻鍋物</a></li>
            <li><a href="">Street Churros Taiwan（旗艦店）</a></li>
        </ul>
    <h2><a href="">忠孝敦化站</a></h2>
        <ul>
            <li><a href="">豚人拉麵-台灣本店</a></li>
            <li><a href="">食芋堂（凱帝蛋糕）</a></li>
            <li><a href="">Cantina del Gio</a></li>
            <li><a href="">GODIVA生活形象店</a></li>
        </ul>
    <h2><a href="">忠孝復興站</a></h2>
        <ul>
            <li><a href="">新高軒</a></li>
            <li><a href="">Fly's Kitchen</a></li>
            <li><a href="">江蘇菜盒店</a></li>
            <li><a href="">JAPOLI義大利餐酒館-忠孝店</a></li>
        </ul>

顯示結果：

二、站點網頁

路徑：30days\Daan\S.Y.S_memorial_hall\index.html

`<head>`

宣告、語言設定中文、將title改為「國父紀念館站美食介紹」、引入CSS檔案。

<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
    <meta charset="UTF-8">
    <title>國父紀念館站美食介紹</title>
    <link rel="stylesheet" href="..\station_style.css">
</head>

..\station_style.css中的..表示上一層目錄。

`<body>`

設定大標題「國父紀念館站」。

<h1>國父紀念館站</h1>

加上次標題店家名稱。

<h2>蘇阿姨披薩屋</h2>
<h2>CAFE!N硬咖啡-延吉店</h2>
<h2>囍聚精緻鍋物</h2>
<h2>Street Churros Taiwan（旗艦店）</h2>

在各店家名稱底下依序加上段落、圖片及表格。

表格內容我放了品項、地址、營業時間及聯絡電話這些基本資訊。
另外因為每張圖片大小不一，想要讓畫面整齊一點我將圖片寬度都設為900px。

<h2>蘇阿姨披薩屋</h2>
    <p>蘇阿姨披薩屋從以前的吃到飽，到至今是單點的比薩，且提供外帶、外送服務，都非常受歡迎，假日總是大排長龍。<br>
        主打用料實在的披薩，以及肉質鮮嫩、多汁不膩的炸雞。
    </p>
    <img src="https://letsplay.tw/wp-content/uploads/2022/09/1P6A4452-1.jpg" width="900px">
    <table>
        <tr>
            <th>品項</th>
            <td colspan="3">美式 | 披薩、炸雞、薯條</td>
        </tr>
        <tr>
            <th>地址</th>
            <td colspan="3">台北市大安區光復南路300號</td>
        <tr>
            <th>營業時間</th>
            <td>週二至週日11:00-22:00（週一公休）</td>
            <th>聯絡電話</th>
            <td>02-2740-2328</td>
        </tr>
    </table>
<h2>CAFE!N硬咖啡-延吉店</h2>
    <p>採用自助式點餐，價格親民。CAFE!N不時會與其他品牌聯名合作，例如插畫家、藝術家或是這次的三麗鷗等等。<br>
        內用不開放訂位，點餐即可入座，沒有低消且不限時，有提供插座及開水。若遇到店內客滿，也有站位可使用。</p>
    <img src="https://live.staticflickr.com/65535/51824256292_4ae178f97c_b.jpg" width="900px">
    <table>
        <tr>
            <th>品項</th>
            <td colspan="3">咖啡店 | 咖啡、茶、吐司、司康</td>
        </tr>
        <tr>
            <th>地址</th>
            <td colspan="3">台北市大安區忠孝東路四段250-2號</td>
        <tr>
            <th>營業時間</th>
            <td>週一至週日07:30-17:00</td>
            <th>聯絡電話</th>
            <td>02-8771-3861</td>
        </tr>
    </table>
<h2>囍聚精緻鍋物</h2>
    <p>主打活體海鮮及干貝老母雞湯頭，不管是鍋物、海鮮食材或是肉品都經嚴格挑選，讓客人吃到最新鮮最高級的食材原味。<br>
        隱私舒適的用餐環境以及賓至如歸的桌邊服務，讓客人能專心享受美味與用餐時光。</p>
    <img src="https://puwulife.com/wp-content/uploads/pixnet/015b27301a07ca16ae9775dfba141598.jpg" width="900px">
    <table>
        <tr>
            <th>品項</th>
            <td colspan="3">日式 | 火鍋、海鮮</td>
        </tr>
        <tr>
            <th>地址</th>
            <td colspan="3">台北市大安區光復南路72巷7弄17號</td>
        <tr>
            <th>營業時間</th>
            <td>週一至週日12:00-15:00，17:30-23:00</td>
            <th>聯絡電話</th>
            <td>02-8773-8335</td>
        </tr>
    </table>
<h2>Street Churros Taiwan（旗艦店）</h2>
    <p>Street Churros是來自韓國的連鎖品牌，將傳統的西班牙吉拿棒改良，並研發出多種口味。<br>
        主打現炸的吉拿圈加上冰淇淋，打造出清爽又甜蜜的滋味。</p>
    <img src="https://ireneslife.com/wp-content/uploads/2020/03/1582809094-04136f667c166cc8e2026874900ba03e.jpg" width="900px">
    <table>
        <tr>
            <th>品項</th>
            <td colspan="3">韓式 | 吉拿圈、咖啡、冰沙</td>
        </tr>
        <tr>
            <th>地址</th>
            <td colspan="3">台北市大安區光復南路260巷24號</td>
        <tr>
            <th>營業時間</th>
            <td>週一至週日09:00-22:00</td>
            <th>聯絡電話</th>
            <td>02-2776-5663</td>
        </tr>
    </table>

為了讓之後從「行政區網頁」點擊店家名稱後可以直接跳轉到「站點網頁」的該店家資訊，我們要先設定好id。

<h2 id="1">蘇阿姨披薩屋</h2>
    <p>蘇阿姨披薩屋從以前的吃到飽，到至今是單點的比薩，且提供外帶、外送服務，都非常受歡迎，假日總是大排長龍。<br>
        主打用料實在的披薩，以及肉質鮮嫩、多汁不膩的炸雞。
    </p>
    <img src="https://letsplay.tw/wp-content/uploads/2022/09/1P6A4452-1.jpg" width="900px">
    <table>
        <tr>
            <th>品項</th>
            <td colspan="3">美式 | 披薩、炸雞、薯條</td>
        </tr>
        <tr>
            <th>地址</th>
            <td colspan="3">台北市大安區光復南路300號</td>
        <tr>
            <th>營業時間</th>
            <td>週二至週日11:00-22:00（週一公休）</td>
            <th>聯絡電話</th>
            <td>02-2740-2328</td>
        </tr>
    </table>
<h2 id="2">CAFE!N硬咖啡-延吉店</h2>
    <p>採用自助式點餐，價格親民。CAFE!N不時會與其他品牌聯名合作，例如插畫家、藝術家或是這次的三麗鷗等等。<br>
        內用不開放訂位，點餐即可入座，沒有低消且不限時，有提供插座及開水。若遇到店內客滿，也有站位可使用。</p>
    <img src="https://live.staticflickr.com/65535/51824256292_4ae178f97c_b.jpg" width="900px">
    <table>
        <tr>
            <th>品項</th>
            <td colspan="3">咖啡店 | 咖啡、茶、吐司、司康</td>
        </tr>
        <tr>
            <th>地址</th>
            <td colspan="3">台北市大安區忠孝東路四段250-2號</td>
        <tr>
            <th>營業時間</th>
            <td>週一至週日07:30-17:00</td>
            <th>聯絡電話</th>
            <td>02-8771-3861</td>
        </tr>
    </table>
<h2 id="3">囍聚精緻鍋物</h2>
    <p>主打活體海鮮及干貝老母雞湯頭，不管是鍋物、海鮮食材或是肉品都經嚴格挑選，讓客人吃到最新鮮最高級的食材原味。<br>
        隱私舒適的用餐環境以及賓至如歸的桌邊服務，讓客人能專心享受美味與用餐時光。</p>
    <img src="https://puwulife.com/wp-content/uploads/pixnet/015b27301a07ca16ae9775dfba141598.jpg" width="900px">
    <table>
        <tr>
            <th>品項</th>
            <td colspan="3">日式 | 火鍋、海鮮</td>
        </tr>
        <tr>
            <th>地址</th>
            <td colspan="3">台北市大安區光復南路72巷7弄17號</td>
        <tr>
            <th>營業時間</th>
            <td>週一至週日12:00-15:00，17:30-23:00</td>
            <th>聯絡電話</th>
            <td>02-8773-8335</td>
        </tr>
    </table>
<h2 id="4">Street Churros Taiwan（旗艦店）</h2>
    <p>Street Churros是來自韓國的連鎖品牌，將傳統的西班牙吉拿棒改良，並研發出多種口味。<br>
        主打現炸的吉拿圈加上冰淇淋，打造出清爽又甜蜜的滋味。</p>
    <img src="https://ireneslife.com/wp-content/uploads/2020/03/1582809094-04136f667c166cc8e2026874900ba03e.jpg" width="900px">
    <table>
        <tr>
            <th>品項</th>
            <td colspan="3">韓式 | 吉拿圈、咖啡、冰沙</td>
        </tr>
        <tr>
            <th>地址</th>
            <td colspan="3">台北市大安區光復南路260巷24號</td>
        <tr>
            <th>營業時間</th>
            <td>週一至週日09:00-22:00</td>
            <th>聯絡電話</th>
            <td>02-2776-5663</td>
        </tr>
    </table>

顯示結果：