HTML to the max! (With CSS)
So, you want to know what you can do with html.. right :)
You've come to the right place!
There are some rules to bind yourself to when you want an optimal coded site.
Now this is a lot of work, so why do you want that in the first place?
Well:
- Your site will load faster
- Your code will be better readable/understandable
- Your Style/layout will be easier to adjust
- Your site will work in all browsers (after fixing and testing)
- Your site will have a proffesional look
- You will have a better overview at your ftp folders, your files and your code.
- Plus: it's fun!
Basic links for resource and testing:
- Ultra Edit A very nice text-editor with color sync recognation
- MSDN Library - For all documentation. If you need some code like what is possible with a div layer? then this is the place to find it.
- W3.org Important to test your site on possible problems.
Some rules for when using xHTML like I do:
- Attribute names must be in lower case
- Attribute values must be quoted
- Attribute minimization is forbidden
- The id attribute replaces the name attribute
- The XHTML DTD defines mandatory elements
Lastly: I use a .php extention in my examples. This is because in the end I'll split to header.php, page.php and footer.php. If you want to preview a .php extention page on your own pc, then you need to install Apache, PHP and optional MySQL. That is not easy at all. I have an old tutorial which explains it. but it is based on old files, so it probably won't work. So if you want to install your own 'localhost' you'll have to google it to find out how it works, don't ask me as I have begged Ruben to install it for me ;) LOL (mainly php is the bitch). You can also easily save your file as .html the whole time you're coding it (during this tutorial). You won't need php files untill step 10. At that point you can just 'save as' and use php.
Index
Step 2: Organising
Step 3: Begin coding
Step 4: Da real thing
Step 5: The navigation
Step 6: Adding a floating div
Step 7: Special effects
Step 8: The Content
Step 9: Fixing marges in other browsers
Step 10: Finishing touch (splitting in header, index and footer)
Step 1: Make the layout in Photoshop
Ofcourse this is your own creativity. But since my tutorial is based on my layout, I'll show you mine:
Note that I saved it as a PSD file. Every single element in my psd is a single layer. I could have like 100 layers in there... When I make my images, I make the layers I don't need invisible. But I do need them later on in my coding, to define sizes and distances.
So this what you see, is indeed my PSD file. I haven't coded anything yet.
Step 2: Organising
Since I build a couple of sites, I've made a 'Developement' folder in 'My Documents'. In there I've got all my sites.
How you call yours, is your choice :)
OK, so in my 'Lostininnocence' folder I make the same setup as I will on the net. For now it contains 2 folders and a file:
images, static and index.php
And in static I make 3 folders: css, img and js
Why static and what's with img and js?
the 'html' templates are usually made dynamic while static = unchangeable.
So in there you put your css files, the images of the site itself (not the art but the backgrounds and all), and the scripts.
The 'js' folder stands for 'javascript'. There's a good chance you aren't going to use it. So you don't have to include it and ofcourse you can always add or delete it later.
Now you've made your layout and setup for the folders, you'll need to make the images to build the site.
Now I know that many people just make an image of the total layout and put them as background, then position layers on top of them... That might be easy to begin, but it's not efficient in the end. So... what do you do? Make seperate images.
So you have to decide where to cut your image and where the lines are.
In my example it'll look like this:
And so the images are like this, saved in the 'static/img' folder:
and
For the menu I made these images:
This is because I want a mouseover in orange for my navigation. And because the font I chose isn't regular, I made images for them. So one image for 'on' and one for 'off'.
So now your folders will appear a bit like this:
(I've also included my existing art system in this example already)
Step 3: Begin coding
Now the real work starts... :)
I use Ultra Edit for my coding.
So, my fist code looks like this:
What? 3 stylesheets???
Yes! 3 Stylesheets! 1 for the layout, 1 for the navigation and 1 for the content.When you're using CSS to make up your total site, you'll find out that the CSS will be a huge file!
So in order not to loose the logic in your files, you can make as many CSS files as you want, but these 3 I recommand as they are clear.
Step 4: Da real thing
Okay, the real coding starts now. And this is when you'll find out an editor like Ultra Edit is really handy.
Because you'll switch back and forward between your index file and the CSS files.
I start with the index.php. Think how you're going to build it. In my example the topbanner has to be first. Then the left banner should be left, content in the middle and the right part on the right.
So you'll make several div layers after eachother.
The code for a div layer is: ‹div id='name'› or ‹div class='name'› (The difference between class and id I'll explain later)
The first one I make, I call 'frame'. Later, in the layout.css I'll give it a width and a height and a margin.
Now frame is something you will have to make aswell. It's easy to use when you want your layout centered, or to have another color as background there than around it. Don't confuse the name 'Frame' for the frames you could also make as a code (iFrame). It's just a name ;-)
In frame, between ‹div id='frame'› and ‹/div› I'll make the id topbanner, I'll call it 'top'. It ends immediately because all the style for it will be in the stylesheet and the only content, i'll add later. (the stats).
Ofcourse this part can be different for you. I build my layout like this, but yours has probably a different setup, and so the order and the amount of needed div layers can be totally different. Maybe you only need 1 for top and then 1 for content.
Then I'll make the id 'left', because the left image has to be for the other two. both 'top' and 'left' will have a 'float : left' in the stylesheet, this is to make sure that they'll go after eachother. And because 'frame' is only 1024 width, it'll come under eachother (it has no more space on the sides).
Now the id 'content'. I'll give this one a bit more space in my setup, because I know I'll have to add a lot in here later.
And lastly I'll add id='right'. Also these last two layers have a 'float : left' in the stylesheet, to make sure they come after eachother.
As said before, I'll have to add a lot into the 'content' so I'll start with the two obvious ones. 'nav' for the navigation and 'main' for the updates and content.
So my coding now looks like this.
Now ... let's take a look in the explorer what we've got here.
Pretty huh... totally white... yep, because we didn't make the stylesheet yet. We only decided how we're going to make that.
the Layout.css
The first thing I start with are the general things. I look at my psd file and I see I want black tekst, font verdana, size 8. This will count for the entire site, and so I use *{ } for it.
I define my links, my scrollbar and decide that my images should have a 1px border in black.
Okay, now you need to give the divs it's own qualities.
I start with the frame.
Frame is an id, not a class.
The difference between classes and id's is that classes can be used several times on a page, id's only once. To make things clear for yourself, it's handy to use that. And use an id if you're not going to have more classes with that same name.
Another thing you see here is 'margin'. the order of the margins is: Top, Right, Bottom Left. So margin : 5px auto 0 auto; means: 5px from the top. middle from right 0 from the bottom and middle from left.
auto and auto I use because Mozilla can read that too. 'Align : center' isn't read by Mozilla.
So, Frame is an id, the code will look like this:
Now the first id in frame is 'top', so I define top with a width and a height, the sizes of that image. And I put the image as a background (this loads faster and is more efficient). Because the div will be empty (well besides the stats) it needs a 'display : block' to make it show. And ofcourse it needs the 'float : left' that I mentioned earlier. So now the code is like this:
If you look at the link to the image, it says ../img/topbanner.jpg
That's because if you look at the folders, your stylesheet is in static/css and the image is in static/img. so to go from css to static, you have to use ../
For my total layout.css so far copy this:
So now, after this stylesheet, the site looks like this.
Step 5: The navigation
Looking at my psd file, the navigation should be 8 pixels above the 'main'. So, I make a navigation.css and give it a width and a height...
I've also given this div a red border of 1 pixel. That's because at the moment it's empty, and this way I can see if it's at the right place and the right size.
My site now looks like this.
So now I've got to make the links in them and write this code:
which gives this result.
The images are not next to eachother and they have a border. It's because I've given those qualities to the images of a link. So now I need to go back to the navigation.css to give the images in 'nav' different qualities. When I change that, and remove the red border, there's still too much space, so the last link is still on the next page.
So I remove the 'enters' in my code and put all the navigation links on 1 line, without spaces.
(I've put on the Toggle Word-Wrap, to see the whole code on several lines, while they are just one; see red arrow.)
Navigation.css now has this code:
And the site now looks like this:
Step 6: Adding a floating div
The statistics
If you look at my layout, you'll see the statistics on the right top. So I'll have to make a floating div layer to put them in there.I look at my PSD file and mesure the size of the div. It's 128 by 63 pixels.
And because there's only 1 div with statistics, it's going to be an id. So I'll code my id as following (in the 'top'):
And in the layout.css I define the id as following:
And the result is now this.
So as you can see, the block is in the neighbourhood of where it should be. All it needs is some margins. I look at my PSD and mesure them. 18px from right and 7px from the top. So I add margin : 7px 18px 0 0; to the CSS.
And now it looks like this.
So I'll add the code for the statistics (from Smurl).
And now it looks like this.
As you can see, the font isn't how I planned in my PSD. So I add font specifics to the CSS.
And because I want the text to be a bit away from the lines, so I add padding, but padding has influence on the sizes, and so I need to adjust them aswell.
I end up with this code:
And the result is this.
Recent Art
My recent art I've placed left from the content. So I start to make a general div.
And in CSS I define sizes and add only a red border to place them.
And the result is:
As you can see, the red line is immediately connected to the content, and so I need to give it some margin. I add margin-right : 3px; to the CSS.
Then I add the images itself, remove the border and it now looks like this:
Almost good, it only need some margin to the images, and so I add this code:
to make the result this.
Step 7: Special effects
Okay, if you look at my PSD, you'll see some 'special effects'. Like the fading images for recent art. A mouseover for the navigation and light-transparent backgrounds.
How do we do those?
Mouseovers Navigation
Let's start with the mouseover at my navigation.I've made images for them before (see step 2, Organising)
A nice piece of javascript that Ruben wrote is the following:
In the goes this:
And the code in your navigation will look like this (the yellow highlighted is the script that I added):
So the code goes as following:
and in the img tag of the layout:
Mouseover Recent Art
For the bright mouseovers I use a script from MSDN Library.Which I use like this:
The effect is the following:
Now I do like this effect, but in my PSD I had the effect to have a white glow. Now to acchieve that, I have to give every image a white background. But not the image itself, as that would be filtered too. So I need to make a class around each image. I can't just give the background to 'recent' because then the whole part will be white. So I create a class between them: 'recent_img' and put it around each img.
So I play around a bit with settings and all and come out with this:
Now it's finished and looks like this:
Transparent Backgrounds in div layers
Okay... I think that in this, my method might not be the best way. But at the moment I can't think of anything better.When I put a filter on the background, the whole layer with everything in it, goes transparent. And since I don't want that... I make 2 different layers.
The first one goes behind the second one. So the first one has the transparent background and closes immediately. And the second one has no background.
In code it looks like this:
And in content.css like this:
The position has to be absolute, because otherwise the layers won't be exactly over eachother, but floating under eachother. Now... the disadvantage of position absolute is that it gives shit in other browsers like Mozilla... Look here.
But I'll come back to fixing other browsers later.
For now we're happy with the I.E. 6 result.
Step 8: The Content
So, the layout is mostly ready and so now it's time to lay-out the content! Just like all previous steps, I work here with div layers.
Also, in the stylesheet you can give specifics to a P or an IMG or a heading, anything.
So I start with the H2 and H4 and the P (because I've been using them in this tutorial, lol)
The new margins to the P create nice distances in my text, padding and all. Plus now my H4 has a color in stead of being black. Highlight colors are always important as they draw attention. Now I was gaining for blue, or something good contrasting, but well, I didn't find those suiting in the layout :(. So this brownish color it is.
Now if you want borders around your images at one page, but not at the other, you can easily do that by naming the class or id different. For example you have a class called art and one called update.
You want the images in art to have a black border and those in update red.
So you do this:
Ofcourse the same goes for margins and all other specifics :).
This is also the time to put all kinds of other specs in. Like if you take a look at SP, you'll see the updates with borders and other specs.
The code for that is the following:
The coding on the index page looks the same every time, we can just edit the content:
You'll notice I've used in the class Update several variations like span and blockquote. In the CSS I've addeds specifics in both those and to the IMG, the A, the heading in the span, etc. etc.
So that coding looks like this:
Step 9: Fixing marges in other browsers
Now this can be a pain... lol.
There are people using other browsers, like Mozilla/Firefox or (worse) Safari or (worst) I.E. 5 (for mac! EEEEK!)
Before they might have had no problems with your site, but now you've worked with margins, they are defined different by other browsers. So if you download those browsers and install them on your pc, you can test your site in those browsers.
Well, remember my screenshot (not too bad btw, I've had MUCH worse): Mozilla... As you can see, the margins are not right. And I explained that that was because I used a position : absolute. Now I can fix this with a simple hack in CSS.
In the CSS you have to use !important wich is read by I.E. as 'not important'. Meaning that I.E. won't read it. So I define my margin for Mozilla and put the hack behind it. Then I apply a margin for I.E. aswell, which I set to 0, as that was good.
And now in Mozilla (and probably Safari), my site looks good aswell.
Mozilla and Safari use the same hack. If you need to change something only in one of them, you'll have to google something like: 'CSS hack safari not mozilla'
For older browsers like I.E. 5 and 5.5 you can hack by using a \ in the word for I.E. 6.
I.E. 6 can read the word then, but the older browsers not. So if the margin for I.E. 5 would need 10px and I.E.6 nothing, you would have this in the end:
Same goes with wid\th, heig\th, etc.
Fixing all margins can be a pain... but in the end you'll get it and it'll be worth it :)
Step 10: Finishing touch (splitting in header, index and footer)
Now it's time to split the file we made into 3 parts:
The top part that will be the same for each page is header.php.
The middle part with the specific content for the page will stay the index.php and then the last part with the same content on each page at the end will go into footer.php.
So for me that means, everything up to the div text, will be in the header.
Resulting in a header looking like this:
And for the footer I only need this:
So I start making a new page now, like 'art.php' and I only have to start with this:
If you worked with your index file as a .html document, don't forget to change it to .php otherwise it can't read the php commands.
And that's it folks!
Good luck!