PHP 資料庫網頁設計 - 網頁動態技術 - 期中作業

作業內容

請學員使⽤ Bootstrap 設計個人作品集網站（一頁式亦可），並具備 RWD 響應式網頁效果。完成後需上傳到學員 Github 帳號並開啟 Github Page 功能並且繳交連結網址。

繳交期限

未定

主要功能

1. 首頁
   • 導覽列按作品連結，可選擇看所有、視覺設計、PHP專案作品。
   • 導覽列按關於連結，能前往關於區塊。
   • 關於區塊有本人介紹與聯絡資訊。
   • 導覽列按技能連結，能前往技能區塊。
   • 技能區塊有本人會的技術列表，點擊圖示可以前往相關網頁，hover在圖示會有動畫。
   • 導覽列點擊後加粗字體。
   • 當游標懸停在作品截圖，能看到翻頁動畫。
   • 作品截圖上有作品標題。
2. 作品說明頁
   • 點擊首頁的作品截圖可以到作品說明頁。
   • 導覽列有返回按鈕，點擊可以到首頁。
   • 導覽列有Github按鈕，點擊可以到專案的Github頁面。
   • 若有提供Github連結，就會顯示Github按鈕。
   • 導覽列有專案連結按鈕，點擊可以到專案首頁。
   • 內容區塊有作品標題、說明與截圖。
3. 登入頁
   • 點擊首頁導覽列的Login連結，可以到會員登入頁。
   • 點擊使用者圖示焦點至使用者輸入框。
   • 點擊鎖圖示焦點至密碼輸入框。

評分說明 （合計 100 分）

1. 響應式網站版型 (2 種以上） / 20 分
   使用 Bootstrap 設計網站，並使用 breakpoint 技術，完成兩種以上適應裝置瀏覽體驗且佈局結構完整。

2. 網站選單主題 (4 組以上） / 40 分
   提供四組以上之網站主題內容（可參考網頁設計實務其中作業之主題需求），並對應之主選單連結導向。

3. CSS 設計與網站完整度 / 10 分
   使用外部樣式表編寫自訂 CSS 之程式，並確保網站內容完整（含 facicon.ico 與圖文內容）

4. 使用 CSS-Flex （後台登入頁） / 10 分
   另設計並指定相對路徑/ login.html為登入專用頁面，使用 flexbox 排版技術完成表單登入介面。

5. 使用 CSS-Hover 視覺動態 / 10 分
   網站舉任一主題內使用 CSS 轉場或任何動態效果設計，使滑鼠於互動 hover 時產生視覺變化。

6. GitPage 上傳 / 10 分
   使用個人 Github 帳號上傳 repository 並開啟 Github Page 功能（複製連結提供繳交說明）。

繳交方式

完整代碼上傳 Github ClassRoom 至指定 repository，並於說明欄位提供 個人 GitPage 之預覽連結（前項第 6 點動作）

• 作業連結