Skip to main content

Setting Up The HTML Template for Your Site

Webpage Layout Examples:

There are four main layout formats. Please refer to the Web Style Guide for descriptions of each layout and when to use each one. All layouts have an overall width of 960px. Each layout has set margins and specific content areas for consistency.

Each layout example can be created from the HTML template file (template-regularpage.html) by including or deleting elements (<div> areas) included in it.

Right column sidebar with bottom link menu example page screenshot

Right column sidebar, with bottom link menu

  • Delete the <div id="slideshow-area"> </div> tags
  • Include all other items from the template

Right column sidebar with bottom link menu and slideshow/image area example page screenshot

Right column sidebar, with wide image, with bottom link menu

  • Include all items from the template

Right column sidebar with bottom link menu and slideshow/image area example page screenshot

Right column sidebar, without bottom link menu

  • Delete the <div id="slideshow-area"> </div> tags
  • Delete the <div id="bottom-link-menu"> </div> tags
  • Include all other items from the template

Wide content area example page screenshot

No right column sidebar, no bottom link menu

  • Delete the <div id="slideshow-area"> </div> tags
  • Delete the <div id="centre-col"> </div> tags
  • Delete the <div id="right-col"> </div> tags
  • Delete the <div id="bottom-link-menu"> </div> tags
  • Include all other items from the template

Referenced Stylesheets

The template references external stylesheets that define the layout and formatting of the template, including font styles and link colours:

The following lines of code reference stylesheets that reside on the York web directory:

  • <link rel="stylesheet" type="text/css" media="all" href="http://www.yorku.ca/yorkweb/css/styles.css" />

This stylesheet contains the styles that define the overall layout and formatting for the webpage template. It is imperative that this style sheet be included.

  • <link rel="stylesheet" type="text/css" media="print" href="http://www.yorku.ca/yorkweb/css/print.css" />

This stylesheet contains styles that format the template when printed. It minimizes the template, allowing more space for content of a webpage to be printed and reducing the possibility that it will be cut off. If this is not desired, this line of code can be removed from your template.

The following line of code references a stylesheets that will need to reside on your web directory:

  • <link rel="stylesheet" type="text/css" media="all" href="http://www.yorku.ca/yoursite/css/sitestyles.css" />

This stylesheet is used to store CSS styles that apply to your site specifically, including styles that apply the left-navigation treatments: bolding to indicate location and the drop-down menus. Any additional styling to your site should be added to this style sheet.

Edit the path to indicate where the include file is placed on your website. For example, if it is placed in a folder titled "includes" in the main directory of the site, replace "yoursite" in this line with the Central web account name.

Global Navigation

The template references an include file to implement the Global Navigation. The include file is stored centrally on the main York web directory:

<!--#include virtual="/~yorkweb/includes/internalheadercss.inc" -->

This line in the template code references the include file that is used to produce the Global Navigation.

In the case where the site cannot reference the centrally-stored include file, a local copy of the code can be made and included as an include file for the site, but UIT's Integration, Design & Identity Services (IDIS) (devproj@yorku.ca) should be informed in case notification of changes is necessary.

Google Analytics

The Global Navigation include file contains Google Analytics code that can be used to provide web stats for your site. To enable statistics to be parsed for your site please contact devproj@yorku.ca. Please note that statistics cannot be parsed retroactively.

Banner

A banner is used to clearly indicate the name of the website. The options for a banner are detailed in the York Style Guide. To create a banner, use the Photoshop source files included in the template download.

There are three options for the style of the header:

Tall banner with title & image, screenshot

  • Tall banner with title and image. [675x180.psd]
    Only images should be used in the header – logos, icons, buttons and design treatments should be saved for use in the content area.
    • Dimensions of red area: 675px x 180px
    • Dimensions of image: 235px x 180px
    • Font: 18pt Arial, #ffffff (white)

Tall banner with no image, screenshot

  • Tall banner with only title (no image).[910x180.psd]
    • Dimensions of red area: 910px x 180px
    • Font: 18pt Arial, #ffffff (white)

Short banner with no image, screenshot

  • Short banner with title (no image).[910x70.psd]
    • Dimensions of red area: 910px x 70px
    • Font: 18pt Arial, #ffffff (white)

Guidelines for use:

  • The banner must be 910px wide to fit the area properly.
  • The title used in the banner is that of the website not of the page itself and should be consistent throughout the site.

The banner is placed between the <div id="graphical-banner"> </div> tags. The image should be referenced using an <img src> tag and should reside on your site's directory.

For example: <img src="http://www.yorku.ca/yoursite/images/graphicalheader.jpg" width="910" height="70" alt="Site title" />

Please note that use of the 'alt' tag is imperative. It aids in making the webpage accessible. Text within the 'alt' tag should be brief and descriptive of what the image is demonstrating.

