<style>
h1{
color: rgb(139 115 85);
}
.pp{
color: rgb(139 115 85);
}
</style>


教學筆記：https://hackmd.io/@iamfefe/H1HisJiJj

⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ 

---
# 

### :linked_paperclips: VR職業影片連結：( https://reurl.cc/eWK1Mj )
:butterfly:QRCODE⠀⠀

### ֍心得　
#### 其實YouTuber背後也是很辛苦的，不僅要剪輯後製、加入各種視覺音效，同時也要想該如何讓觀眾產生興趣而去訂閱你，話題瞬息萬變又要穩定發片，對小型創作者來說相當有難度，因此現在訂閱數高的頻道，幾乎都有屬於自己的團隊，走向規模化以及專業分工，我覺得如果要維持或達到更高的流量數據，個人魅力特色十分的重要，要能夠凸顯你本身的特質，才能在眾多的YouTuber圈生存下去。留言區這個功能很重要，都會有人在此留下自己的見解或是建議，我覺得有時候也必須看一看，能改善自己的影片、小細節，對自己很有幫助，但是這個社會上越來越多鍵盤俠，有時候會留下惡言，所以我覺得當YouTuber也需要強大的心臟，才不會被那些酸言酸語攻擊。
---

### :linked_paperclips: 自我介紹網頁連結： ( https://reurl.cc/AyvGmQ)
:butterfly:QRCODE⠀
首頁↴
自選圖片↴
### ֍心得
#### 以前並不知道有Wix這項製作網頁的網站，操作十分的容易，有很多好看的範本可以選擇，簡簡單單就做出一份自我介紹的網站，我覺得唯一的缺點是網頁上面會出現Wix的廣告，讓整個頁面變很Low，但因為是免費的，可以接受。介面設計，我比較喜歡偏古典的風格，感覺很有質感，我非常喜歡簡約設計，排版看起來乾乾淨淨的，很舒服。
### ⎚參考釘圖 :

---

### :linked_paperclips: 專題網址連結：( https://reurl.cc/D306VO)
#### 專題名稱：隱身在巷子裡的傳統好滋味-大東餅舖
:butterfly:QRCODE

### ֍心得　
#### 在上多媒體課前，其實不知道app內的按鈕怎麼製作，覺得一定需要很繁複的程式才能完成頁面跳來跳去的步驟，但上完課後，製作按鈕意外的很簡單。我不僅提升了蒐集與整理資訊的能力，也懂得如何善用學習工具，過程中，我也發覺到有團隊的好處，團隊合作真的比一個人做好，不僅可以產生更多的想法，製作速度也會變得很快，做得不好的地方也可以一起討論修改，能提供我專題上的建議，例如字體應該設選哪個才會讓整體看起來更好，也會使我有動力完成這份任務。

---
### :linked_paperclips: 期末小論文連結：（https://reurl.cc/33VrxX）
#### 專題名稱：傳香好「餅」味-探索記憶中的滋味:以大東餅舖為例

:butterfly:QRCODE
### ֍心得
#### 我以為上我網頁課不會接觸到小論文，忘了投稿專題競賽也會用到小論文，起初，我覺得做出一篇小論文很困難，很多字要打，很多心得要想，但我發只要一步一步來，其實很快就會做出一篇完整的小論文，加上有組員的力量，能夠進展的非常迅速，我本來對傳統糕點不了解的，但在找文獻的過程，就大概知道它的發展歷程，收穫良多。

---
### :linked_paperclips: 電子書作品連結：（https://reurl.cc/OVYEvy）
#### 電子書名稱：體驗傳統文化的滋味
<iframe width="1280" height="693" src="https://www.youtube.com/embed/7R4k00QORhU" title="體驗傳統文化的滋味電子書" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

## 個人貢獻 💃🕺
> ### 提供美編

### ֍心得
* ### 起初，對電子書沒太大的了解，感覺就是在隔著屏幕看書，做電子書比我想像的簡單，網路上有很多資源平台提供我們設計，例如Canva，在Canva上設計完放在電子書平台上，上傳的步驟很簡單，也不需要花費很多時間，全上傳後，進度差不多完成一半了，我覺得最花費時間的地方在於美編，要讓讀者有看下去的慾望很難，像我看完封面，就會直接離開。
* ### 除了書寫文字，適當地加多媒體內容或背景音樂也是很重要，可增加整體美感及豐富性。

