Last week we went through the process of designing a detailed website design for Pinewood Forest. This week we’ll code up the Photoshop concept into a working web page. See how the design is exported into individual images, how the HTML skeleton is put together and how the CSS coding replicates the styling from the concept.
In case you missed last week’s tutorial, here’s the design we’ll be building. The site features a large static background image that allows the main content to scroll over it, and the content itself is broken up into key focus areas with photography used to draw in the user.
Exporting the background images
The first step of the build process is to chop up the concept into individual images. Some sections of the design can be replicated with pure CSS, but other areas will need to the help of a background image. The main portion of the design is the large photographic background image. With careful compression the filesize can be kept fairly low despite its huge size.
Due to the design having a fixed background image, the content will have to scroll over the top of it. This means elements like the logo will need to be exported with transparency using the PNG-24 file option.
The main content background also has a subtle element of transparency, so this also needs to be exported as a PNG graphic. The background will be split into three sections, the top, the bottom and a repeating section from the middle.
The final collection of images is made up of a mix of PNG and JPEG files. Some are small images that will repeat to form a textured background, others are text replacement images for titles and headers.
The HTML structure
The index file is started out with the core HTML structure. A Strict doctype is used to maintain good practices, followed by the HTML
<head> which contains the page title and link to the CSS stylesheet. A div is added to the
<body> to contain all the following page structure.
The design begins with a header div to contain the logo and navigation items. The logo itself is laid out as an image file inside an anchor. The title attribute inside the anchor provides a description for the user where the link will go, and the descriptive ALT attribute in the image tag describes the image as the Pinewood Forest logo for users without images enabled.
The good old
<ul> is the universal element for navigation menus as it accurately depicts the menu system in plain HTML form. In the design concept the logo sits between the navigation items, but to keep the HTML structure clear the two elements are separated completely. Later the CSS styling will move the individual elements into place to replicate the design concept.
Following the header is the main content area. To keep the HTML structure clean and tidy this is all contained in its own div element. The large feature area appears first on the homepage, so this is contained in a child div so it can be accurately positioned on the page. The first main heading on the page is the ‘Explore the forest’ text, so this is given
<h1> status. A class of
btn is added to a paragraph element in the feature section so this particular element can be transformed into a button graphic with CSS later.
The next level heading for the intro to the content area is a
<h2>. The main content area itself is split into two columns, the larger of which is created as a div with the ID of main. Inside this div the main body copy is written out as individual paragraph elements. Don’t forget to convert links into HTML anchors and switch out any characters such as the ampersand to HTML entities.
At the bottom of this column is an upcoming events section. The events list fits perfectly into the Definition List element, seeing as it compares two related elements – The date and the actual event. Using
<span> tags inside the definition list will allow unique styling of certain elements with CSS.
The smaller of the two columns is laid out as another div, this time with an ID of ‘side’. The sidebar contains three mini-features, each including an image heading and description. Because each image contains text inside the actual image, the text content is replicated in the ALT attribute to keep everything accessible.
At the bottom of the page the content div is closed, then a short footer div is added to contain a simple back to top anchor.
At this stage the design can be previewed without any CSS styling and the content should be clearly readable with the HTML elements creating a natural hierarchy. Validating the code will ensure our HTML is in tip-top shape without any errors which could affect the styling of the page when CSS is applied.
Styling with CSS
Now the HTML structure is in place it’s time to style up the design with CSS. The first line in the stylesheet is a simple reset to remove any default browser styling, then the global font styling is added to the body. Also added to the body is the large photographic background image. Setting this image to ‘fixed’ at the top center will allow it to stay in place while the rest of the content scrolls over it.
For those without background images enabled, or those with supremely large monitor resolutions a background colour is also added so the page is still legible on a plain dark blue background.
The main container area is given a 960px fixed width and centred up using the common
margin: 0 auto; declaration.
The elements that make up the header are then moved into place and styled accordingly. The top section of the content panel is added as a background image to the bottom of the header div. The unique positioning of the logo and navigation menu is created using a mix of negative margin to align the elements according to the concept. Because the navigation items sit as either side of the logo the CSS3
nth-child property is used to target each individual list item and add an appropriate margin. The font is then styled to match the concept using
letter-spacing to match the tracking used in the Photoshop design.
The height of the content div will vary on each page, so a repeating background image is set to allow the content panel to expand without limitation. Left and right padding is also added to keep the page content away from the edges. Because the content area will contain two floating columns, the
overflow:hidden; declaration is used to ensure these floats will be cleared.
Relative positioning on the feature section allows the content to be moved exactly into place, and a touch of negative margin compensates for the padding on the parent content div to allow the feature area to sit flush with the edges of the page. Simple image replacement is used on the h1 to display the image graphic in place of the standard HTML text, but the smaller paragraph is styled entirely with CSS font styling. The small button is another element that is converted to an image using the image replacement technique.
The main div is the wider of the two columns at 536px. The width of ‘main’ plus the width of ‘side’ along with the margin between them equates to the width of the parent content div minus its left and right padding. General font styling is added to the h2, anchors and paragraph elements, then the definition list is styled to match the layout in the design concept. The definition title is transformed into the date icon by giving it a specific width and height along with a grey background. The font styling displays the date as large white text, and the
span is made slighly smaller so the month sits neatly underneath the larger number. Floated alongside the definition title is the definition description which contains the header and paragraph. One fancy CSS trick here is the
visibility:hidden; declaration on the more info span. This is set to remain hidden until the description is hovered with the mouse, the span will subsequently turn to visible to display the ‘View more info’ link.
Each aside element is given the textured watercolour graphic as a background, then the image headers are moved into place with a touch of padding. The following font styling is automatically added by the CSS set on the content div, which is continued down through each child element unless it is altered with specificity. The footer div is given a background image to close off the content panel and padding is added to accommodate this image. The back to top link sits outside the content div, so new styling for the anchor is needed. Because this link sits on a dark background rather than the light background the colours need to be altered from the main link styling on the rest of the page to keep it legible.
This leaves us with a completely styled design as a fully working webpage. But we’re not finished quite yet! Firefox, Safari and Chrome have no problem rendering the CSS3
nth-child property, but Internet Explorer fails as usual. A couple of lines of jQuery soon sort that out though.
nth-child property without any problem even in Internet Explorer, so the appropriate margins are replicated from the CSS stylesheet in jQuery.
Our webpage is now fully working in the latest Internet Explorer, Firefox, Safari and Chrome. The use of PNG graphics scare the pants off earlier versions of IE, but those could soon be fixed with a separate IE-only stylesheet and the help of the Belated PNG fix. I’d rather tear off my fingernails than fix IE bugs all day, so I’ll leave that task for you ;-)