Add to Flipboard Magazine.
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, we’ll 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, here’s 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 can’t be reproduced purely with CSS, so we’ll 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 button’s 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 we’ll 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 don’t 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.
Let’s 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 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.
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 that’s 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 isn’t bad.