colour - cuhk.edu.hk€¦ · web viewlight purple > # 850066 light orange > # fad7a7 cream...

CUHK Website Design Guidelines

A. User Interface

1. Colour usagei) Background and general use

n.b.You are advised to use web colours before using non-web ones.

a) Web colours

Gold > # CC9900

Brown > # 996600

Purple > # 660066

Deep purple > # 330033

Light green > # 33CC66

Dark green > # 339966

Dark grey > # 666666

Mid grey > # 999999

Light grey > # CCCCCC

Black > # 000000

White > # FFFFFF

b) Non-web colours

Light purple > # 850066

Light orange > # FAD7A7

Cream > # F6E7D4

Light cream > # FDF3E5

Gold > # DDA90F

Deep gold > # AF7D0F

Light grey > # E5E5E5

Greenish grey > # A2ADA6

c) Page propertiesBackground > # FFFFFF

Text > # 000000

of 19

d) Background colour of tables / form areas

Form > # FDF3E5

Title area (table) > # FDF3E5

Content area (table) > # FFFFFF

Photo or caption > # F6E7D4

Examples

Form http://mmlab.itsc.cuhk.edu.hk/ipro/event/en/notifyreg.asp

Table http://mmlab.itsc.cuhk.edu.hk/ipro/event/en http://www.cuhk.edu.hk/v6/en/cuhk/officers/vc_cv4.html http://www.cuhk.edu.hk/v6/en/cuhk/info/statistics/statistics.html

List http://www.cuhk.edu.hk/v6/en/cuhk/info/awards/achievements_teacher.html http://www.cuhk.edu.hk/v6/en/teaching/quality.html http://www.cuhk.edu.hk/v6/en/cuhk/officers/vc_presentation.html http://www.cuhk.edu.hk/v6/en/research/institutes_centre.html

Page with multiple images http://www.cuhk.edu.hk/v6/en/cuhk/officers/vc_biography.html http://www.cuhk.edu.hk/v6/en/media/presskit/photo_gallery.html

Curriculum Vitae http://www.cuhk.edu.hk/v6/en/cuhk/officers/vc_cv.html http://www.cuhk.edu.hk/v6/en/cuhk/officers/pv_kenneth_cv.html

ii) Textn.b. Please refer to Section A3 Font / CSS > Content for more details.

Page heading > # 660066

Heading 1 > # 996600

Body content > # 000000

Footer > # 666666

of 19

http://www.cuhk.edu.hk/v6/en/cuhk/officers/pv_kenneth_cv.html

http://www.cuhk.edu.hk/v6/en/cuhk/officers/vc_cv.html

http://www.cuhk.edu.hk/v6/en/media/presskit/photo_gallery.html

http://www.cuhk.edu.hk/v6/en/cuhk/officers/vc_biography.html

http://www.cuhk.edu.hk/v6/en/research/institutes_centre.html

http://www.cuhk.edu.hk/v6/en/cuhk/officers/vc_presentation.html

http://www.cuhk.edu.hk/v6/en/teaching/quality.html

http://www.cuhk.edu.hk/v6/en/cuhk/info/awards/achievements_teacher.html

http://www.cuhk.edu.hk/v6/en/cuhk/info/statistics/statistics.html

http://www.cuhk.edu.hk/v6/en/cuhk/officers/vc_cv4.html

http://mmlab.itsc.cuhk.edu.hk/ipro/event/en

http://mmlab.itsc.cuhk.edu.hk/ipro/event/en/notifyreg.asp

iii) Navigationn.b. Please refer to Section A3 Font / CSS > Navigation and Section C Navigation Structure

for more details.

a) Pull-down menus on homepage

Link > # 000000

Visited > # 000000

Mouse over > # 666666

Active link > # 000000

Text background colour > # E5E5E5

Mouse over text background colour >

# A2ADA6

b) News & Events on homepageLink > # 000000

Visited > # 000000



c) Highlights on homepageLink > # 660066

Visited > # 660066



d) Left navigation bar

Link > # 000000

Visited > # 000000



e) Left navigation bar table background (2nd and 3rd levels items)

Active > bg_nav_on.jpg

Non-active > bg_nav_off.jpg

of 19

f) Left navigation bar sub-navigation table background (4th level items)

