How to Layout a Website 5

How to Layout a Website 5In this tutorial I finish up the How to Layout a Website Tutorial. If you missed the previous videos you can see them here at How to Layout a Website Pt 1, Pt 2, Pt 3 and Pt 4.

Here I’ll finish making the template used by all the individual web pages.

This time I create the template without any planning at all. I create the whole page completely out of my head. In the end I think it looks really nice.

All of the code follows the video.

In the next video tutorial I’ll turn this website into a WordPress Theme. I’ve already made WordPress Themes twice before. Check out my Easy WordPress Theme Tutorial, my WordPress News Theme for more information.

If you liked this video, share it with others

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;
	}
	
	#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;
	}
	
	#contentWrapper {
		background-color: #471F37;
		float: left;
		width: 1000px;
	}
	
	#leftSidebar {
		float: left;
	}
	
	.leftContainer {
		background-color: #fff;
		border: 3px solid #000;
		margin: 10px;
		margin-right: 3px;
		width: 177px;
		height: 271px;
		padding: 2px;
	}
	
	.bannerTitle {
		font: 14px/1.4 'PT Sans Narrow', sans-serif;
		background-color: #471F37;
		color: #FFF;
		width: 96px;
		height: 26px;
		text-align: right;
		padding-right: 6px;
		position: relative;
		left: 78px;
		top: -21px;
	}
	
	#cindy {
		float: left;
		padding-right: 4px;
		padding-bottom: 4px;
		padding-top: 5px;
		padding-left: 2px;
	}
	
	.sidebarExcerpt {
		position: relative;
		left 0px;
		top: -62px;
		color: #244f4f;
		font-size: 10pt;
	}
	
	.featured {
		background-color: #fff;
		border: 3px solid #000;
		margin: 10px;
		margin-right: 3px;
		width: 177px;
		height: 350px;
		padding: 2px;
	}
	
	.eachArticle {
		position: relative;
		top: -18px;
	}
	
	.articleExcerpt {
		color: #244f4f;
		font-size: 10pt;
		position: relative;
		top: -10px;
	}
	
	.horzRule {
		background-color: #471f37;
		height: 2px;
		width: 170px;
		margin-left: 3px;
		position: relative;
		top: -10px;
	}
	
	/* BEGINNING OF ARTICLE STYLING */
	
	.contentColumn {
		width: 570px;
		float: left;
		margin-right: 15px;
	}
	
	.contentContainer {
		background-color: #FFF;
		border: 3px solid #000;
		margin: 10px;
		width: 570px;
		height: auto;
		padding: 5px;
	}
	
	.contentTitle {
		font: 14px/1.4 'PT Sans Narrow', sans-serif;
		background-color: #471F37;
		color: #FFF;
		width: 188px;
		height: 26px;
		text-align: right;
		padding-right: 7px;
		position: relative;
		left: 377px;
		top: -20px;
		z-index: 20;
	}
	
	.contentArtTitle {
		font: 28px/1.8 'PT Sans Narrow', sans-serif;
		padding-left: 4px;
		
	}
	
	.contentArtDate {
		padding-left: 4px;
		position: relative;
		top: -10px;
	}
	
	.contentImage {
		float: left;
		padding-right: 5px;
		padding-bottom: 5px;
		padding-left: 2px;
		padding-top: 5px;
	}
	
	.horzcontentRule {
		background-color: #471f37;
		height: 2px;
		width: 562px;
		margin-left: 3px;
	}
	
	.contentExcerpt {
		color: #244f4f;
		font-size: 10pt;
		margin-left: 3px;
	}
	
	.middleColumn {
		width: 260px;
		margin-right: 20px;
		margin-left: 15px;
		float: left;
	}
	
	.middleContainer {
		background-color: #FFF;
		border: 3px solid #000;
		margin: 10px;
		width: 264px;
		height: 270px;
		padding: 2px;
	}
	
	.middleTitle {
		font: 14px/1.4 'PT Sans Narrow', sans-serif;
		background-color: #471F37;
		color: #FFF;
		width: 188px;
		height: 26px;
		text-align: right;
		padding-right: 7px;
		position: relative;
		left: 72px;
		top: -20px;
		z-index: 20;
	}
	
	.featuredImage {
		position: relative;
		left: 1px;
		top: -45px;
	}
	
	.middleArtTitle {
		position: relative;
		top: -45px;
		padding-left: 4px;
	}
	
	.middleArtDate {
		position: relative;
		top: -45px;
		padding-left: 4px;
	}
	
	.horzMidRule {
		background-color: #471f37;
		height: 2px;
		width: 256px;
		margin-left: 3px;
		position: relative;
		top: -45px;
	}
	
	.middleExcerpt {
		color: #244f4f;
		font-size: 10pt;
		margin-left: 3px;
		position: relative;
		top: -50px;
	}
	
	#rightSidebar {
		float: left;
		margin-left: 12px;
		margin-right: 0px;
	}
	
	.rightContainer {
		background-color: #FFF;
		border: 3px solid #000;
		margin: 10px;
		margin-right: 0px;
		width: 177px;
		height: 269px;
		padding: 2px;
	}
	
	#eBookForm {
		position: relative;
		top: -30px;
		left: 2px;
	}
	
	.eBookExcerpt {
		position: relative;
		left: 2px;
		top: -30px;
		color: #244f4f;
		font-size: 10pt;
	}
	
	.socialIcons {
		width: 177px;
		margin-left: 15px;
		padding: 2px;
	}
	
	.affiliateContainer {
		background-color: #fff;
		border: 3px solid #000;
		margin-right: 0px;
		margin-left: 10px;
		margin-bottom: 20px;
		width: 177px;
		height: 150px;
		padding: 2px;
	}
	
	#footer {
		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+ */ 
		float: left;
		width: 1000px;
		height: 100px;
		text-align: center;
		color: #fff;
		
	}
	
	
	</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> <!-- End of menu -->
	
	<div id="contentWrapper">
	
		<div id="leftSidebar">
		
			<div class="leftContainer">
			
				<div class="bannerTitle"><h4>WHO WE ARE</h4></div>
				
				<p class="sidebarExcerpt"><img src="./images/cindy.png" alt="Cindy" width="73px" height="73px" id="cindy" /><br /><br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /><br /> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
			
			</div> <!-- End of leftContainer -->
			
			<!-- FIRST FEATURED SIDEBAR VIDEOS -->
			
			<div class="featured">
			
				<div class="bannerTitle"><h4>VIDEOS</h4></div>
				
				<div class="eachArticle">
				
					<div class="articleTitle"><b>FACEBOOK MARKETING</b></div>
					
					<p class="articleExcerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed <a href="#" class="clickForMore">More</a></p>
					
					<div class="horzRule"></div>
				
				</div> <!-- End of eachArticle -->
				
						<div class="eachArticle">
				
					<div class="articleTitle"><b>FACEBOOK MARKETING</b></div>
					
					<p class="articleExcerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed <a href="#" class="clickForMore">More</a></p>
					
					<div class="horzRule"></div>
				
				</div> <!-- End of eachArticle -->
				
						<div class="eachArticle">
				
					<div class="articleTitle"><b>FACEBOOK MARKETING</b></div>
					
					<p class="articleExcerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed <a href="#" class="clickForMore">More</a></p>
					
					<div class="horzRule"></div>
				
				</div> <!-- End of eachArticle -->
				
						<div class="eachArticle">
				
					<div class="articleTitle"><b>FACEBOOK MARKETING</b></div>
					
					<p class="articleExcerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed <a href="#" class="clickForMore">More</a></p>
				
				</div> <!-- End of eachArticle -->
				
			
			</div> <!-- End of featured -->
			
			<!-- SECOND FEATURED SIDEBAR ARTICLES -->
			
			<div class="featured">
			
				<div class="bannerTitle"><h4>ARTICLES</h4></div>
				
				<div class="eachArticle">
				
					<div class="articleTitle"><b>FACEBOOK MARKETING</b></div>
					
					<p class="articleExcerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed <a href="#" class="clickForMore">More</a></p>
					
					<div class="horzRule"></div>
				
				</div> <!-- End of eachArticle -->
				
						<div class="eachArticle">
				
					<div class="articleTitle"><b>FACEBOOK MARKETING</b></div>
					
					<p class="articleExcerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed <a href="#" class="clickForMore">More</a></p>
					
					<div class="horzRule"></div>
				
				</div> <!-- End of eachArticle -->
				
						<div class="eachArticle">
				
					<div class="articleTitle"><b>FACEBOOK MARKETING</b></div>
					
					<p class="articleExcerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed <a href="#" class="clickForMore">More</a></p>
					
					<div class="horzRule"></div>
				
				</div> <!-- End of eachArticle -->
				
						<div class="eachArticle">
				
					<div class="articleTitle"><b>FACEBOOK MARKETING</b></div>
					
					<p class="articleExcerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed <a href="#" class="clickForMore">More</a></p>
				
				</div> <!-- End of eachArticle -->
				
			
			</div> <!-- End of featured -->
		
		</div> <!-- End of leftSidebar -->
		
		<!-- BEGINNING OF ARTICLE -->
		
		<div class="contentColumn">
		
			<div class="contentContainer">
			
				<div class="contentTitle"><h4>ARTICLE</h4></div>
				
				<div class="contentArtTitle"><b>FACEBOOK MARKETING</b></div>
				
				<div class="contentArtDate"><b>POSTED BY ADMIN SEPT 22, 2011 IN FACEBOOK MARKETING | 18 COMMENTS</b></div>
				
				<div class="horzcontentRule"></div>
				
				<p class="contentExcerpt"><img src="./images/Biz-Woman-SM.jpg" alt="Featured Image" width="150px" height="150px" class="contentImage" />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo<br /><br />
				
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo<br /><br />

				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo<br /><br />
				
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo<br /><br /></p>
			
			</div> <!-- End of contentContainer -->
		
		</div> <!-- End of contentColumn -->
		
		
		<!-- BEGINNING OF RIGHTSIDEBAR -->
		
		<div id="rightSidebar">
		
		<div class="rightContainer">
		
			<div class="bannerTitle"><h4>FREE EBOOK</h4></div>
			
			<p id="eBookForm">
				<b>EMAIL</b><br />
				<input type="text" name="email" size="20" /><br />
				<b>NAME</b><br />
				<input type="text" name="name" size="20" /><br />
				<input type="submit" value="Submit" />
			</p>
			
			<p class="eBookExcerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
		
		</div> <!-- End of rightContainer -->
		
		<div class="socialIcons">
		
			<img src="./images/RSS_logo.png" alt="RSS Feed" width="40px" height="40px" class="socialNetwork" />
		
			<img src="./images/facebook_logo.png" alt="Facebook" width="40px" height="40px" class="socialNetwork" />
			
			<img src="./images/twitter_logo.png" alt="Twitter" width="40px" height="40px" class="socialNetwork" />
			
			<img src="./images/linkedin_logo.png" alt="Linkedin" width="40px" height="40px" class="socialNetwork" />
			
		
		</div> <!-- End of socialIcons -->
		
		<div class="affiliateContainer"> 
		
			<div class="bannerTitle"><h4>AFFILIATES</h4></div>
		
		</div><!-- End of affiliateContainer -->
		
		<div class="affiliateContainer"> 
		
			<div class="bannerTitle"><h4>AFFILIATES</h4></div>
		
		</div><!-- End of affiliateContainer -->
		
		<div class="affiliateContainer"> 
		
			<div class="bannerTitle"><h4>AFFILIATES</h4></div>
		
		</div><!-- End of affiliateContainer -->
		
		<div class="affiliateContainer"> 
		
			<div class="bannerTitle"><h4>AFFILIATES</h4></div>
		
		</div><!-- End of affiliateContainer -->
		
		
		</div> <!-- End of rightSidebar -->
		
	
	</div> <!-- End of contentWrapper -->
	
	<div id="footer">
		
		&copy; 2011 My Theme
		
	</div>
	
	</div> <!-- End of pageWrapper -->

