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

In this lesson we will divide and then recompose a website as if it was a puzzle using style sheets and (x)html. This is one of the most exciting aspects of web development as it allows you to follow closely the various stages involved in the website-making process. And, it is always nice to see one’s creation being built piece by piece. This feeling of satisfaction that a web developer has is quite similar to the one that a graphic designer might feel during the drafting of a website layout.

Premise

Let’s start by making a copy of the folder we will use as a standard module to create a new website. This is important because we don’t really want to have to create a working structure for every new website we create. So, if you haven’t already come up with a standard model, this is the time to create one.

The standard module contains the following items:

  • a “css” folder which contains style sheets that make up our personal CSS Framework (our version has been compiled using the Blueprint framework, version 0.7.1));
  • an “images” folder where we will put all of the images for our website;
  • an “include” folder where we will add files that will be later pasted inside our webpages;
  • a “js” folder that contains javascript files;
  • an “index.php” file that provides the structure of a standard web document (doctype declaration, head, main meta tag, links to style sheets, favicon, etc.);
  • a “robot.txt” file that lists the rules governing spiders and their ability to restrict an analysis of certain webpages.

screen.001

Step 1: How can I divide the layout of a website?

This is the our layout.

Before editing the code, it is very important that you know how to dissect and export the various sections of the layout. A careful analysis reveals that in our case it is preferable to divide the page into three sections:

  • The first section will be 1680 pixels in length, enough to include the image in its full horizontal-range, and a height of 632 pixels, essential to be able to visualize the side balloons. This image will form the background of the main section of the website, which we will name wrapper.
  • The second section will be 1680 pixels long and 86 pixels in height. This image will be used as a pattern applied vertically to the body in relation to the added text in the website. Why does it have to be exactly 86 pixels? Using the smallest dimensions possible, we are able to replicate the image seamlessly [background-repeat:repeat-y;] so that it appears as one large image without any gaps..
  • The third section will be 1680 pixels in length and 306 pixels in height. This image will be used as the background to the footer section, which is at the end of our layout. In this section we will add the photo gallery.

Once the various sections are laid out, you should hide the useless levels using Photoshop which we will then refer to at a later time. Also hide the side links, the text, and the thumbnails so that only the three main sections are left visible, just like in the image above.

Now you have to export the various sections, one by one. With the selection tool you are to enclose the first section, being extra careful in getting the same dimensions we outlined above. Keep in mind that this task requires much patience and a high degree of precision: being off by just one pixel is enough to cause problems in the website development process.

Once you have selected the first section, click on “copy combined elements” that is found under the “edit” menu. Open a new document -which is configured to have the same dimensions as the one saved in the memory – and paste the selected object. In this way you will create a document which contains only the images you are interested in. Now save the image in the “images” folder and follow this same procedure for the other two sections of the website.

Step 2: Let’s edit our style sheet

Let’s open, using our favorite editor, the file “screen.css” that is found inside the css folder. The first section which we will create, naming it “wrapper”, will contain the main background of our site. It will have a minimum height of 632 pixels, essential for viewing the side balloons.

The image will be 1680 pixels in length [this is the maximum resolution for viewing the finished website] and 632 pixels in height.

Below you can find a screenshot:

screen.003


#wrapper{height:auto!important;height:632px;min-height:632px;background-image:url('../images/bg1.jpg');background-position:top center;background-repeat:no-repeat;width:100%;}

To implement the min-height function in browsers such as internet explorer version 6 [which does not support this function], we can use one its weaknesses to our advantage. Here you can find additional information on the adopted solution.

In this way we oblige the wrapper to have a minimum height of 632 pixels.

Step 3: Assigning a pattern to the body

If there is too much text on a webpage [that extends beyond the 632 pixels in height of the background image which we have made as a wrapper] the background will become blank again. This can be fixed by adding a pattern which will provide a smooth transition from the previous background.

Let’s assign to the body a background image, “pattern.jpg” which has the following dimensions: 1680 pixels in length and 86 pixels in height.

screen.002


