Style Guide

The Style Guide is here to help you keep your website in keeping with the Channel 12 brand. It is not a substitute for training or intended to be a full reference.

For further instructions please see the Quick Start Guide and the Help Manual.

Adding Video

Video can be added on the Rushes page or on the home page.

Rushes Page

Go to rushes page and in the long descriptions text editor click on the icon "Insert file"
Enter your user-name and password if asked
Click the Rave folder under Categories on the left
Click the Upload button
Choose the video (size 640 x 480) you want to upload from your local computer and upload.
Repeat if you want to upload a thumbnail. (thumbnails should be re-sized to 83px x 55px in a graphics package first). If you don't upload a thumbnail image then a default play button will be used instead.
Click the X to close the file manager

Your video and thumbnail will now be automatically added to the Rushes playlist. You can add folders to the "rave" folder to organise many videos. These will appear on the Rushes Page with a + symbol.

Home Page

Go to home page and in the long descriptions text editor click on the icon "Insert file". This opens the file manager.
Enter your user-name and password if asked
Click the Rave folder under Categories on the left
Click the Home folder
Delete or rename the file that is there.
Click the Upload button
Upload your video (size 320 x 240) and rename it C12home.flv
Click the X to close the file manager

Text Editor

The text editor allows you to add and format text in the long description of departments and other text areas.

Adding Headings

Make sure all headings and subheadings are in Title Case not Capitals. Highlight the text you want to make a heading and select heading 2 or heading 3 from the drop down Format Menu. For normal text select paragraph.

This is a Main Heading (h2 heading)

This is a Sub-heading (h3 heading)

Adding Style

Bold and Italic can be applied if necessary. Also from the drop down Styles menu First Paragraph can be used to highlight the first paragraph on a page in bold and increase the font size.

Adding Links

Make the linking text understandable on its own. E.g. You can search for information here. Not click here to search for information.

Go to the web page you want to link to and copy the web address (URL) e.g. www.google.co.uk
Highlight the text you want to be a clickable link with the mouse
Click the icon that looks like a chain. A dialog box will open, paste or input the URL that you want your link to go to, then click Insert.

For email links, choose Email instead of URL as the Link Type in the drop down box.

Adding Images

Images need to be re-sized in a graphics package first. Max width for images is 558px. Images can either be aligned left or right.

Put the cursor where you want to place the image.
Click on Insert/Edit image icon.
Click on the Browse icon located to the right of 'Image URL'
Enter your user-name and password if asked
Click the UserFiles folder under Categories on the left
Click the Image folder.
Click the Upload button and Choose Files button.
Locate the file on your computer then Upload.
Select the image you want to use and then click on Insert.
Add brief Image Description to describe the image in context. Alternative text is required by users with accessibility requirements or people using text-only browsers.
Click Insert
Click on the image and from the Styles drop-down menu select either Image Right or Image Left to align the image.

You can also organise images by creating sub-folders within the Images folder.

Example images

The images below are 320px wide.

Left Image

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse non ante. Suspendisse potenti. Vivamus neque enim, dignissim eu, molestie vel, convallis sed, est. Aliquam augue. Nam non metus. Quisque congue consequat nisl. Proin ullamcorper. Phasellus posuere. Donec non nisi sed nisi gravida sagittis. Vivamus sagittis feugiat justo.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse non ante. Suspendisse potenti. Vivamus neque enim, dignissim eu, molestie vel, convallis sed, est. Aliquam augue. Nam non metus. Quisque congue consequat nisl. Proin ullamcorper. Phasellus posuere. Donec non nisi sed nisi gravida sagittis. Vivamus sagittis feugiat justo.

Right Image

Adding PDF, Word and other Documents

In your text add the file type and size in brackets after the name of the document e.g. (PDF 147K)
Highlight the name of the document or text you want to be a clickable link with the mouse.
Click the Insert/Edit link icon
Click on the Browse icon located to the right of 'Link URL'
Enter your user-name and password if asked
Click the UserFiles folder under Categories on the left
Click the File folder.
Click the Upload button and Choose Files button.
Locate the file on your computer then Upload.
Select the file you want to use and then click on Insert.
Choose Open in a New Window (_blank) from the Target drop down menu. This step is optional but is recommended for documents.
Click Insert

E.g. This is a test document (text doc, 1k)

Adding Departments

Select shop builder then click on add department

Add a department title. e.g. Gadgets

Select a layout

layout.htm (use on all pages except home page)
layout_home.htm (only used for home page)
layout_video.htm (only used for rushes page)

Select a template

department.htm (used in majority of cases)

Click Add Department button.

Inserting Predefined Template

After adding a department, it is recommended in the text editor to click on the Insert Predefined Template Content icon, select "Channel 12 - Right hand Photos" from the menu and click Insert.

Doing this adds dummy content to the page, which makes it easier to add and change photos down the right hand side of the page. All content can then be changed.

Adding Articles

Articles can be added by clicking on the appropriate department and then selecting "add article". This will automatically create the heading "Articles" at the bottom of the page of the department chosen and it will create a link to your article(s).

Validation

After adding/editing a page please validate it by going to http://validator.w3.org/ and pasting the web address of the page to validate in to the Validate by URI page.

For example the address of this page is www.channel-12.tv/department/style_guide/ You can only validate once the website is live.

Channel 12

Departments

My Tools