3. 自訂網站外觀及內容

一、打造屬於自己風格的版面

1. 建議使用school2019 BootStrap4佈景
2. 範例網站：http://stu.tncomu.tn.edu.tw/~demo1091/index.php
3. 先製作專屬logo：「佈景」→「logo設計」
4. 調整版型：「佈景」→「基本版面」，欄位數除非無法以整數相加得到12，不然盡量少用auto，例如兩欄式可以是9+3，就盡量別9+auto。
5. 加入網路字型設定：「佈景」→「額外設定」→「欲加入頁尾的CSS或JS語法」

   <link href="https://fonts.googleapis.com/css?family=Noto+Sans+TC|Noto+Serif+TC&display=swap" rel="stylesheet">
   <link href="https://schoolweb.tn.edu.tw/uploads/fonts/woff2.css" rel="stylesheet">

    

6. 套用網路字型：「佈景」→「額外設定」→「主要字型設定」，放第一個會優先使用
   1. 思源黑體： 'Noto Sans TC', sans-serif
   2. 思源宋體： 'Noto Serif TC', serif
   3. 粉圓體： jf-openhuninn
   4. 王漢宗魏碑體： HanWangWeBe
   5. 可愛的日文字型： Mamelon （可能會有缺字）
7. 背景可使用不重複透明圖搭配底色，做出與眾不同的效果
   1. 下載透明背景：https://www.cleanpng.com/free/background.html
   2. 將圖片縮小，以節省空間，加速傳輸：https://tinypng.com/
8. 滑動圖（1280x300）可利用原有的四張圖來做加工
   1. 人像自動去背：https://www.remove.bg/zh/upload
   2. 線上影像處理：https://www.photopea.com/
      1. 可至「more」設定成中文語系
      2. 新增專案→背景選「透明」
      3. 圖片可直接從檔案總管拉進去
      4. 文字請勾選「 Chi-Jap-Kor 」，然後用「 Noto Sans TC 」就有完整正體中文
      5. 最後只要按左上圖示，轉存為png，下載即可
