How to export a psd into xhtml and css without losing your soul? (Part 2)

Are you ready to “reassemble” the second part of the puzzle? In the previous lesson, we looked at how to create the general structure of a website using code. Now we will continue with the “reconstruction” process by looking at how to code the various contents in each of the sections we have created.

Patience is a virtue, especially in this case. Let’s begin.

Step 1: Adding a header

In the right-hand section we can place the image which we will use as header.

header

Let’s add to our page the following lines of code:

<body>
    <div id="wrapper">

        <div id="container">

            <div id="right">

                <!-- right column content -->

                <img src="images/header/header.jpg" alt="header - baby picture" />

           </div>

          <div id="left">

                <!-- left column content -->

            </div>

            <div class="clearer"></div>

        </div>

    </div>

    <div id="footer">

        <div id="containerFooter">

        </div>

    </div>

</body>

Finally, don’t forget to check the webpage on all of the major web browsers at the end of every step, so that we won’t be flooded with unexpected surprises at the end of the project.

Step 2: Adding text to a page

Sara used a font that vaguely recalls the one used in the navigation bar in the title of the paragraph Home”.

This font is not one of the standard fonts used by all web browsers. So, in order to correctly visualize the text embedded in Home”, let’s proceed in the following manner: first, we must export the paragraph title as an image, followed by placing it right under the header.

A padding (both top and bottom) is assigned to the image, so that it stands separate from the header. Next we add the text.

Let’s take a look at the code:

h1 {padding:20px 0;}
<div id="right">

    <!-- right column content -->

    <img src="images/header/header.jpg" alt="header - baby picture" />

    <h1><img src="images/home.gif" alt="home" /></h1>

    <p>
        <strong>L'asilo nido AltroSpazio</strong> è un servizio educativo che risponde ai bisogni dei
        bambini dalla nascita ai tre anni di vita favorendone un equilibrato sviluppo fisico e psichico.
    </p>

    <p>
        I bambini sono divisi in vari gruppi, per età, e insieme giorno dopo giorno
        <strong>consolidano la propria identità personale e sociale</strong> allo stesso tempo.
    </p>

    <p>
        Sono stati predisposti degli spazi per le attività quotidiane a seconda delle
        richieste dei vari gruppi:
    </p>

    <ul>
        <li>Il <strong>laboratorio della manipolazione</strong>, del colore e travasi.</li>
        <li>La <strong>zona della comunicazione</strong> con un angolo morbido per la lettura di storie.</li>
        <li>La zona della <strong>casetta e dei travestimenti</strong></li>
        <li>Il salone per il <strong>gioco motorio</strong></li>
    </ul>

    <p>
        I gruppi sono omogenei per età e vengono seguiti dalla stessa educatrice per tutto il
        ciclo scolastico.
    </p>

</div>

Our site is becoming more and more complete, as you can see below:

screen.001

Step 3: Editing the footer

Let’s add the photo gallery to the page footer. Four images are uploaded to the web page in the following manner:

<div id="footer">

        <div id="containerFooter">

            <a href="#">
                <img src="images/gallery/img001.jpg" alt="foto 1" />
            </a>

            <a href="#">
                <img src="images/gallery/img002.jpg" alt="foto 2" />
            </a>

            <a href="#">
                <img src="images/gallery/img003.jpg" alt="foto 3" />
            </a>

            <a href="#">
                <img src="images/gallery/img004.jpg" alt="foto 4" />
            </a>

        </div>

Images from the photo gallery could end up obscuring the heading “Photo Gallery”, so in order to avoid this, we should move them down.

screen.002

We should add a top-padding of 90 pixels to the “containerFooter” section, which we created in a previous lesson. This should be enough to relocate the images to a lower position.

#containerFooter {width:390px;margin:0 auto;padding:90px 250px 0 320px;}

We’re almost there, but something’s not quite right. Don’t you think the photos appear to be too close to one another?

Let’s create a small gap in-between the images, separating one from the other. By adding a small padding to the right-hand section, we should obtain the result we desired:

#containerFooter img {padding-right:2px;}

We are going to make the browser add a 2 pixel right-padding to all the images found inside the containerFooter section.

screen.003

Following this operation, the last image has moved, being on the next line. This is because the image, as it acquired 2 pixels of right-padding, spilled over the containerFooter section.

Let’s see how we can resolve this problem.

The quickest solution would be to eliminate the 2 pixels of right-padding that was applied on the last image, checking whether or not this fixes the problem.

We will use a value attribute selector to eliminate this hassle using a technique that is professional and that is reflected in this article:

#containerFooter img[alt="foto 4"] {padding-right:0;}

Finally our desired result, which is an image that has an attribute alt=”foto 4″. It now has a right-padding of zero pixels, which prevents it from moving to the next line on the webpage.

screen.004

