Week 8 Practical

Code the following page (click for larger image):

fundamentals-practical-wk8

Notes

  1. 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.
  2. In most cases, you would not set height for page elements. We’re just doing it here because there is no content.
  3. 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.

Downloads

Goal

Click for larger image.

example-workshop-site_toddler-workshop_fullsize

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.
workshop site example gridded
  • 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.
Photoshop CC layers panel
  • 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:

toddler workshop wireframe 1

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:

toddler workshop wireframe 2

Then I subdivided the main page content areas into nested boxes:

toddler workshop wireframe 3

Now I have an idea of how the initial markup should be organized:

HTML semantic markup hand-written

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.

  1. Create a new site folder called toddler-site. Create an images folder inside it.
  2. Create a new HTML5 file and save it as index.html in the toddler-site folder.
  3. Create a new CSS file and save it as styles.css in the toddler-site folder.
  4. Link the index.html file to the styles.css file.
  5. Change the page title to Happy Toddler Workshop – Sacramento, California.
  6. Between the <body> tags in index.html, create the following page structure:
HTML semantic markup in code editor
  1. In styles.css, put in placeholders for some basic HTML elements and for the IDs and classes we established.
empty CSS rules

Introducing Some Style

The first thing I like to do is some basic styling for the body and wrapper.

  1. 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.
  2. Go to the View menu in Photoshop and uncheck Extras. This hides the guides.
  3. Hide all layers and folders except for the fabric header folder.
  4. Crop the document so that it it tight to the fabric header.
toddler workshop fabric heading cropped
  1. 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.
toddler workshop fabric header cropped to seamless edges
  1. Save the image as body-background.png in toddler-site/images. Save and close toddler-workshop-body-bkdg.psd.
  2. 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.
CSS for body element background
  1. 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.
Photoshop image size
  1. In the CSS, set the width for the #wrapper and center it on the page.
#wrapper CSS style
  1. 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.
text placeholders in HTML layout
  1. Save all your files. View index.html in a browser. It should resemble this if your browser window is open wider than 1020px.
basic text placeholders in HTML structure, in browser

Implement the Second Background

  1. Save the Photoshop file as a new file named wrapper-background.psd.
  2. Hide visiblity of all the Photoshop layers except for:
    • toddler girl layer
    • header text folder
    • rule copy, rule, and bar inside the menu folder
Photoshop CC layers panel
  1. Crop the image so that it stays as wide, but crops out the blank are below the girl’s feet.
  2. 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.
happy toddler workshop heading in Photoshop
  1. Define this image as the background for your wrapper with no repeat and aligned to the top.

 

CSS add background image to wrapper
  1. 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.
header image and HTML structure, in browser
  1. 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

  1. 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.
Ruler tool in flyout menu for eyedropper tool in Photoshop CC
  1. Turn on the rulers: View > Rulers. Right-click inside a ruler and select Pixels as the unit of measurement.
ruler unit of measurement in Photoshop CC
  1. Turn all the layers back on except for 12 Col Grid.
  2. Measure the distance from the top of the mockup to the top of the ribbon containing the main menu:
    1. Zoom in so you can see this area well.
    2. With the Ruler tool, click at the top of the mockup image and hold the mouse button.
    3. Pressing the Shift key to constrain your ruler vertically, drag down to the top edge of the ribbon.
    4. Let go of the mouse button and then the Shift key.
using ruler tool to measure header height in Photoshop CC
  1. With the Ruler tool still selected, look up in the Control panel for the height value. Mine says H:213px.
using ruler tool to measure header height in Photoshop CC control panel
  1. 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.
Photoshop CS5 measuring with ruler tool
  1. 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.
CSS for content section
  1. Save all and view in a browser.
preview in browser toddler workshop
  1. 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.
CSS add padding to section and footer preview in browser toddler workshop

Arrange the Articles

  1. Float the column class left.
  2. Set the #featured and footer containers to overflow: hidden.
CSS float left and overflow hidden preview in browser toddler workshop

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.

  1. 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
  2. I made small adjustments to the sizes to get the text to look correctly placed in the browser.
CSS for navigation menu placement and font
  1. Go back to your markup in index.html and replace the placeholder text in the #mainmenu with the following unordered list:
main menu unordered list HTML preview in browser toddler workshop main menu
  1. 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.
CSS for navigation menu items
  1. 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.
CSS for navigation menu items preview in browser toddler workshop main menu
  1. We need the menu items to actually have links, so generate anchor tags for each with an href of “#“.
html anchor elements for menu list items preview in browser toddler workshop main menu with standard links
  1. 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.
text color and decoration in CSS for menu items preview in browser toddler workshop main menu with styled links

Populate and Style the Promo Copy

  1. 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.
HTML content for the promo acrticle

You may get a strange result in the browser with h2 being larger than h1!

preview in browser toddler workshop promo text
  1. 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:
HTML for promo copy headings preview in browser toddler workshop promo text
  1. Wrap the first sentence of the first paragraph in a strong element.
HTML strong element
  1. Put a little extra padding at the bottom of the #promo-copy div.
CSS padding bottom preview in browser toddler workshop promo text

