How to Convert a Photoshop Mockup to XHTML/CSS

Follow this walkthrough of coding up a graphical website layout into valid, standards compliant
XHTML and CSS. Starting with the initial process of exporting the individual images from the
Photoshop document through to building the complete page.

In case you missed it, the first part of this tutorial, Create a Clean Modern Website Design in Photoshop
went through the stages of producing the visual concept of the Pixel juice website.
Now, well go through the stages of building the homepage in XHTML/CSS, starting with exporting
the graphics, then producing the structure with the most natural HTML elements through to styling it
up with CSS.
As an overview, heres a diagram of the various divs used in the website structure.
Starting with the layered PSD document, export a strip of the background graphics. With the coloured
area containing a subtle texture, make a wide selection to allow the texture to seamlessly tile together.
Save the graphic for web at a high quality.

Draw a tight selection around the logo, press CMD+SHIFT+C to Copy Merged, then Save for Web.
Repeat the process for the large introductory title. With the font of this text continuing the branding and
using a drop shadow effect, it cant be reproduced purely with CSS, so well use the popular image
replacement technique.

Draw a selection around the MacBook computer, toggle off the layer that contains the featured website.
Toggle off the layers of the sidebar content, then draw a selection around the graphic covering the top
curves and the majority of the body.

Paste the copied sidebar graphic into a new document. Use the crop tool to expand the canvas
vertically. Draw a selection across the bottom of the graphic, including the vertical borders and grey
background colour. Press CMD+T and stretch this graphic to fill the larger canvas area. This will leave
plenty of additional space allowing the HTML content to expand.

Back in the main document, take a selection of the remaining sidebar graphic, including just the bottom
curves.

Take a copy of the sidebar button and paste into a new document. Expand the canvas by 200%
downwards. Adjust the buttons gradient in the opposite direction to give a depressed impression, then
paste in the graphic in the new space.
Export a copy of the input graphics, including a blank version in each image.

The final collection of files includes various elements that will be used as background images in the
CSS. A group of featured work has also been created to rotate in a slideshow effect on the MacBook
screen.
Create a new HTML document in your chosen application. Start the document with a Strict Doctype
(Transitional is for pansies!). Enter the page title and attach a stylesheet. Start fleshing out the
document structure with a container div, followed by a header containing the website name in a header
one tag, and the navigation as an unordered list.
Any divs that include floated elements will need clearing. Add a class of clear to the div, which well
add the CSS coding for at a later stage.

Create a div for the large purple feature header, inside this div create a feature text div including the
relevant wording. Use a header two tag for the introductory sentence and paragraphs as the smaller text.
Create a second div to house the list of featured work. Each list item should include a screenshot image,
complete with a descriptive ALT tag.
Split the next section of the document into a div with an ID of content. Within this draw out a div
named main to include the main content. This content area starts with a large paragraph, set this in a
header three tag. Each following passage is best suited to the paragraph tag.
The latest news section is split into another two columns, these will need floating so add a div with a
class of latest-news, and dont forget to add the clearing class. Within this area is two lists of the latest
news titles, and a snippet of content. The most natural HTML element would be a UL .

The sidebar is then placed with an ID of side. In this area is a div of featured-project to include the
sidebar content. This also acts as a handy element to attach one of the two background images that
makes up the sidebar graphic.
The footer area is displayed within a grey stripe on the concept, so add a footer-container at the end of
the document to accommodate this in the CSS. Within this element create a footer div to contain the
content, then write out each of the three sections of the footer within its own div.
The login div contains the fictional control panel login box. This is built using a form. The concept
shows a sleek design without the use of separate labels, but these should be included for accessibility
reasons.

Lets get started fleshing out the HTML structure with some CSS coolness. Add a simple reset to the
stylesheet to remove any browser defaults. Also add the coding to the clear class to give a cross
browser float clearing solution. This example is a lightweight version of the clearfix technique.
Style the body with the universal font family and the repeating background that creates the main
stripes. Style the container div with a 960px width and centre with margin: 0 auto;

Lines 20-22 style the very top header with a height and top padding. Following this is the styling of the
header one tag, displaying it as the Pixel juice logo using an image replacement technique. The anchor
is first changed from its default settings as an inline element to a block element, which allows a width
and height to be specified to match the logo image file dimensions. The element is then floated so that
the navigation will sit next to it, and the image background file is attached. Finally the original link text
is shifted out of the way with a large negative text indent.
The code then fleshes out the navigation list, starting by removing the default bullet points, floating it
to the side and shifting into place with a little margin. Each individual list item is then floated to the left
and given a bunch of margin and padding to space them out. Finally the links are styled with the
specific font size and colour for the normal and hover states.

Moving on to the purple feature header, the div is given a background image of the MacBook graphic
and positioned to the right. The feature text is then set using CSS image replacement for the header, and
normal font styling for the paragraphs. The Work with us link is then given styling of a background
color, that changes on hover.
The featured work list currently displays five items, but we only want them to display one at a time on
the MacBook screen. First the UL is moved into place with relative positioning, then the width of
height of the screenshots is added. Overflow hidden then simply hides the remaining four images until
they are brought to life with Javascript later.

The general text styling is then added under the content div, giving paragraphs and links their desired
colours and sizing. The main content div is then floated to the left and given the width from the
Photoshop grid design.
The latest news lists are also floated to the left to allow them to display side by side. They are each
given a width of half the parent container, minus the amount of padding on the right to accommodate
the box model.
The sidebar is then styled to float next to the main content, and is given the background image we
exported earlier. The child featured-project div then comes in handy to attach the lower segment of this
graphic.
The content of the sidebar is then styled with the relevant colours and sizes. The See more work link
is then replaced with the button graphic using the image replacement technique. To give visual
feedback the background image is set to bottom on hover, to display the adjusted version of the sprite
image that contains the depressed effect.
The grey footer strip can easily be created by adding a background colour to the footer container.
Because this element is outside of the container div it automatically spans the full width of the page.
Although, because the content is no longer within the container, the footer needs styling with the same
width and margin auto to centre it up. The shadow graphic then fits nicely as the background image of
this div.

The footer areas are then fleshed out with a bunch of styles to adjust the font styling and colours.
With the concept using a login form that displays the labels as part of the inputs it calls for a little CSS
trickery, along with a bit of help from captain jQuery. This little bit of coding styles up the form labels
for users who dont have Javascript enabled, then hides them with a little jQuery command. When the
user focuses on an input, an additional class is added which reverts the background image to the blank
version. Unlike a good old CSS technique using the :focus selector, this styling remains when the user
deselects the element, avoiding any values in the input being made illegible against the input
background text.
If the user doesnt have Javascript enabled, the form displays along with good old fashioned labels so
theres no confusion to what each of the inputs is for. Win! (Im sure there are other, simpler techniques
out there, but thats my little solution to this mini accessibility issue!)
The concept is then complete in terms of HTML and CSS coding, but weve still got the slideshow
functionality to add to the MacBook in the feature header. Add the jQuery framework, the Cycle plugin
and a blank Javascript file to the head of the document.
To activate the slideshow, target the featured work UL in the jQuery command, and add the fade effect
with a pause of 2 seconds. This will toggle through each of the five images with a smooth fading
transition, displaying each one in turn on the MacBook screen.

So thats it, the concept is nicely coded up. Validation of the HTML goes a treat, and testing in various
browsers shows no layout bugs, even IE6 isnt bad.