9. 區塊標題列，字體可調大，「區塊標題樣式手動設定」可自行輸入CSS來設定文字，例如：

   padding:6px; /* 離標題邊框距離 */
   text-align:left; /* 文字靠左 */
   font-weight:normal; /* 不要粗體 */
   font-family: HanWangMingBlack, jf-openhuninn, 'Noto Sans TC', Mamelon; /* 字型 */
   background: -webkit-linear-gradient(#5F951F, #007FA0); /* 漸層顏色 */
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;

    

10. 導覽工具列，若是不想遮住背景圖，可以在「導覽列透明度」設 0.5 （半透明）

二、自己做網路字型

1. 上傳字型（不可超過10M）轉為WOFF2格式：https://transfonter.org/
2. WOFF2 使用自訂預先處理和壓縮演算法，與其他格式相較可多縮減 ~30% 的檔案大小
3. 將WOFF2字型上傳到網路上，並製作網路字型的css檔，也一併上傳，以Mamelon為例：

   @font-face {
       font-family: "Mamelon";
       src: url("https://網址/uploads/fonts/Mamelon.woff2") format("woff2");
       font-weight: normal;
       font-style: normal;
   }

    

4. 接著就如同上面套用方式，或者直接在樣式表中，以 font-family 直接設定字型名稱即可

三、自訂頁面應用

1. 想要加入自己編寫的內容，卻又不想像新聞一樣，會隨著時間的推移而將文章往後塞，此時，您就可以用「自訂頁面」功能來做。 我們利用這功能來做一個組織介紹（以「開發組」為例），並讓該組織可以有獨立的公告區、相簿、討論區...等。
2. 「編輯功能→發布文章」→發布文章種類 ：「自訂頁面」
   1. 第一次發文請順便建立一個分類，如：「開發組」
   2. 編輯後，需要透過區塊或選單才看得到自訂頁面內容。
   3. 故請點擊分類連結，如「我的文章」→「開發組簡介 (管理員 / 2 / 開發組) 」中的「開發組」，或者自訂文章中的「開發組 / 2020-03-20 / 人氣： 3」
   4. 按下綠色的「加入佈景選單」就可以將該分類加到導覽列中，日後新增文章時，導覽列會自動長出文章連結。
   5. 加入「自訂頁面選單」區塊到前台，並顯示到全部頁面，只有切換到該分類文章時，該區塊才會出現，供使用者方便觀看該組所有頁面內容用。
   6. 未來若還有第二個自訂頁面分類，請複製該區塊，並修改設定即可。
3. 自訂頁面的頁籤用法：當內容較多，且有適當分類時適用。
   1. 一旦決定頁籤版型後，便無法變回一般版型。
   2. 自訂頁面文章下方有「調整頁籤排序」按鈕，可直接拉動排序。
4. 同一個分類下的文章，可以在分類頁面直接拉動文章排序。
5. 可編輯自訂文章分類，決定一些細節，例如是否顯示上下頁按鈕，或者是否使用固定標題。
   1. 可關閉「顯示文章標題」
   2. 利用「佈景」→「logo設計」設計文章標題，並將圖存起來，複製圖片連結
   3. 編輯文章，到文章中插入圖片，貼上圖片網址即可。

四、自訂頁面相關區塊

1. 「自訂頁面選單」：會自動偵測網址，只有在所屬分類下才會出現該分類所有頁面選單。
2. 「自訂頁面列表」：固定呈現自己指定的分類頁面選單
3. 「自訂頁面樹狀目錄」：以樹狀目錄來呈現的自訂頁面選單

五、讓logo可以根據不同頁面來自動切換

1. 假設我們希望連到開發組頁面，logo會自動加上開發組字樣
2. 假設開發組分類頁面為：http://網址/modules/tadnews/page.php?ncsn=5
   1. 其中「自動配對變數名稱」就是「ncsn」
   2. 先到「佈景」→「logo設計」做一張開發組的標題圖，下載後檔名改為「5.png」
   3. 利用FTP軟體或利用tadnews模組的CKEditor編輯器將圖片上傳，可建立一個logo資料夾，其「圖示放置路徑」應為「 /uploads/tadnews/image/logo/ 」
   4. 「logo圖的副檔名」為「png」
3. 至「佈景」→「logo圖」，將「是否使用自動配對」選「是」，並填入以上資訊即可。

六、用Tad Embed嵌入區塊模組來製作單位專屬公告頁面

1. 此模組是用來讓其他網站嵌入XOOPS區塊用的，請將之安裝起來，編號 81
2. 此模組需搭配「blank_theme 空白佈景」，故請安裝70號佈景
3. 使用範例：http://www.tlps.hlc.edu.tw/modules/tad_embed/page.php?ebsn=2
4. 我們可以利用此模組做成「開發組公告」頁面，此模組在後台設定，前台使用
   1. 到後台新增資料，選擇「最新消息→條列式新聞」，基本上，任何區塊均可。
   2. 在區塊設定中，將「選擇要秀出的類別」只勾選該單位新聞分類，如：「開發組消息」
   3. 預覽沒問題的話，請將語法複製起來。
   4. 到「開發組」分類下新增一個自訂頁面，切換成「原始碼」模式，將語法貼上即可。
5. 利用此方法，可以製作該單位的活動相簿、榮譽榜、討論區...等頁面。

七、利用Google或Facebook登入

1. 請安裝 tad_login ，編號 24 ，裝好後，請看一下後台的「Google認證設定說明」
2. 接著到偏好設定中的「欲使用的認證方式」，選擇「使用Google登入」
3. Facebook也一樣流程，在未申請完之前，請勿啟用，不然網站可能會出問題。
4. 到後台「自動群組設定」若知道成員的email可以在此設好，登入就會自動分配好群組。
5. 建議開啟「快速登入」區塊，並建議使用大圖示比較清楚。

八、電子報應用（以下僅補充，有時間再上）

1. 您至少必須有一組「電子報主題」，才能在該主題下建立每一期的電子報。
2. 「tadnews後台→電子報管理」去「建立新的電子報主題」。
3. 每一組「電子報主題」可以有自己的名稱、檔頭、檔尾以及佈景。
4. 一個網站可以建立許多不同主題的電子報。
5. 若要刪除一個「電子報主題」，得先將其下的電子報都刪除才行。

九、編輯電子報

1. 「後台→本站新聞→電子報管理」，先選擇主題→「新增一期電子報」
2. 「步驟二」可以從左邊選擇您要放入電子報的新聞到右邊，並調整上下順序。
3. 「步驟三」設定一個當期電子報標題，並進行最後的整理，要增減內容請在此進行。
4. 「步驟四」可以預覽電子報，也可以自行增減要寄信的對象，然後進行寄出動作。
5. 在使用者介面的「本站新聞→電子報列表」也可以看到電子報。
6. 此時，您也可以新增「電子報一覽」的區塊，以便讓網友觀看。
7. 「觀看寄送紀錄」可以讓您查看哪些人有寄了。
8. 「立即寄出」則可寄信給指定的人。下方可大量匯入Email（以半形逗號隔開）
9. 若訂閱者很多，可能要分批寄送。

十、設計電子報佈景

1. 一套電子報佈景是一個目錄，主佈景檔名為index.html，做好請傳至「/uploads/tadnews/themes/」底下即可。
2. 先編輯好一個網頁，然後切換到「程式碼」，加入一些佈景標籤即可完成。
3. 線上收信圖片會消失，是因為線上收信程式擋掉部份標籤或CSS的關係，若希望圖片可以完整呈現，盡量用HTML標籤，並請避開被禁止之CSS屬性：https://developers.google.com/gmail/design/reference/supported_css
4. 佈景中，可用的樣板標籤如下（灰色的部份是一定要用的部份）：

套用標籤	標籤作用
{TNP_TITLE}	電子報的主題，用法：<title>{TNP_TITLE}</title>
{TNP_CODE}	網頁的編碼，用法：<meta http-equiv="content-type" content="text/html; charset={TNP_CODE}" />
{TNP_THEME}	佈景主題的路徑，若有圖片，請在圖片前面加上{TNP_THEME}標籤。 如：<link rel="stylesheet" type="text/css" href="{TNP_THEME}style.css" />
{TNP_CSS}	預設的CSS設定連結（<head> </head> 中貼上就好）
{TNP_HEAD}	頁首（或者電子報標題）
{TNP_CONTENT}	電子報主內容
{TNP_FOOT}	頁尾（若覺得段落間距太大，可用shift+Enter加入斷行）

十一、電子報相關區塊

1. 「訂閱 / 取消電子報」：讓用戶訂閱電子報的界面。
2. 「電子報一覽」：列出目前最新N則的電子報連結。標題