CSU Ram's Head

Layout Exercise #5

This exercise uses the following: Photoshop (text, save for web, free transform, creating images to size) and Brackets (layout in divs/semantic containers, styling using ids and descendent selectors).

In class, create the page shown below in HTML and and apply CSS styles as appropriate. When you are done, publish it to the web server and show it to me online for credit.

Note: The screenshot below is not at full size. To see it at full size, right-click and view image, then scale to 100%.

See below to download several files you will need to complete the exercise.

Exercise #5 Screenshot

Step 1: Create Logos

Note: Watch the videos on today's schedule entry before you start. They are all directly relevant to this exercise.

Another Note: It's advisable to work with a larger version of these logos than you actually need. You can then trim and resize for the web graphic.

Download the star in TIF format to your /nonweb folder. You will use this to create your own logo.

Create Midwinter logo with star in Photoshop. Choose your own color scheme that is not the same as mine. Make the star the same color as the logo text. Use the Stroke effect to create the outline of the type and the star. The font is Impact. Image should be 600 pixels wide, trimmed. Choose appropriate font size and tracking values in Photoshop. Save a master as a TIF into /nonweb, then create the web image in an appropriate format and save into your images directory.

Create a separate image for the bottom part of the logo (Bluegrass Festival). Again, the font is Impact. This image should also be 600 pixels wide, trimmed. Save a master as a TIF into /nonweb, the create the web image in an appropriate format and save into your images directory.

Important! These two final web images should each be 600px wide and they should align perfectly on their left and right edges.

Step 2: Prepare Photos

Note: For this exercise, I only want you do to the top two images on either side, and I'm giving you two of them. You will create the other two.

Right-click to save the following two images to your /images folder:

Blue Highway

John McEuen

Download Special Consensus and Bowregard promo photos from their web sites, crop, size correctly and save in appropriate format. Make them the same size (325px × 217px) as the other photos.

Step 3: Mark up content

Note: I am giving you partial HTML and CSS files below.

Right-click to download ex5.html to your /exercises folder and ex5-style.css to your exercises/css folder.

Don't copy my text from the web page. Please right-click to download midwinter.txt to your /nonweb folder, and use it for all text.

Remember that when you open Brackets, your exercises folder should be the local root folder.

Place content in appropriate containers.

Step 4: Style content

Style using appropriate selectors in the linked style sheet.

Width of #wrapper is 1200px.

Use Open Sans and another Google font of your choice (I suggest using one of the popular matches that Google provides for Open Sans). Use one font for #topstripe, nav and footer, and the other everywhere else. Use an appropriate font stack when you specify the font-face property.

Preview in Firefox, Chrome.

The date, location and city are each in their own h1 tag. Set top and bottom margin to 0 for them. Featuring in Concert and To this great list of talent add: are each in an h4 tag. Band names can all be in h3 tags, or do a list and adjust left padding and remove bullets. The initial bold words in the paragraphs are in a strong tag.

One last tip: setting img to display: block; will make a lot of this layout much easier.