How to Layout a Website

How to Layout a WebsiteThe vast majority of questions I receive boil down to How to Layout a Website!

While I’m not going to say it is easy to make a website. It takes time! However, I think anyone can learn to layout a website if they grasp some core concepts.

In my next series of videos I’m going to focus on everything you need to know to layout a website using just a text editor.

I previously covered this topic in a WordPress HTML TutorialΒ , but this time I’ll approach it in a more step-by-step manor.

Before you can learn HTML 5, or Make Facebook Apps you must be able to make a website. This series will provide those skills. All of the code used follows the video. Feel free to use it however you’d like.

Code From the Video

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
	<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />
	
	<link rel="StyleSheet" href="./includes/menu.css" />
	<script type="text/javascript" src="./includes/menu.js"></script>
	
	<style type="text/css">
	
	#pageWrapper {
		font: 14px/1.4 'PT Sans Narrow', sans-serif;
		width: 1000px;
		background-color: #FFF;
		margin-left: auto;
		margin-right: auto;
		border: 5px solid black;
	}
	
	#header {
		height: 127px;
		width: 1000px;
	}
	
	#logo {
		position: relative;
		left: 15px;
	}
	
	#blogSlogan {
		position: relative;
		width: 240px;
		left: 715px;
		top: -124px;
	}
	
	#searchBox {
		position: relative;
		left: 740px;
		top: -80px;
		width: 230px;
	}
	
	
	
	</style>
	
	<title>HTML Layout</title>

</head>

<body>

	<div id="pageWrapper">
	
		<div id="header">
		
		<img src="./images/logo2.png" alt="Social Voice Logo" width="167px" height="109px" id="logo" />
		
		<h1 id="blogTitle"></h1>
		
		<p id="blogSlogan">Your Source for Mobile/Social Media Marketing</p>
		
		<div id="searchBox"><input type="text" name="search" size="25" /><input type="submit" value="SEARCH" /></div>
		
		</div> <!-- End of header -->
		
		<div id="menu">
	
		<!-- This dropdown menu is created by using a table named "navbar". It has a default width of 1000 pixels -->
  		<table class="navbar" width="1000">
    	<tr>
    
    	<!-- We are creating the first column in the table and assigning the css attributes assigned to "menuNormal". We are defining 		the width to be 160 pixels. We will trigger javascript functions on both the onmouseover and onmouseout events. -->
    
      	<td class="menuNormal" onmouseover="expand(this);" 
      	onmouseout="collapse(this);">
        
        <!-- This is the menu item name that will appear at the top of the screen -->
        
        <p>Menu 1</p>
        
        <!-- Each drop-down menu is contained within a DIV element nested within each top-level TD element. There is a table nested 		inside of each of those div's. When a onmouseover event is triggered the div's attribute display is switched from none to 			inline, which allows a visitor to see the div on screen.-->
        
        <div class="menuNormal" >
          <table class="menu" >
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 1</a>
            </td></tr>
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 2</a>
            </td></tr>
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 3</a>
            </td></tr>
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 4</a>
            </td></tr>
          </table>
        </div>
      </td>
      
      <td class="menuNormal"  onmouseover="expand(this);" 
      onmouseout="collapse(this);">
        <p>Menu 2</p>
        <div class="menuNormal" >
          <table class="menu" >
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 1</a>
            </td></tr>
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 2</a>
            </td></tr>
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 3</a>
            </td></tr>
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 4</a>
            </td></tr>
          </table>
        </div>
      </td>
      
      <td class="menuNormal"  onmouseover="expand(this);" 
      onmouseout="collapse(this);">
        <p>Menu 3</p>
        <div class="menuNormal" >
          <table class="menu" >
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 1</a>
            </td></tr>
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 2</a>
            </td></tr>
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 3</a>
            </td></tr>
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 4</a>
            </td></tr>
          </table>
        </div>
      </td>
      
      <td class="menuNormal"  onmouseover="expand(this);" 
      onmouseout="collapse(this);">
        <p>Menu 4</p>
        <div class="menuNormal" >
          <table class="menu" >
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 1</a>
            </td></tr>
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 2</a>
            </td></tr>
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 3</a>
            </td></tr>
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 4</a>
            </td></tr>
          </table>
        </div>
      </td>
      
      </tr>
  	</table>
	
	</div>
	
	</div> <!-- End of pageWrapper -->

