除了基本的照片與描述資訊外 (如信箱、電話、興趣),「人員介紹」頁面更包括以下特色:
  • 彈性的描述欄位設計
    透過「自訂」的功能,增加新的描述欄位,例如「個人網站」,以滿足不同的介紹需求。
     
  • 人員分類
    例如博士、碩士、專題生 or 教授、副教授、行政人員等,讓呈現更清楚。
     
  • 排版
    可依據手機、電腦等不同裝置設計顯示的欄位數量,或是照片的顯示位置等。
 
45b2c79e43744de626d31ddc1b048a9d.png
 
以下是主要的設計流程。
重點
  1. 1.
    新增人員介紹頁面
    在「選單與內容管理」,點擊工具列「新增 / 自訂頁面 / 人員介紹」,新增後的頁面會在「選單與內容管理」的最下方 (可以調整順序)。
    2a6de6a54a35c4fa741dddd1dd806dd1_thumb.png
  2. 2.
    設計介紹欄位
    在開始新增人員之前,需要先確定要使用哪些介紹欄位。
    進入「介紹欄位管理」,點擊「新增」,選擇加入系統提供的欄位 or 透過「自訂欄位」建立新的。
    743b9e93a5fb2fd3ed5efd056fa56d3e_thumb.png
  3. 3.
    建立人員分類
    如果人數較多,可以進入「分類管理」建立分類,例如:博士、碩士 or 教授、副教授、行政人員等分類。
    7e89db7b1c6a396e6a7df14e81cb20ef_thumb.png
  4. 4.
    新增人員資訊
    進入「人員管理」,選擇分類後,點擊「新增」,即可編輯成員的資訊 (例如:照片、研究領域、信箱等)。
    e0c150aa8009073dee6bebae75ff2f7a_thumb.png
  5. 5.
    關閉 / 開啟編輯模式
    完成後,建議可以透過頁面下方的「關閉編輯模式」按鈕隱藏工具列,減少管理者檢視時的干擾,有需要編輯頁面時再開啟。
    d14a97bdfc6a615b752cf6a73b839a7d_thumb.png
  6. 6.
    設定顯示方式
    透過「顯示設定」,可以設計排版、照片位置與形狀、分類的顯示方式等,更詳細的呈現效果,請參考下方的範例。
    2c81457baff99b6de62c950596f90fb3_thumb.png
  7. 顯示設定的範例
  8. 7.
    顯示欄數
    不同裝置 (電腦、平板、手機) ,可設定不同的顯示欄數,例如,電腦用 2 欄顯示,手機用 1 欄顯示。
    857407894340bb979a750ea410c363d1_thumb.png
  9. 8.
    人員照片位置
    照片在介紹資訊不同位置的效果 (靠左、上面)。
    7c965b1a2d071400422a99a3f91cbd03_thumb.png
  10. 9.
    照片形狀
    照片為「圓角」形狀的效果。
    581851cbd27fa84a1c615b16b6f353dd_thumb.png
  11. 10.
    欄位圖示
    勾選「顯示」欄位圖示後,介紹欄位前就會出現圖示,增加欄位的美觀和辨識度。
    627059ca789427ad6209f010cd039f34_thumb.png
  12. 11.
    分類顯示
    以下是全頁顯示的效果,所有分類、人員介紹都會依序呈現在同⼀⾴⾯上。
    6c07c8f70d68ce0a01792954beaf3f51_thumb.png
    位置
    資料夾名稱
    系統管理 ~ 網站外觀設計(網站中心)
    發表人
    jell
    單位
    集智學習科技官方網站
    建立
    2021-03-11 14:21:26
    最近修訂
    2021-03-11 14:40:08