The Complete Website Tutorial

Preview: 

All in one tutorial,Design your layout with Gimp, slice it and code it, here is the outcome of this tutorial....

Click to Enlarge

1) Images maybe too dark as I was looking at the layout from my old computer and the images very tooooooo dark. I made this tutorial using my new computer and the screen is really bright so I apologize if the images are too dark.2)You must be pretty familiar with how GIMP works as i don't have pics for every single step as this tutorial is mostly your imagination.
3)Images maybe low quality from what they were designed to be since the file format of pics (to reduce file space) is .jpg. Thanks.
4)I would like to apologize for the delay as I've been sick and wasn't able to post sooner.

This is what we will be doing:
1) Planning and thinking
2) The Sketch
3) Navigation
4) Content Boxes
5) Slicing the layout
6) Adding content to HTML document
7) Making the style sheet

Before starting to create your site, you may want to consider the following. First of all you have to know, which kind of site you are going to make. Is it a designer site? Clan site? Car selling site? Or whatever. After considering that, your site must have a name. The name is one of the most important things. Your name must be easy to remember, and also when someone hears the name, the first thing they think about must be your site. Now you must ask yourself some things: Why? What do you want to say? To whom? What do other people benefit from it? What do you yourself benefit from it? Now you must think about the theme / colors for your site. To pick the right colors is also a very important thing to think about. In this tutorial I am going to recreate GimpTalk home page. I will choose some dark colors for it. Some dark Wilbur’s brownish color for shade probably / black / grey. After considering all those things, I think we can start making the layout!

Click to Enlarge

Start of by making a new layer 900x600 and fill a new layer with the background color of your template.

Now take your Rectangular Selection tool and make a selection for you banner.
A banner is nothing more than a larger version of a sig thus I will not be going into much detail of how you should make a banner but I would like to say that make something that will compliment to the style and the color of your web page. If you don’t know how to make a banner find a sig tutorial and instead of making sig size canvas, make something like 900x160 (banner size). BTW my banner size is 900x160.

Click to Enlarge

Now that we have the banner, make a new layer and then take your Rectangular Selection Tool and make a selection right below your banner as this is where the buttons will go

Click to Enlarge

Now take you gradient tool and with your foreground color to black and background color to something that compliments your style and banner, run a gradient. I used black and white.

Click to Enlarge

Now we will stroke our selection to give it more depth. I personally don’t like using the Stroke Selection to stroke my selection instead I use a 1px default brush to draw the lines. To make it simple for us I’ll use the stroke selection from the edit menu. Select your button layer if already now selected and then go to Layers>Transparency>Alpha to Selection and with the selection selected create another transparent layer. Then go up to Edit>Stroke Selection and stroke the selection with a solid line of one pixel. If it works fine for you and looks nice don’t change the layer mode but for me it doesn’t do a stroke of one pixel thus I set this layer to Overlay. Experiment with your stroke layer to see what works best for you.
It may not be that clear but this put across a black canvas is clearly visible.
Right After Stroke:

Click to Enlarge

After changing the Layer Mode:

Click to Enlarge

Now for creating boxes the put text, pics etc in.
Start of by duplicating your button layer. Then to the duplicated, scale it for height so that the width is same as the button row but the height is smaller for the scaled layer. Note I will refer to this layer throughout the rest of the tutorial as maybe scaled, button layer or something of that sort so you should know that I’m referring to this layer.
Button layer duplicated:

Click to Enlarge

Scaled afterwards ( please ignore the black space as it is not part of the scaling. Thanks. Tell me if I should clarify more.)

Click to Enlarge

Very Important: Since we want to create a field for the content, rotated the scaled layer that you created by 180 degrees or upside down. Note again please ignore the black space since to save me time I rotated what is being displayed up.

Click to Enlarge

Now depending on how you want to lay out your website, created using the scaled layer of buttons places where the content will go.
First we’ll define the size of the top of the content box where the title will go.
This is what we’ll be doing ultimately so if you understand/know where and how I’ll do it, please feel free to skip the next few steps.

Click to Enlarge and View the Animated version

First of all with the scaled rotated button layer selected, go to Layers>Layer to Image Size. Select part of the button content.

You should now be able to move the selected floated layer.

Move it to where you want to place it and align it with the other content of the layer so it looks like a whole.

Click to Enlarge

This is what you should have now. Note this is only an example and you should define the dimensions to how big you want this contents box to be.

Click to Enlarge

Now we will define the background of the contents box. You should at this point chose a color for the background of your contents box that will blend in well. The easiest way to chose a color is to zoom into to the scaled button layer and using your color picker, chose probably the second to last pixel from the color. I say this because the last pixel if you were following my directions is stroked and when we put this contents box together, we will want the “written stuff” to stand out.

Click to Enlarge

After you’ve done that. Make a new layer and with the dimensions of your contents box defined, using the Rectangular Selection Tool , make a selection on your new layer with the dimensions that you have decided on. Fill the selection with the color you picked as you background color. Now make a new layer and stroke the selection (if the selection is not selected go back to the layer with the background for your content box and go up to Layers>Transparency>Alpha to Selection and then active the layer you just created) with white or complimentary color to your theme of one pixel and set to overlay or other mode that’s to your liking.