Left Navigation Sidebar

The left navigation sidebar is your website's primary navigation.

Links in the left navigation sidebar should link to the main section pages within your website (ie. yorku.ca/yoursite). Any links that point to another York or external website (ie. yorku.ca/anotherwebsite) should be placed in the right column sidebar.

The left navigation sidebar is implemented as HTML text with CSS styles, and setup as an include file to allow for flexible revisions to the navigation items.

A server-side include file (sidenav.inc) and CSS stylesheet (sitestyles.css) are needed to produce the sidebar. These two files are included in the download and are to be edited and stored in the site's directory in the 'include' folder.

<!--#include virtual="/~yoursite/includes/sidenav.inc" -->

This line of code references the include file. Edit the path to indicate where the include file is on your website directory. (For example, if it's placed in a folder titled "includes" in the main directory of the site, replace "yoursite" in this line above with the Central web account name.)

Link formatting for the left navigation sidebar is coded in the main York CSS stylesheet and should not be modified.

How to Edit the Left Navigation Sidebar

Edit the following in sidenav.inc:

  • Place each navigation link as an unordered list item. The links should correspond to the main sections of the website.
    For example:

<ul>

<li id="home"><a href="#"><em>Website Home</em></a></li>
<li id="sec1"><a href="#">Section 1</a></li>
<li id="sec2"><a href="#">Section 2</a></li>
</ul>

  • Optional: to create a subsection in the menu, enter an unordered list that lists the subsections for that section. For example:

<ul>
<li id="home"><a href="#"><em>Website Home</em></a></li>
<li id="sec1"><a href="#">Section 1</a>
<div id="submenu1">
<ul>
<li id="sec1sub1"><a href="#">Subsection 1a</a></li>
<li id="sec1sub2"><a href="#">Subsection 1b </a></li>
</ul>
</div>
</li>
<li id="sec2"><a href="#">Section 2</a>
<div id="submenu2">
<ul>
<li id="sec2sub1"><a href="#">Subsection 2a</a></li>
<li id="sec2sub2"><a href="#">Subsection 2b</a></li>
</ul>
</div>
</li>
</ul>

The unordered lists for subsections are contained within their respective section's list item tags after the section link, and are also surrounded by <div> tags.

Of note:

  • The first link links to the home page of your website and the link text needs to be surrounded by <em> tags
  • Each section list item, subsection list item, and subsection div needs to have a unique id value. For example, in the example above, "sec1" is a section list item id, "sec1sub1" is a subsection list item id, and "submenu1" is a subsection div id.
  • The left navigation sidebar must display no more than two levels (i.e. no sub-subsections)
  • Only one expanded section with its subsections is to be shown at a time.
  • As a usability guideline, the number of sections, and the number of subsections within a section, should be kept at a minimum.
  • No elements other than on-site navigation should be added to the left navigation sidebar. If links to elsewhere on the York website or to and external website are desired, they should be placed in the right column sidebar.

<link rel="stylesheet" type="text/css" media="all" href="http://www.yorku.ca/yoursite/css/sitestyles.css" />


This line of code references the stylesheet that contains the styles used for bolding the links and for displaying the appropriate section's subsections if applicable in the left navigation. The stylesheet is stored in your site's directory and it will be necessary to edit the path in this line to point to where it is stored.

Each section and subsection id specified in your sidebar include file needs to have the following corresponding styles defined in this stylesheet (in this example "sec1" is a section id):

body.sec1 #sec1 a,
body.sec1 #sec1 a:link,
body.sec1 #sec1 a:hover,
body.sec1 #sec1 a:visited
{font-weight: bold; color: #000000;}

Each section that has subsections also needs to have the following corresponding styles defined for the section id (in this example "sec1" is the section id):

body.sec1 #sec1 ul li a,
body.sec1 #sec1 ul li a:link,
body.sec1 #sec1 ul li a:hover,
body.sec1 #sec1 ul li a:visited
{font-weight: normal; color: #666666;}

Each div id specified in the sidebar include file needs to have the following corresponding style defined in this stylesheet (in this example "submenu1" is the div id):

#submenu1 {display: none;}

Each section that has subsections also needs to have the following corresponding styles defined for the section and subsection ids (in this example "sec1" refers to a section id; "sec1sub1", "sec1sub2" and "sec1sub3" refer to subsection ids; and "submenu1" refers to the div id):

body.sec1 #submenu1,
body.sec1sub1 #submenu1,
body.sec1sub2 #submenu1,
body.sec1sub3 #submenu1
{display: block;}

Once the sidebar include file and this stylesheet have been set up, the link to be bolded in the left navigation can be specified for a given page. To specify the section or subsection link to be bolded, enter the appropriate id (chosen from the section and subsection ids specified in the sidebar include file) in a class selector in the body tag. For example:

<body class="sec1sub2">

If the page is the main page of a section, or a page within that section but not within any of its subsections, bold the section link. If the page is the main page of a subsection or a page within that subsection, bold the subsection link.

Slideshow / Photograph / Design Area (optional)

An optional slideshow/photograph/design area can be placed above the main content area and the right column area.

  • Slideshow/photograph/design area width must be 710px
  • There is no mandatory height set for images used so long as all images used are of the same dimensions. Keep in mind that the taller the area , the lower down on the page your content gets pushed. It's best to keep this area to a moderate height.

The image(s) are placed between the <div id="slideshow-area"> </div> tags. If this area is not used, these div tags can be deleted.

For implementation guidance, please contact devproj@yorku.ca

Main Content Area

This is the area to use to communicate main messages for the topic of the page. The main content area is placed between the <div id="centre-col"> </div> tags.

  • The content area has a fixed width of 455px. Check the width of items such as images and tables (as well as any spacing, borders, and padding specified for them) in the content area to ensure that they do not cause the content area to exceed the 455px width, as it may cause the template to not display properly in browsers.

Text formatting styles are specified in the main York stylesheet. In general, default styles should not be overridden. Please contact devproj@yorku.ca to discuss unique circumstances.

The main content area has a white background and a 1px vertical rule on the right side dividing it from the right column. These are specified in the main CSS stylesheet and should not be overridden.

Use div tags for content layout when possible. HTML tables i.e. <table> should be used for tabular content or data presentation only – this is to facilitate accessibility for people with disabilities.

Photos

The placement of photos should be either in the main content area or in the right column sidebar, but not in the left navigation area.

Functionality

If you plan on implementing additional features or functionality in the content area, please contact devproj@yorku.ca.

Right Column Sidebar

The right column sidebar should be used for items that are complementary to the main content. Links to other York sites or external sites should be placed here and not in the left navigation sidebar. Likewise, links to main pages within your website should appear in the left navigation sidebar, and not in the right column sidebar.

The right column sidebar is placed between the <div id="right-col"> </div> tags. If you choose not to use the right column, keep this area empty to maintain a readable line length for text content.

When placing content in your right column sidebar, consider upkeep. If content repeats itself across many pages, consider using an include file to reduce maintenance issues.

Page Extras that might appear in the Right Column Sidebar

Social Media Icons

Social media links must use social media icons. Icons should be placed within the <div id="social-media-icons"> </div> tags that appear within the <div id="right-col"> </div> tags.

  • Icons should be placed in an unordered list (<ul>)

Please reference these centrally-stored icons as they may need to be updated in the future.

The icons you should use are the following:

Apple App Store
http://www.yorku.ca/yorkweb/images/sm-icons/app-store.png
Bing
http://www.yorku.ca/yorkweb/images/sm-icons/bing.png
Blogger
http://www.yorku.ca/yorkweb/images/sm-icons/blogger.png
Delicious
http://www.yorku.ca/yorkweb/images/sm-icons/delicious.png
Deviant Art
http://www.yorku.ca/yorkweb/images/sm-icons/deviant-art.png
Digg
http://www.yorku.ca/yorkweb/images/sm-icons/digg.png
Email
http://www.yorku.ca/yorkweb/images/sm-icons/email.png
Facebook
http://www.yorku.ca/yorkweb/images/sm-icons/facebook.png
Flickr
http://www.yorku.ca/yorkweb/images/sm-icons/flickr.png
Foursquare
http://www.yorku.ca/yorkweb/images/sm-icons/foursquare.png
Google
http://www.yorku.ca/yorkweb/images/sm-icons/google.png
Google +
http://www.yorku.ca/yorkweb/images/sm-icons/google-plus.png
Instagram
http://www.yorku.ca/yorkweb/images/sm-icons/instagram.png
LinkedIn
http://www.yorku.ca/yorkweb/images/sm-icons/linkedin.png
Meet-Up
http://www.yorku.ca/yorkweb/images/sm-icons/meetup.png
Mobile Me
http://www.yorku.ca/yorkweb/images/sm-icons/mobileme.png
MSN
http://www.yorku.ca/yorkweb/images/sm-icons/msn.png
MySpace
http://www.yorku.ca/yorkweb/images/sm-icons/myspace.png
Paypal
http://www.yorku.ca/yorkweb/images/sm-icons/paypal.png
Picasa
http://www.yorku.ca/yorkweb/images/sm-icons/picasa.png
Pinterest
http://www.yorku.ca/yorkweb/images/sm-icons/pinterest.png
Podcast
http://www.yorku.ca/yorkweb/images/sm-icons/podcast.png
Posterous
http://www.yorku.ca/yorkweb/images/sm-icons/posterous.png
Reddit
http://www.yorku.ca/yorkweb/images/sm-icons/reddit.png
Retweet
http://www.yorku.ca/yorkweb/images/sm-icons/retweet.png
RSS
http://www.yorku.ca/yorkweb/images/sm-icons/rss.png
ShareThis
http://www.yorku.ca/yorkweb/images/sm-icons/sharethis.png
Skype
http://www.yorku.ca/yorkweb/images/sm-icons/skype.png
Stumbleupon
http://www.yorku.ca/yorkweb/images/sm-icons/stumbleupon.png
Technorati
http://www.yorku.ca/yorkweb/images/sm-icons/technorati.png
Tumblr
http://www.yorku.ca/yorkweb/images/sm-icons/tumblr.png
Twitter
http://www.yorku.ca/yorkweb/images/sm-icons/twitter.png
Vimeo
http://www.yorku.ca/yorkweb/images/sm-icons/vimeo.png
WordPress
http://www.yorku.ca/yorkweb/images/sm-icons/wordpress.png
Yelp
http://www.yorku.ca/yorkweb/images/sm-icons/yelp.png
YFile
http://www.yorku.ca/yorkweb/images/sm-icons/yfile.png
YouTube
http://www.yorku.ca/yorkweb/images/sm-icons/youtube.png

 

If there is an icon required that is not listed, please contact devproj@yorku.ca.

If the website has links to any social media sites, a layout with a right-navigation sidebar must be used.

Social Media Feeds

If a feed widget is desired for on the website (typically used in conjunction with Twitter and / or Facebook) using those directly from the social media outlets is recommended. Social media feeds should be placed within the <div id="social-media-icons"> </div> tags.

Whenever possible, widgets should be configured using York colours.

Twitter

Twitter's Customized Profile Widget

  • Appearance tab: Widget Colours
    • shell background #E31837;
    • shell text #ffffff;
    • tweet background #ffffff;
    • tweet text #252525;
    • links #E31837
  • Dimensions tab:
    • width 210px;
    • height discretionary
Twitter feed example image

Facebook

Activity Feed plugin

  • Width: 210;
  • Height: discretionary;
  • Colour scheme: light
  • Border colour: leave blank or use #E31837
  • Font: Arial
Recent Activity Facebook feed example image

Parent Organization Link

A link to a parental organization is optional. If desired, it should be placed below any social media icons or feeds.

The parental organization link(s) should be placed within the <div id="parent-org"> </div> tags that appear within the <div id="right-col"> </div> tags It will display in all-caps when placed in the correct div tag.

Link Lists

Links should be placed within the <div id="right-col-list"> </div> tags that appear within the <div id="right-col"> </div> tags.

  • Links should be placed in an unordered list (<ul>).
  • Each item listed should use the site's name being linked to.

Photographs

Photos should be placed within the <div id="right-col"> </div> tags before the <div id="social-media-icons"> </div> [or other] tags.

  • Photos can have a maximum width of 210px (anything larger will distort the page).
  • No padding should be placed around the image (there is already padding coded onto the page).

Announcements

Announcements should be placed within the <div id="right-col"> </div> tags after the <div id="right-col-list"> </div>.

  • Keep text brief (30 words or less) and timely.
  • If it is necessary to use a background colour on this area, use either light grey (#EEEEEE) with black text or red (#E31837) with white text.

Events Listings

Event listings should be placed within the <div id="right-col"> </div> tags after the <div id="right-col-list"> </div> tags.

Event listings can be either a formatted list maintained by the site's webmaster or can be an RSS feed from an event tool such as York's event system.

Promotional Buttons

Promotional buttons should be placed within the <div id="right-col"> </div> tags after the <div id="right-col-list"> </div> tags. They are the last item that should appear in the Right Column Sidebar.

  • Width should be 210px – anything wider will distort the page. Height is dependent on content included.
  • Align the buttons to the left of the column
  • Any font style and/or image can be used, but in the link tag, "title" and "alt" information must be provided to make the information accessible to those with accessibility issues or their images turned off
  • A maximum of 3 buttons can be used on a page – any more will lessen their effectiveness.

Bottom Link Menu

The text menu should only appear at the bottom of the home page / landing page of a website. Its use is optional. If it is not being used, delete the <div id="bottom-link-menu"> </div> tags.

The bottom link menu code is placed in an include file named text-menu.inc and is included with the template.

The bottom link menu is placed between the <div id="bottom-link-menu"> </div> tags. It is housed on your webserver space and should be referenced as an include file. For example: <!--#include virtual="/~yoursite/includes/bottom-link-menu.inc" -->. (Edit the path to indicate where the include file is placed on your website.)

Footer

The template references an include file to implement the Footer. The include file is stored centrally on the main York web directory:

<!--#include virtual="/~yorkweb/includes/footer.inc" -->

This line in the template code references the include file that is used to produce the Footer. It is universal to all York websites.