Active > # F6E7D4

Non-active > # FDF3E5

g) Jump into hyperlinks

Link > # 996600

Visited > # 996600



h) Breadcrumbs

Link > # FFFFFF

Visited > # FFFFFF

Mouse over > # CCCCCC

Active link > # FFFFFF

i) Heading hyperlinks

Link > # 660066

Visited > # 660066



j) Inline hyperlinks

Link > # 666666

Visited > # 666666



k) Footer hyperlinks

Link > # 660066

Visited > # 660066



of 19

2. Fonts / CSSi) Content

Page heading > Arial, Helvetica, sans-serif, normal, 24px

# 660066 body24name

Heading 1 > Arial, Helvetica, sans-serif, bold, 18px

# 996600 body18name


# 996600 body14pxsubHD (on the brown bar)


# 660066 body12subhd

Body content > Arial, Helvetica, sans-serif, normal, 12px

# 000000 no need to apply any CSS, as it uses the default font

Caption > Arial, Helvetica, sans-serif, normal, 11px

# 666666 caption

First word of body content (English version only) >

Arial, Helvetica, sans-serif, bold, 14px

# 660066 body14pxdropcap

Highlighted content > Arial, Helvetica, sans-serif, normal, italic, 12px (no italic for Chinese content)

# 996600 body12pxsItalic

Footer > Arial, Helvetica, sans-serif, normal, 11px

# 666666 cont11px

Examples

Heading

of 19

Page Heading

Heading 1

Heading 2

Heading 3

Caption

of 19

Highlighted content

ii) Navigationn.b. Please refer to Section C Navigation Structure for examples.

Pull-down menu on homepage >

Arial, Helvetica, sans-serif, normal, 11px

# 000000 navMenu

News & Events on homepage >

Arial, Helvetica, sans-serif, normal, 11px

# 000000 navMenu

Highlights on homepage >

Arial, Helvetica, sans-serif, bold, 12px

#660066 navBoldPur

Left navigation bar > Arial, Helvetica, sans-serif, normal, 12px

# 000000 nav

Jump into hyperlink > Arial, Helvetica, sans-serif, normal, 11px

# 996600 navOfficer

Breadcrumb > Arial, Helvetica, sans-serif, normal, 11px

# FFFFFF navPath

Heading hyperlink > Arial, Helvetica, sans-serif, bold, 12px

# 660066 navBoldPur

Inline hyperlink > Arial, Helvetica, sans-serif, normal, 12px

# 666666 no need to apply any CSS class

Footer hyperlink > Arial, Helvetica, sans-serif, normal, 11px

# 660066 navfooter

of 19

First word of body content

3. Dimensions of page componentsHeader > 585px, align-default, Cell Pad 0, Cell space 0

Body content > 585px, align-default, Cell Pad 0, Cell space 0

Body content with table > 580px, vertical align-top, Cell Pad 3, Cell space 0

Left navigation bar > 117px, align-default, Cell Pad 5, Cell space 0

Footer > 749px, align-default, Cell Pad 0, Cell space 0

4. Bannersi) Static banners on homepage

English font type Arial

Traditional Chinese font type DFLiHeiMedium 中黑Simplified Chinese font type MHeiGB5 U 簡中黑Colours # 339966 # 660066

Banner size 194 x 50 pixels

Icon size 52 x 50 pixels

Examples

EnglishSample 1 Arial > Regular > 14pt

Arial > Regular > 12pt

Sample 2 Arial > Regular > 24ptArial > Regular > 14pt

Traditional ChineseSample 1 DFLiHeiMedium 中黑 > Regular > 14pt

DFLiHeiMedium 中黑 > Regular > 12pt

Sample 2 DFLiHeiMedium 中黑 > Regular > 20ptDFLiHeiMedium 中黑 > Regular > 18pt

Simplified ChineseSample 1 MHeiGB5 U 簡中黑 > Bold > 14pt

MHeiGB5 U 簡中黑 > Bold > 12pt

of 19

Sample 2 MHeiGB5 U 簡中黑 > Bold > 20ptMHeiGB5 U 簡中黑 > Bold > 18pt

ii) Rolling banners on homepageEnglish font type Arial

Traditional Chinese font type DFLiHeiMedium 中黑*