Now that we have ourselves the background of the contents box, we will now add the headers. Now duplicated your scaled button layer and places it above the background you just created. Make sure that your scaled button layer covers 1px of the background cause we don’t want to show two overlays. Do the same thing for the bottom (note you don’t have to cover 1px from the background layer if its not visible we’re applying this so that only one sharp line is shown for depth). Duplicate you scaled button layer and rotate it by 180 degrees and place it at the bottom of the background layer if you have to adjust the sharp lines feel free to do

Click to Enlarge

Do this till you have what you were looking for as far as the layout. This is what I have so far: (mind the white boxes as those are for references)

Click to Enlarge

Time to add text. Pick you text tool and using a http://www.dafont.com/font.php?file=visitor]Pixel Font write the text for the navigation layer as well as the contents box.
Then draw one pixel lines by the height of your button layer and then duplicate them as many times to separate your button like so.
Also duplicate your scaled button layer and stretch it across the bottom as this is where you will be inserting the copyright information. This is how my canvas looks so far:

Click to Enlarge

Optional Step Involves Javascript-
In a lot of websites when you scroll over a button, it either glows or some sort of effect happens. To make our buttons more interesting we will apply a glow to the buttons when scrolled over.
To apply a glow select your button layer below the banner and then go to Layers>Transperancy>Alpha to Selection and then make a new layer. With your foreground color set to white, apply a gradient to the selection on the new layer.

You should now have something like this:

Click to Enlarge

Play with the opacity till you have something that you like when scrolled over. After you’ve got something that you like go to the layers dialog box and click the little eye icon next to your glow layer.

This is what you should have so far:

Click to Enlarge

Now we will slice the images.
Now go to Edit>Copy Visible and paste the contents on a new layer. Then using your selection tool pick out different parts of the image and save them separately. Note the background for the contents box should be widthx1px as you may want to use different size fonts when tying text and you will not want to have extra space left over. This is what you should have after you're done. For the sake of the tutorial I showed all the selection on a single page but you should do each selection one at a time and then save it as a new file. Having the canvas size defined for your image is pretty easy. When you have your selection selected copy it and then in the file menu go to new and then canvas size should be the same as the image. save all your images as either .gif or .png. I'd go with .png cause it has more colors. We need a transparent file format

Click to Enlarge

This is what I have so far after selecting everything: NOTE some of my boxes very same length so I used the same image again when I coded.

Click to Enlarge

Click to Enlarge

Now to code the website. Make a new html document and create a table with 1 coulmn by 4 rows with zero cell spacing & padding and align the table if the center. (NOTE [don’t need to read if you don’t have borders-skip this part] depending on how your web layout was made there maybe gutters, don’t know the exact term but on a lot of websites there are vertical borders on both sides if the layout is made to be in the middle. If that’s the case depending of if you want the copyright bar, buttons, or banner to be inside the bar, then create a table with 1 row and 3 columns and place your borders in the outer two columns and then create another table inside you middle column with 1 column and 4 rows and follow below)

Click to Enlarge

Now start placing you images in the table, just make sure you have the tables height and length defined or to auto fit. For me it was banner in the first row, navigation below that, contents space where I added another table to separate and get some more contents. And you should place your copyright in the last row. I’m not going to show you how to add each table. Just keep adding table and such till you have what you need. If you have any questions regarding tables and coding feel free to pm me. Now for those who don’t want to spend their time, you can take the source code from the html file that I’ve provided. To take the source code you shall Right click, and press View Source, Show the pages source or something similar to that (according to your browser). Then you shall Copy / Paste it over to your page. Now we just need to make a Style sheet for our page.

it looks all right now, but it needs a style sheet! A style sheet is basically a document that defines how a page will look. Below is if you want to create it using code. A lot of website development softwares allow you to add this content without right codes by hand if you format the page. You just have to find page properties, background, text and such. If your program does not have this follow the example I’ve provided below.

Basic page > CSS width=589 height=442> 2. First we will define the background, write: body { background-color:#061B33; } Let us break it up: body{ means that it is something for the body we will define. background-color:#061B33 Means that the background color for body will be #061B33. } Means that the body definitions end. 3. Now for some more definitions, write this: td, th { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 11px; color: #CCCCCC; } Let us also breake this up: td, th { Means that is it tds and ths we will define font-family: Arial, Verdana, Helvetica, sans-serif; means what font it is, Ariel first, then if a guest don't have Arial, it will be Helvetica, and so on. font-size: 11px; Defines how big the text will be. color: #CCCCCC; Defines which color the text will be. } Means that td and th definations end. 4. Now for some link styles: a { color: #3366CC; text-decoration: none; } a:hover { text-decoration: underline; } I don't want to break it up, I think you got it now.

We are almost done, view the source code for your html, make sure you define the title. The title is what the browser displays in the top and also in the taskbar when you view a page. I don’t think I’m missing anything so I guess we’re doing. Make sure that you host all the pics and I would really like to see results as this was my first tut. Thanks for following this tutorial.

I would like to see results and if you have any questions, feel free post right here.

You can easily check out our high quality testking 642-447 dumps which prepare you well for the real testking 70-685 exam. You can also get success in real exam of testking 000-978 with the quality testking 70-515 questions and testking 642-374.