How to Layout a Website
The 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”
Trackbacks/Pingbacks
- Wordpress Programming | Bryan E Patrick - [...] to access the videos is just to search for them on his channel on YouTube. He will show you…
Unable to read the menu,toolbars etc…
Sorry I need more information to help you
#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 ..
Have you tried using my menu unordered list html code? Check to make sure that works for you. I double checked it and it works.
If you are using this in WordPress, you have to create the menu in the WordPress dashboard. It’s under Appearance – Menus
Derek, you are my idol! 😀
Thank you 🙂 I do my best
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
Thank you 🙂 I do my best to make new interesting tutorials
Thank you so much Derek. Your tutorials are just excellent!
Thank you 🙂
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.
Thank you for taking the time to say the videos helped. I really appreciate that 🙂
thanks for your awesome tutorials !
Thank you for the kind words 🙂 They are very much appreciated
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! =)
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!
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…
Thank you very much 🙂 The easiest way to make a WordPress theme like you mentioned is to use Artisteer. I use it all of the time to play with designs. I hope that helps
Thank you!!
You’re very welcome 🙂
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
May God bless you as well Waqas 🙂 Thank you for taking the time to tell me that you like them. I appreciate that
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. 🙂
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
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 🙂
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.
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.
You’re very welcome 🙂 I’m very happy to be able to help people
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.
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.
What problems are you having? Thank you for the complement 🙂
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.
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
Hi Derek,
Is it ok to copy this code and use it in a possibly commercial website?
Thanks for all great video tutorials.
Mark
Hi Mark,
Sure feel free to use my code in any way you’d like. Everything is free 🙂
Am I missing something or is there a way to grab the images used in this tutorial?
Thanks man great video once again.
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
Congratulations Dave! You’ve done all the work. I’m very happy I was able to help. I wish you the best 🙂
i have a website to create for school but i cannot get the menubar correct.could u assist me please?
Here is my tutorial on making a horizontal menu. I have a bunch more on my site as well. I hope it helps 🙂
can u give a sliding menu codes…any unique style
Check out this tutorial
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 😀
Thank you for all the very nice compliments 🙂 I’m happy to be able to help.