After reading through all of the information sent to me, and looking at all of the psd files in detail, I have decided to begin the construction of my client’s website.

To begin with, I have created a folder called ‘craig’, and in this folder I have created the following folders: ‘images’ for any pictures, ‘css’ for any web-fonts and stylesheets relating to the site and ‘js’ for any java-script documents. Then, using Adobe Dreamweaver I created a blank html document and called it ‘index.html’, along with a blank css document, linking the two in the head section of the html document.

Using Adobe Photoshop, I opened the psd relating to the home page, and began to cut the images out of the file. I did this with the main banner, the three featured images at the top of the design, and the five images underneath the banner.

Before I could implement the images into Dreamweaver, I made sure all of the images were the right size, and then placed them all into the images folder I had already created. I had to create several divs for this page to be laid out in the way my client had intended.

Divs:

container – this would be the container for everything in the page. I have set this to 90% width so that it doesn’t completely fill the browser, but takes advantage of most of the width available to it.

hero, hero1, hero2, hero3 – These are the divs for the main three images. These are the top divs in the structure, and they are set to 20% width. 1 2 and 3 are contained in the div ‘hero’, and they are set to sit on the left, the center and the right of the div.

centerpiece – This is the div for the central banner. This is in the center of the page and set to 100% width, meaning it will stretch the full width of the container I just created.

footer, sub1-sub9 – This is for the footer. As there are 5 images that have to sit equidistant from one another, I created 9 divs (sub1-sub9) set at 11.11111% width.  This meant that I could set the pictures in 5 divs that were the same distance apart and the same size, without having to float in strange places! This will also hold other links that will be coded in later.

Once my structure was done, I added a few images. I had only cut out one image for each section that required images to make the process of seeing what it would look like a lot quicker.

Finally, I took the background of the psd files, and resized it to fit a browser before saving it and inserting it as the body background of my html document.

Here is an image of what it looks like so far:

initial home page construction

 

As you can probably also see, I took advantage of css3 and used the box-shadow property to add shadowing under all of the images.

The next stage will be to incorporate the right images into this, and begin construction of the next two main template pages.

Advertisements