:::

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. 加入網路字型設定:「佈景」→「額外設定」→「欲加入頁尾的CSSJS語法」
    <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. 利用此方法,可以製作該單位的活動相簿、榮譽榜、討論區...等頁面。

七、利用GoogleFacebook登入

  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則的電子報連結。標題

:::

搜尋


書籍目錄

展開 | 闔起

線上使用者

16人線上 (4人在瀏覽線上書籍)

會員: 0

訪客: 16

更多…