Populate and Style the Call-to-Action

  1. Save the Photoshop file as a new file named register-button.psd.
  2. Crop the file tightly to the edges of the image of the Register button (include the drop shadow.)
    register today button ribbon
  3. Save the image as a PNG named register-button.png in your images folder.
  4. Find the REGISTER TODAY text layer in the Register Button layer group, and change the text color to #808660.
  5. Save the altered image as a PNG named register-hover.png in your images folder.
    register today button ribbon on hover
  6. 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.
Screen Shot 2015-08-25 at 11.03.20 AM
  1. Put an anchor element inside the register div which links to #.
Screen Shot 2015-08-25 at 11.03.40 AM
  1. 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.
Screen Shot 2015-08-25 at 11.09.45 AM Screen Shot 2015-08-25 at 11.09.52 AM
  1. 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).
Screen Shot 2015-08-25 at 11.15.58 AM Screen Shot 2015-08-25 at 11.17.50 AM
  1. Have it swap the background image when someone mouses over the register button image.
Screen Shot 2015-08-25 at 1.23.48 PM
  1. 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.
Screen Shot 2015-08-25 at 1.21.17 PM Screen Shot 2015-08-26 at 11.11.49 AM
  1. Style the text.
Screen Shot 2015-08-26 at 11.16.39 AM Screen Shot 2015-08-26 at 11.18.26 AM
  1. 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.
Screen Shot 2015-08-25 at 1.27.23 PM Screen Shot 2015-08-26 at 11.19.18 AM

Then refine the type:

Screen Shot 2015-08-26 at 11.21.34 AM  Screen Shot 2015-08-26 at 11.21.58 AM

Populate and Style the Featured Sessions

  1. Copy the Featured Sessions text over from the main Photoshop file into index.html. Mark it up with h2, h3, and p elements.
Screen-Shot-2015-08-25-at-1.34.49-PM
  1. Do some basic type styling for this section.
Screen Shot 2015-08-25 at 1.46.39 PM Screen Shot 2015-08-26 at 11.28.41 AM
  1. 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.
Screen Shot 2015-08-26 at 11.30.03 AM
  1. Style the columns.
Screen Shot 2015-08-26 at 11.42.23 AM Screen Shot 2015-08-26 at 11.42.16 AM
  1. 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.
  2. Double-click on the layer thumbnail, which opens the Smart Object.
Screen Shot 2015-08-26 at 11.45.58 AM Screen Shot 2015-08-26 at 11.46.12 AM
  1. Save this image out as a PNG file named session-header-background.png.
  2. 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.
Screen Shot 2015-08-26 at 11.49.22 AM Screen Shot 2015-08-26 at 11.50.08 AM
  1. 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.
photoshop cs5 crop photograph of toddler
  1. 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.
  2. 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.
Screen Shot 2015-08-26 at 3.29.55 PM
  1. Use a combination of padding and background image to arrange the text inside the p elements in each session article.
Screen Shot 2015-08-26 at 3.46.03 PM Screen Shot 2015-08-26 at 3.46.16 PM
  1. 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.
Screen Shot 2015-08-26 at 3.52.07 PM
  1. 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.
Screen Shot 2015-08-26 at 3.54.47 PM
  1. Style the a elements within the #featured section.
Screen Shot 2015-08-26 at 3.58.19 PM Screen Shot 2015-08-26 at 3.58.27 PM
  1. Finally, move the #featured section down a bit.
Screen Shot 2015-08-26 at 4.15.09 PM Screen Shot 2015-08-26 at 4.15.18 PM

Populate and Style the Footer

  1. 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.
  2. Put the four menu items from the footer into an unordered list within the #submenu nav. Make each into a link with the # placeholder.
  3. Add copyright and social IDs to the first two columns/articles.
Screen Shot 2015-08-26 at 4.25.14 PM

 

Screen Shot 2015-08-26 at 4.30.30 PM
  1. Create additional styling for the footer and its nested articles/nav.
Screen Shot 2015-08-26 at 4.39.26 PM Screen Shot 2015-08-26 at 4.39.42 PM
  1. 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.
Screen Shot 2015-08-26 at 4.45.47 PM
  1. 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.
Screen Shot 2015-08-26 at 4.48.46 PM Screen Shot 2015-08-26 at 4.49.00 PM
  1. 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.
Screen Shot 2015-08-26 at 4.53.56 PM  Screen Shot 2015-08-26 at 4.54.10 PM
  1. Place these images into the #social article in index.html, each wrapped in an anchor element linking to #.
Screen Shot 2015-08-26 at 4.57.45 PM
  1. 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.
Screen Shot 2015-08-26 at 5.01.59 PM  Screen Shot 2015-08-26 at 5.03.58 PM
  1. 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.
Screen Shot 2015-08-26 at 5.06.40 PM Screen Shot 2015-08-26 at 5.08.31 PM  Screen Shot 2015-08-26 at 5.08.37 PM Screen Shot 2015-08-26 at 5.10.02 PM
  1. Save all and test in multiple browsers.
Screen Shot 2015-08-26 at 5.10.55 PM