Simplified Chinese font type MHeiGB5 U 簡中黑*

Colours # 660066

Banner size 200 x 50 pixels

Icon size 52 x 50 pixels

* Please use the system default font if中黑 or簡中黑 is not available.

Examples


Sample 2 DFLiHeiMedium 中黑 > Regular > 12ptArial > Regular > 10pt



Sample 5 Arial > Regular > 12ptDFLiHeiMedium 中黑 > Regular > 12pt


of 19

B. Site Structure

1. Format for Windows titlei) English version

a) CUHK :: [page heading]e.g. CUHK :: CUHK Insignia

b) CUHK :: [page heading] > heading of sub-pagee.g. CUHK :: Professor Lawrence J. Lau > Presentations

ii) Chinese versiona) 香港中文大學 :: [page heading]

e.g. 香港中文大學 :: 校徽及校訓b) 香港中文大學 :: [page heading] > heading of sub-page

e.g. 香港中文大學 :: 劉遵義教授 > 演講辭2. Headers and footers

Server side include is used for headers and footers for easy maintenance. Four levels of headers and footers are used

i) Root level

ii) level 1

iii) level 2

iv) level 3

of 19

3. Folder structurei) The site is bilingual, i.e. English and Traditional Chinese. English and Chinese pages are

located under folders “en” and “b5” respectively.n.b.Simplified Chinese pages are generated by the HanWEB real time translation server.

ii) The folder structures of folders “en” and “b5” are identical.n.b.a) There is one index page for each language version.

b) For a multi-lingual website, you should start with one of the language versions, say English. After the structure and content of the English version is finalized, you could duplicate the entire structure, including all folders and pages, under the English folder and put them under the folder for another language version.

iii) Links and image references within top-level pages should be relative. Links to other pages on the same server, i.e. www.cuhk.edu.hk, should be relative to the root (/) of this server, e.g. HREF="/colleges/". Absolute paths should be used for links to external sites only.

iv) Images folderAll graphics are included in “images” folders. Below is the folder structure of a particular language version.

* For graphics shared among pages of the same language version.** For graphics shared among pages of “section1”.

n.b. file1.html will never use any image located in images folders of other sections.*** For graphics shared among pages of “section5_1”, “section5_2” and “section5_3” .

of 19

http://www.cuhk.edu.hk/

4. File naming conventioni) No upper-case letter, Chinese character, space or symbol

iii) Use only lower-case letters, the underscore or digits

iv) Assign meaningful filenames and folder names

iv) 32 characters max

v) Use files extension .html

iii) Graphics a) The first part of the name describes the function of the graphic.b) The second part is a description of the graphic.c) The third part is the variation of the graphic.

iv) Abbreviations bkg_ = background bt_= button nav_ = navigation hd_ = heading navsub_ = sub-navigation photo_ /pic_ = photograph spacer.gif = small square of transparent gif

of 19

C. Navigation Structure

1. Pull-down menus on homepagei) First level items are divided into “For” and “About” menus on homepageii) Use JavaScript to create pull-down menus for First level items on homepage. Second level

items of the corresponding section are available on the pull-down menus

of 19

3rd level items - The left navigation bar should display items at the same level of the current page.

4th level items – Use a sub-navigation table for this level of items.

of 19

3. Jump into hyperlinksUse Jump into hyperlinks for long pages or 5th level items.

Examples

Long page – Use as anchor to jump to different parts of a long page.

of 19

Break a long page into sub-pages – Use the hyperlinks to jump to different pages within the same sub-section.

of 19

Different URLs

4. Breadcrumbsi) Located at the top golden bar.ii) The page heading of the current page should not be included.iii) Breadcrumbs should end with “ >”.

of 19

5. Heading hyperlinksOpen a new browser window for links to external websites.

6. Inline hyperlinksi) Open a new browser window for links to external websites.ii) Use a different font colour to distinguish inline hyperlinks from the normal text.

7. Mouse over auto texts Mouse over auto texts are applied for the following graphic itemsi) Emblem ii) Name of CUHKiii) Mottoiv) Functional buttons in the headerv) Photos of Vice-Chancellor and Pro-Vice-Chancellors

of 19

colour - cuhk.edu.hk€¦ · web viewlight purple > # 850066 light orange > # fad7a7 cream...

Documents