Sunday, August 7, 2011

Creation of websites

 So today I thought I'd try to show you how you can start if you want to learn more about how web design works! (Watch the film that is under all this text if there is something that you don't understand). 

You can use any software you want but I will use Dreamweaver and Photoshop (CS5) !

  • So... First you want to make a style sheet (css document). This is a file that tells the browser how big all the boxes shall be (when you create a website you make everything in boxes!). When you have done that you have to make a html document. Notice that both files need to be in the same folder.
  • Then we need to write some code that tells the browser where the style sheet is. We can do this by typing:
    <link href="style.css" rel="stylesheet" type="text/css"> "  in the html document. (Do this inside the <head> </head> tag!).

  • Next we need to the something about how the side is going to look like. Like the background etc. We can do this by typing something simpel like this:
    body {
    } which tells the browser that the background colour of our site will be lime green!
  • After this we going to make our fist box! And this will be a box that will have everything inside it. Start by fist switch to the .css file and type this:
    #container {
    } You can also add: " margin:0 auto; " if you want the site in middle.
  • Next thing to do is to make the box readable in the browser. We will make this by typing this in the html file:<div id="container"></div>
    Now when we have the box that all the content will be in, we are able to make some menu buttoms and a box for some text. To do this we need to make some more tags (#).Do this by typing this in the css file:
    #menu { width:500px; height:40px; margin: 0 auto;}
    Now, lets make the menu bar readable for the browser! We can do this by typing this:
    <div id="menu"></div>In the index.html file.
    Next out is the box we want for typing our text! We will do this by typing this:
    #textbox { width:550px; height:auto; margin: 0 auto;}In the style file.
    Then we want it readable in the browser ofc. Just do as normal, type this:
    <div id="textbox"></div>In the .html file.
    Now we going to make something different. A box that tells that you are the owner of the page you just made. This is the footer. we can make one like this by typing something like this in the style.css file:
    #footer { width:500px; height:30px; margin: 0 auto;}
    And as normal we need it in the index.html file. But now, this box wont be inside the container box that we made at the beginning! So now, we will put this after the end of that box. which is after the alone </div> tag. Remember that you can take a look at the video below if you dont understand.Type this in the index.html file:
    <div id="footer"></div>
    Now we got the main boxes. Now we are about to make some of the smal things that makes the site more useful etc. Some of the things is the menu buttoms. We can make those by typing this:
    ccs:#menybuttom { width:70px; height:40px; float:left;}
    html (inside the menu tag):<div id="menybuttom"></div>
    Copy and paste the html code after how many menu buttoms you want.
    That´s about it. Now it´s just to type where the buttoms are pointing inside the menybuttom tags. Like "home" or "info". And the same inside the textbox tag.If you want to know more, follow me!Or watch the  video tutorial.
    Video tutorial:


  1. Great job, very useful for beginners. I like the simple, concise way everything's explained.

  2. awesome, nice tutorial link to youtube.