---
# System prepended metadata

title: 校園聲景教戰手冊

---

# 校園聲景教戰手冊(舊網頁)
![image](https://hackmd.io/_uploads/S12Fl-ekC.jpg)
- 本手冊旨在指導如何在舊網頁伺服器上管理和更新校園聲景項目。
- 項目之後將從Web4遷移到Rpage。



## 一. 資料存放位置

### 1. 開啟Web4
![image](https://hackmd.io/_uploads/BJzmwXYk0.jpg)

### 2. 登入
- **密碼lib1695**

![image](https://hackmd.io/_uploads/BkMLPmK1R.png)

### 3. 開啟檔案
![image](https://hackmd.io/_uploads/H1-luQtJR.png)


### 4. 資料夾清單選擇PUsoundscale
- 如果左側沒有資料夾清單，去面板重設工作區

### 5. 資料存在PUsoundscale\\Soundscale
![image](https://hackmd.io/_uploads/Sy1SKXtk0.png)

### 6. 修改
- 我們會先在**Y:校園聲景\\Soundscale**進行修改和備份
- 修改完確定沒問題，再覆蓋至Web4
 
![image](https://hackmd.io/_uploads/BkTJqXFJR.png)



## 二. 如何進行修改

### 1. 範例資料
![image](https://hackmd.io/_uploads/SkR8ziz1C.png)

### 2. 確認音檔類型
- 音檔可能為M4A、WAV、MP3、MP4等等
- **統一轉成WAV檔(舊網頁Web4)**
- 未來移到新網頁，會統一使用MP3

### 3. 音檔存放位置
- 存放在 Web4   **PUsoundscale\\Soundscale\\sound\\**
- 根據音檔類別放置到相應資料夾

![image](https://hackmd.io/_uploads/BJK-s7Yk0.png)

### 4. 圖片存放位置
- 存放在Web4 **PUsoundscale\\Soundscale\\images\\photo**
- 根據圖片類別放置到相應資料夾

![image](https://hackmd.io/_uploads/HkKTxEYJC.png)

### 5. 網頁程式存放位置
- 存放在 **Y:校園聲景\\Soundscale\\soundmap.html**

![image](https://hackmd.io/_uploads/HyZ0xZekR.jpg)

### 6. 對soundmap.html進行修改(建議使用vscode)
- 記得先存備份
- 修改完覆蓋至**PUsoundscale\\soundscale\\soundmap.html**

![image](https://hackmd.io/_uploads/ry6aWNtJC.jpg)

### 注意事項
- 進行任何修改前，務必確保已有完整的備份，以避免數據丟失。


## 三. html修改內容

### 1. 如何增加區塊內的紅點
- 在\<div class='map2'>\</div>內加上
![image](https://hackmd.io/_uploads/ByREo4F1C.png)


![image](https://hackmd.io/_uploads/SkA3uEKyA.png)

![image](https://hackmd.io/_uploads/H1H0YVK1R.png)





### 2. 編輯紅點上的數字
- 如果有增加區塊內紅點的數量，要記得修改主頁紅點數量

![image](https://hackmd.io/_uploads/rJnJONKJ0.png)

![image](https://hackmd.io/_uploads/H1DS_NKkC.png)












