Upload
others
View
3
Download
0
Embed Size (px)
Citation preview
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
Page 1 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
Page 2 of 19
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
Mouse over > # 666666
Active link > # 000000
c) Highlights on homepageLink > # 660066
Visited > # 660066
Mouse over > # 666666
Active link > # 660066
d) Left navigation bar
Link > # 000000
Visited > # 000000
Mouse over > # 666666
Active link > # 000000
e) Left navigation bar table background (2nd and 3rd levels items)
Active > bg_nav_on.jpg
Non-active > bg_nav_off.jpg
Page 3 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
Mouse over > # 666666
Active link > # 996600
h) Breadcrumbs
Link > # FFFFFF
Visited > # FFFFFF
Mouse over > # CCCCCC
Active link > # FFFFFF
i) Heading hyperlinks
Link > # 660066
Visited > # 660066
Mouse over > # 666666
Active link > # 660066
j) Inline hyperlinks
Link > # 666666
Visited > # 666666
Mouse over > # 850066
Active link > # 666666
k) Footer hyperlinks
Link > # 660066
Visited > # 660066
Mouse over > # 666666
Active link > # 660066
Page 4 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
Heading 2 > Arial, Helvetica, sans-serif, bold, 14px
# 996600 body14pxsubHD (on the brown bar)
Heading 3 > Arial, Helvetica, sans-serif, bold, 12px
# 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
Page 5 of 19
Page Heading
Heading 1
Heading 2
Heading 3
Caption
Page 6 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
Page 7 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
Page 8 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 1 Arial > Regular > 12ptArial > Regular > 10pt
Sample 2 DFLiHeiMedium 中黑 > Regular > 12ptArial > Regular > 10pt
Sample 3 DFLiHeiMedium 中黑 > Regular > 18ptDFLiHeiMedium 中黑 > Regular > 12pt
Sample 4 DFLiHeiMedium 中黑 > Regular > 12ptDFLiHeiMedium 中黑 > Regular > 12pt
Sample 5 Arial > Regular > 12ptDFLiHeiMedium 中黑 > Regular > 12pt
Sample 6 Arial > Regular > 18ptArial > Regular > 18pt
Page 9 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<!-- #include virtual="header.html" --><!-- #include virtual="footer.html" -->
ii) level 1<!-- #include virtual="../header1.html" --><!-- #include virtual="../footer1.html" -->
iii) level 2<!-- #include virtual="../../header2.html" --><!-- #include virtual="../../footer2.html" -->
iv) level 3<!-- #include virtual="../../../header3.html" --><!-- #include virtual="../../../footer3.html" -->
Page 10 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” .
Page 11 of 19
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
Page 12 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
Page 13 of 19
2. Left navigation bar
Examples
1st level item 2nd level items 3rd level items 4th level items
About CUHK--|-- Message from| the Vice-| Chancellor|-- General | Information |-- Our Ten-Year Vision |-- Five Major Areas|-- Strategic Plan --|-- Strategic Research Investment --|-- Chinese Studies|-- Ordinance |-- Download Strategic Plan 2006 |-- …|-- …
2nd level items - The left navigation bar should display items at the same level of the current page.
Page 14 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.
Page 15 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.
Page 16 of 19
Break a long page into sub-pages – Use the hyperlinks to jump to different pages within the same sub-section.
Page 17 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 “ >”.
Page 18 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
Page 19 of 19