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

by nando pappalardo | 22 Mar 2010 | in: Guides, Tutorial, Web, xhtml & css

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:

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.

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:

*****************************************
L'immagine principale dell'articolo è stata fornita da @Fotolia

Download PDF

Tags: CSS, psd to xhtml, xhtml

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 nando pappalardo

18 comments

Carlos

March 22, 2010 at 9:18 pm

# 1

Wow!

Nice tutorial!

Thank you

Reply
- nando pappalardo
  
  March 23, 2010 at 8:26 am
  
  # 2
  
  Welcome in YIW, Carlos and thank’s for your kind comment!
Veedid

March 22, 2010 at 10:40 pm

# 3

Thanks for the information. I’ll print it and get organized.

Reply
- nando pappalardo
  
  March 23, 2010 at 8:27 am
  
  # 4
  
  You’re welcome, Veedid!
Jay Kaushal

March 28, 2010 at 12:01 am

# 5

I must congratulate you for your site plus this article specially. Though I see a lot of articles on this topic but yours is really so simple to follow and make the ideas work into reality. You have taught to slice and convert a psd design into html plus css so easily that even a new comer to this field will follow it without any diffculty. I personally learned it hard way

If possible please do try to give psd of the design alongwith fully done excercise so guys can compare what they are doing with their own design and correct the mistakes they make in the process by reading the right code.

Keep it up

Reply
- nando pappalardo
  
  March 28, 2010 at 11:17 am
  
  # 6
  
  Hi Jay,
  
  Thanks for your compliments I appreciate it so much!
  
  What you say is correct, we are now releasing all free PSD in the guide on the web design styles.
  
  Soon also be releasing an article on how to export code one of these new layouts that Sara has created.
Valentina

May 19, 2010 at 5:10 pm

# 7

Ciao Nando. Ti faccio davvero moltissimi complimenti per tutto. E’ davvero un piacere, nonchè un onore, apprendere che sei siciliano come me!

Ho usato un tuo template per un mio portfolio, spero che mi porti fortuna.

Tanti Saluti,
Valentina.

Reply
- nando pappalardo
  
  May 20, 2010 at 8:22 am
  
  # 8
  
  Ciao Valentina, intanto benvenuta su YIW e grazie mille per i complimenti, sono davvero lusingato!
  
  Ho dato un’occhiata ai tuoi lavori e ti confesso che mi sono piaciuti tanto, complimenti strameritati quindi anche a te.
  
  Quanto è piccolo il mondo =) …siciliana di dove precisamente?
Valentina

May 20, 2010 at 12:06 pm

# 9

Rieccomi!! I miei lavoretti sono poca cosa, ma sono davvero felice che ti siano piaciuti! Sono catanese ma vivo a Messina da qualche anno. Catania mi manca da morire, anche se ormai mi sono abituata alla “tranquillità” (forse anche fin troppo…) messinese… Non escludo però che possa cambiare nuovamente dimora!! E tu di dove sei?

Reply
- nando pappalardo
  
  May 22, 2010 at 8:37 am
  
  # 10
  
  Vale, i tuoi lavori non sono affatto poca cosa =)
  
  Catanese anche io (originario di Acireale) ma vivo e lavoro a catania da diversi anni e vorrei scappare anche io dal caos cittadino.
Kevin

October 29, 2010 at 10:58 pm

# 11

Well done – your entire site is ‘inspirational’ – I have learned a lot – keep up the good work. When my site is done, I’d definitely have a link to your site in my ‘friends of’ section

Reply
- sarah
  
  November 1, 2010 at 2:03 pm
  
  # 12
  
  Thanks Kevin you’re very kind. See you!!
Jimmy

January 20, 2011 at 5:37 am

# 13

Thanks for the wonderfull html design, you are doing best. keep it up such a nice stuff.

Reply