</body>
</html>

function expand(s)
{
  var td = s;
  var d = td.getElementsByTagName("div").item(0);

  td.className = "menuHover";
  d.className = "menuHover";
}

function collapse(s)
{
  var td = s;
  var d = td.getElementsByTagName("div").item(0);

  td.className = "menuNormal";
  d.className = "menuNormal";
}

div#menu{
background-color: #471F37;
position: relative;
z-index: 200;
}

table.navbar
{font: bold 16px/.5 'PT Sans Narrow', sans-serif;
text-shadow: #000000 1px 1px 1px;
margin: 0px;
padding: 0px; 
}

table.menu
{font-size: 10pt;
margin: 0px;
padding: 0px;
}

td.menuNormal
{padding: 0px 0px 0px 5px;
width: 160px;
color: white;
vertical-align: top; /* Sets the vertical alignment to the top of the div */
background: #471F37;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5f2c4b', endColorstr='#471F37'); /* for IE */
background-image: -webkit-gradient(linear, left top, left bottom, from(#5f2c4b), to(#471F37)); /* for webkit browsers */
background-image: -moz-linear-gradient(top,  #5f2c4b,  #471F37); /* for firefox 3.6+ */ 
border-right:1px solid #5f2c4b;
border-left: 1px solid #471F37;
}

td.menuHover
{padding: 0px 0px 0px 5px;
width: 160px;
color: #0bd4ff;
vertical-align: top;
/*remove the following lines for drop-down menu with images*/
background: #471F37;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5f2c4b', endColorstr='#471F37'); /* for IE */
background-image: -webkit-gradient(linear, left top, left bottom, from(#5f2c4b), to(#471F37)); /* for webkit browsers */
background-image: -moz-linear-gradient(top,  #5f2c4b,  #471F37); /* for firefox 3.6+ */ 
border-right:1px solid #5f2c4b;
border-left: 1px solid #471F37;
}

div.menuNormal
{display: none; /* States that this div should not display */
font: 12px/1.5 tahoma, sans-serif;
position: static; /* Tells the element to just flow with everything else */
}

div.menuHover
{
font: 14px/1.5 tahoma, sans-serif;
background: #471F37;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5f2c4b', endColorstr='#471F37'); /* for IE */
background-image: -webkit-gradient(linear, left top, left bottom, from(#5f2c4b), to(#471F37)); /* for webkit browsers */
background-image: -moz-linear-gradient(top,  #5f2c4b,  #471F37); /* for firefox 3.6+ */ 
display: inline; /* Tells the div to generate an inline box with no line break*/
position: absolute; /* Positions the element relative to the parent */
}

a.menuitem:link
{text-decoration: none;
color: white;
padding: 2.5px;
background: #471F37;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5f2c4b', endColorstr='#471F37'); /* for IE */
background-image: -webkit-gradient(linear, left top, left bottom, from(#5f2c4b), to(#471F37)); /* for webkit browsers */
background-image: -moz-linear-gradient(top,  #5f2c4b,  #471F37); /* for firefox 3.6+ */ 
text-shadow: #000000 1px 1px 1px;
display: block;
} /* Display a line break before and after the box */

a.menuitem:visited
{text-decoration: none;
color: white;
padding: 2.5px;
background: #471F37;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5f2c4b', endColorstr='#000f2e'); /* for IE */
background-image: -webkit-gradient(linear, left top, left bottom, from(#5f2c4b), to(#000f2e)); /* for webkit browsers */
background-image: -moz-linear-gradient(top,  #5f2c4b,  #471F37); /* for firefox 3.6+ */ 
border-bottom: 1px solid #5f2c4b;
border-top: 1px solid #471F37;
display: block;} /* Display a line break before and after the box */

a.menuitem:hover
{text-decoration: none;
color: #0bd4ff;
padding: 2.5px;
background: #471F37;
border-bottom: 1px solid #5f2c4b;
border-top: 1px solid #471F37;
display: block;} /* Display a line break before and after the box */

a.menuitem:active
{text-decoration: none;
color: #D8AFBE;
padding: 2.5px;
background: #5f2c4b;
border-bottom: 1px solid #5f2c4b;
border-top: 1px solid #471F37;
display: block;} /* Display a line break before and after the box */

44 Responses to “How to Layout a Website”

  1. Anonymous says:

    Unable to read the menu,toolbars etc…

  2. gautham says:

    #wrapper {
    font-family:”Palatino Linotype”, “Book Antiqua”, Palatino, serif;
    font-size:14px;
    background-image:url(New%20folder/my-first_17.gif);
    width:1000px;
    height:130px;
    margin-right:auto;
    margin-left:auto;
    color:white;
    border:2px solid blue;
    }

    #header {
    width:20px;
    height:50px;
    }

    #logo {
    position:relative;
    left:10px;
    top:5px;
    width:200px;

    }

    #slogan {
    position:relative;
    top:-110px;
    left:750px;
    width:220px;

    }

    #searchbox {
    position:relative;
    width:270px;
    left:720px;
    top:-55px;

    }

    #logo1
    {
    position:relative;
    left:380px;
    top:-5px;

    }

    #navi {
    margin:0px;
    padding:0px;

    }

    #navi ul {
    margin:0px;
    padding:0px;

    }

    #navi li {
    margin:0px;
    padding:0px;
    float:left;
    list-style:none;
    position:relative;

    }

    #navi ul li a {
    text-align:center;
    text-decoration:none;
    display:block;
    width:120px;
    height:40px;
    }

    #navi ul ul {
    position:absolute;
    visibility:hidden;
    top:30px;
    }

    #navi ul li:hover ul {
    visibility:visible;
    }

    #navi li:hover {
    background-image:url(New%20folder/dg-b-1_03.gif);
    }

    this is the code that i used to style the navigation bar!!! but unfortunately i am not getting the navigation bar in horizontal way but i am getting it in vertical please do help me ….. thanking you very much in advance ..

  3. Lucas says:

    This is a nice and comprehensive series of tutorials. Thanks for sharing! I’ll try to use this code somehow in my own projects.

    Respect

  4. Anonymous says:

    Thank you so much Derek. Your tutorials are just excellent!

  5. Mark says:

    I love your videos. I have struggled with formatting for a while. I love your approach and the smooth way you teach it. It really made things make sense.

  6. Noel says:

    thanks for your awesome tutorials !

  7. Kaiwa says:

    wow what a hectic couple of days! Ive finally figured out what all the bugs and clutter causing my problems were. So now its laid out in a somewhat understandable manner ^^. Although it took me hours and hours and hours of trial and error, ive learnt so much from it all!. Now i can begin to reap the fruits finally . Hmm where do i go to from here…The javascript tutorial after this perhaps. Thanks for the mean lessons! =)

    • admin says:

      I’m very happy that you were able to get everything working πŸ™‚ Trial and error is the best way to learn. I have tutorials on everything so it just depends on what your goals are. If you send them I will gladly create a course schedule. I’m very happy that you are enjoying the videos!

  8. Naomi says:

    Total beginner here…
    I like your video! I know a bit about html and your instructions were clear! Maybe I CAN do this! πŸ™‚
    Question – is there a software out there where I can just plop pictures and text where I want in a Photoshop type setting and it will magically create a WordPress site? (basically to avoid all the coding part like you showed here.) I have Photoshop CS5 already, but I’m thinking that’s not a native capability…

  9. Waqas Asghar says:

    hello derek … i just want to thank u bro, how much your these tutorials help me, i can,t explain in words. keep doing this good work. May God bless u. πŸ™‚

    Regards
    Waqas

    • Derek Banas says:

      May God bless you as well Waqas πŸ™‚ Thank you for taking the time to tell me that you like them. I appreciate that

      • waqas says:

        i have a request that plzz do a ANDROID tutorial series, and i think u r doing if u r then can u plzz tell me that when u r going to upload them on ur website or youtube channel. πŸ™‚

        • Derek Banas says:

          I’m going to spend about 6 months on android. I first want to finish covering what is needed to make robust, flexible programs. I promise it will be the most complete android tutorial ever made

          • Waqas Asghar says:

            hmmmm Thanks a lot bro …. as i have watch your videos so from that i,m damm sure that it will be complete and full of knowledge series. I want to become android developer so i will wait. You r the best. Take care πŸ™‚

            • Derek Banas says:

              Thank you very much πŸ™‚ I’ll get to Android as soon as possible. I just need to cover a bunch of things which I’ll use in the Android tutorial. I have to use UML tools which I covered in my UML Tutorial and object oriented design tutorial to make the big stuff I have planned.

  10. Jacobus says:

    May I say that for the FIRST time I actually start understanding something about how websites are built? Your video is very clear for a newbie I must say. Kudos and thanks for the massive amount of time you must have spent on making these videos.

  11. Kim says:

    Hi derek, I am an avid fan of your, your tuts are very simple yet totally amazing. just one question. in the navigation, I tried this tuts and it works on google and mozilla but when I test it in IE 7+ it does not work. any advice? thank you so much in advance.

  12. Kim says:

    Hi derek, I am an avid fan of yours, your tuts are very simple yet totally amazing. just one question. in the navigation, I tried this tuts and it works on google and mozilla but when I test it in IE 7+ it does not work. any advice? thank you so much in advance.

  13. Monkey says:

    I have built two websites using Joomla, but this tutorial is so good I will try to build my next website from scratch in WordPress. I have been trying to learn html and css online, but found it difficult. This tutorial puts everything I have learned into context making it so easy understand how to apply what I was learning. Should I watch the php videos next, before trying to convert my html/css layout into a WP theme?
    Thank-you so much and keep up the good work.

    • Derek Banas says:

      Thank you πŸ™‚ Yes, I always found WP to be easier to work with then Joomla. The documentation is better. The support forum kind of stinks though, but so does Joomlas

      You need very little knowledge in regards to PHP to make WP themes. You should be fine making themes if you have a strong knowledge of html and css.

      I did my best to cover just about anything you could want to do with WP. I hope you enjoy them. Feel free to ask questions

  14. Anonymous says:

    Hi Derek,
    Is it ok to copy this code and use it in a possibly commercial website?
    Thanks for all great video tutorials.

    Mark

  15. alaskanloops says:

    Am I missing something or is there a way to grab the images used in this tutorial?

    Thanks man great video once again.

  16. David McMonigle says:

    Derek,

    Well I’ve conquered Java (Certified in November) and I’ve gotten the hang on a ton of languages since then (Python, C++, C#[essential Java on steroids!]) so I’ve moved on to HTML, CSS and Javascript. I’ve got to say, I’ve never learned so easily in my life. I’ve been able to take on a few freelance jobs thank to you, you Warrior Poet!

    Thanks Again!
    Dave

  17. judine says:

    i have a website to create for school but i cannot get the menubar correct.could u assist me please?

  18. pankaj pawar says:

    can u give a sliding menu codes…any unique style

  19. Anonymous says:

    Can’t thank you enough for your videos. I do web development as a hobby, and this really helps me get a visual of where and how to layout and code a website properly. I really like how much you’re able to show us with html and css alone. I used your other videos to pass my coding class last semester. So happy you take your time to pass your skills onto other people. You’re like the khanacademy of coding πŸ˜€

Trackbacks/Pingbacks

  1. Wordpress Programming | Bryan E Patrick - [...] to access the videos is just to search for them on his channel on YouTube. He will show you…

Leave a Reply

Your email address will not be published.

Google+