網站功能使用先備知識
請參考教學影片：https://youtube.com/playlist?list=PLvXna0vipzJAMFyTQkbjvUfxWuSQWv_G-
注意事項
- 側欄的單元多由小工具「導覽選單」製作，對於現有選單請勿更動其英文名稱，否則可能會造成版面樣式失效之情況。
- 網站現有「分類代稱」盡量不要去更動，否則版型中搭配CSS樣式表語法處理的設計，將會失效。未來若有新的分類，其「分類代稱」也應以有意義的英文命名，因為這名稱會帶到網址內，有助於搜尋網站對於官網的SEO。
- 頁面或文章「代稱」建議以有意義的英文命名，因為這名稱會帶到網址內，有助於搜尋網站對於官網的SEO。
- 正確使用 < H2 > ~ < H6 > Header元件
- 因< H1 >已被 頁面/文章 標題所使用，故編輯內文時請勿使用< H1 >
- 請由上而下的方式註記文章章節標題，以利瀏覽器辨別輔助閱讀。
- 無障礙規則說明：https://accessibility.moda.gov.tw/Download/Detail/105?Category=39/
版型樣式之套用
- 文章/頁面標題前綴標示版型使用說明
- 「標題區塊」title-box
- 「左圓右方標題樣式」title-style-a
- 「頁面內容區塊樣式」page-info-box
- 「列表式最新文章」news-table-list
- 「三欄式最新文章」home-hot-news
- 「more」按鈕 more-button
- 按鈕顏色
- 文字色彩
- 背景色彩
- 表格樣式範例
- 分隔符號範例
- 修改< ul > < ol >清單之標示為中文數字
- 兩欄式列表清單 row-2
- 區塊式清單 block-columns-25
- 將區塊間距padding與margin設為0px
- 左側飾條區塊 border-left-box
- 右側飾條區塊 border-right-box
文章/頁面標題前綴標示
列表式最新文章標題手動標籤：於頁面內容標題前方加入<b class=”樣式語法”>標籤文字</b>，樣式語法與對應樣式如下：
範例
<b class="color-logo-green-bng">綠底白字</b><b class="color-logo-yellow-bng">黃底白字</b><b class="color-logo-red-bng">紅底白字</b><b class="tag-new">new</b><b class="tag-hot">Hot</b><b class="tag-top">Top</b>「標題區塊」title-box
- 用法1：新增區塊類型「多重欄位」，並於此區塊之進階設定「附加的 CSS 類別」套用「title-box」。
- 用法2：直接將樣式套用於「標題」，可於此標題之進階設定「附加的 CSS 類別」套用「title-box」。
範例
多重欄位內H2標題
多重欄位內H3標題
多重欄位內H4標題
多重欄位內H5標題
多重欄位內H6標題
未使用多重欄位，直接將樣式套用於H2標題
未使用多重欄位，直接將樣式套用於H3標題
未使用多重欄位，直接將樣式套用於H4標題
未使用多重欄位，直接將樣式套用於H5標題
未使用多重欄位，直接將樣式套用於H6標題
「左圓右方標題樣式」title-style-a
適用套用背景色彩的區塊，於此區塊之進階設定「附加的 CSS 類別」套用「title-style-a」。
套用「title-style-a」的段落區塊
套用「title-style-a」的H3標題區塊
「頁面內容區塊樣式」page-info-box
於區塊之進階設定「附加的 CSS 類別」套用「page-info-box」。
範例
Ｈ4標題Ｈ4標題Ｈ4標題Ｈ4標題
小型字內文內文內文內文
內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文。
引文引文引文引文引文引文引文
–引用自哪裡
「列表式最新文章」news-table-list
- 區塊類型使用「最新文章」，顯示內容發佈日期，附加的 CSS 類別設為「news-table-list」（花朵圖標）。
- 區塊類型使用「最新文章」，顯示內容發佈日期，附加的 CSS 類別設為「news-table-list announce」（綠葉圖標）。
「附照片的三欄式最新文章」home-hot-news
區塊類型使用「最新文章」，啟用內容摘要，內容摘要字數上限設為「30」字，顯示內容發佈日期，精選圖片設定：啟用「顯示精選圖片」，圖片尺寸設為「大尺寸」，圖片對齊方式設為「置中對齊」，項目數量「3」，附加的 CSS 類別設為「home-hot-news」。
範例
- 公告國立臺中教育大學附設實驗國民小學114學年度第1學期第1次代理教師甄選【第2次招考】甄選結果暨續辦【第3次招考】一、【第2次招考】甄選結果： (一) […]
- 公告國立臺中教育大學附設實驗國民小學114學年度第1學期第1次代理教師甄選【第2次招考】甄選成績如附件成績表
- 【轉知】臺中市政府社會局辦理”114年兒童權利公約宣導港播劇”，邀請國小學童踴躍填寫問卷說明：一、依據聯合國《兒童權利公約》第12條揭示兒童有權對於 […]
「more」按鈕 more-button
於欲套用樣式之「按鈕」進階設定「附加的 CSS 類別」套用「more-button」
範例
按鈕顏色
於欲套用樣式之「按鈕」設定其「背景色彩」，樣式如下：
範例
文字色彩
選取欲修改文字顏色之「段落」或區塊，於「色彩設定」之「文字色彩」勾選顏色，現有樣式如下：
範例
預設樣式
灰字樣式
粉紅字樣式
Logo紅字樣式
Logo橘字樣式
Logo黃字樣式
淡綠字樣式
Logo綠字樣式
淺藍字樣式
灰藍字樣式
暗紫字樣式
段落背景色彩
於欲修改顏色之「段落」或區塊，於「色彩設定」之「背景色彩」勾選顏色，現有樣式如下：
範例
暗紫底樣式
灰底樣式
粉紅底樣式
Logo紅底樣式
Logo橘底樣式
Logo黃底樣式
淡綠底樣式
Logo綠底樣式
淺藍底樣式
灰藍底樣式
表格樣式範例
- 套用表格「標題標籤」需開啟表格設定之「標題區段」。
- 表格儲存格寬度隨儲存格內文自動調整，可啟用「固定寬度的表格儲存格」固定寬度。
範例
| 標題1 | 標題2 | 標題3 | 標題4 | 標題5 |
|---|---|---|---|---|
| Ａ | B | C | D | E |
| F | G | H | I | J |
| K | L | M | N | O |
| P | Q | R | S | T |
| 標題1 | 標題2 | 標題3 | 標題4 | 標題5 |
|---|---|---|---|---|
| Ａ | B | C | D | E |
| F | G | H | I | J |
| K | L | M | N | O |
| P | Q | R | S | T |
分隔符號範例
修改分隔符號顏色：選取欲修改的「分隔符號」，於右側設定區之「附加的 CSS 類別」輸入樣式名稱。
範例
預設樣式
長線段預設樣式
預設樣式附加的 CSS 類別：border-blue-color
預設樣式附加的 CSS 類別：border-logo-yellow-color
預設樣式附加的 CSS 類別：border-logo-green-color
長線段樣式附加的 CSS 類別：border-blue-color is-style-wide
長線段樣式附加的 CSS 類別：border-logo-yellow-color is-style-wide
長線段樣式附加的 CSS 類別：border-logo-green-color is-style-wide
修改< ul > < ol >清單之標示為中文數字
< ul >或< ol >列表元素marker修改為中式數字：透過「外框」工具選取欲修改的「清單」，於右側設定區之「附加的 CSS 類別」輸入「list-style-type-informal」。
範例
- 昭和 3年 (民國17年，1928.4)－
- 本校創立，當時的名稱為臺灣總督府臺中師範學校附屬公學校。
- 昭和 3年 (民國17年，1928.6)－正式上課，設本班六班、學生二六三名。
- 昭和 4年 (民國18年，1929.4)－增設高等科。
- 昭和16年 (民國30年，1941.4)－改稱臺灣總督府臺中師範學校附屬國民學校。
- 昭和20年 (民國34年，1945.4)－改稱為臺灣總督府臺中師範學校附屬第一國民學校。
- 昭和20年 (民國34年，1945.10)－臺灣光復。
- 臺中師範學校校長薛健吾兼掌本校。
- 改稱省立臺中師範學校附屬第一國民學校。
- 設兒童班十七班、高等科二班。
< ul >或< ol >列表元素marker修改為中式大寫數字：透過「外框」工具選取欲修改的「清單」，於右側設定區之「附加的 CSS 類別」輸入「list-style-type-tcformal」。
範例
- 昭和 3年 (民國17年，1928.4)－
- 本校創立，當時的名稱為臺灣總督府臺中師範學校附屬公學校。
- 昭和 3年 (民國17年，1928.6)－正式上課，設本班六班、學生二六三名。
- 昭和 4年 (民國18年，1929.4)－增設高等科。
- 昭和16年 (民國30年，1941.4)－改稱臺灣總督府臺中師範學校附屬國民學校。
- 昭和20年 (民國34年，1945.4)－改稱為臺灣總督府臺中師範學校附屬第一國民學校。
- 昭和20年 (民國34年，1945.10)－臺灣光復。
- 臺中師範學校校長薛健吾兼掌本校。
- 改稱省立臺中師範學校附屬第一國民學校。
- 設兒童班十七班、高等科二班。
兩欄式列表清單 row-2
選取欲修改之「清單」區塊，其進階設定「附加的 CSS 類別」套用「row-2」
範例
- 語文教育
- 語文是開啟各項學習的鑰匙，而本校語文學習著重在學生的母語、本國與及外國語的均衡發展。
- 除提高學生運用語言的能力之外，同時感受語言文字之美，培養語文學習的興趣，更安排班級讀書會、晨間靜讀等活動建構學生閱讀理解策略，使其具備高層次思維能力和良好溝通能力。
- 藝文教育
- 以培養美感為起步，進而發展藝術創作的基本技能。
- 目標在達成具備終身學習藝術的興趣與欣賞的能力。
- 除手製繪本教學赴文化局展出學生作品外，校內亦舉辦美展、話劇表演、才藝秀…等各項展出與表演，更將校外中西畫家及專題展覽、兒童劇團表演、音樂演奏會等資源引進校園，使藝術教育融入生命貼近生活。
- 國際教育
- 學生參與海外學習營隊，結合語文、社會領域及資訊課程。
- 進行國際筆友交流及認識國際文化等學習活動。
- 培訓英語親善小天使、建立寄宿家庭接待國際友人。
- 積極參與教室聯結方案及簽訂姐妹校促進國際交流機會。
區塊式清單 block-columns-25
選取欲修改之「清單」區塊，其進階設定「附加的 CSS 類別」套用「block-columns-25」。
範例
- 實踐適性揚才，保障學習權益-「帶好每位學生」的實踐
- 學生學習的品質有所差異，激勵教師參照學生的可欲範圍，讓學生學習品質達到自己應有的水準。
- 引領課程發展，精進教學成效-發展自編授課教材
- 學生的表現是學校所有教師長期共同經營的成果。
- 提升本校教師教材編輯與課程統整之能力。
- 擘劃學校願景，構築未來學校-專業與創新
- 結合社區特色、學校經營、教師專業與學生學習。
- 踏出校園圍牆，走入社區、走進城市與國家發展紋理與脈絡之中。
- 學生學習的品質有所差異，激勵教師參照學生的可欲範圍，讓學生學習品質達到自己應有的水準。面對資質不夠理想的學生，調整教學方法及學習評量的難度，讓學生能獲得相對的成就感與明顯的成長與進步。實施補救教學，並盡可能立即性的補救教學。對於有所成效的教師，設立獎金以鼓勵其默默耕耘順性揚材的教學態度。
將區塊間距padding與margin設為0px
區塊使用「色彩設定」時，若需要縮小區塊間距，可於該區塊「附加的 CSS 類別」套用「padding-0」或「margin-0」
範例
區塊使用背景色彩時，padding預設值為1.25em 2.375em
於 附加的 CSS 類別 套用「padding-0」將padding設為0
套用文字色彩時，margin預設值為0.3125em 0em
於 附加的 CSS 類別 套用「margin-0」將margin設為0
左側飾條區塊 border-left-box
- 用法1：選取欲修改之「多重欄位」區塊，選取要套用樣式的「單一欄位」，其進階設定「附加的 CSS 類別」套用「border-left-box」
- 用法2：選取欲修改之「清單」區塊，其進階設定「附加的 CSS 類別」套用「border-left-box」
- 套用此CSS之區塊：左側有淡米色飾條，區塊內斜體字標籤<em>字型大小為 large
範例
樣式
在區塊的「附加的 CSS 類別」套用「border-left-box」可出現左側飾條。
- 在區塊的「附加的 CSS 類別」
- 套用「border-left-box」可出現左側飾條。
右側飾條區塊 border-right-box
- 用法1：選取欲修改之「多重欄位」區塊，選取要套用樣式的「單一欄位」，其進階設定「附加的 CSS 類別」套用「border-right-box」
- 用法2：選取欲修改之「清單」區塊，其進階設定「附加的 CSS 類別」套用「border-right-box」
- 套用此CSS之區塊：右側有淡米色飾條，區塊內斜體字標籤<em>字型大小為 large
範例
套用樣式border-right-box
在區塊的「附加的 CSS 類別」套用「border-right-box」可出現右側飾條。
- 在區塊的「附加的 CSS 類別」
- 套用「border-right-box」可出現右側飾條。