To finish off the footer section, let’s add this caption, “Look at the other photos”, placing it at the bottom-right of the images.

On our style sheet let’s create a class that allows to allineate the text on the right-hand side of the container:

.alignRight {text-align:right;}

Next let’s assign this class to the paragraph that contains the text, allineating it on the right-hand margin:

<div id="footer">

    <div id="containerFooter">

        <a href="#">
            <img src="images/gallery/img001.jpg" alt="foto 1" />
        </a>

        <a href="#">
            <img src="images/gallery/img002.jpg" alt="foto 2" />
        </a>

        <a href="#">
            <img src="images/gallery/img003.jpg" alt="foto 3" />
        </a>

        <a href="#">
            <img src="images/gallery/img004.jpg" alt="foto 4" />
        </a>

        <p class="alignRight">
            <a href="#">>> Guarda le altre foto</a>
        </p>

    </div>

</div>

Also, hyperlinks and their respective colors are to be defined:

/* Link */

a {color:#ca4608; text-decoration:none;}
a:link, a:visited {color:#ca4608;text-decoration:none;}
a:active, a:hover {color:#621303;text-decoration:underline}

So we have finally finished working on the footer section.

Now if you check whether the website displays correctly, you will notice that when using Internet Explorer 6, the last image in the photo gallery will be indented onto the next line. This is because this particular version of Internet Explorer does not support the attribute value selector, so the last image continues to have a right-padding of two pixels. In order to fix this, we can create a style sheet customized for this browser.

How? By using the conditional comments, which allow one to define a specific style sheet to be used with Internet Explorer:

<!--[if lt IE 7]>
    <link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen" />
<![endif]-->

After adding this previous line of code inside the <head></head> section, we can move on and create a new style sheet named “ie6.css“, saving it in the css folder of our website. Thanks to the conditional comment that we inserted before, this style sheet will only be loaded by previous versions (version 6 or below) of Internet Explorer.

Now let’s open the “ie6.css” style sheet to add the following line of code:

#containerFooter img {padding-right:1px;}

As such, if one uses Internet Explorer, version 6 or below, the right-padding that is assigned to the image gallery will be of only one pixel instead of two.

Obviously in this case one could have approached the problem from a different perspective. For example, one could have created a new id with zero padding, assigning it to the last image in the photo gallery. However, we have chosen to go with the other method so that you could see how value attribute selectors work as well as conditional comments.

Before moving on to the next topic, let’s take a look at our site:

screen.005

Step 4: Browsing through the site

You might have noticed that the navigation links have an unusual font, one that is not part of the standard array of fonts. Thus, it becomes necessary to export each link as a single image.

In order to enrich the browsing experience, we are going to apply a mouse hover effect on the links so that they are to change color when hovered over with a mouse. This effect is created -using css- by exporting every single item on the menu in both white (for links in their natural state) and yellow (for links during hovering).

Let’s look at the steps involved.

First, let’s select the items in our navigation menu. We can refer to the guide for help:

dividitoolbar
In this case, all of the sections have a height of 84 pixels. This is because in order for this method to work, it is necessary that all the exported images are of the same exact height.

With the rectangle tool let’s select the link section – home in this case -, copy the selection (Edit –> Copy bound elements) and paste the image in a new document.

Be careful though! The new document will need to have a height that is twice that of the exported image since we will add the same section to this document, changing only the color of the link to yellow for the hover state. Having said this, we can now open a new document that has a height of 168 pixels (84px *2) and paste the selected item.

You should come up with something that is similar to this, with the added section on top and a blank space at the bottom:

toolbar1

Now let’s return to our home page and change the color of the word “home” and make a copy of this section.

copiahover

Let’s go back to the other document and paste the section in the blank space.

incollahover

As such, we find ourselves with an image of 168 pixels in height which includes both types of link, active and hovering. Here it is important to keep in mind that the two sections which were pasted (the white and yellow links) are of the same dimensions and in the same exact position.

A slight variation -of only one pixel – between the two can create an adverse effect, whereby links move in their respective position from one page to another.

And now, let’s look at the code!

Let’s finish the last part of coding by adding a browsing function inside the previously-created left-hand section.

In our style sheet, let’s define step-by-step the list that will contain the site navigation.

To begin with, let’s create a border at the top of the navigation so that it can be placed under the logo. Also, let’s remove the annoying default circle that appears when a list is visualized:

ul#nav {list-style-type:none;margin:180px 0 0 0;padding:0;}

Now for all of the items on the list which have a hyperlink, we will have to hide the written text that appears on the screen (text-indent:-9999px). Also, since we will be using images (the ones we exported from our psd) to represent the various navigation items, we will align the content on the right-hand side (float:right) and set the margins and padding to zero.

ul#nav li a {padding:0;margin:0;float:right;text-indent:-9999px;}

Then we are to create IDs named home, management, structure, events and contacts; assigning to each of them their respective field in navigation. Also, they are to have the same height of 84 pixels.

li#home a, li#gestione a, li#struttura a, li#eventi a, li#contatti a {height:84px;}

Now let’s define the background image which will be used by each navigation item, assigning the relative height and the directory in which each is located:

li#home a {width:134px;background:url('../images/nav/home.gif') no-repeat;}
li#gestione a {width:226px;background:url('../images/nav/gestione.gif') no-repeat;}
li#struttura a {width:210px;background:url('../images/nav/struttura.gif') no-repeat;}
li#eventi a {width:133px;background:url('../images/nav/eventi.gif') no-repeat;}
li#contatti a {width:176px;background:url('../images/nav/contatti.gif') no-repeat;}

Even if the images are 168 pixels in dimension, on the website they will have a height of 84 pixels since we have already defined all of the navigation elements to be of this length in a previous step.

Hovering while browsing

Hovering can be set for each element by applying a simple rule to all of the navigation items with the help of pseudo-classes :hover e :focus. In this way, we can assign the second part of the image that is set as the background to show the portion of image we are interested in.

/*stato hover nav*/
li#home a:hover,li#home a:focus,li#gestione a:hover,li#gestione a:focus,
li#struttura a:hover,li#struttura a:focus,li#eventi a:hover,li#eventi a:focus,
li#contatti a:hover,li#contatti a:focus {background-position: 0px -84px;}

Let’s finish by writing the (x)html code that will allow us to visualize the navigation of the site inside the left-hand section:

<div id="left">

    <!-- START NAV -->
    <ul id="nav">
        <li id="home"><a href="#" title="Home page">home</a></li>
        <li id="gestione"><a href="#" title="la gestione">la gestione</a></li>
        <li id="struttura"><a href="#" title="la struttura">la struttura</a></li>
        <li id="eventi"><a href="#" title="eventi">eventi</a></li>
        <li id="contatti"><a href="#" title="contatti">contatti</a></li>
    </ul>
    <!-- END NAV -->

</div>

Don’t forget to check if the website is displayed correctly on various web browsers.

You should be able to see it properly on all the major browsers. We can be proud of the work we have done so far. Are you satisfied with the result?

Take a look at the Live Preview of the website.

Status update on the project

Once the home page is fully-developed, we can codify all of the other pages that share a similar structure in a simple and time-consuming manner.

Look at the figure below. It shows that we are at 99% in our progress bar, since we have finished working on the coding behind the graphic draft.

Progetto sviluppo sito web

Our site is ready to go online and we are only a few steps away from finishing this project. Next we will be optimizing the site for a basic form of indexing. This is an aspect you don’t want to neglect so that the website can be easily retrievable.

Do you want to learn how to index a website without even being an SEO expert? Let’s find out together next week!

The other articles in this guide:

  1. How to understand the client’s needs on the first encounter?
  2. How to calculate costs and delivery time of a web project?
  3. How to develop and organize the structure of a website?
  4. How to find inspiration and design the layout of a website?
  5. How to present the graphic draft to the client?
  6. How to make the internal pages after the draft’s approval?
  7. How to export a psd into xhtml and css without losing your soul? (part1) (part 2)
  8. How to index a website without being SEO experts? (part 1) (part 2)
  9. How to make sure of not having committed errors before launching the website online?

    Master per Web Designer Freelance
    In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
    Scopri One Year Together »
    [pdf]Scarica articolo in PDF[/pdf]
    Tags: , ,

    The Author

    Nando is administrator of Edi Group, a Sicilian web agency founded in 2005. He deals with the development of web applications in php language and the implementation and administration of databases. And besides Microsoft Trainer with years of experience in regional and private training courses as a designer and lecturer.

    Author's web site | Other articles written by

    Related Posts

    You may be interested in the following articles:

    18 comments

    1. Carlos
    2. Jay Kaushal

    Trackback e pingback

    1. uberVU - social comments
      Social comments and analytics for this post... This post was mentioned on Twitter by hulldo: How to export a psd into …
    2. How to design the internal pages after the layout is approved? | Your Inspiration Web
      [...] How to export a psd into xhtml and css without losing your soul? (part1) (part 2) [...]
    3. How to index a website without being an SEO expert (part 1) | Your Inspiration Web
      [...] How to export a psd into xhtml and css without losing your soul? (part1) (part 2) [...]
    4. How to index a website without being an SEO expert (part 2) | Your Inspiration Web
      [...] How to export a psd into xhtml and css without losing your soul? (part1) (part 2) [...]
    5. How to calculate costs and delivery time of a web project? | Your Inspiration Web
      [...] How to export a psd into xhtml and css without losing your soul? (part1) (part 2) [...]

    Leave a Reply

    Current month ye@r day *