</body>
</html>

17 Responses to “How to Layout a Website 5”

  1. Bryan says:

    SIR WHY THE MENU IS UNDER THE CONTENT OF THE CONTAINER??? HOW CAN I MAKE IT OVER THE CONTENT??

  2. tim says:

    I watch a lot of video tutorials and you are one of the best.

    So thanks and keep up the good work.

  3. Ronan Harris says:

    Comment

  4. Ronan Harris says:

    could you please answer my question from this video.
    It is about the href link for the menu.

  5. shiningeye84 says:

    Hi Derek, I would of said hi and thanks a while ago but i am anti social media, and the Google requirement of YouTube always puts me off…

    I am currently immersing myself in Java, HTML, CSS, and Java script. I have been learning with books and ramming it home with your great tutorials.

    Keep up the good work!

    • Derek Banas says:

      Thank you very much for taking the time to say you like my videos 🙂 I appreciate that. I completely understand not wanting to share your personal information with the world. That is why my site will never be subscription based.

      Derek

  6. Kwame Nkrumah says:

    Sir, am the newcomer on your page,coding is the problem to me,but through this way of teaching i convinced to follow your lessons.and i hope ‘ll master them to make own applications.

    • Derek Banas says:

      Keep at it and you’ll get it. Web design and programming is something that seems complicated and then one day everything just makes sense. Keep going and ask questions. I’ll do my best to help 🙂

  7. Maxime says:

    Hello, I had to translate in french and german some of your tutorial for friends of mine… What about having a french and german interface, it will increase tour audience… I am fluent in both languages, would be happy to help you out

    • Derek Banas says:

      I’d love to do that, but I don’t have time. You can definitely take my videos and code and use it on your own site. You could maybe generate some ad revenue as well for all the work you’d have to do. I would have no problem if you’d like to do that. Thank you for the help 🙂

  8. Kavous says:

    Hi Derek,

    You are fantastic in explaining the subject and so to the point.

    I would like to make a website in Web 2, so that the visitors can login and add their own text and pictures in a form to offer their goods and services. Or search for the records created by others. Could you please be kind enough to help me to know how to go about it or maybe create a video about this?
    Thanks again
    Kavous

    • Derek Banas says:

      Hi Kavous,

      Thank you for the nice compliment 🙂 That type of website can be quite complex because of security issues. If you just want a finished website that should be secure check out phpBB. If you want to code it yourself you’ll need to use something like the Zend Framework and PHP. Hackers are very good at breaking into any site that allows them to upload anything even if it is just as simple as a picture. I hope that helps 🙂

  9. Rampage101 says:

    Hey Derek! just wanted to say Hi, your tutorials are lifeblood of my studies, thanks!

Leave a Reply

Your email address will not be published.

Google+