How to Style Your Story

Important information for final projects

To create a coherent look across the 18 projects, we have created specific style sheets for the following elements. Please follow these guidelines when finalizing your project.

Video: (New!)

Select a still frame from your video that is most inviting and informative to represent your video. How? Go to YouTube and select “Edit.” Under “Video Thumbnail,” you may choose a video still from a number of frames by clicking on it. Note: it can take up to 6 hours for your image to be updated.

Polls: (New!)

The template of your online polls should fit the rest of the page in terms of color schemes, text alignment, and size. In addition, ask questions that make sense to most of your readers. The response items should be mutually exclusive and exhaustive.

Infographics: (New!)

Infographics provide important information and such information must be legible and easy-to-understand. For line arts, use GIF files for best quality.

Headline:

Capitalize the first letter of each word (except for a, the, and propositions, etc.). Make sure your headline informs and interests the reader because that’s the only piece of information they have about your story before they click on the link on the menu bar. At this moment, “Listen Up: Volume Down” is a GREAT example — not too long, not too short, interesting and relevant.

Tagline:

A tagline should follow each headline. The tagline should not be longer than one line when displayed on the screen. To style a tagline, use the h2 tag. Make sure you’re in the HTML tab window and then hard code h2 tags around your tagline. For example: <h2>Tagline here</h2>

Byline:

In the HTML tab view, add the paragraph tag before the byline and then add the class=”byline” within that paragraph tag. Don’t forget to close your paragraph tags. For example: <p class=”byline”>By Sam Iyer, Jaekwan Jeong, Harsh Kalan, and Jacie Yang</p>

Subheads:

Subheads provide useful information especially when the text is long. To style a subhead, use the h3 tag. Make sure you’re in the HTML tab window and then hard code h3 tags around your subhead. For example: <h3>Subhead here</h3>

Paragraphs:

For each paragraph, use the regular p tag. This creates space between paragraphs.

Captions for Photos:

Caption information is required for all photos (and certain infrographics or videos, depending on how much context information you provide in the text). The caption should be at the bottom of the photo. (Tip: Create a table with two rows, the first row is the photo and the second is the caption.) Similar to how you style your byline, for captions, use class=”caption” within a paragraph tag. For example: <p class=”caption”>The caption of the photos goes here.</p>

Links:

Don’t forget to provide links in your text when appropriate. All links in your text should open in a new window/tab. So please hard code target=”_blank” in your link tag. For example: <a href=”URL” target=”_blank”>Text for the link</a>

Blockquotes:

If you have important quotes within your story, in the HTML view, select the quote and click on the “b-quote” button on the menu bar and the quote would stand out in the text. For example:

This is a block quote.

Other Elements:

You may need to resize YouTube videos, slideshows, and other embedded elements because the width of your layout table is no more than 580 pixels.

Link to Your Bio:

Don’t forget to fill in your group and personal information (Group name, links to your story, your bio page, and email address) on the “Meet the Cast” page.

Share This Story
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Google
  • blogmarks
  • TwitThis
  • Yahoo! Buzz
Free Blog Theme and Blog Templates