body  {font-size:70%;color:#222;background:#fff;background-image:url('../images/pattern.jpg');background-position:top center;background-repeat:repeat-y;font-family:verdana,"Helvetica Neue",Arial,Helvetica,sans-serif;}

Step 4: Writing the first lines of (x)html code

Before proceeding any further, we should verify that what we have so far works on a practical level. Let’s open the file index.php  with our favorite editor. The first part of the file will have an aspect similar to this one:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Asilo Nido - YourInspirationWeb</title>

    <meta name="author" content="Your Inspiration Web - Nando 1, Sara [graphic design]" />
    <meta name="keywords" content="" />
 	<meta name="description" content="" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <!-- [template css] begin -->
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection" />
    <link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
    <!--[if IE]>
        <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection" />
    <![endif]-->
    <!-- [template css] end -->

    <!-- [favicon] begin -->
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<!-- [favicon] end -->
</head>

Let’s add these lines of code and see the results on all the browsers.

<body>
    <div id="wrapper">

    </div>
</body>

screen.004
This is exactly what we were looking for: notice how the pattern we assigned to the tag body is repeated in a vertical fashion, blending seamlessly with the background image used in the wrapper section.

Step 5: Defining the container of the website

Let’s create a section that will be used as the container of our website. This section, named “container”, will have a total length of 960 pixels (the actual dimensions of the box are 920 pixels, to which we add 20 pixels for each side, yielding the desired length: 920+20+20) and it will be placed at the center of the screen.

#container {width:920px;margin:0 auto;padding:20px;}
<body>
    <div id="wrapper">
        <div id="container">

        </div>
    </div>
</body>

Let’s look at the result on all the browsers. Adding a black border to container, thus making it visible, we will come up with the following:

screen.005

Inside the container we will add the site contents which will automatically regulate the height of the container.

Step 6: Dividing the container into two columns

In order to obtain a good ranking on Google during the indexing phase, it is important to add the textual content to the website before anything else. As such, we must make sure that the right column, which will contain the textual content of the various webpages, is the first thing we write up in our html page.


#right {float:right;padding:0 65px 0 20px;width:560px;}

#left {margin-right:645px;width:260px;}

This css technique is just what we need to reach our previously-stated goal. Now we can insert the right-hand column (#right) before anything else, followed by the left-hand column (#left).

The markup (x)html will look like this:

<body>
    <div id="wrapper">
	<div id="container">
		<div id="right">
                	<!-- contenuto colonna destra -->
		</div>

		<div id="left">
                	<!-- contenuto colonna sinistra -->
            	</div>

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

Adding a border to the two columns and momentarily changing the height to 400 pixels, we will be provided with a preview of the two boxes shown in the image below:

screen.006

Keep in mind that the borders and the height of the two columns are shown just for didactic purposes, they will not be present in the final style sheet.

Step 7: Its time to add the footer

The photo gallery at the end of the page will be inserted in a separate section of the site, which is calledfooter. This section is going to have a height of 306 pixels, like the background image we will assign to it.A questa sezione imposteremo un’altezza pari a 306px come quella dell’immagine di sfondo che gli andremo ad assegnare.

screen.007

#footer {width:100%;height:306px;background:url('../images/footer.jpg') no-repeat top center;}

Now let’s create a box that will contain the footer section, in which we will then add the photos from the photo gallery.

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

The (x)html markup that provides the structure of the site we are developing is going to look like this:

<body>
	<div id="wrapper">
        	<div id="container">
			<div id="right">
                	<!-- right column content -->
			</div>

			<div id="left">
                	<!--left column content -->
            		</div>

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

    	<div id="footer">
        	<div id="containerFooter"></div>
	</div>

</body>

The screenshot below is indicative of all the various steps we have applied so far:

screen.008

We are halfway done with the coding of this particular website. Next week we will continue this lesson but for now it is enough that you become familiar with what we have covered so far. If you have any questions, don’t hesitate to ask in the comments section.

Conclusion

As you have seen, it is fundamental that you know how to divide correctly the layout of a website so that it can be recomposed through a new set of coding. One small error in this first phase is enough to hinder our progress in the development of (x)html and css coding, which will not produce the expected results.

Another important aspect is to verify, step by step, that the website is visualized correctly on all the major web browsers so that errors can be corrected right-away, without leaving them uncorrected until the last part of the project. If this is not done, we might have to correct the entire coding and start almost from scratch.

Next week, in the second part of this lesson, we will look at the necessary steps needed to organize the various contents (heading, navigation, text, photo gallery) in the sections we have just created. Don’t miss out on this important part of the lesson.

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:

    16 comments

    1. peninajace

    Trackback e pingback

    1. 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) [...]
    2. 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) [...]
    3. How to understand the client’s needs on the first encounter? | Your Inspiration Web
      [...] How to export a psd into xhtml and css without losing your soul? (part1) (part 2) [...]
    4. How to make a website without having a client dictate everything | Your Inspiration Web
      [...] How to export a psd into xhtml and css without losing your soul? (part1) (part 2) [...]
    5. How to export a psd into xhtml and css without losing your soul … | Photoshop Blog
      [...] Read more: How to export a psd into xhtml and css without losing your soul … [...]
    6. How to export a psd into xhtml css without losing a soul | PhotoshopDaily.info
      [...] Here is the original post: How to export a psd into xhtml css without losing a soul [...]
    7. How to export a psd into xhtml and css without losing your soul? (Part 2) | Your Inspiration Web
      [...] to “reassemble” the second part of the puzzle? In the previous lesson, we looked at how to create the …
    8. How to export a psd into xhtml and css without losing your soul? (Part 1) | Design Newz
      [...] How to export a psd into xhtml and css without losing your soul? (Part 1) [...]
    9. 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) [...]
    10. How to make sure of not having committed errors before launching the website online? | Your Inspiration Web
      [...] How to export a psd into xhtml and css without losing your soul? (part1) (part 2) [...]
    11. Graphic Design Services. Dani Raykova. Portfolio: Print & Web Design. Metro Detroit, Michigan » CSS Tutorials
      [...] Tuts HV Designs Coding Up a Web Design Concept into HTML & CSS How to export a …

    Leave a Reply

    Current month ye@r day *