Layout Exercise #5
Note: Do not publish! Show this to me in lab for credit.
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.
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.
Change the name to Mid*Summer Bluegrass Festival. Create Mid*Summer 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 three images on either side, and I'm giving you four of them. You will create the other two.
Right-click to save the following four images to your /images folder:
Download Kody Norris Show 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.
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 that you Google some font matching sites to find a suitable match with 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.
Make the following change -- put MidSummer Bluegrass Festival in an h1 tag above the date, city, etc. I'll show you an example in class.
The date, location and city are each in their own h2 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.
Preview in Firefox, Chrome.