The first thing that you have to know about building a great looking website is that it’s super easy, super cheap and takes almost no time at all. The basics are already stored on your computer, and those basics can be easily put together like a sandwich to build a great website quickly.
Defining your layout
Step one, let’s decide what your new website is going to look like. Surprisingly, most website designs can be boiled down to just a few basic layouts.
Of course there are plenty more than the few I’ve laid out here but for the purpose of our project, I want to keep this simple and selected the first option, a traditional website layout with a header, footer and two columns.
The HTML used to create this basic web page layout is:
[source lang="html"]
<body>
<div id=’page’>
<div id=’header’>Page Header</div>
<div id=’content’>Content</div>
<div id=’sidebar’>Sidebar</div>
<div id=’footer’>Page Footer</div>
</div>
</body>
[/source]
Preview Page
To format the page properly we also need to add some basic CSS:
[source lang="css"]body {
margin: 0px;
padding: 0px;
text-align: center;
}
#page {
width: 800px;
margin-right: auto;
margin-left: auto;
text-align: left;
}
#header {
background-color: #CCCCCC;
clear: both;
height: 100px;
}
#footer {
background-color:#00FFFF;
clear: both;
height: 100px;
}
#sidebar {
background-color:#FFFFCC;
clear: left;
float: left;
width: 200px;
}
#content {
background-color:#ffffff;
clear: right;
float: right;
width: 600px;
}[/source]
Preview Page
As you will now see, the page content is placed in the appropriate areas for our website. For those of you who are clever with CSS, you can change to the second layout by changing the flipping the content and sidebar’s clear/float values. Technically, if you look at the HTML for this page, the sidebar appears to the right of the HTML but is formated with CSS to appear on the left, this is a Search Engine Optimization trick to move our content closer to the top of the page.
Designing the Web Page
The Header
Now that we have a basic layout for our website, we need to add a little bit of flare, to do this we need some color and some texture. The best place to get it? Flickr or other online photo database. In this case, I’m going to use a macro focus pair of blue sneakers from Fey the Ferocious.
What I want to do is use the sneaker photo as both the header and the color scheme for the website, this is make fairly easy since the photo has such rich colors. Let’s get started with the header by adding a title as well as a menu in the code as such:
[source lang="html"]<div id=’header’>
<div id=’logo’><strong>Website Name</strong></div>
<div id=’menu’>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</div>
</div>
[/source]
By adding this simple header structure, we’ve given the HTML everything it needs to build our header. The next step is to add some basic CSS to the file in order to format and structure the piece.
[source lang="css"]#page {
width: 800px;
margin-right: auto;
margin-left: auto;
text-align: left;
font-family: "Lucida Sans", Arial, Helvetica, Geneva, sans-serif;
}
#header {
background-color: #CCCCCC;
clear: both;
}
#logo {
background-image: url(3031455100_f5450c9645_b.jpg);
padding-top: 50px;
padding-bottom: 50px;
padding-left: 50px;
background-position: -200px;
font-size: 24px;
color: #FFFFFF;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menu li {
display: inline;
padding-right: 10px;
}
#menu a {
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
}
[/source]
Take care to note that I’ve altered the #header and #page format a little to account for the new items, including the fonts I would like to use.
Here’s what my new header will look like:
Preview Page
The Footer
Once the header is completed, I like to work on the footer next. I’m not entirely sure why I do it this way but I find the footer equally important as the header and sometimes it seems to be an after thought on web pages, so I like to address it while I’m still fresh.
The footer has to contain some basic elements such as copyright and links, to accomplish this here’s the HTML code that I’ll use:
[source lang="html"]<div id=’footer’>
<div id=’footermenu’>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</div>
<p>© Copyright 2009, Website Name. All rights reserved.<br />
Header photography by <a href="http://www.flickr.com/photos/renneville/3031455100/">Ferocious Feyrannosaur</a>, <a href="http://www.thisismyurl.com">website design by Christopher Ross.</a><br />
</p>
</div>
[/source]
The CSS for the footer is equally simple:
[source lang="css"]#footer {
clear: both;
height: 100px;
font-size: 10px;
color: #666666;
margin-top: 5px;
padding-top: 5px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000000;
}
#footermenu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#footermenu li {
display: inline;
padding-right: 10px;
}
#footer a {
color: #666666;
text-decoration: none;
}[/source]
Since a footer is the technical, ‘legal’ notes for a website, I make it slightly smaller and lighter as to not distract from the rest of the page. Make note of the changes to the original #footer code as well.
Preview Page
Formating the Sidebar
Before we get into formating the sidebar we need to make sure there is some space to the right of it so that the content doesn’t butt right up against the sidebar content. To do this, we need to add a padding area inside the sidebar along with our new content. To do this, I will add a margin to the boxes we add but first we have to change the basic HTML of the sidebar.
First, let’s add a new division element with the box class and add a level two heading for each, along with a paragraph of test (for now I’ll use Lorem Ipsum) along with the link.
[source lang="html"]<div id=’sidebar’>
<div class="box">
<h2>Item 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent orci lectus, iaculis ut ullamcorper id, porttitor ut dui. <a href="#">Item 1</a></p>
</div>
<div class="box">
<h2>Item 2</h2>
<p>Sed eget placerat elit. Curabitur sit amet ullamcorper massa. Donec id viverra dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Item 2</a></p>
</div>
<div class="box">
<h2>Item 3</h2>
<p>Suspendisse in quam ac magna condimentum fringilla sit amet sed orci. Fusce interdum ligula eget mauris imperdiet iaculis. Donec eu auctor turpis. Donec ullamcorper hendrerit urna quis malesuada. <a href="#">Item 3</a></p>
</div>
<div class="box">
<h2>Item 4</h2>
<p>Quisque blandit, ante eu tempus tempus, massa lectus dignissim ipsum, id interdum dolor mauris non mi. Ut in orci turpis, non tincidunt nunc. In placerat diam in sem cursus dictum. Morbi ac urna urna. Ut nulla tellus, gravida a iaculis ut, tempus et odio. <a href="#">Item 4</a></p>
</div>
</div>[/source]
Trust me, this looks a lot more complicated than it really is! Take a look …
Now we have to add some CSS to format this content:
[source lang="css"]#sidebar {
clear: left;
float: left;
width: 200px;
font-size: 10px;
color: #666666;
padding-bottom: 20px;
}
.box {
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #CCCCCC;
padding-right: 10px;
margin-right: 10px;
}
.box h2 {
color: #3B4A88;
font-weight: normal;
margin-top: 10px;
margin-bottom: 0px;
padding-top: 10px;
padding-bottom: 0px;
}
.box p {
padding-top: 0px;
padding-bottom: 10px;
margin-top: 0px;
margin-bottom: 10px;
}
.box a {
font-weight: bolder;
color: #3B4A88;
text-decoration: none;
}[/source]
Preview Page
The Content
Finally, to complete the webpage we have to add some content. Again, I’ll rely on Lorem Ipsum for the purpose of putting some quick content into the website, you can add your own text later.
Preview Page
There are not a lot of major changes to the content in this design, if it was a client project I’d add a sizable number of CSS modifications in order to format the pages but as a demo of how to quickly design a quality website I think it’s pretty good.
You can look at the website with CSS as well as a version with no CSS to give you an idea of the changes. You’re also welcome to download the source code and use this website template as a basis for your own website.
You might also want to check out a couple simple variations to this theme:
Win a Free iPod![08xserve_rack[1]](http://www.thisismyurl.com/wp-content/uploads/2009/09/08xserve_rack1.jpg "08xserve_rack[1]")
For the vast majority of small businesses, web hosting should not be a very complicated decision. Hosting companies abound on the Internet. What you should be looking for is a hosting company which offers you at least 25MB of storage space and at least 1 GB of monthly transfer. 
May
2009
10 simple ways to say thanks to a blogger you enjoy reading
When I was working at Yorkville University I met a fellow IT manager named Glen who shared a theory about technology people. If I remember this correctly, his former manager once told him that IT people needed money, toys or interesting projects to keep them motivated. Most of the time people assumed it was money but to people in the technology field, money wasn’t the most important thing.
I feel that way about making money online here at thisismyurl.com, which is why I don’t believe asking for donations is the right way to go when it comes from receiving support from people who read my blog. In fact, I’m going to go out on a limb and say that I think most bloggers feel that way. So how can you say thanks to somebody for a blog post you’ve really enjoyed? Here’s a few ways that I can think of off the top of my head:
Support their sponsors
One of the easiest ways to say thanks for a job well done is to simply take a couple seconds and look at who’s buying ads on your favorite blogs and if there’s something being marketing which interests you, click through to check it out. The act of clicking an affiliate link doesn’t put money in your bloggers pocket but it does reinforce with the affiliate company that the blog has pushed traffic to their website and this act alone is valuable to both the blogger and the advertiser.
Support their commenters
One of my favorite ways to support a blog is to read their comments and click through to supportive, helpful commentators. Again, this doesn’t make the blog owner any money but what it does do is prove to the person who left the comment that the time they spent leaving a comment was well received. I get to learn a lot from a lot of great bloggers this way but it also helps encourage people to leave helpful comments which is the best way to support a blog.
Tweet about them
People blog for a number of reasons but regardless of why a blogger takes the time to write posts on the web, telling your followers on Twitter is a great way to help encourage them to continue writing great comments. You can also Digg them or list them on Stumble Upon if you’ve really enjoyed their content.
By ads on their website
A lot of bloggers sell ads on the side of their sites, why not help them out by promoting your own products and services?
Post a link to their story on another website
If you enjoy reading something on one blog and think it could help support and article on another, why not take a few minutes and share the link there? I often post supportive, helpful links in the comments of a blog to help the owner know about other great blogs. It helps both blogs become stronger, better and more co-operative!
Send money
If there’s no other way for you to say thanks, sending the blogger a couple dollars to help keep them infused with coffee is always nice.
Support their plugins and themes
If your favorite blogger writes plugins or themes for something like WordPress, take a few minutes and download it, comment on it or rate it on the public directories. A lot of bloggers get significant portions of their traffic directly from these directories and your supporting their plugins helps build visitors to their websites.
Leave comments
I can never stress enough how much a great comment encourages a blog owner. If you’ve taken the time to read a blog post and found it helpful, spending just a couple seconds to leave a thank you note and encourage the blogger to continue writing is a great way to say thanks. If you can add to the conversation, correct a glitch or improve the bloggers understanding of the subject matter … all the better!
Post a link to their blog
The holy grail of compliments to a blogger? Posting a link to their content! If you run a website of your own and find something a blogger has written to be helpful, post a link and tell your visitors why you liked what you read. It’s amazing how much this helps a blogger build a bigger audience and how easy it is to do.
Tags: Act, Advertiser, Affiliate Company, affiliate link, Asking For Donations, blog, blogger, blogs, Commentators, Couple Seconds, Fellow, few minutes, job, making money online, Marketing Advice, Marketing Advice, Met, People, Plugins, Technology Field, Top Of My Head, Toys, traffic, Traffic Website, Tweet
Posted in Blogging, Web Site Advice