Update index.html

index.html

@@ -267,7 +267,88 @@ conda install jupyter
 pip install streamlit matplotlib
                 </code></pre>
             </div>
-            <p style="margin-top: 20px;">完成以上步驟後，您的 <code>pygmt</code> 環境便已準備就緒，可以用於後續的地球物理資料分析與視覺化。</p>
+            
+            <hr style="margin: 3rem 0; border: 1px dashed var(--border-color);">
+
+            <h3>3. Jupyter Notebook 使用教學</h3>
+            <p>安裝好環境後，Jupyter Notebook 是進行資料分析、程式編寫與製作報告的絕佳工具。以下是基本的使用教學。</p>
+
+            <h4>1. 啟動 Jupyter Notebook</h4>
+            <p>首先，確認您已經啟動先前建立的 <code>pygmt</code> 環境：</p>
+            <div class="code-block"><pre><code>conda activate pygmt</code></pre></div>
+            <p>接著，輸入以下指令來啟動 Notebook 服務：</p>
+            <div class="code-block"><pre><code>jupyter notebook</code></pre></div>
+            <p>執行後，系統會自動開啟您的預設瀏覽器，並顯示 Jupyter Notebook 的主畫面，您可以在此看到檔案列表。</p>
+            <div class="screenshot-prompt">
+                <p>📸 <strong>截圖提示：</strong> 此處應顯示 Notebook 主畫面（可看到檔案清單）。</p>
+            </div>
+
+            <h4>2. 建立一個新的 Notebook</h4>
+            <p>在主畫面的右上角點擊按鈕 <strong>New</strong>，然後在下拉選單中選擇 <strong>Python 3 (ipykernel)</strong>。</p>
+            <p>這會在新分頁中開啟一個全新的 Notebook 檔案 (<code>Untitled.ipynb</code>)，您可以開始編寫程式碼。</p>
+            <div class="screenshot-prompt">
+                <p>📸 <strong>截圖提示：</strong> 此處應顯示點擊「New」按鈕的畫面，以及打開後的空白 Notebook 介面。</p>
+            </div>
+
+            <h4>3. Notebook 的基本操作</h4>
+            <ul class="step-list">
+                <li>
+                    <strong>儲存格 (Cell)：</strong> Notebook 由一個個的「儲存格」組成，主要分為兩種類型：
+                    <ul>
+                        <li><strong>Code：</strong> 用於輸入並執行 Python 程式碼。</li>
+                        <li><strong>Markdown：</strong> 用於輸入格式化的文字、標題、清單、數學公式等，作為說明與排版。</li>
+                    </ul>
+                </li>
+                <li>
+                    <strong>執行儲存格：</strong> 選中一個儲存格後，按下 <code>Shift + Enter</code> 鍵，或點擊上方工具列的「Run」按鈕即可執行。
+                </li>
+            </ul>
+            <div class="screenshot-prompt">
+                <p>📸 <strong>截圖提示：</strong> 此處應顯示工具列中，用於切換儲存格類型 (Code/Markdown) 的下拉選單。</p>
+            </div>
+
+            <h4>4. 範例程式測試</h4>
+            <p>為了確認所有套件都已正確安裝，請在第一個 Code 儲存格中輸入以下 Python 程式碼：</p>
+            <div class="code-block">
+<pre><code>import pygmt
+import obspy
+import matplotlib.pyplot as plt
+import pandas as pd
+
+print("Jupyter Notebook 測試成功！")</code></pre>
+            </div>
+            <p>按下 <code>Shift + Enter</code> 執行。如果下方成功輸出「Jupyter Notebook 測試成功！」的訊息，就代表您的環境已設定完成且運作正常。</p>
+            <div class="screenshot-prompt">
+                <p>📸 <strong>截圖提示：</strong> 此處應顯示程式碼儲存格以及其下方成功輸出的「Jupyter Notebook 測試成功！」結果。</p>
+            </div>
+
+            <h4>5. Notebook 常用技巧與快捷鍵</h4>
+            <p>熟悉快捷鍵能大幅提升您的工作效率：</p>
+            <ul class="step-list">
+                <li><strong>插入新儲存格：</strong>
+                    <ul>
+                        <li>在當前儲存格的<strong>上方</strong>插入：先按 <code>Esc</code> 進入命令模式，再按 <code>A</code> (Above)。</li>
+                        <li>在當前儲存格的<strong>下方</strong>插入：先按 <code>Esc</code> 進入命令模式，再按 <code>B</code> (Below)。</li>
+                    </ul>
+                </li>
+                <li><strong>刪除儲存格：</strong> 先按 <code>Esc</code> 進入命令模式，再快速按兩次 <code>D</code>。</li>
+                <li><strong>切換儲存格類型：</strong>
+                    <ul>
+                        <li>切換為 <strong>Markdown</strong> 模式：先按 <code>Esc</code>，再按 <code>M</code>。</li>
+                        <li>切換回 <strong>Code</strong> 模式：先按 <code>Esc</code>，再按 <code>Y</code>。</li>
+                    </ul>
+                </li>
+                <li><strong>輸入數學公式 (LaTeX 語法)：</strong>
+                    <p style="margin-bottom: 0.5rem;">在一個 Markdown 儲存格中，您可以使用 <code>$</code> 符號來包裹 LaTeX 語法以顯示公式。例如，輸入 <code>$E = mc^2$</code>，執行後會渲染成：$E = mc^2$</p>
+                </li>
+            </ul>
+            <div class="screenshot-prompt">
+                <p>📸 <strong>截圖提示：</strong> 此處應顯示一個 Markdown 儲存格，其中包含標題、清單以及渲染後的數學公式效果。</p>
+            </div>
+            
+            <div class="summary-box">
+                <p>👉 透過以上教學，學生不僅能安裝好環境，更能直接利用 Notebook 的互動特性來編寫程式、進行資料實驗，並將程式碼、圖表與文字說明整合在同一份文件中，非常適合用於製作課程作業與實驗報告。</p>
+            </div>
         </section>
 
     </main>