Week 8 Practical
Code the following page (click for larger image):
- There is no content indicated. The text shown above is simply providing hints as to the HTML and CSS needed. You may leave the page content blank, or add a bit of text as placeholders.
- In most cases, you would not set height for page elements. We’re just doing it here because there is no content.
- Keep everything in a root folder. Use an external style sheet. No images are required.
You may refer to prior lessons, your eBook, or online resources. You may ask for my help on one or two items, but I will not be guiding you through this review.
After you have had sufficient time to complete this on your own, I will demonstrate how I would do it.
Semantic Web Exercise: Convert a Photoshop Mockup into HTML5 and CSS
This week, we will look at the process of taking a layout in Photoshop and converting it into web-standards HTML and CSS code. We will focus on using semantic markup: code which describes the kind of content it holds.
Click for larger image.
Preparing Your Photoshop Mockups Properly
It’s important that when designing a layout in Photoshop for eventual use in HTML and CSS, that we keep some healthy design habits. Below I describe what I do to make my coding easier down the road.
- Use a grid. The mockup below uses a 12-column, 960px grid (you can find more Photoshop web grids at robbiemanson.com.) Keep things aligned vertically and horizontally. A grid not only make the page look its best, it makes coding easier too.
- Keep in mind the contraints of working with HTML and CSS. There are a lot fewer constraints than there were when I first started coding websites, but they are still there. Everything’s still based on boxes to some degree.
- Always maintain an orderly Layers panel. As much as possible, keep individual pieces in their own named layers and then organize the layers into groups/folders.
- To the extent that you know how to do so, use Smart Objects, layer masks, adjustment layers, and live text so that you are not destroying pixel data.
- Hang on to all of the original files for fonts, photos, and graphics so that you can prepare them for the web (vs. mockup).
- In the old days, I would use Photoshop to slice up the layout and generate the images and code in a more automated way. This just isn’t a good idea any more. The code created by Photoshop is very inflexible and can lead to many headaches down the road. Take the extra time up front to do it right.
Wireframing the Mockup
The first thing we need to do is decide where the major page sections are and sketch up a wireframe. This will help us determine how our main divs need to be arranged and named.
Here was my first solution:
The problem is that a few graphics at the top are overlapping. I actually designed this so that there would be dual backgrounds: one would repeat across the X axis (the striped fabric,) and one would not repeat (the logo, the dress-up girl, and the ribbon behind the main menu.) Once that is taken into consideration, the content blocks look a bit different:
Then I subdivided the main page content areas into nested boxes:
Now I have an idea of how the initial markup should be organized:
The markup is semantic: the tag and attribute names reflect what kind of content is within them. So I use <nav> for navigational areas, and IDs which identify content areas quite specifically.
Getting the Site Set Up
Here’s where you come in. Take what I have planned so far, and begin coding the HTML and CSS.
- Create a new site folder called toddler-site. Create an images folder inside it.
- Create a new HTML5 file and save it as index.html in the toddler-site folder.
- Create a new CSS file and save it as styles.css in the toddler-site folder.
- Link the index.html file to the styles.css file.
- Change the page title to Happy Toddler Workshop – Sacramento, California.
- Between the <body> tags in index.html, create the following page structure:
- In styles.css, put in placeholders for some basic HTML elements and for the IDs and classes we established.
Introducing Some Style
The first thing I like to do is some basic styling for the body and wrapper.
- In Photoshop, save toddler-workshop-site.psd as toddler-workshop-body-bkdg.psd. This is so that we don’t accidentally ruin our original mockup—we are about the do some major cropping and editing.
- Go to the View menu in Photoshop and uncheck Extras. This hides the guides.
- Hide all layers and folders except for the fabric header folder.
- Crop the document so that it it tight to the fabric header.
- We want the pattern to repeat without seams, so we have to do a little problem solving. The fabric pattern repeats at a different rate than the zig-zag, since I got the image from one place and created the zig-zag myself in Photoshop. Let’s find a place we can crop this to where this isn’t an issue: crop where there’s a zig-zag pointing down within a green stripe, on both the left and right.
- Save the image as body-background.png in toddler-site/images. Save and close toddler-workshop-body-bkdg.psd.
- Establish body-background.png as the background image for your body element, repeating only along to X axis and affixed to the top of the browser window. While we’re here, let’s remove margins and padding on the body element.
- Now let’s find out how wide our mockup is, so we can assign a width to our wrapper. In the original Photoshop mockup file, go to Image > Image Size. We can see that our mockup is 1020px wide.
- In the CSS, set the width for the #wrapper and center it on the page.
- Add some text placeholders in your HTML (highlighted in green below), so you can see what’s happening with your layout in the browser. The green highlighted code is what needs to be added.
- Save all your files. View index.html in a browser. It should resemble this if your browser window is open wider than 1020px.
Implement the Second Background
- Save the Photoshop file as a new file named wrapper-background.psd.
- Hide visiblity of all the Photoshop layers except for:
- toddler girl layer
- header text folder
- rule copy, rule, and bar inside the menu folder
- Crop the image so that it stays as wide, but crops out the blank are below the girl’s feet.
- Save the resulting Photoshop image as a PNG-24 called wrapper-background.png in the images folder. We need it to be a PNG-24 so that it is transparent, and will show the fabric background behind it without having jaggy edges.
- Define this image as the background for your wrapper with no repeat and aligned to the top.
- Save all and view the page in a browser. You won’t see the entire image yet in the browser, but more will appear as content is added.
- Save and close wrapper-background.psd, and return to toddler-workshop-site.psd.
Arrange the Main Divs
Now let’s arrange the three main content <div>s so that they have the correct width, margins, paddings, and positioning
- Now we need to start measuring. Locate the Ruler tool in the flyout menu for the Eyedropper tool. You use the ruler tool to measure distances within Photoshop document.
- Turn on the rulers: View > Rulers. Right-click inside a ruler and select Pixels as the unit of measurement.
- Turn all the layers back on except for 12 Col Grid.
- Measure the distance from the top of the mockup to the top of the ribbon containing the main menu:
- Zoom in so you can see this area well.
- With the Ruler tool, click at the top of the mockup image and hold the mouse button.
- Pressing the Shift key to constrain your ruler vertically, drag down to the top edge of the ribbon.
- Let go of the mouse button and then the Shift key.
- With the Ruler tool still selected, look up in the Control panel for the height value. Mine says H:213px.
- Now measure these widths :
- from the left edge of the mockup to the left edge of the first letter in the main menu
- from the left edge of the first letter to the right edge of the last letter in the main menu.
- I got 41 and 618. Our first main content section, #content, needs to be 618 pixels wide with a left padding of 41px. It also needs to be 213px down from the top of the window.
- Save all and view in a browser.
- Give the same padding-left to #featured and footer. Use the same distance for a padding-right for each, to balance them out within the page layout.
Arrange the Articles
- Float the column class left.
- Set the #featured and footer containers to overflow: hidden.
Populate and Style the Main Menu
We need to do more measuring. You now know how to measure pixel distances with the Ruler tool. To speed things along for this tutorial, I will simply tell you the measurements I came up with from this point on.
- Let’s start with the main menu for the first nav element. We also need to make note of the font selection, size, and color.
- Arial Regular 22px #6b6a6a
- Upper space between ribbon edge and letters: 13px
- Lower space between ribbon edge and letters: 13px
- All uppercase
- I made small adjustments to the sizes to get the text to look correctly placed in the browser.
- Go back to your markup in index.html and replace the placeholder text in the #mainmenu with the following unordered list:
- The list has a few things to arrange now. Let’s put in the standard CSS for arranging an unordered list into a horizontal menu.
- I estimate the distance between the menu items and come up with 30 pixels. I reduce that a bit because Internet Explorer tends to “fatten” fonts. So set 28px as the margin-right on the <li>s.
- We need the menu items to actually have links, so generate anchor tags for each with an href of “#“.
- Get rid of the underlines and blue color in the CSS (move the font color down out of the nav#mainmenu rule). Implement a hover color for the text.
Populate and Style the Promo Copy
- Copy all of the text inside the Body Copy layer group in the Photoshop file and paste in into four separate elements inside the promo-copy article in index.html. The first is an h1 element, the second is an h2 element, and the other two are paragraphs.
You may get a strange result in the browser with h2 being larger than h1!
- That’s okay because we will override these odd default styles for article headings. After studying the font settings and spacing in Photoshop, I create the following CSS. Try adding one declaration at a time–and saving–to see what it does in the browser:
- Wrap the first sentence of the first paragraph in a strong element.
- Put a little extra padding at the bottom of the #promo-copy div.
Populate and Style the Call-to-Action
- Save the Photoshop file as a new file named register-button.psd.
- Crop the file tightly to the edges of the image of the Register button (include the drop shadow.)
- Save the image as a PNG named register-button.png in your images folder.
- Find the REGISTER TODAY text layer in the Register Button layer group, and change the text color to #808660.
- Save the altered image as a PNG named register-hover.png in your images folder.
- The register button will be positioned inside the padding of the #call-to-action article, so we can’t simply place the image there with an image tag. We could position the register button as a background image inside the #content article in its bottom-left corner, but that would give us nothing to click on. We need to create a new div that is layered above the current articles, using the z-index property. Start by nesting a new div with an id of register inside the #call-to-action article in index.html.
- Put an anchor element inside the register div which links to #.
- Most of the time, we don’t want to set a height for an HTML elements because it should instead expand to the height of its content. However in this case, the register button that we want to appear in its own div layered on top of the #call-to-action article is a good deal taller than the content that will appear within the #call-to-action article. We also need to move the call-to-action textual content over to the right, thus the padding-left.
- Set the z-index of the register div to 2 (which positions it above the other content), add absolute positioning (which makes the call-to-action text block ignore it and stay where it’s supposed to be), and move it back over to the left. We’ll also need to set its container (#call-to-action) to position relatively. Use a compound selector to size the anchor tag within the #register div and give it the background image we created (the register button).
- Have it swap the background image when someone mouses over the register button image.
- Copy the text content for the call-to-action from the toddler-workshop-site.psd file into the#call-to-action article below the #register div. The first line should be in an h2 element, and the second one in a p element.
- Style the text.
- One last thing to fix: the superscript for the “th” in “15th” and the “00” in “$7500”. Add a <sup> element around each of these pieces of text.
Then refine the type:
Populate and Style the Featured Sessions
- Copy the Featured Sessions text over from the main Photoshop file into index.html. Mark it up with h2, h3, and p elements.
- Do some basic type styling for this section.
- Now to get the individual featured session columns arranged. We’ll start by giving each session an ID in the HTML. This way we can give each a separate featured image in the CSS.
- Style the columns.
- Let’s do the headers with their pink striped backgrounds. In the main Photoshop file, find the pink pattern layer inside the session 1 layer group (which is in turn inside the sessions layer group.
- Double-click on the layer thumbnail, which opens the Smart Object.
- Save this image out as a PNG file named session-header-background.png.
- Add a bit more styling to the h3 elements in the #featured article. The last two lines add the white edging on the bottom-right of the text, giving it a bit of dimension.
- We’re going to use the three photos as background images inside the <p> elements. Zoom way in to the photo of the screaming girl. Crop the image so that your crop box is just inside the borders left and bottom, just below the pink striped background, and captured the entire photo to the right.
- Save the cropped image as a high-quality JPG named toddler1.jpg in your images folder. Back in Photoshop, undo the crop in the History panel.
- Save the other two images by cropping in the same way. Save them as toddler2.jpg and toddler3.jpg in your images folder. Then return to the uncropped state of the Photoshop file.
- Use a combination of padding and background image to arrange the text inside the p elements in each session article.
- Crop in tight to the More button, cropping out the drop shadow. Save the image as a PNG-24 named more.png. Returned to the uncropped state of the Photoshop file.
- Insert the More button at the end of each paragraph element within the session articles in index.html. Wrap each image element with an anchor element linking to the # placeholder.
- Style the a elements within the #featured section.
- Finally, move the #featured section down a bit.
Populate and Style the Footer
- Copy the copyright text from the Photoshop mockup into the #copyright article in index.html. Be sure to use the character entity for the copyright symbol. Update the year.
- Put the four menu items from the footer into an unordered list within the #submenu nav. Make each into a link with the # placeholder.
- Add copyright and social IDs to the first two columns/articles.
- Create additional styling for the footer and its nested articles/nav.
- Back in Photoshop, zoom in to a section of the ribbon in the footer that doesn’t have content over it. Crop a section of it (without the white above and below.) Save the image as a PNG-24 named footer-background.png and return to the uncropped state of the Photoshop file.
- Place this image as the background for the footer with repeat on the x axis only. Put in some padding for the top and bottom. Combine this padding with the padding already established for left and right.
- In the Photoshop file, double-click the layer thumbnail on the Facebook layer, and save the Facebook logo image as a 24×24 PNG-24 file named social-facebook.png in your images folder. Do the same with the Twitter logo but save it as social-twitter.png.
- Place these images into the #social article in index.html, each wrapped in an anchor element linking to #.
- Give them a little space in the CSS. But notice that the background starts acting up. There’s too much padding above and below the icons.
- Adjust the padding in the footer. Move the text in the copyright and submenu down a bit, so that the footer content is all vertically aligned in the middle of the ribbon.
- Save all and test in multiple browsers.