科大drupal中文

香港科技大學網站指引2019年12月版01引言p.
0302登記附屬網站p.
0403附屬網站的一致性p.
053.
1科大頁首/頁尾範本p.
0604網站結構/元素4.
1科大頁首4.
1.
1科大標誌p.
124.
1.
2附屬單位p.
13-154.
1.
3搜尋功能p.
164.
1.
4語言p.
164.
2網站內容4.
2.
1網站內容新鮮度p.
184.
2.
2網站導航p.
184.
2.
3字型及大小p.
194.
2.
4響應式網頁設計p.
194.
2.
5影像/圖像/平面設計p.
204.
2.
6影片p.
204.
2.
7可供下載內容p.
214.
2.
8方便列印p.
214.
2.
9關於我們p.
224.
2.
10聯絡資料p.
224.
3科大頁尾4.
3.
1版權資料p.
244.
3.
2私隱聲明p.
244.
3.
3網站地圖p.
254.
3.
4社交媒體圖示p.
2505無障礙網頁p.
2606網站保安p.
2707方便內地用家瀏覽p.
2808網站啟用8.
1用戶驗收測試p.
308.
2監察網站表現p.
318.
3配合搜尋引擎的優化建議p.
3209聯絡我們p.
33目錄網頁是整個科大與外界溝通的一大重要媒介.
透過網頁,我們能夠無時無刻跟世界各地的公眾和持份者聯繫及互動.
科大旗下各個網站都是大學的一部分,因此必須定期更新,保持得體美觀,並採用統一的設計結構.
網頁的瀏覽體驗必須從用家的角度出發,而整體語調亦需貫徹科大形象.
我們利用Drupal建立了一個網站開發平台,當中包含了建構網站所需的功能和範本.
平台結合了所有本指引列明的必要網站功能和組件.
所有科大網站最終必須使用此網站開發平台.
你依然可以運用創意,在網站、排版和多媒體設計方面自由發揮,並向本校媒體科技及出版中心(MTPC)及/或個別設計公司尋求協助.
你的網站後台部分則會由信息系統處(ISO)處理,而網站寄存則會由資訊科技服務中心(ITSC)負責.
我們期望透過本指引,協助科大成員網站展現一致的觀感,建立和提升本校的品牌形象.
如你就閣下所屬學院/辦公室/單位/部門網站,或本指引有任何疑問,歡迎隨時電郵至brand@ust.
hk,或致電2358-5967向公共事務處品牌營銷助理處長楊凱儀女士查詢.
科大轄下網頁採納統一形象01.
引言3如果你有意建立一個附屬網站(yourwebsitename.
UST.
HK),請先向資訊科技服務中心查詢有關網絡伺服器寄存(webserverhosting)及網域名稱登記(domainregistration)事宜.
為了避免公眾搜索到過期網站,所有網站登記都會設有期限.
過期後,網站內容將會自動封存.
除非你提出要求,延長網站寄存期限,否則公眾將無法瀏覽網站.
在啟用新網站之前,請將所有舊網址(URL)重新導向到新網站.
我們建議你在永久刪除過期網站之前,先將舊網站內容存檔備份.
公共事務處的角色是負責管理和執行品牌指引.
無論你剛建立了或正計劃建立新的成員網站,都請電郵至brand@ust.
hk通知我們,讓我們可於學校網站更新或新增你的新網站連結,作為正式認證.
02.
登記附屬網站4除了內部認證(internalauthentication)的網站外,所有對外的科大網站(即以ust.
hk為域名的網站)都必須遵從本校的品牌及網站指引,維持統一設計風格,協助建立本校的整體品牌形象.
如果你的單位屬於以下類別,你的官方網站必須採用科大的頁首/頁尾範本,擁有響應式設計(responsivewebdesign),適合於各種尺寸的電子屏幕瀏覽.
網站亦必須通過資訊科技服務中心的保安標準.
以下列出的成員網站類別,應要在下次翻新網頁時,採用科大Drupal平台.
學院/課程辦公室學術機構研究機構學術部門學術課程研究中心/實驗室大學年度活動大學層面項目行政及學術支援單位如果與外界組織合作,ust.
hk轄下的附屬網站需要包括一個彩色的科大標誌,連結到www.
ust.
hk.
標誌語言亦需根據相應頁面語言.
如科大Drupal平台未能支援網站某些功能,則現行網站亦需滿足基本的品牌元素要求,直到下次的網站翻新週期展開為止.
這些網站需與信息系統處聯絡,處理於科大Drupal平台上開發相關功能的事宜.
基本品牌元素包括有相應語言版本的彩色科大標誌連結www.
ust.
hk,以及完整的科大頁尾.
03.
附屬網站的一致性5科大頁首範本共有兩款:範本一如果你的網站採用全大寫名稱或使用自己的標誌,請使用範本一(科大標誌位於左邊)-網站選單(navigationmenu)建議位置:位置A、B或C-右上角的全球圖示(globalicon)僅適用於多語網站-如果附屬單位擁有自己標誌,可用標誌取代單位名稱,但尺寸不能大於科大標誌-放置於科大標誌旁邊的單位名稱,必須使用科大指定字型(FuturaMedium)、大小、字距、行距及顏色.
詳情請參閱第14頁請按此檢閱科大頁首範本.
3.
1科大頁首/頁尾範本6範本二如果你的單位標誌結合了科大校徽(symbol),請使用範本二(科大標誌位於右邊)-網站選單(navigationmenu)建議位置:位置A、B或C-右上角的全球圖示(globalicon)僅適用於多語網站-如果成員單位擁有自己標誌,可用標誌取代單位名稱,但尺寸不能大於科大標誌3.
1科大頁首/頁尾範本7科大頁首範本的選單連結中包含一個可伸縮的網站選項,連結到本校全新網站的相應頁面.
請按此檢閱科大頁首範本.
3.
1科大頁首/頁尾範本8科大頁尾範本包含簡化版的科大標誌、私隱政策連結及網頁地圖連結.
位於頁尾的簡化版科大標誌能夠加深用家對本校品牌的印象,與頁首的科大標誌擁有相同功能.
頁尾範本亦包含社交媒體圖示,它們必需連結到閣下單位的相應社交媒體帳戶.
如果閣下單位沒有相關社交媒體,請連結至以下的科大社交媒體帳戶:1.
Facebook:https://www.
facebook.
com/hkust/2.
Instagram:https://www.
instagram.
com/hkust/3.
LinkedIn:https://www.
linkedin.
com/school/hkust/4.
YouTube:https://www.
youtube.
com/hkust5.
WeChat請確保在轉換網站語言後,能夠顯示出相應的標誌.
所有科大標誌必須連結到ust.
hk網站.
如果你的單位擁有其他社交媒體帳戶,歡迎你加入其反白圖示作連結.
請按此檢視科大頁尾範本.
請按此下載社交媒體圖示範例.
3.
1科大頁首/頁尾範本904.
網站結構/元素104.
1科大頁首所有附屬網站均需包含科大頁首.
設計網站時,請緊記用家一般預期網站會於相同位置,顯示某些主要網站元素.
11頁首必須包含科大標誌科大標誌必須連結到本校網站www.
ust.
hk學院/部門/中心/辦公室的流動版網站亦需滿足以上兩項要求所有ust.
hk網站必須以科大的形象標記(logomark)作為網址欄的小圖示(favicon)請按此下載標誌檔案4.
1.
1科大標誌4.
1科大頁首12範例:學院學院旗下單位官方單位所有附屬單位(如學院/學科/部門/辦公室/官方單位)必須使用科大標誌,並於右邊配上相應語言的單位名稱當單位名稱放置於科大標誌旁邊時,必須使用科大標誌指定字型,並以全大寫方式出現.
而名稱於科大頁首範本的藍色欄出現時亦須按照此規定如果附屬單位擁有個別標誌,可以用單位標誌取代單位名稱;但單位標誌不能大於科大標誌請按此下載科大標誌檔案4.
1.
2附屬單位4.
1科大頁首13英文標誌範例:X1/3X1/3X每行最多五個單詞OFFICEOFTHEUNIVERSITYUNIVERSITYUNIVERSITYUNIVERSITYOFFICEUNIVERSITYUNIVERSITYUNIVERSITYOFFICEUNIVERSITYUNIVERSITY20px22px26px275px(w)275px(w)275px(w)附屬單位的名稱必須使用科大標誌指定字型(FuturaMedium)、大小、行距、字距和顏色.
請參照科大標誌的文字大小比例、行距及字距,並垂直置中對齊(請參考本頁範例)請參考範例所示比例、行距、字距及空白位置英文單位名稱的排列必須於三行之內,每行最多五個單詞請按此下載科大標誌檔案4.
1.
2附屬單位4.
1科大頁首14X1/2X1/2X中文字元間距:100附屬單位的中文名稱必須使用科大標誌指定字型(黑體)、大小、行距、字距和顏色.
請參照科大商標的文字大小比例、行距及字距,並垂直置中對齊(請參考本頁範例)請參考本頁範例所示的比例、行距、字距及空白位置中文單位名稱必須限於一行,十五字以內請按此下載科大標誌檔案4.
1.
2附屬單位4.
1科大頁首中文標誌範例:單行排列,十五字以內15網站使用者大多為了尋找特定資訊而造訪網站,所以他們期望網站附有搜尋欄,協助他們快速搜索內容.
你的網站必須附設搜尋功能,讓不同使用者可以簡便快捷地在網站中找到他們想要的資訊.
除了本校官方語言英文以外,我們建議所有網站內容均提供繁體中文及簡體中文版本.
為了讓使用者有最佳瀏覽體驗,網站的預設語言應跟從使用者瀏覽器的語言設定.
4.
1.
3搜尋功能4.
1.
4語言4.
1科大頁首164.
2網站內容學院/部門/中心/辦公室可按照個別需要設計網站內容.
在設計網站內容時,請注意以下重點元素,以協助建立及維持本校的專業形象,這是作為科大一份子的責任.
另外,你亦應確保網站內容的質素,並特別留意內容是否保持新鮮,以及功能是否方便用家.
174.
2.
2網站導航根據使用者族群釐定網站瀏覽架構根據使用者族群分類,去組織內容及導航方式,讓使用者可以容易地找到他們想要的資訊.
根據主要題目分類釐定網站瀏覽架構根據內容主題去組織網站主選單.
使用清晰的內容分類及關鍵字,讓使用者輕易找到想要的資訊.
內頁路徑導覽列(BreadcrumbsTrail)路徑導覽列顯示使用者的瀏覽路徑,方便他們追溯由主頁到目前頁面之間的瀏覽路徑.
為了確保網站內容新鮮,我們建議附屬網站加插本校網站的應用程式介面API(或加插附有標籤的RSS),抽取本校網站的自動化分類內容,例如活動、新聞稿、最新消息等.
另外,在命名網站部份時,請避免使用一些字眼,讓人錯誤理解消息的即時性.
例如,如果內容並非經常更新,將該部分命名為「重點消息」會比「最新消息」或「新聞」更為恰當.
4.
2.
1網站內容的新鮮度4.
2網站內容18為了確保科大所有附屬網站的一致性,請在網站內文中使用Muli或Arial字型.
請參考本校品牌管理指引中有關字體(Typeface)的部分.
內文字型大小不能小於16像素,而次級內文則為13至14像素.
2017年的數據顯示,有七成用家使用流動裝置瀏覽科大網站.
現今流動裝置普及,大部份人都會使用智能手機及平板電腦瀏覽網站.
因此,所有成員網站的設計必須能夠適應流動裝置(mobileresponsive).
請使用不同大小的電子屏幕,測試你的網站是否能配合,並確保主選單能在手機上清晰顯示.
現時,有部份網頁功能不能於流動裝置上恰當顯示,當中包括下拉式選單(dropdownmenu)等.
請避免使用此類功能,以免影響流動網站用家體驗.
另外,請規劃清楚內容及資訊呈現方式,確保用家能找到所需資訊.
現今普遍的個人電腦(PC及Mac)螢幕大小平均為1366x768像素,將網站的內文放置於瀏覽器中間,可讓使用者更舒適地瀏覽和閱讀內容.
如果你想快速測試網站的流動兼容性,請按此.
4.
2.
3字型及大小4.
2.
4響應式網頁設計4.
2網站內容19請參照以下有關圖像的指引:請使用GIF、JPEG或PNG圖像檔案格式請使用像素為72dpi的數碼照片請使用小於2MB的圖像檔案,以便下載請為圖像加上有意思的替代文字[img中的alt屬性]在網站加入多媒體內容時,請考慮檔案大小,避免下載時間過長.
流動版網站應加入略過影片的功能.
Flash元素在網頁設計中已逐漸被淘汰,一些流動裝置及較舊的電腦都無法支援.
假如必須使用Flash,就請注意以下事項:Flash動畫必須以SWF格式嵌入HTML碼中,並附設給未能支援Flash的瀏覽器的下載指引為了減低對不支援Flash的流動裝置和瀏覽器的影響,請在網頁中Flash內容底下加入替代圖像4.
2.
5影像/圖像/平面設計4.
2.
6影片4.
2網站內容20在網站中加入可供公眾下載的檔案時,請避免使用可修改的檔案格式,如MSWord、MSPowerPoint或MSExcel等,除非該檔案為免費工具.
請將檔案轉換成HTML或PDF格式.
如果你想了解建立PDF檔案的詳情,請參閲W3CPDFTechniquesforWCAG2.
0.
本校支持環保,但為了方便需要列印網頁的使用者,請確保網頁方便列印,以免浪費紙張.
4.
2.
7可供下載內容4.
2.
8方便列印4.
2網站內容21請於網站中加入「關於我們」的部分,簡單介紹你的學院/部門/中心/辦公室,讓使用者更容易了解網站的性質.
請於網站中加入聯絡資料,列出相關單位的聯絡渠道,供用家查詢或傳達意見.
請安排職員負責處理這些查詢及意見.
4.
2.
9關於我們4.
2.
10聯絡資料4.
2網站內容224.
3科大頁尾所有成員網站必須使用科大頁尾.
23請在網站中加入版權資料,保護網站內容.
版權資料必須以以下方式呈現:CopyrightTheHongKongUniversityofScienceandTechnology.
AllRightsReserved.
版權屬香港科技大學所有所有學院/部門/中心/辦公室網站必須附有本校網站私隱政策聲明的連結.
4.
3.
1版權資料4.
3.
2私隱聲明4.
3科大頁尾24網站地圖詳列網站的架構,方便使用者找到想要瀏覽的分頁.
即使使用者在瀏覽過程中迷失方向,也能輕易地在頁尾中找到網站地圖,重新定位.
請留意,XML格式的網站地圖更有利搜尋引擎讀取內容.
請將科大或你的學院/部門/中心/辦公室的社交媒體圖示放置於頁尾,和內容清楚分開.
4.
3.
3網站地圖4.
3.
4社交媒體圖示4.
3科大頁尾25我們建議遵照無障礙網頁倡議(WebAccessibilityInitiative,WAI)規格,讓不同能力人士都能輕易地使用你的網站.
最佳瀏覽設定建議在網站中加入最佳瀏覽設定建議是一個很好的做法.
建議一般會列明瀏覽器版本及任何必須的插件(plug-in).
請避免使用過多插件,並請盡量使用普遍電子裝置皆配備的常用插件.
資訊科技服務中心的技術建議:所有新建立/改版/以CMS建立的網頁,都應兼容常見的裝置和網頁瀏覽器,當中包括微軟視窗、蘋果(MacOC及iOS)、Android及Linux平台上的MicrosoftInternetExplorer、GoogleChrome、MozillaFirefox、Safari等.
純文字版本請為網站建立純文字版本,以供純文字瀏覽器使用者使用.
ALT標記(tag)請使用ALT標記為圖像及多媒體內容加入文字說明,讓不能檢視圖像或多媒體內容的使用者亦能接收內容資訊.
純鍵盤瀏覽模式為了方便無法使用滑鼠的使用者,請確保即使只用鍵盤,你的網站仍能簡易地操作.
如欲了解更多,請參閱「無障礙網頁嘉許計劃」資料:https://www.
web-accessibility.
hk/zh-hant/05無障礙網頁26所有附屬網站必須為HTTPS(HyperTextTransferProtocolSecured)網站.
如果網站屬於應用系統最低安全標準中的高危級別,便需通過保安漏洞檢查及修正——使用保安漏洞掃描工具檢查網站系統.
如果掃描工具發現網站出現任何保安漏洞,網站擁有者必須立即修正,消除所有問題部分.
請向資訊科技服務中心了解詳情.
請按此連結到相關參考資料.
06.
網站保安2707.
方便內地用家瀏覽一些常用的網站建設方式,未心適用於全部國家.
以中國內地為例,有些網域例如GoogleAPILibrary、GoogleFontLibrary和jQueryLibrary就未必任何時候都能存取.
假如網頁的頁首和內容包含這類網域的程式碼,就可能影響到中國內地用家的瀏覽體驗.
受制於中國內地連接國際網絡的頻寬速度,繁忙時間或會出現網絡擠塞,或會影響存取速度.
以下是一些讓內地用家能更快存取網頁的竅門:減少連結到外部網域的插件庫,改為直接連到自身伺服器科大轄下網站常用的外部連結插件庫包括:GoogleAPILibraryhttps://www.
google.
com/jsapihttp://ajax.
googleapis.
com/ajaxGoogleFontsLibraryhttps://fonts.
googleapis.
com/http://fonts.
gstatic.
com/s/jQueryLibraryhttp://code.
jquery.
com/其他不能由中國內地訪問的網域可參考此處.
使用異步(asynchronous)方式設計網頁,讓網頁持續下載餘下的頁面元素,而不會在遇到內地無法訪問的網址時完全停止加載圖片大小維持在1MB一以下簡化網頁設計,減少javascript、css、圖片文件和插件數量如欲了解如何使網頁在內地瀏覽得更快,請向資訊科技服務中心查詢.
08.
網站啟用29請確保你的網站在正式啟用前,通過用戶驗收測試(UserAcceptanceTest,UAT).
UAT為網站測試過程中的最後一環,由真實使用者測試網站,確保它能在不同情況下,處理實際要求.
UAT是新開發網站在推出前,需要通過的最後關鍵階段之一.
8.
1用戶驗收測試30啟用後,我們建議你定期評估網站表現,以改善設計.
GoogleAnalytics等數據監察工具,能協助你了解網站表現.
透過分析頁面流量、使用者族群及行為等數據,你可以更有效制定策略.
你必須獲得網站表現報告或分析數據的存取權.
8.
2監察網站表現31為了讓你的網站能更準確地接觸到目標使用者,我們建議你提高網站的搜尋引擎友善度.
搜尋引擎優化是一項持續的工作,在新網站啟用後亦應繼續執行.
以下提供一些建議:使用網頁標題.
每個網頁都必須擁有獨一無二的標題,準確地交代網頁內容.
標題必須簡明扼要,協助使用者了解網頁主旨.
加入網站地圖.
使用描述標籤(metatags);在元描述(metadescription)中只包含切題的關鍵字.
由於搜尋引擎會持續不斷地讀取(crawl)網站內容,因此保持內容新鮮和原創、經常更新、運用多種關鍵字和詞組等,都能讓網站更吸引使用者及搜尋引擎.
為網站設計簡單及合乎邏輯的導航方式;在每一個頁面都加上路徑導覽列(breadcrumb),能協助使用者更容易連結到網站內相關的部分及頁面.
製作清楚的404頁面,解釋網站出錯原因,以及提供其他相關網站/頁面的連結.
注意網頁速度.
請特別留意會影響網頁下載速度的因素,如圖像和影片檔案大小.
你可以使用GooglePageSpeedService分析網站,獲取提升網站表現建議.
8.
3配合搜尋引擎的優化建議32有關成員網站的品牌元素:公共事務處品牌營銷3469-2440|brand@ust.
hk|https://pao.
ust.
hk有關網站後端開發:信息系統處2358-6240|issupprt@ust.
hk|https://iso.
ust.
hk/有關域名登記、寄存伺服器及網絡保安:資訊科技服務中心2358-6188,2358-6200|cchelp@ust.
hk|https://itsc.
ust.
hk/有關網站的平面設計、圖像及多媒體內容:媒體科技及出版中心2358-6807|mtpc@ust.
hk|https://mtpc.
ust.
hk/09.
聯絡我們33版權屬香港科技大學所有公共事務處