香港科技大學網站指引 · 站之前，先將舊網站內容存檔備份。...

香港科技大學

網站指引2019年 12月版

01 引言 p.03

02 登記附屬網站 p.04

03 附屬網站的一致性 p.053.1 科大頁首/頁尾範本 p.06

04 網站結構／元素4.1 科大頁首 4.1.1 科大標誌 p.12 4.1.2 附屬單位 p.13-15 4.1.3 搜尋功能 p.16 4.1.4 語言 p.16

4.2 網站內容 4.2.1 網站內容新鮮度 p.18 4.2.2 網站導航 p.18 4.2.3 字型及大小 p.19 4.2.4 響應式網頁設計 p.19 4.2.5 影像/ 圖像／平面設計 p.20 4.2.6 影片 p.20 4.2.7 可供下載內容 p.21 4.2.8 方便列印 p.21 4.2.9 關於我們 p.22 4.2.10 聯絡資料 p.22

4.3 科大頁尾 4.3.1 版權資料 p.24 4.3.2 私隱聲明 p.24 4.3.3 網站地圖 p.25 4.3.4 社交媒體圖示 p.25

05 無障礙網頁 p.26

06 網站保安 p.27

07 方便內地用家瀏覽 p.28

08 網站啟用8.1 用戶驗收測試 p.308.2 監察網站表現 p.318.3 配合搜尋引擎的優化建議 p.32

09 聯絡我們 p.33

目錄

香港科技大學網站指引

網頁是整個科大與外界溝通的一大重要媒介。透過網頁，我們能夠無時無刻跟世界各地的公眾和持份

者聯繫及互動。科大旗下各個網站都是大學的一部分，因此必須定期更新，保持得體美觀，並採用統

一的設計結構。網頁的瀏覽體驗必須從用家的角度出發，而整體語調亦需貫徹科大形象。

我們利用Drupal建立了一個網站開發平台，當中包含了建構網站所需的功能和範本。平台結合了所

有本指引列明的必要網站功能和組件。所有科大網站最終必須使用此網站開發平台。

你依然可以運用創意，在網站、排版和多媒體設計方面自由發揮，並向本校媒體科技及出版中心

