 |
|
 |
|
 |
||||||||||||||||||
|
Let's Make a Layout When I FIRST started making layouts I didn't touch CSS, I didn't know what it meant let alone how to use it. I use those damned page builders that did everything for me. Now... there isn't a layout that goes out that doesn't include CSS. It's a handy tool that's simple to use, and can make a website move from "Meh...alright" to "WOW!"CSS could be used to nearly code the ENTIRE layout. (As we're using it right now xD) In this tutorial we're getting pretty damn close with it defining everything for us as we use it to define the table's cells and some general characteristics with this page! As you noticed back in the first few parts we decided to link to various outside style sheet, we've already created one of those style sheets, style.css if you don't have this open already, open it up in notepad we're going to add to it.
This page links to the style.css, in this instance there isn't text on this page, and the only thing we really need to do with the css is set the background color, and scrollbar to vanish. For this layout a white background will work, and we're going to make the scrollbar near invisible. We're not going to bother setting the link properties or text ones, there isn't any text on the page anyway =P So at the top of the style.css file let's create a blank line and add this:
Again I'm going to stress spacing. When you space correctly you can read your tags and code easier. It makes things lovely.
body {
Next is the Scrollbars for the page.
scrollbar-DarkShadow-Color:#FFFFFF;
And there we go, no scrollbar. We're done with the style.css you can save it and close it. If you want, refresh your page and you can see... or well not see any changes, but they're there! Now we need to create the stylemain.css and the stylelink.css so let's start with stylemain.css
So let's start with our body again at the top of the page add:
Now in between the { and } make a new line and add in the background tag background:
Next let's change the scrollbar properties. In this instance I want to use the transparent color for the track, once we finish setting up the transparency properly IE users will be able to see the layout there instead of a solid color on the track. Other than that I'm going to pick colors that go with the layout.55AE8F scrollbar-DarkShadow-Color:#000000;
The only way to really see if you like what you have is to test it. However, we can't see it right now, because there is no text on the page, forcing a scrollbar.
Alright so we have the scrollbars and the background, but you likely noticed the black text doesn't show up and it's kind of big. So let's fix that.
In HTML we tend to make our fonts larger or smaller by going <font size=+3>This however is BAD practice. It's better to set the font in the CSS and use that as only a highlighting measure, and even then don't use it. It'll not really aid your design any. But of course this is your choice. HTML uses smaller numbers where as CSS uses pixels... and thus the number is larger. Keep in mind people like me are getting old and size 8px font is NOT a font to be used on a website. Size 11px or 12px is small enough. For this design I recommend 11px. Now we want to change the font color enter down to a new line and add
Alright, now the default face for font is Times New Roman, I personally can't stand that font, I much perfer Verdana, so I'm going to change mine to verdana. Keep this in mind when changing the type, NOT EVERYONE has the same fonts. I have a font called Ringbearer FT, and while it's pretty and all if you don't have it you'll see either boxes or Times New Roman depending on how your computer is set up to handle it. Stick to the basics that 99% of people have, Times New Roman, Verdana, Comic Sans Ms, Arial, Courier New...
Also you can set more than one font, so that if the person does not have the primary choice it'll go to the secondary. For me I'm going to add in Arial and Comic Sans MS.
There we are, the Body is all set up exactly how we want it. It's time to change the links, because everyone likes fancy links.
Most often people decide to have the visited, active and regular link properties the same throughout the file. At which point we can combine the different properties so as not to type the same thing out. We'll start by showing you what it looks like seperate and then what it looks like combined. This is them seperate: A:link {
A:active {
A:visited {
This is them all together: A:link, A:active, A:visited {
The reason you would want them all seperate is if you decided that the links would look different after they had been visited or that they would look different when they are clicked. The properties for them are all the same, and so for the purpose of this design we want the link, active and visited to all remain the same.
A:link, A:active, A:visited {
Now instead of being the standard blue color the links will be the color I've chosen. The next part is to add the type of text decoration that is desired.
A:link, A:active, A:visited {
By setting the text-decoration to none there will be no lines anywhere on the link it'll just be like it was normal text, but a different color so it still stands out.
A:link, A:active, A:visited {
This will space the letters apart more and make the links stand out. You can change the pixels to your tastes but keep in mind the size of the area you're working with and the overall appearance. I would not recommend ANYTHING higher than Five for anytype of letter or word spacing.
The next step is to add our hover. A:hover {
Hover is completely optional but will allow a user to see it's a link because it's not dull or flat, it moves and adds an overall elegant feel to the site. (Dynamic w00t w00t)
A:hover {
The #000000 color is the HEX code for black that I've chosen to use for this portion of the layout. You can change it to many different things. Some people like to make the link almost invisible. Some like to make it completely disappear, play with it.
A:hover {
When you're adding a text decoration, you do not place comma's to seperate what each part is. If you want only an underline, just don't include the overline part, or overline alone, or perhaps you still want it to be none, then you type none.
A:hover {
So we set the letter-spacing back to 2px... you CAN change this, but like I said bad design because your layout will move with the links. Your choice however. And we're done! Well we're done the stylemain.css we still have to do the stylelinks.css the big change there will be the background, so let's open up a new notepad and save this one as stylelinks.css the fastest way we can do this (As I'm sure this has been long enough already) is to copy and paste from stylemain to stylelinks all we're going to need to change is the background: url('images/main.jpg') #76CBAE fixed; so that it says background: url('images/links.jpg') #76CBAE fixed; instead. (Proper background) So we're done then... oh right, we need to make that transparency work... Go back to style.css (Open it in notepad) What we're going to need to do is change the td.linkframe and td.mainframe properties by adding in a background.
Now in style.css find
Save style.css and preview in your webbrowser. Everything should be peachy keen now! <3 Finally head over to Final Touches Let's Make a Layout(iFrames!) Part One :: Getting Started
|
