Help
Today we are going to make a simple web page, that will look something like this.
It will help if you have a basic knowledge of HTML and CSS, though if not and you have a short attention span then you may find this is a little difficult. Also I will assume you're familiar with using GIMP.
We'll start with the graphics!
Step 1
Open GIMP and create a new image with a transparent background that is 133px in width and 23px high. I will assume this is simple enough not to require a screenshot.
Step 2
This first image will be a button, so we will want to make it rounded.
Select all (hold "Ctrl"+"A"), then go to Select -> "Rounded Rectangle" and change the radius (%) to 70 and press ok. I am using GIMP 2.2.11, though if you do not have this feature available then you could use the elliptical tool (though your button may be more oval). Otherwise, you may want to consider upgrading GIMP to use this feature. Or your other option could be to zoom in then delete bits around the corners to make them rounded.
Next, you want to fill the selection with a colour of your choice. I have chosen to use a blue (3388ee) though you can use any you like.
What you have so far should look like something like this (note that I've zoomed in by 200%).
Step 3
I think some scanlines would look good.
You may either use some of your own or download fencepost's scanline pattern here (be sure to thank him).
(Before asking how to install scanlines click here)
Or you could follow Get Firefox's tutorial.
Make a new layer and name it "Scanlines" then fill the layer with your scanline pattern.
I want to make the scanlines white, so go to "Layer" -> "Transparency" -> "Alpha to Selection", then fill the selection with white. Once you've done this, change the mode to "Overlay" then change the opacity to 40.
It should now look something like this.
Step 4
To make it look more buttonish, I think it could use a highlight. Add a new layer and name it "Highlight". Next, activate the elliptical tool (press "E" on your keyboard).
IMO, feathering the edges of the elliptical selection will give the button a more natural transition between the highlight and the rest of the button. Feather the edges by 10 like so.
While using GIMP, you may have noticed numbers on the bottom right hand side of the image you're working on, that show the current position of your mouse cursor.
Zoom in at about 400% then position your mouse cursor at the coordinates "-20, 15", then click and drag your mouse cursor to the coordinates "153, -6" and release. Fill the selection with white, then change the mode to "Overlay" and change the layer opacity to "50".
Your order of layers so far should be like so
1. highlight
2. scanlines
3. background
Now you're finished!
What you have should look something like this.
Step 4
Create a new folder somewhere you can easily find it, then save a copy of the image as "off.png". You can save the file with the .gif extension if you want to cater for people that use IE6 or earlier, (Microsoft Internet Explorer browsers have only recently started to support transparent PNG's), though I say get a decent browser.
Saying that though, there probably are other browsers that can't handle transparent PNG's, though if you really want to you could just make the background colour of the button the same as the background colour you'll be using on your web page.
Step 5
Change the background colour to a lighter colour then the original. I've used 33aaee.
Save the image as "over.png" (or "over.gif")
You should now have this.
Step 6
We'll now be creating the header background!
Crate a new image 23px high and 15px wide.
Fill the image with your desired colour (I used 3388dd).
Step 7
Now repeat step 3 to add some scanlines.
Save the image in your folder as "tile.png."
You should now have this
Step 8
Now I understand people reading this have varying levels of knowledge with HTML, so this next bit may get a bit more complicated for some, though just take your time with it.
Here is an example of how your layout would eventually be structured when you click on "HTML Tags" of the edit mode toolbar in NVU.
So now we add the HTML.
Open a text editor such as Notepad, Kate or whatever you use. You may use NVU if you want, though remember that we're going to be working with source XHTML code.
If you're unfamiliar with XHTML then don't panic, it's pretty much the same as HTML except for a few differences.
What makes a valid XHTML document is the DTD tag, plus you have to consider the following tags.
You have to close each tag entity with a / slash. What I mean by tag entity's, are for example
.... anyway, onto your basic XHTML structure
Copy and paste this as your basic structure for the blank document.
.:: Welcome to my website ::.
Step 9
Basically, there's nothing on your page so far. So lets add your template for the content.
This will go between your "body" tags.
Navigation
Welcome to my website!
Your text will go here
So if you are able to preview what you have so far, how it would look is something like this.
Doesn't look much so far eh? Well don't worry, we're about to fix that!
Step 10
Time to add the CSS information to improve the look.
Copy and paste the following. It should go in between the "head" section of your document.
Hopefully that didn't confuse the pants off you :o:
If you didn't understand any of it, then it's probably best if you just experiment and figure it out. You can't expect all of it to make sense in a couple of days (though it is possible), but just stick to what you know and gradually experiment with little bits you can play around with.
This is how it would look once you've added what's technically known as all that CSS stuff.
When you hover your mouse over an item in the navigation, the background image should change.
That's what this bit of code is for
onMouseOver="this.className='navigation_hover'" onMouseOut="this.className='navigation'"
What it does, is once you hover your mouse over the list item it changes to the class with the lighter background image (li.navigation_hover), then once you move your mouse away it changes back to the original class name (li.navigation).
And tutorial is now finished!
You can easily add box's on the left or right side, though
Unfortunately, I can't explain how all of it works or I'll be sitting here all week ...
You can download the full tutorial in a PDF format, along with all the files used here.
A few more notes ...
I'm guilty of producing a biased design, as this particular example has been designed for a screen resolution of 1024*768 or above. Saying that though, most of us probably use a screen resolution of 1024*768 or higher, though if you change the size of the "main_content" div to 400px (i.e.: div.main_content { ...) then I think the page should comfortably fit a screen size of 800*600 or above.
That's just something to take into consideration, though remember to experiment and consider your target audience.
Edit: CSS has been edited, so the page will now scale to fit the size of your screen. Also deleted a section of CSS that was not needed.
Example web template has been tested for and passed W3C compliance regarding the XHTML and CSS.
CQS? (Comments? Questions? Suggestions?)
CQS? I've just invented it (I think?)
If it's about this tutorial then post here. Questions concerning the use of the web template provided with the download should be PM'd to me or sent to nospamingdenegibson@gmail.com (but remove the "nospaming" bit).
