官網編輯說明文件

申請無障礙標章 官網編輯說明文件

  • 請同仁協助於7月底前完成以下官網相關資料整理:
    1. 保留100年至今年度,刪除100年之前舊資料, 並查看無效檔案或連結(請一併刪除)。
    2. 公告資料、圖片、相簿說明(加上正確的替代文字)。
    3. 超連結改為文字敘述,避免直接貼網址。
    4. 公告附件檔名需有意義命名,副檔名需採用公開格式,如:ods、PDF、odt等。
    5. 網頁主標題使網頁各頁皆未通過檢測
    6. 網頁結構不符合無障礙的格式
    7. 網頁編輯時文字與背景顏色的對比色切勿反差太大(看不清楚)。
  • 以下為對應的說明與範例:
  1. 查看無效檔案或連結
    • 問題範例]失效連結:[請○4編輯網頁○5將原連結與文字刪除]
      1. 點入後找不到該網站

        失效連結範例1

      2. 點入後找不到該網站

        失效連結範例2
        失效連結網頁編輯

      3. 問題範例]圖片遺失:出現圖片遺失小圖 ,表示此圖已不在官網當中

        圖片遺失範例

        圖片遺失網頁編輯

        圖片遺失編輯

        圖片遺失繼續編輯

  2. 資料、圖片、相簿說明(加上正確的替代文字)
    • 問題範例]網頁編輯:圖片替代文字(加上適當說明文字,而非亂打的文字或原圖檔名)

      圖片替代文字範例1

    • 問題範例]網頁編輯:圖片替代文字(標題項目點 用*)

      圖片替代文字範例2

  3. 超連結改為文字敘述,避免直接貼網址。
    • 正確範例]網頁編輯:超連結文字正確及滑入的說明文字

      超連結文字範例1

    • 問題範例]網頁編輯:超連結文字超連結文字正確及滑入的說明文字

      超連結文字網頁編輯方式

  4. 附件有意義命名,副檔名需採用公開格式
    • 問題範例]公告附件:(檔名 用有意義命名)

      附件有意義命名範例1

      ex.123.pdf、投商完免簡章.pdf改成115學年度南投高商完全免試簡章.pdf
    • 正確範例]公告附件:(檔名 用有意義命名)

      附件有意義命名範例2

    • 公告附件:副檔名需採用公開格式, 如:○1試算表不用.xlsx改用.ods○2Word文件不用.docx改用.PDF或.odt

      範例:第十八屆全國天文營招生簡章.pdf、第十八屆全國天文營報名表.odt

  5. 網頁主標題使網頁各頁皆未通過檢測
    ※這個部分不是每個處室都使用相同的版型,
    所以只要沒有看到這兩個頁框就跳過去,檢查2個頁框(消息公佈欄活動花絮

    網頁主標題範例1-消息公佈欄
    網頁主標題範例1-消息公佈欄
    網頁主標題範例2-活動花絮
    網頁主標題範例2-活動花絮

  6. 網頁結構不符合無障礙的格式 這個情況是發生在:由Word打好文字和表格,直接貼上網頁時,因為結構不符合無障礙的格式,所以修改步驟較複雜,需搭配網頁原始碼和Gemini/思考型來達成修改網頁

    ※這是有問題的網頁:

    網頁結構不符合範例
    網頁結構不符合網頁編輯方式
    結構不符合網頁編輯第4與5步驟
    結構不符合網頁編輯第6與7步驟
    結構不符合網頁編輯第8步驟
    結構不符合網頁編輯第9與10步驟
    結構不符合網頁編輯第11與12步驟
    結構不符合網頁編輯第13步驟
    結構不符合網頁編輯第14步驟
    結構不符合網頁編輯第15步驟
    結構不符合網頁編輯第16至18步驟
    結構不符合網頁編輯後畫面


    PS.若文字有需要修正請自行改正

     

    以下是上述提示詞的框架

     

     

     
    請幫我將下面的純文字網頁,修改成標準 HTML 格式,並且符合以下條件
    1.巢狀結構設計
    2.CSS樣式規則均使用具名字型尺寸,或者使用百分比或em等相對字型尺寸單位
    複製第一段提示詞
     
    這裡是 剛剛(在官網編輯)所複製的網頁原始碼
    複製第二段提示詞
     
    標題為XXXXXXX,注意不修改任何網頁內文字

    複製第三段提示詞 (這裡是自己的附加條件)

    以上綠色文字XXXXXXX請改成自己的標題
    上述所複製的第一段、第二段、第三段提示詞,分別在Gemini貼上,送出問題
  7. 文字與背景顏色的對比色切勿反差太大

    編輯網頁時,文字大小與背景顏色的可視性,需適中,反差太大會影響大眾查看網頁的時候看不清楚/觀感不佳

    • 錯誤例1:
    字體太淺
    • 正確例1:
    對比色OK
    • 錯誤例3:
    背景色太多
    • 正確例3:
    背景色適中
    範例1字體太淺範例1正確對比色OK範例3錯誤背景色太多範例3正確背景色適中
      
    • 錯誤例2:
    字體太小
    • 正確例2:
    字體適中
    範例2錯誤字體太小範例2正確字體適中