### ֍反思
### 在寫資料或結論時，常常會陷入瓶頸，不知道寫些什麼，想說什麼卻打不出來，所以我覺得我需要多看看課外讀物，增加語彙，不僅對寫心得有幫助，對未來考試也是百益而無害。

### ֍學習重點
1. ### 蒐集資料且減少~~贅詞~~
1. ### 增加美感能力✨💐
1. ### 適當地添加多媒體內容💿🎄
1. ### 引用他人資料時必須記得標著作者👤

---

### 青蛙排版(已破關)

### ֍心得
#### 玩的過程其實發現並不難，編碼也是從舊有的結構再加上別的文字，隨著關卡越來越多，編碼只是變得更多行而已，只要簡單的動一下腦就可以輕鬆破關。

---

### 課堂結論心得
#### 起初，我以為製作網頁很有難度，但只要在課程中認真聽老師上課，跟上進度，沒有什麼會碰到困難的地方。另外，網頁的語法出乎意料的簡單，很容易背下來，而且互相也有關聯，做出一個簡單的網頁毫無難度。在這個單元中，我也學到要如何運用網路上的資料網站或學習工具，不僅能讓學習效率大大提升，也能使自己的網頁更加美觀，看起來比較專業。

---

# 

> * 1. setInterval(function () { document.dispatchEvent(new KeyboardEvent('keydown')); }, 50);
> * 1. console.log("Hi")
> * 1. shift+方向鍵 快速選取
> * 1. ctrl+c 複製 ctrl+v 貼上

<h1 style="color:rgb(255,255,255);background-color:DodgerBlue;">42238羅萱</h1>  (藍底白字)

### 實用網站
> * Ionicons
> * 配色網站 : https://coolors.co/
> * 改背景,改box背景,改字顏色等-超美漸層產生 : https://webgradients.com/
> * 改插圖-超好用插圖
> * Humaaans：人物角色與場景插畫 use with blush
> * OpenDoodles：可愛的人物角色插畫
> * unDrawn：簡報利器插畫圖庫
> * Glaze：精緻向量插畫
> * manypixels：可自行定義配色
> * mixkit-Art：充滿藝術感的精緻插畫
> * illlustrations：生活物品插畫
> * isoflat：最大的免費立體投影插畫網站
> * Paaatterns：Patterns 圖樣插畫

### XD
1.快速鍵:
> * ctrl + =>放大
> * ctrl - =>縮小
> * 空白 =>移動畫布
> * Alt + 移動 =>複製
> * 畫圖形+shift =>等比例

2.XD好用套件:
> * unDraw 插圖
> * Icondrop 按鈕
> * UIFaces 自動人臉
> * Quick Mockup網站範本
### 設計好站
> * https://www.canairi.io/
> * https://artsexperiments.withgoogle.com/meroe/
> * https://hhey.studio/
> * https://www.poppr.be/en#
> * https://hsmkrt1996.com/
> * https://www.freaksstore.com/freakmag/
> * https://www.georgelittle.design/
> * https://codepen.io/radziu/pen/dVerPb
> * https://www.apple.com/iphone-14-pro/
> * https://codepen.io/yoannhel/pen/DMzjog
> * https://codepen.io/Anna_Batura/pen/VOPdRd
> * https://codepen.io/mariosmaselli/pen/ZpLXpN
> * https://www.martinbuilding.com/about
> * https://codepen.io/mariosmaselli/pen/ZpLXpN
> * https://www.dfdg.com
> * https://iti.ca/en/it-solutions/
> * https://thecubemadrid.com/es/

### 開源模板資源
> * Github Open source 專案
> Github 上開源的公開專案與相關資源整合，下方還有設計的教程以及設計的資源。
> * HTML5UP
> 結構標準的 HTML5 開源專案，很適合新手下載查看與做修改練習，但不太會更新內容。
> * w3layouts
> 多用途的網頁開源 Layout，同時也支援其他服務的架設。
> * Cruip
> 具有非常良好的結構與特效的範例，非常適合想要較為有設計感頁面的需求，但進階其餘專案需要額外付費才能下載。
> * zerotheme
> 公開平台的資源彙整，有很多不同的版型與 UI 可以下載，但使用許可需要另行查看。

