How to Build a Website Part 8
In the 28th of my series of informative articles, Part 8 looks at how to build a website using some graphics to build a header and coding the style sheet to make it all hang together accordingly.
Well, we've worked our way to instalment number eight already. Whew! So what have we done so far. Well, we've built a nice, formatted homepage with a style sheet to power it and make it look pretty. We've also got a site map which uses the same style sheet to list the links to all the other pages we'll be creating. So now it's time to spruce up the homepage a little more with some graphics and a navigation menu.
To add graphics to your website pages is really more simple than you might expect. It's the actual creating of the graphics that takes time and effort, unless of course you are a graphic designer with all the knowledge of how to use the top graphic packages like Photoshop etc. Most of us are simply dabblers in that field, but we can still come up with something quite stunning when we put our mind (and some time) to it!
It really is up to personal choice as to what graphics software you chose to work with. I personally like to use Macromedia Fireworks as my graphics software – created by the same people who make Flash and Dreamweaver, so they are no minnows in the web graphics field. Most people go with Photoshop – and that's a great program too.
Well, this isn't an article on graphics software. It's a website building series, so I'm not going into the finer points of using Photoshop or Fireworks or any other popular software. As they say: "this is outside the scope of this tutorial".
So, I could save my time here and simply say: "Create your header graphic and upload it to your server" and then we simply move on. But that probably wouldn't help you very much. So I'll give you a little more help here.
Ok, you have to start with something. I like to search for a nice photo or series of photos that I can manipulate in Fireworks to create a nice heading banner. In this case, I was fairly lucky in finding a free downloadable photo of a nice garden border.
So I saved the file and opened it in Fireworks. The original picture needed to be cut down to size, so I cropped it to fit into a 760 pixel by 120 pixel rectangle. Funny, if you look in the style sheet, that's exactly the dimensions of our header section!
Here is what it looks like:
Now I'll create some text to make the header look nice. I've been sneaky here, because Fireworks gives you the ability to create a text file but make it transparent, then manipulate the text so that it appears translucent, add some filters to give a drop shadow and some inner fill and this is what you end up with:
Nice? Now I'll transpose one over the other to give us our final graphic:
Ok, now I have the right physical size, the file size is way too big. At something approaching 35kb, it will take around 5 seconds to load for someone using a 56k dial-up connection. Don't forget, most of the online-world is still using dial-up! You have to take this into consideration when uploading any graphic to your website server.
Why?
Well just because your super-fast connection loads your page up in a nanosecond, it doesn't mean that someone using dial-up has that luxury. They might not have the patience to wait for that graphic to slowly unfurl on their page. Worse, they might just hit the close button on your page and you'll lose a visitor to your site. And that visitor might have been a good customer, so keep this in mind ALWAYS!
In Fireworks and in Photoshop, there is the ability to alter the file size of a graphic. You should par your graphic down to under 20kb – that way it'll only take a couple of seconds to load on a 56k dial-up. That's roughly what you need to aim for to keep your visitor from going elsewhere.
With that done, you simply upload your creation to your server, via FTP. I personally keep all my graphics in their own folder on the server, just to keep things neat and so I don't have dozens of files all jumbled up together.
The next thing you have to do is to tell a person's browser where to look for this graphic. Now, you have two options. You can do this in HTML, which requires a few lines of code. Or you can do it, yep, in your good old style sheet! In one line of code!
Are you beginning to see why I love style sheets?
Here is the raw code for the altered style sheet for this article:
http://www.organicsanity.com/style.css
Copyright: Terry Didcott 2007 */
body {
background: #ccffcc;
margin-top:10px;
margin-bottom:10px;
}
#page_wrapper {
margin-left: auto;
margin-right: auto;
width: 760px;
text-align: left;
background: #ffffff;
border: 1px solid #006633;
}
#page_header {
height: 120px;
background: #ffffcc url('http://www.organicsanity.com/img/head.jpg') top right no-repeat;
color: #006600;
clear: both;
}
#content_wrapper {
margin-top: 10px;
margin-bottom: 0px;
margin-left: 10px;
margin-right: 10px;
clear: both;
}
#box_top_left {
float: left;
width: 480px;
height: 200px;
background-color: #ffffff;
border: 5px solid #FFDABB;
font-family: verdana, arial, sans-serif;
font-size: 12px;
padding: 10px;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
}
#box_top_right {
float: right;
width: 180px;
height: 200px;
background-color: #ffffff;
border: 5px solid #FFDABB;
font-family: verdana, arial, sans-serif;
font-size: 12px;
padding: 10px;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
}
#box_bottom_left {
float: left;
width: 280px;
background-color: #ffffff;
border: 5px solid #FFDABB;
font-family: verdana, arial, sans-serif;
font-size: 12px;
padding: 10px;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
}
#box_bottom_right {
float: right;
width: 380px;
background-color: #ffffff;
border: 5px solid #FFDABB;
font-family: verdana, arial, sans-serif;
font-size: 12px;
padding: 10px;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
}
#page_footer {
height: 50px;
background-color: #FFFFCC;
clear: both;
}
#page_footer p {
padding-top:18px;
text-align: center;
font-family: verdana, arial, sans-serif;
font-size: 11px;
color: #336633;
letter-spacing:1px;
}
Guess what. No change to the HTML!
The simple change to the CSS as you can see highlighted is the addition, in the background statement, of the url statement to tell the CSS where the image is located, then to place it so that it sits hard in the top right corner of the division and also not to repeat the image. We keep the #ffffcc there just in case the image file becomes corrupted, so we still have some colour in the header division.
Simple?
If you'd like to see the difference to our homepage this one simple piece of colour can bring, please click on this link:
http://www.organicsanity.com/tutorial/08.php
That's enough for this instalment. Next time, we'll create a menu bar to make navigating around the site easier for your visitor. It might be a good idea to add another page to the website as well.
See you soon!
Author: Terry Didcott
Word Count: 940
Date Submitted: 15th July 2007
NEXT ARTICLE #29 >> How to Build a Website Part 9
[TOP]