(MTPC）及／或個別設計公司尋求協助。你的網站後台部分則會由信息系統處（ISO）處理，而網站

寄存則會由資訊科技服務中心（ITSC）負責。

我們期望透過本指引，協助科大成員網站展現一致的觀感，建立和提升本校的品牌形象。

如你就閣下所屬學院／辦公室／單位／部門網站，或本指引有任何疑問，歡迎隨時電郵至

[email protected]，或致電2358-5967向公共事務處品牌營銷助理處長楊凱儀女士查詢。

科大轄下網頁採納統一形象01. 引言

301. 引言


http://www.ust.hk/drupal/HKUST_Drupal_Platform-Training_Manual_for_Site_User.pdf

mailto:brand%40ust.hk?subject=

如果你有意建立一個附屬網站 (yourwebsitename.UST.HK)，請先向資訊科技服務中心查詢有

關網絡伺服器寄存 (web server hosting) 及網域名稱登記 (domain registration) 事宜。為了避

免公眾搜索到過期網站，所有網站登記都會設有期限。過期後，網站內容將會自動封存。除非

你提出要求，延長網站寄存期限，否則公眾將無法瀏覽網站。

在啟用新網站之前，請將所有舊網址(URL)重新導向到新網站。我們建議你在永久刪除過期網

站之前，先將舊網站內容存檔備份。

公共事務處的角色是負責管理和執行品牌指引。無論你剛建立了或正計劃建立新的成員網站，

都請電郵至[email protected]通知我們，讓我們可於學校網站更新或新增你的新網站連結，作為正

式認證。

02. 登記附屬網站

402. 登記新成員網站


mailto:brand%40ust.hk?subject=

除了內部認證 (internal authentication) 的網站外，所有對外的科大網站（即以ust.hk

為域名的網站）都必須遵從本校的品牌及網站指引，維持統一設計風格，協助建立本

校的整體品牌形象。

如果你的單位屬於以下類別，你的官方網站必須採用科大的頁首／頁尾範本，擁有響

應式設計(responsive web design)，適合於各種尺寸的電子屏幕瀏覽。網站亦必須通

過資訊科技服務中心的保安標準。以下列出的成員網站類別，應要在下次翻新網頁

時，採用科大Drupal平台。

• 學院／課程辦公室

• 學術機構

• 研究機構

• 學術部門

• 學術課程

• 研究中心／實驗室

• 大學年度活動

• 大學層面項目

• 行政及學術支援單位

如果與外界組織合作，ust.hk轄下的附屬網站需要包括一個彩色的科大標誌，連結到

www.ust.hk。標誌語言亦需根據相應頁面語言。

如科大Drupal平台未能支援網站某些功能，則現行網站亦需滿足基本的品牌元素要

求，直到下次的網站翻新週期展開為止。這些網站需與信息系統處聯絡，處理於科大

Drupal平台上開發相關功能的事宜。基本品牌元素包括有相應語言版本的彩色科大標

誌連結www.ust.hk，以及完整的科大頁尾。

03. 附屬網站的一致性

503. 成員網站的一致性


http://www.ust.hk

http://www.ust.hk

科大頁首範本共有兩款：

範本一

如果你的網站採用全大寫名稱或使用自己的標誌，請使用範本一 (科大標誌位於左邊)

- 網站選單 (navigation menu) 建議位置：位置A、B或C

- 右上角的全球圖示 (global icon) 僅適用於多語網站

- 如果附屬單位擁有自己標誌，可用標誌取代單位名稱，但尺寸不能大於科大標誌

- 放置於科大標誌旁邊的單位名稱，必須使用科大指定字型 (Futura Medium) 、大小、字距、行距及顏色。詳情請參閱第14頁

請按此檢閱科大頁首範本。

3.1 科大頁首／頁尾範本

Follow HKUST on Privacy SitemapCopyright © The Hong Kong University of Science and Technology. All rights reserved.

UNIVERSITY NEWS

MAP & DIRECTIONS

ACADEMIC DEPARTMENTS A – Z

JOBS@HKUST

LIFE@HKUST

FACULTY PROFILES

LIBRARY

ABOUT HKUST

A A A

AREA A

AREA C School Name

SCHOOL NAME /DEPARTMENT NAME

A A A

MORE ABOUT HKUST

AREA C School Name


AREA B

A A A

AREA A

AREA C School Name

SCHOOL /DEPARTMENT LOGO AREA B

AREA B

AREA A



http://header-demo.sites2.ust.hk/zh-hant


UNIVERSITY NEWS

MAP & DIRECTIONS


JOBS@HKUST

LIFE@HKUST

FACULTY PROFILES

LIBRARY

ABOUT HKUST

A A A

AREA A

AREA C School Name


A A A

MORE ABOUT HKUST

AREA C School Name


AREA B

A A A

AREA A

AREA C School Name


AREA B

AREA A

範本二

如果你的單位標誌結合了科大校徽 (symbol)，請使用範本二 (科大標誌位於右邊)

- 網站選單 (navigation menu) 建議位置：位置A、B或C

- 右上角的全球圖示 (global icon) 僅適用於多語網站

- 如果成員單位擁有自己標誌，可用標誌取代單位名稱，但尺寸不能大於科大標誌





UNIVERSITY NEWS

MAP & DIRECTIONS


JOBS@HKUST

LIFE@HKUST

FACULTY PROFILES

LIBRARY

ABOUT HKUST

A A A

AREA A

AREA C School Name


A A A

MORE ABOUT HKUST

AREA C School Name


AREA B

A A A

AREA A

AREA C School Name


AREA B

AREA A

科大頁首範本的選單連結中包含一個可伸縮的網站選項，

連結到本校全新網站的相應頁面。

請按此檢閱科大頁首範本。





科大頁尾範本包含簡化版的科大標誌、私隱政策連結及網頁地圖連結。位於頁尾的簡

化版科大標誌能夠加深用家對本校品牌的印象，與頁首的科大標誌擁有相同功能。

頁尾範本亦包含社交媒體圖示，它們必需連結到閣下單位的相應社交媒體帳戶。

如果閣下單位沒有相關社交媒體，請連結至以下的科大社交媒體帳戶：

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/hkust 5. WeChat

請確保在轉換網站語言後，能夠顯示出相應的標誌。所有科大標誌必須連結到ust.hk 網站。

如果你的單位擁有其他社交媒體帳戶，歡迎你加入其反白圖示作連結。

請按此檢視科大頁尾範本。

請按此下載社交媒體圖示範例。





https://pao.ust.hk/Bdownload/SocialMedia_icon.ai

04. 網站結構／元素



4.1 科大頁首所有附屬網站均需包含科大頁首。

設計網站時，請緊記用家一般預期網站會於相同位置，顯示某些主要網站元素。



• 頁首必須包含科大標誌

• 科大標誌必須連結到本校網站 www.ust.hk

• 學院／部門／中心／辦公室的流動版網站亦需滿足以上兩項要求

• 所有ust.hk網站必須以科大的形象標記 (logo mark) 作為網址欄的小圖示(favicon)

• 請按此下載標誌檔案

4.1.1 科大標誌

4.1 科大頁首



http://logo.ust.hk/downloads/print_left_eng.html

範例:

學院學院旗下單位官方單位

• 所有附屬單位（如學院／學科／部門／辦公室／官方單位）必須使用科大標誌，並

於右邊配上相應語言的單位名稱

• 當單位名稱放置於科大標誌旁邊時，必須使用科大標誌指定字型，並以全大寫方式

出現。而名稱於科大頁首範本的藍色欄出現時亦須按照此規定

• 如果附屬單位擁有個別標誌，可以用單位標誌取代單位名稱；但單位標誌不能大於

科大標誌

• 請按此下載科大標誌檔案

4.1.2 附屬單位

4.1 科大頁首




英文標誌範例:

X

1/3 X 1/3 X

每行最多五個單詞

OFFICE OF THE UNIVERSITY

UNIVERSITY UNIVERSITY UNIVERSITY OFFICE

UNIVERSITY UNIVERSITY UNIVERSITY OFFICEUNIVERSITY UNIVERSITY

20px22px

26px275px (w)

275px (w) 275px (w)

• 附屬單位的名稱必須使用科大標誌指定字型 (Futura Medium)、大小、行距、字距

和顏色。請參照科大標誌的文字大小比例、行距及字距，並垂直置中對齊（請參考

本頁範例）

• 請參考範例所示比例、行距、字距及空白位置

• 英文單位名稱的排列必須於三行之內，每行最多五個單詞


4.1.2 附屬單位

4.1 科大頁首




X

1/2 X 1/2 X中文字元間距：100

• 附屬單位的中文名稱必須使用科大標誌指定字型(黑體)、大小、行距、字距和顏

色。請參照科大商標的文字大小比例、行距及字距，並垂直置中對齊（請參考本頁

範例）

• 請參考本頁範例所示的比例、行距、字距及空白位置

• 中文單位名稱必須限於一行，十五字以內


4.1.2 附屬單位

4.1 科大頁首

中文標誌範例:

單行排列，十五字以內




網站使用者大多為了尋找特定資訊而造訪網站，所以他們期望網站附有搜尋

欄，協助他們快速搜索內容。

你的網站必須附設搜尋功能，讓不同使用者可以簡便快捷地在網站中找到他們

想要的資訊。

除了本校官方語言英文以外，我們建議所有網站內容均提供繁體中文及簡體中

文版本。為了讓使用者有最佳瀏覽體驗，網站的預設語言應跟從使用者瀏覽器

的語言設定。

4.1.3 搜尋功能

4.1.4 語言

4.1 科大頁首



4.2 網站內容學院／部門／中心／辦公室可按照個別需要設計網站內容。

在設計網站內容時，請注意以下重點元素，以協助建立及維持本校的專業形象，這是作為科大一份子的責任。

另外，你亦應確保網站內容的質素，並特別留意內容是否保持新鮮，以及功能是否方便用家。



4.2.2 網站導航根據使用者族群釐定網站瀏覽架構

根據使用者族群分類，去組織內容及導航方式，讓使用者可以

容易地找到他們想要的資訊。

根據主要題目分類釐定網站瀏覽架構

根據內容主題去組織網站主選單。使用清晰的內容分類及關鍵

字，讓使用者輕易找到想要的資訊。

內頁路徑導覽列(Breadcrumbs

Trail)

路徑導覽列顯示使用者的瀏覽路徑，方便他們追溯由主頁到目

前頁面之間的瀏覽路徑。

為了確保網站內容新鮮，我們建議附屬網站加插本校網站的應用程式介面API（或加插

附有標籤的RSS），抽取本校網站的自動化分類內容，例如活動、新聞稿、最新消息

等。另外，在命名網站部份時，請避免使用一些字眼，讓人錯誤理解消息的即時性。

例如，如果內容並非經常更新，將該部分命名為「重點消息」會比「最新消息」或

「新聞」更為恰當。

4.2.1 網站內容的新鮮度

4.2 網站內容



為了確保科大所有附屬網站的一致性，請在網站內文中使用 Muli 或 Arial 字型。

請參考本校品牌管理指引中有關字體 (Typeface) 的部分。內文字型大小不能小於 16 像

素，而次級內文則為 13 至 14 像素。

2017年的數據顯示，有七成用家使用流動裝置瀏覽科大網站。現今流動裝置普及，大

部份人都會使用智能手機及平板電腦瀏覽網站。因此，所有成員網站的設計必須能夠

適應流動裝置 (mobile responsive)。請使用不同大小的電子屏幕，測試你的網站是否

能配合，並確保主選單能在手機上清晰顯示。

現時，有部份網頁功能不能於流動裝置上恰當顯示，當中包括下拉式選單 (drop down

menu) 等。請避免使用此類功能，以免影響流動網站用家體驗。另外，請規劃清楚內

容及資訊呈現方式，確保用家能找到所需資訊。

現今普遍的個人電腦 (PC及Mac) 螢幕大小平均為1366 x 768像素，將網站的內文放置

於瀏覽器中間，可讓使用者更舒適地瀏覽和閱讀內容。

如果你想快速測試網站的流動兼容性，請按此。

4.2.3 字型及大小

4.2.4 響應式網頁設計

4.2 網站內容



https://search.google.com/test/mobile-friendly

請參照以下有關圖像的指引：

• 請使用GIF、JPEG 或 PNG圖像檔案格式

• 請使用像素為 72dpi 的數碼照片

• 請使用小於 2MB 的圖像檔案，以便下載

• 請為圖像加上有意思的替代文字［img中的alt屬性］

在網站加入多媒體內容時，請考慮檔案大小，避免下載時間過長。流動版網站應加入

略過影片的功能。

Flash元素在網頁設計中已逐漸被淘汰，一些流動裝置及較舊的電腦都無法支援。假如

必須使用 Flash，就請注意以下事項：

• Flash動畫必須以SWF格式嵌入HTML碼中，並附設給未能支援Flash的瀏覽器的下

載指引

• 為了減低對不支援Flash的流動裝置和瀏覽器的影響，請在網頁中Flash內容底下加

入替代圖像

4.2.5 影像/ 圖像／平面設計

4.2.6 影片

4.2 網站內容



在網站中加入可供公眾下載的檔案時，請避免使用可修改的檔案格式，如 MS Word、

MS PowerPoint 或 MS Excel 等，除非該檔案為免費工具。請將檔案轉換成HTML或

PDF格式。如果你想了解建立PDF檔案的詳情，請參閲 W3C PDF Techniques for WCAG 2.0。

本校支持環保，但為了方便需要列印網頁的使用者，請確保網頁方便列印，以免浪費

紙張。

4.2.7 可供下載內容

4.2.8 方便列印

4.2 網站內容



https://www.w3.org/WAI/GL/2016/WD-WCAG20-TECHS-20160628/pdf.html

https://www.w3.org/WAI/GL/2016/WD-WCAG20-TECHS-20160628/pdf.html

請於網站中加入「關於我們」的部分，簡單介紹你的學院／部門／中心／辦公室，

讓使用者更容易了解網站的性質。

請於網站中加入聯絡資料，列出相關單位的聯絡渠道，供用家查詢或傳達意見。

請安排職員負責處理這些查詢及意見。

4.2.9 關於我們

4.2.10 聯絡資料

4.2 網站內容



4.3 科大頁尾所有成員網站必須使用科大頁尾。



請在網站中加入版權資料，保護網站內容。

版權資料必須以以下方式呈現：

Copyright © The Hong Kong University of Science and Technology.

All Rights Reserved.

© 版權屬香港科技大學所有

所有學院／部門／中心／辦公室網站必須附有本校網站私隱政策聲明的連結。

4.3.1 版權資料

4.3.2 私隱聲明

4.3 科大頁尾



https://dataprivacy.ust.hk/university-data-privacy-policy-statement/

網站地圖詳列網站的架構，方便使用者找到想要瀏覽的分頁。即使使用者在瀏覽過程

中迷失方向，也能輕易地在頁尾中找到網站地圖，重新定位。請留意，XML格式的網

站地圖更有利搜尋引擎讀取內容。

請將科大或你的學院／部門／中心／辦公室的社交媒體圖示放置於頁尾，和內容清楚

分開。

4.3.3 網站地圖

4.3.4 社交媒體圖示

4.3 科大頁尾



我們建議遵照無障礙網頁倡議 (Web Accessibility Initiative，WAI) 規

格，讓不同能力人士都能輕易地使用你的網站。

最佳瀏覽設定建議

在網站中加入最佳瀏覽設定建議是一個很好的做法。建議一般會列明

瀏覽器版本及任何必須的插件（plug-in）。請避免使用過多插件，並

請盡量使用普遍電子裝置皆配備的常用插件。

資訊科技服務中心的技術建議：所有新建立／改版／以CMS建立的

網頁，都應兼容常見的裝置和網頁瀏覽器，當中包括微軟視窗、蘋

果 (Mac OC 及 iOS）、Android及Linux平台上的Microsoft Internet

Explorer、Google Chrome、Mozilla Firefox、Safari等。

純文字版本

請為網站建立純文字版本，以供純文字瀏覽器使用者使用。

ALT標記(tag)

請使用ALT標記為圖像及多媒體內容加入文字說明，讓不能檢視圖像

或多媒體內容的使用者亦能接收內容資訊。

純鍵盤瀏覽模式

為了方便無法使用滑鼠的使用者，請確保即使只用鍵盤，你的網站仍

能簡易地操作。

如欲了解更多，請參閱「無障礙網頁嘉許計劃」資料：

https://www.web-accessibility.hk/zh-hant/

05 無障礙網頁

2605. 無障礙網頁


http://www.w3c.org/WAI



所有附屬網站必須為 HTTPS (Hyper Text Transfer Protocol Secured) 網站。如果網站屬於應用系統最低安全標準中的高危級別，便需通過保安漏洞檢查及修正——使用保安漏洞掃描工具檢查網站系統。

如果掃描工具發現網站出現任何保安漏洞，網站擁有者必須立即修正，消除所有問題部分。請向資訊科技服務中心了解詳情。

請按此連結到相關參考資料。

06. 網站保安

2706. 網站保安


https://www.ust.hk/zh-hant/privacy-policy

07. 方便內地用家瀏覽

一些常用的網站建設方式，未心適用於全部國家。以中國內地為例，

有些網域例如Google API Library、Google Font Library和jQuery Library就未必任何時候都能存取。假如網頁的頁首和內容包含這類網

域的程式碼，就可能影響到中國內地用家的瀏覽體驗。

受制於中國內地連接國際網絡的頻寬速度，繁忙時間或會出現網絡擠

塞，或會影響存取速度。

以下是一些讓內地用家能更快存取網頁的竅門：

• 減少連結到外部網域的插件庫，改為直接連到自身伺服器

科大轄下網站常用的外部連結插件庫包括：

Google API Library https://www.google.com/jsapihttp://ajax.googleapis.com/ajax

Google Fonts Library https://fonts.googleapis.com/http://fonts.gstatic.com/s/

jQuery Library http://code.jquery.com/

其他不能由中國內地訪問的網域可參考此處。

• 使用異步（asynchronous）方式設計網頁，讓網頁持續下載餘下

的頁面元素，而不會在遇到內地無法訪問的網址時完全停止加載

• 圖片大小維持在1MB一以下

• 簡化網頁設計，減少javascript、css、圖片文件和插件數量

如欲了解如何使網頁在內地瀏覽得更快，請向資訊科技服務中心查詢。

https://www.google.com/jsapi http://ajax.googleapis.com/ajax

https://www.google.com/jsapi http://ajax.googleapis.com/ajax


08. 網站啟用

2908. 啟用網站


請確保你的網站在正式啟用前，通過用戶驗收測試 (User Acceptance Test，UAT)。

UAT為網站測試過程中的最後一環，由真實使用者測試網站，確保它能在不同情況

下，處理實際要求。

UAT是新開發網站在推出前，需要通過的最後關鍵階段之一。

8.1 用戶驗收測試

3008. 啟用網站


啟用後，我們建議你定期評估網站表現，以改善設計。Google Analytics 等數據監察

工具，能協助你了解網站表現。透過分析頁面流量、使用者族群及行為等數據，你可

以更有效制定策略。你必須獲得網站表現報告或分析數據的存取權。

8.2 監察網站表現

3108. 啟用網站


為了讓你的網站能更準確地接觸到目標使用者，我們建議你提高網站的搜尋引擎友善

度。搜尋引擎優化是一項持續的工作，在新網站啟用後亦應繼續執行。以下提供一些

建議：

• 使用網頁標題。每個網頁都必須擁有獨一無二的標題，準確地交代網頁內容。標

題必須簡明扼要，協助使用者了解網頁主旨。

• 加入網站地圖。

• 使用描述標籤(meta tags)；在元描述 (meta description) 中只包含切題的關鍵字。

• 由於搜尋引擎會持續不斷地讀取 (crawl) 網站內容，因此保持內容新鮮和原創、經

常更新、運用多種關鍵字和詞組等，都能讓網站更吸引使用者及搜尋引擎。

• 為網站設計簡單及合乎邏輯的導航方式；在每一個頁面都加上路徑導覽列

(breadcrumb)，能協助使用者更容易連結到網站內相關的部分及頁面。

• 製作清楚的404頁面，解釋網站出錯原因，以及提供其他相關網站／頁面的連

結。

• 注意網頁速度。請特別留意會影響網頁下載速度的因素，如圖像和影片檔案大

小。你可以使用 Google Page Speed Service 分析網站，獲取提升網站表現建議。

8.3 配合搜尋引擎的優化建議

3208. 啟用網站


https://developers.google.com/speed/

有關成員網站的品牌元素：

公共事務處品牌營銷

3469-2440 | [email protected] | https://pao.ust.hk

有關網站後端開發：

信息系統處

2358-6240 | [email protected] | https://iso.ust.hk/

有關域名登記、寄存伺服器及網絡保安：

資訊科技服務中心

2358-6188, 2358-6200 | [email protected] | https://itsc.ust.hk/

有關網站的平面設計、圖像及多媒體內容：

媒體科技及出版中心

2358-6807 | [email protected] | https://mtpc.ust.hk/

09. 聯絡我們

3309. 聯絡我們


http://pao.ust.hk

http://iso.ust.hk/

http://itsc.ust.hk/

香港科技大學 網站指引 · 站之前，先將舊網站內容存檔備份。...

Documents

香港科技大學網站指引 · 站之前，先將舊網站內容存檔備份。...