### 配色
> * 玩玩小遊戲color訓練對色彩的敏感度
> * 主色 輔色 功能性顏色
> * awwards
> * dribbble 搜dayly ui
> * coolors也有figma外掛
> * (挑品牌顏色)[brandcolors](https://brandcolors.net/)

### 設計類小遊戲
> * cantunsee
> 思考哪個設計比較符合大眾審美
> * designers-eye
> 練習視覺對其與中心點判斷
> * color
> 訓練對色彩的敏感度
>
### 電子書好用素材
> 向量插圖 https://www.freepik.com/home
poster當關鍵字,選free
配音(自己錄更好) https://tts.yating.tw/
轉檔請用media encoder
動畫運用
作法一
gifpy (例如搜尋 blink/右鍵/另存/再匯入平台)
作法二
＊ 以canva gif設計動畫後下載成gif
＊ 背景設計同色系,或是匯出gif後,再上傳unscreen去背
作法三
動畫可用ppt,canva,Cartoon Animate(拉入圖片成道具,做動畫,專案設定100(動畫長度)),輸出影片gif
作品需包含動畫gif、配音、影片、超連結
配樂 https://www.jamendo.com/

### 人工智慧套件快速產生大量配音檔 大量文字轉語音
> 裝vscode
> 裝python(要用管理員模式執行)
> 裝pip
> 檢查有沒有裝成功
> 1.vscode裏開啟資料夾test
> 2.打print(“hi”)然後存檔
> 3.在終端機打python test.py這行執行,就會出現hi
> 4.執行pip3 install gTTS
> 5.貼入下列程式,記得檢查輸入檔名與輸出路徑

from gtts import gTTS
         #↓檔名記得改
with open ("sin.txt","r",encoding="utf-8") as fin:
    flagA=True
    c=0
    while flagA:
        line=fin.readline().strip()
        if not line:
            print("end of file")
            flagA=False
        else:
            tts=gTTS(text=line, lang='zh')
            tts.save("C:\\test\\"+str(c)+".mp3") 
            c+=1
            #↑路徑不同的人記得改#

___

# 

### 工具
vscode 或 codepen

> 常用vscode套件 html,live server,prettier,chinese,HTML format

html:5按tab
h1按tab
啟用live sever

### 相關資源
速打Emmet技巧
假圖lorem image
Code-combat 體驗程式樂趣
英打練習網站 https://www.typing.com/student/lessons
w3c html

---

### bootstrap

使用教學與元件中文版 [bootstrap5.hexschool.com](https://)
範例下載 [https://bootstrap5.hexschool.com/docs/5.1/examples/](https://)

* Ionicons
> 著名框架Ionic所開源的icon圖庫，完全商用且免費於各大平台。
> 點usage
> 貼這兩行在/body前
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
就可以拷貝語法寫圖示 以用在按鈕、插圖等，語法如下:
`<ion-icon name="chatbubble-ellipses-outline"></ion-icon>`

---

### CSS語法練習 :wilted_flower:
> width 寬
height 高
border 框 1px solid red 粗度，實線，紅色

> color 顏色 有4種寫法:寫英文,rgb,rgba,#色碼
background-color 背景顏色
background-image 背景圖片
url(“img/2.jpg”) 路徑與檔名

> font-size 字大小
font-family 字型
font-weight 字重
text-shadow 字陰影(box-shadow 方塊陰影)
letter-spacing 字間距

> padding內距 上左下右
margin外距 [border三者差別]

> display 佈局 flex彈性盒子 df
justify-content 對齊主軸內容 jcc
align-items 對齊交錯軸內容 aic
/* 註解*/ ctrl+/

> transform 變形說明
transform 3d
filter 濾鏡說明
animate 動畫說明
position:absolute 絕對定位
position:relative 相對定位
position:fixed 固定定位
overflow:hidden 溢出隱藏
z-index 圖層順序
transition:all 2s ease 動畫速度

### 背景聲音
> controls出現播放器
> autoplay自動播放
> 注意音樂放的置要對
> 下載音樂的方法
> 找無版權youtube,刪掉網址ube,下載成mp3

---
## 實作成果１

  <!doctype html>
<style>
    /* *代表全部都要套用 */
    * {
        /* 動畫速度0.5秒減速 */
        transition: all 0.5s ease;
        font-family: 微軟正黑體;
        margin: 0px;
        padding: 0px;
        font-size: 30px;
    }

    body {
        /* background-color: rgb(222, 216, 216); */
        background-image: linear-gradient(to top, #c7dfc5 0%, #e2ebf0 100%);

    }

    h1 {
        color: rgb(0, 0, 0);
        font-size: 100px;
    }

    h1:hover {
        letter-spacing: 20px;
        color: rgb(74, 117, 69);
        text-shadow: 5px 5px 10px black;
    }

    img {
        width: 150px;
        height: 150px;
        /* 切圓角 */
        border-radius: 50%;
    }

    img:hover {
        border: 5px solid rgb(255, 255, 255);
    }

    .pics {
        /* bgc,df,jcc,aic */
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        /* 高度固定400 */
        height: 400px;
        /* 寬度60% */
        width: 60%;
        /* 邊界自動 */
        /* margin:auto; */
        /* 邊界:上 左 下 右 */
        /* margin:100px 60px 200px 90px; */
        margin-left: 200px;
        /* 圓角邊 */
        border-radius: 20px;

    }

    .pics:hover {
        /* margin:100px 160px 200px 390px; */
        margin-left: 300px;
        box-shadow: 0px 0px 20px rgb(0, 0, 0);
    }

    .pics img,
    .pics2 img {
        margin: 1vw;
        filter: grayscale(1) blur(5px);

    }

    .pics img:hover {
        filter: grayscale(0);
        transform: rotate(60deg) scale(1.3);
    }

    .pics2 {
        /* bgc,df,jcc,aic */
        display: flex;
        justify-content: center;
        align-items: center;
        /* 高度固定400 */
        height: 400px;
        /* 寬度60% */
        width: 60%;
        /* 邊界自動 */
        /* margin:auto; */
        /* 邊界:上 左 下 右 */
        /* margin:100px 60px 200px 90px; */
        margin-left: 200px;
        /* 圓角邊 */
        border-radius: 20px;
    }

    section {
        /* padding:4vw; */
        padding-left: 4vw;
        padding-right: 4vw;
    }

    nav {
        /* 背景顏色 */
        /* background-color: rgb(83, 62, 3); */

        background-image: linear-gradient(to top, #6f975b 0%, #18460f 100%);
        /* 顏色(字) */
        color: #fff;
        width: 100%;
        position: fixed;
        /* 固定在上面 */
    }

    nav ul {
        list-style: none;
        /* 讓項目符號變彈性,就可以橫排 */
        display: flex;

    }

    nav ul li a {
        font-size: 20px;
        font-weight: 400;
        margin: 20px;
        color: white;
        text-decoration: none;
        display: flex;
    }

    nav ul li:hover {
        font-size: 24px;
        font-weight: 800;
        margin-top: 15px;
        transition: all 0.2s ease;
    }

    @keyframes movetgo {
        0% {
            color: #094703;
        }

        33% {
            margin-left: 100px;
        }

        100% {
            margin-left: 0px;
            color: rgb(155, 170, 152)
        }
    }

    #movet {
        animation: movetgo 1s ease infinite;
    }

    table {
        width: 80%;
        background-color: #fff;
        margin: auto;
        margin-top: 20px;
    }

    tr:first-child {
        background-color: rgb(109, 146, 100)
    }

    tr:nth-child(odd) {
        background-color: rgb(196, 196, 196)
    }

    p:first-letter {
        font-size: 50px;
        color: rgb(69, 114, 117)
    }

    td {
        /* 文字置中 tac tab */
        text-align: center;
    }

    p:nth-child(odd) {
        color: antiquewhite
    }

    #s1 {
        padding-top: 40px;
    }
</style>
<header>
    <nav>
        <!-- ul>li*5 -->
        <ul>

            <li class="logo">
                <ion-icon name="bonfire-outline"></ion-icon>
            </li>
            <li><a href="#s1">前言</a></li>
            <li><a href="#s2">特色</a></li>
            <li><a href="#s3">商品</a></li>
            <li><a href="#s4">與我聯絡</a></li>
        </ul>
    </nav>
</header>
<br><br>
<!-- 自己換行 -->
<section id="s1">
    <h1>
        <ion-icon name="flame-outline"></ion-icon>123
    </h1>
    <p>
        <b>Lorem</b> <em>ipsum</em> dolor sit amet, consectetur adipisicing elit. Ipsam dolores laboriosam officiis
        quod natus quisquam molestiae laudantium id ut vero. Molestias quos eveniet ducimus reprehenderit aut
        deleniti accusantium soluta fuga?
        <span>Suscipit laudantium asperiores mollitia</span>, alias aliquid quisquam itaque! Harum, commodi dolores
        voluptatum mollitia libero repudiandae hic assumenda beatae ab voluptatem numquam accusamus sapiente
        nesciunt ratione. Voluptate hic reiciendis dolores veritatis?
        Quasi voluptatum necessitatibus nulla, explicabo expedita adipisci nisi animi iste numquam, soluta facere,
        obcaecati consequuntur! Sit minima, odit mollitia autem expedita repellat? Debitis quidem quaerat
        consequuntur nulla dignissimos neque expedita?
        <br>
        <em>----by sharon</em>
    </p>

    <!-- Ctrl shift +d 可快速刪除一行 -->
    <div class="pics">
        <img src="https://picsum.photos/100/100" alt="">
        <img src="https://picsum.photos/100/100" alt="">
        <img src="https://picsum.photos/100/100" alt="">
        <img src="https://picsum.photos/100/100" alt="">
    </div>
</section>

<section id="s2">
    <h1 id="movet">123</h1>
    <p>
        <b>Lorem</b> <em>ipsum</em> dolor sit amet, consectetur adipisicing elit. Ipsam dolores laboriosam officiis
        quod
        natus quisquam molestiae laudantium id ut vero. Molestias quos eveniet ducimus reprehenderit aut deleniti
        accusantium soluta fuga?
        <span>Suscipit laudantium asperiores mollitia</span>, alias aliquid quisquam itaque! Harum, commodi dolores
        voluptatum mollitia libero repudiandae hic assumenda beatae ab voluptatem numquam accusamus sapiente
        nesciunt
        ratione. Voluptate hic reiciendis dolores veritatis?
        Quasi voluptatum necessitatibus nulla, explicabo expedita adipisci nisi animi iste numquam, soluta facere,
        obcaecati consequuntur! Sit minima, odit mollitia autem expedita repellat? Debitis quidem quaerat
        consequuntur
        nulla dignissimos neque expedita?
        <br>
        <em>----by sharon</em>
    </p>

    <!-- Ctrl shift +d 可快速刪除一行 -->
    <div class="pics2">
        <img src="https://picsum.photos/100/100" alt="">
        <img src="https://picsum.photos/100/100" alt="">
        <img src="https://picsum.photos/100/100" alt="">
        <img src="https://picsum.photos/100/100" alt="">
    </div>
    <div class="pics">
        <img src="https://picsum.photos/100/100" alt="">
        <img src="https://picsum.photos/100/100" alt="">
        <img src="https://picsum.photos/100/100" alt="">
        <img src="https://picsum.photos/100/100" alt="">
    </div>

</section>

## 實作成果２
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"   
    integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<style>
h1{
    color:rgb(151, 147, 147);
    font-weight: 700 !important;
}
.gohere{
    display:flex;
    width:100%;
    height:100px;
}
</style>
</head>
<body>
<!-- 選單列 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link gogo" href="#p1">前言</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link gogo" href="#p2">分店介紹</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link gogo" href="#p3">特色活動</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link gogo" href="#p4">歷史活動</a>
            </ul>
        </div>
    </div>
</nav>

</nav>
<!-- 圖片跑馬燈 -->
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"
            aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"
            aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"
            aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="img/pic.jpg" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
                <h5>First slide label</h5>
                <p>Some representative placeholder content for the first slide.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="img/pic2.jpg" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
                <h5>Second slide label</h5>
                <p>Some representative placeholder content for the second slide.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="img/pic3.jpg" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
                <h5>Third slide label</h5>
                <p>Some representative placeholder content for the third slide.</p>
            </div>
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>

<!-- 圖片跑馬燈結束 -->
<!-- 內容開始 mt-5 上邊界五-->
<div class="gohere" id="p1"></div>
<div class="container mt-5" >
    <b>   </b>
            <!-- content here -->
    <div class="clearfix">
        <img src="img/1d7bc866d49b49f18b1894f9cd12f3e3.jpg" class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">
    <h1 class="display-1">前言</h1>
        <p>
            A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a
            few meaningless phrases here to demonstrate how the columns interact here with the floated image.
        </p>

        <p>
            As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with
            some actual content in here, rather than just this boring placeholder text that goes on and on, but actually
            conveys no tangible information at. It simply takes up space and should not really be read.
        </p>

        <p>
            And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or
            some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
        </p>
    </div>

</div>
<!-- 第一段結束 -->

<!-- 表格區 -->
<div class="gohere" id="p2"></div>
<div class="container" >
    <h1 class="display-1">分店介紹</h1>
<table class="table table-light  table-hover table-sm">
    <thead class="table-darkS">
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>

</div>
<!-- ---------------------- -->
<div class="gohere" id="p3"></div>
<div class="container" >
    <div class="row">
        <h1 class="display-1">特色活動</h1>
    <!-- col-lg 視窗大的時候站幾份 -->
    <!-- col-md 視窗中的時候站幾份 -->
    <!-- col-sm 視窗小的時候站幾份 -->
    <div class="card mt-5 col-lg-4 col-md-6 col-sm12">
    <img src="img/small.pe.jpg" class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
            content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>
<div class="card mt-5 col-lg-4 col-md-6 col-sm12">
    <img src="img/small.pe2.jpg" class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
            content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>
<div class="card mt-5 col-lg-4 col-md-6 col-sm12">
    <img src="img/small.pe3.jpg" class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
            content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>
</div>
</div>
<!-- --------- -->
<div>
    <div class="gohere" id="p4"></div>
<div class="container" >
    <div class="row">
<h1 class="display-1">歷史介紹</h1>
<img sclass=" w-100" src="img/下載 (1).jpg" alt="...">
<div>
    <div class="col-lg-12 col-md-6 col-sm-12"></div>
    <div class="accordion" id="accordionExample">
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingOne">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
                    aria-expanded="true" aria-controls="collapseOne">
                    Accordion Item #1
                </button>
            </h2>
            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
                data-bs-parent="#accordionExample">
                <div class="accordion-body">
                    <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse
                    plugin adds the appropriate classes that we use to style each element. These classes control the overall
                    appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with
                    custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go
                    within the <code>.accordion-body</code>, though the transition does limit overflow.
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingTwo">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                    Accordion Item #2
                </button>
            </h2>
            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
                data-bs-parent="#accordionExample">
                <div class="accordion-body">
                    <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse
                    plugin adds the appropriate classes that we use to style each element. These classes control the overall
                    appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with
                    custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go
                    within the <code>.accordion-body</code>, though the transition does limit overflow.
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingThree">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                    Accordion Item #3
                </button>
            </h2>
            <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
                data-bs-parent="#accordionExample">
                <div class="accordion-body">
                    <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse
                    plugin adds the appropriate classes that we use to style each element. These classes control the overall
                    appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with
                    custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go
                    within the <code>.accordion-body</code>, though the transition does limit overflow.
                </div>
            </div>
        </div>
    </div>
        <div>
    <div>

<!-- ------------ -->
<div class="container">
    <h1 class="display-1">分店介紹</h1>
    <form class="row gx-3 gy-2 align-items-center">
        <div class="col-sm-3">
          <label class="visually-hidden" for="specificSizeInputName">Name</label>
          <input type="text" class="form-control" id="specificSizeInputName" placeholder="Jane Doe">
        </div>
        <div class="col-sm-3">
          <label class="visually-hidden" for="specificSizeInputGroupUsername">Username</label>
          <div class="input-group">
            <div class="input-group-text">@</div>
            <input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Username">
          </div>
        </div>
        <div class="col-sm-3">
          <label class="visually-hidden" for="specificSizeSelect">Preference</label>
          <select class="form-select" id="specificSizeSelect">
            <option selected>Choose...</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
          </select>
        </div>
        <div class="col-auto">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
            <label class="form-check-label" for="autoSizingCheck2">
              Remember me
            </label>
          </div>
        </div>
        <div class="col-auto">
          <button type="submit" class="btn btn-primary">Submit</button>
        </div>
      </form>
    <div>

<!-- 最後尾端不要動到 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
        crossorigin="anonymous"></script>

        <script>
            $(".gogo").click(function () {
                var t = $(this).attr("href");
                var st = $(t).offset().top;
                $("html,body").animate({
                    scrollTop: st
                }, 500);
            });
        </script>
</body>

</html>

## 實作成果３

#### 購買系統程式碼:

<div class="row mb-3">
<div class="p-3 mb-2 bg-success text-white rounded">
<select class="form-select form-select-lg mb-3 mt-1" aria-label=".form-select-lg example">
<option selected>購買產品</option>
<option value="1">綠豆餅</option>
<option value="2">咖哩滷肉餅</option>
<option value="3">地瓜餅</option>
<option value="4">芋頭餅</option>
<option value="5">核桃腰果伍仁餅</option>
<option value="6">黑芝麻香酥餅</option>
<option value="7">白豆沙</option>
option value="8">黑芝麻餅</option>
<option value="9">紅豆餅</option>

</select>
<div class="row mb-3">
<label for="inputPassword3" class="col-sm-2 col-form-label">數量</label>
<div class="col-sm-4">
<input type="" class="form-control" id="inputPassword3">
</div>
</div>
<div class="row mb-3">
<label for="inputPassword3" class="col-sm-2 col-form-label">電話</label>
<div class="col-sm-4">
<input type="" class="form-control" id="inputPassword3">
</div>
</div>
<fieldset class="row mb-3">
<legend class="col-form-label col-sm-2 pt-0">寄送方式</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" data-bs-toggle="collapse" href="#collapseExample"
role="button" aria-expanded="false" aria-controls="collapseExample" type="radio"
name="gridRadios" id="gridRadios1" value="option1" checked>
<label class="form-check-label" for="gridRadios1">7-ELEVEN
</label>
<div class="collapse" id="collapseExample">
div class="col-md-6">
<label for="inputCity" class="form-label">鄉鎮市區（限桃園市內）</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="col-md-4">
<label for="inputState" class="form-label">街道</label>
<select id="inputState" class="form-select">
<option selected>...</option>
<option>...</option>
</select>
</div>
<div class="col-md-2">
<label for="inputZip" class="form-label">門市</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
</div>

<div class="form-check">
<input class="form-check-input" data-bs-toggle="collapse" href="#collapseExample"role="button" aria-expanded="false" aria-controls="collapseExample" type="radio"name="gridRadios" id="gridRadios1" value="option1" checked>
<label class="form-check-label" for="gridRadios2">全家
</label>
<div class="collapse" id="collapseExample">
<div class="col-md-6">
<label for="inputCity" class="form-label">鄉鎮市區（限桃園市內）</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="col-md-4">
<label for="inputState" class="form-label">街道</label>
<select id="inputState" class="form-select">
<option selected>...</option>
<option>...</option>
</select>
</div>
<div class="col-md-2">
<label for="inputZip" class="form-label">門市</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>

<div class="form-check ">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
<label class="form-check-label" for="gridRadios2">
到店取貨
</label>
</fieldset>
</div>

</form>
<!-- Button trigger modal -->
<div class="container">
<button type="button" class="btn btn-success mt-3 d-grid gap-2 col-3 mx-auto"
 data-bs-toggle="modal" data-bs-target="#exampleModal">購買
 </button>
 <!-- Modal -->
 <div class="modal fade " id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-header">
 <h5 class="modal-title" id="exampleModalLabel" >訊息</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"
 aria-label="Close"></button>
</div>
<div class="modal-body ">  購買成功 !
 </div>
<div class="modal-footer">
 <button type="button" class="btn btn-success" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>

<html>
<body>

<h2>HTML Forms</h2>

<form action="/action_page.php">
<label for="fname">class
：</label>
<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
<option selected> </option>
<option value="1">資二一</option>
<option value="2">資二二</option>
<option value="3">資二三</option>
</select>
<br>
</div>
<label for="lname">座號：</label>
<input type="text" id="lname" name="lname" value=""><br><br>
<label for="2name">姓名：</label>
<input type="text" id="3name" name="lname" value=""><br><br>
<label for="lname">性別：</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
<label class="form-check-label" for="exampleRadios1">
男
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
女
</label>
</div>
<label for="lname">疫苗：</label>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
第一劑
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
第二劑
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
第三劑
</label>
</div>
<br><br>
<input type="reset" value="重設">
<input type="button" value="說明">
<input type="submit" value="Submit">
</form>
</body>
</html>

---

<iframe width="100%" height="640" frameborder="0" allow="xr-spatial-tracking; gyroscope; accelerometer" allowfullscreen scrolling="no" src="https://kuula.co/share/collection/7FCqC?logo=1&info=1&fs=1&vr=0&sd=1&thumbs=1"></iframe>

<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="擷取.PNG" usemap="#image-map">

<map name="image-map">
    <area target="" alt="grrgrgrgrg" title="grrgrgrgrg" href="https://hackmd.io/@iamfefe/H1HisJiJj#XAMPP" coords="NaN" shape="circle">
</map>