site按鈕學習

因為 Google Sites 在編輯模式和發布模式下的網址結構不同所導致的。

為了確保連結能正確跳轉到您網站的頁面，我們需要使用發布後的公開網址。

請依照以下步驟操作，就能修正這個問題：

步驟 1：獲取正確的頁面網址

請您先在瀏覽器中打開您的網站（是訪客看到的那種公開版本，不是編輯畫面喔）。

1. 在您的網站導覽列上，點擊「手拉坏與AI的對話」這個頁面。

2. 複製瀏覽器上方網址列裡面的完整網址。

3. 接著，依序點擊「DONA IP 原形」、「雨中月琴DONA」、「學院風DONA」這三個頁面，並分別複製它們的完整網址。

步驟 2：更新 HTML 代碼

取得四個正確的網址後，請回到 Google Sites 的編輯頁面，找到您剛剛嵌入的那個按鈕 HTML 區塊，點擊編輯。

然後，用您剛剛複製的正確網址，替換掉下方代碼中 href="..." 引號裡的內容。

<style>

  /* ... (這部分的 CSS樣式碼維持不變，省略以節省空間) ... */

  .button-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; padding: 20px 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }

  .ceramic-btn { display: inline-block; text-decoration: none; background-color: #8d5a3a; color: #fff !important; border: 2px solid #8d5a3a; padding: 12px 24px; border-radius: 30px; font-size: 1rem; font-weight: 600; text-align: center; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(141, 90, 58, 0.2); min-width: 120px; flex: 1 1 auto; max-width: 200px; }

  .ceramic-btn:hover { background-color: #a67c5b; border-color: #a67c5b; transform: translateY(-3px); box-shadow: 0 6px 12px rgba(141, 90, 58, 0.3); }

  .ceramic-btn:active { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(141, 90, 58, 0.2); }

</style>

<div class="button-container">

  <a href="請貼上_手拉坏與AI的對話_頁面的正確網址" class="ceramic-btn">

    手拉坏與AI的對話

  </a>

  <a href="請貼上_DONA IP 原形_頁面的正確網址" class="ceramic-btn">

    DONA IP 原形

  </a>

  <a href="請貼上_雨中月琴DONA_頁面的正確網址" class="ceramic-btn">

    雨中月琴DONA

  </a>

  <a href="請貼上_學院風DONA_頁面的正確網址" class="ceramic-btn">

    學院風DONA

  </a>

</div>