 |
|
 |
|
 |
||||||||||||||||||
|
Let's Make a Layout A lot of things I do are the pieces needed to make a layout, this time we're doing something called Let's make a layout. Now this will instruct you how to take a layout image, similar to the one we're going to use, and then make a layout from it.This does not teach you how to make a layout image... err, I would teach that but that's something that is really based on design and tastes... I could walk you through the steps I took to make the image and get you to make it or I could just give you the image to start with. A very important note, if you use the image that I'm supplying to make your layout and use that image AS your layout, then you need to link back to me and give me the credit for the image, if you use this to code your layout give the credit... you can say you coded it because you did but please just give the credit to me for the help... you know "Thanks to LadyPSerenity for her tutorial 'Let's make a Layout'" that's really kinda polite. WE've already found some places direct linking... don't do that. This is the image we're going to use:
And this is the background image:
Save these to YOUR HARDDRIVE. Do NOT DIRECT LINK. (The image was impossible to see and stuffs so it got a text link and a border) So now we have the images we need to start with the coding. There are programs that can be used to do the coding, but I perfer to use notepad myself, and it's great to learn using notepad.
<html>
If you note, there are no properties defined in the body tag, most properties defined in the body tag are refused by Firefox, I hate firefox... personally but that's my personal opinion. I will however state that it's a widely used browser and it's best to code with most browsers in mind. Remember when saving this you need to save it as filename.html replace file name with the name of the page. If it's your MAIN PAGE save it as index.html if it isn't save it as something that accurately links to what it's about. For example a links page would likely be links.html
Now For my purposes I've called this site MiD Let's Make a Layout // Bad Day
Once we have this we have the beginning of our layout, all our fancy codes will go into a style sheet. There are two ways to do a style sheet you can link to an outside one, or you can have an inline one. I perfer to link to them, cleaner code. Some people perfer inline as to have less pages on their site.
This means our next line of code should look like this: <link rel="stylesheet" href="style.css"> When doing this ENSURE that your path to your style sheet is correct. If your page is in a folder, for example my page is in the letsmakealayout folder but my style sheet is in my root directory, then I would would make the line look like this <link rel="stylesheet" href="/style.css">
Once we have this, lets move onto getting the image on and the div in. You can code an entire site through style sheets, but we're going to stick to being simple here, and code through a combination of style sheets and HTML. The style sheet in our case will be used to make the layout fancy where as the HTML will be the root. We'll finish up the HTML before moving onto using the Style sheet though. The next part is simple, we're going to add in the image.
<img src="/images/image.jpg"> Once again we need to make sure we know where the image is. The image in this case is stored in a folder called "images". Remember in coding CaPiTaLs Make a difference. When doing a layout it's concieved your not going to have the images in every folder you make on the site, and not all the pages will remain in the same folder, so it's best to have that / at the beginning of where the file name is. (If adding an image doesn't make sense go back to HTML 101 ) Once we have done this, we're going to add the ending tags so we can get a good look at what we have so far.
</body>
Remember that it is WISE to save consistantly, you never know when the power might go, the program might glitch or your computer just begins to hate you. Always save after you do something, and check to make sure things are going alright.
And a preview of the site so far looks like this:
So onto the Next Part! Let's Make a Layout Part One :: Getting Started(You are Here)
|
