# HW1 評分標準

以下每點佔作業一成績五分。

- **頁首(header)**
- 每個頁面都應該包含一個**頁首(header)**，包含：公司 logo、公司名稱：Scotty Shirts U Illustrate (SSUI) ，以及紅色圓角矩形中的購物車 logo，購物車中的商品數量為 0。 (5)
- 頁首下方為頂部選單(menu)，包含：T-SHIRTS, CREATE FROM PICTURE, CREATE YOUR OWN, ABOUT US, 與 LOG IN。 (5)
- 點選公司 logo應連結到主要頁面 (`index.html`)、T-SHIRTS 應連結到產品列表頁面(`products.html`)，其他連結（包括點選購物車圖標）應連結到 `not_implemented.png` 頁面。 (5)
- 上述資訊應在每個頁面的 html 中定義，並在 CSS 文件定義樣式。 (5)
- 頁首(header)應固定在所有頁面內容頂部，所以如果內容太多，在滾動時會滾出瀏覽器視窗範圍。 (5)
- **頁尾(footer)**
- 每個頁面皆應呈現**頁尾(footer)**，其中包含：Contact Us, Site Map, Privacy Policy, Careers, Reviews，以及 “Designed by <yourname>。 (5)
- 除 "Designed by…"以外，上述連結皆應連結到 `not_implemented.png`。 (5)
- 頁尾應該位於所有內容下方，而非瀏覽器視窗底部。 (5)
- **懸停(hover)**
- 所有**可點擊的元素**應該透過 **懸停(hover)** 後的外觀變化，讓使用者了解其可被點擊，如同範例影片所示。例如：
- 在頂部選單選項懸停時結合動畫顯示紅色粗底線 (5)
- 在其他其他按鈕懸停時更改文字顏色。 (5)
- **主要頁面 (index.html)**
- 應包含 `home.png` 和兩個包含有趣內容的文字框。 (5)
- **產品列表頁面(product.html)**
- 除了頁首和頁尾資訊外，其餘內容應從 `shirts.js` 生成。請走訪 `shirts.js` 定義的列表，並為每個項目創建一個條目。產品列表頁面上的條目應至少列出圖片、名稱、有多少種顏色，以及查看詳細資訊的按鈕。 (5)
- 單擊詳細資訊按鈕或圖片，可連結至產品詳細資訊頁面。 (5)
- 條目的佈局(layout)應該適用於任何數量的襯衫（1~20件），以及任何合理的瀏覽器視窗寬度。 (5)
- **產品詳細資訊頁面(details.html)**
- 與產品列表頁面類似，除了頁首和頁尾信息外，其餘內容應由 `shirts.js` 文件中的資料生成。 (5)
- 請將所選襯衫的所有可用選項顯示為可點擊元素，並根據用戶的選擇切換顯示的圖片。 (5)
- 每件襯衫可能有不同顏色可選，且每種顏色都有正面和背面，所以正面和背面的選擇和顏色的選擇應該是獨立的。 (5)
- 與在產品頁面中一樣，網站應該對缺失資料具有穩健性(Robustness)。 (5)
- **尚未完成頁面(not_implemented.html)**
- 提醒使用者該頁面尚未完成，該頁面不需要任何頁首、頁尾或連結。使用者可以使用瀏覽器的回上一頁按鈕離開該頁面。如果連結頁面尚未完成，每個具有連結的元素都應在單擊後跳轉到此頁面。 (5)
- **視窗的大小變化**
- 當瀏覽器視窗的大小發生改變時，所有頁面都應該做一些合理變化。例如，頁首和頁尾的寬度可以變得更窄。請注意此作業不須實作響應式頁面(Responsive Web Page, RWD)，例如根據視窗寬度更改條目佈局(layout)或內容，但若實作 RWD 可獲得加分。 (5)

---

## 加分項目
* **「快速查看」按鈕**（最多在此作業中 +5分）
* 如範例所示，可針對產品列表頁面上的每件襯衫條目新增「快速查看」按鈕，以顯示部分位於產品詳細資訊頁面上的資訊。
* 顯示區塊可如同範例位於頁面底部，也可使用彈出式視窗(pop-up)呈現。
* 使用者應可關閉此區塊（如範例例中的「關閉」按鈕，若以彈出式視窗實作，也應該有一個 "X" 按鈕令其被關閉它），並且當在範例圖片中快速查看的圖片點擊時，它應該連結到詳細信息頁面。
* 如果你沒有實作此加分項目，請刪除「快速查看」按鈕，或連結到未實現的頁面。

* **響應式頁面 Responsive Web Page**（最多在此作業中 +5分）
* 請使作業中的頁面具有響應性，這代表著隨著視窗寬度的增減，頁面應重新排列並更改內容。例如，當網頁寬度為手機寬度時，請將頁首和頁尾選單改以可展開的漢堡圖標 (Hamburger button)呈現，就像在手機上使用 [NTU Cool](https://cool.ntu.edu.tw/) 時選單的呈現樣式
* 提示：在此作業中不可使用任何函式庫(包含 Bootstrap)，因此請使用 css 文件中的 `@media` ）。
* 當視窗較窄時，請同時更改產品頁面的佈局方式。
* 注意：在內容變窄時壓縮內容寬度，是基本作業要求的一部分。若希望可達成加分條件，請調整頁面結構。

###### tags: `使用者介面程式設計`