 |
|
 |
|
 |
||||||||||||||||||
|
Let's Make a Layout - iFrames! This is the third edition of Let's Make a Layout. As stated in the others, a lot of the things I do in my tutorials are the pieces needed in order to make a layout in these Let's Make a Layout Tutorials we take all those pieces and we assemble them together in one place.Here we take a layout image and we turn it into a layout. This tutorial won't teach you how to make a layout image. I do have a tutorial for that but really it's based on tastes. 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. And when you do that now you get a little image that says you stole from us =P Something that is extremely important here is that we understand the pros and cons of an iframe layout. This is the image we're going to use:
But you really don't need that piece, that's just to show you what it looks like. Unlike with Div layouts where you can have ONE image, and a background (Isn't very nice to load times but you can do it) This one requires us to break the image up. (To crop it)
So initially we took the image and cropped it into three pieces.
The red lines are where I made my seperations. I'm not an overly fancy person and I'm aware photoshop has a "Slicer" tool. I just like using the selection. I use a square selection and I select from the first red line up, then copy and paste it into a new image. (CTRL+C on a windows Machine then CTRL+N to make a new document in photoshop, then press enter as the size settings are right there for you, and then CTRL +V and you'll paste it in. Save it and you've got your first piece.) Then I right click inside the selection and click "Select inverse." Then holding down CTRL I deselect the bottom piece, from the second red line down. (there is a little - to tell you you're de-selecting)
The middle piece however needs to be cropped again. So let's crop it into sections. Here it is.
Once again I made my seperations where the red lines are. this time it was a little more complicated as you often have to deselect the left side so that you're only getting the right side piece that you want. It's always best to just move the way you likely read. Left the right... of course some read right to left...
This is the link area, (I don't need to thumbnails this!)
Only the bottom part is the frame so another crop is made to make it so we're only using the bottom part. So now we need our pieces. I'm only going to do text links to them, open them up, and Save these to YOUR HARDDRIVE. Do NOT DIRECT LINK. You get a funky little image that says You're a thief when you direct link.
The Top Piece
Sizes are done in pixels.
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(or the MAC equivalent to the free text editor). That way if you need to edit the code later, you know what you're doing. And you're not pampered. ^_^
<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 or a staff page may be staff.html
Now For my purposes I've called this site MiD Let's Make a Layout // There is No Cure ..//
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 uploaded on their site. (cleaner code is always a goal for me, makes it easier to find things later when you want to update. Sure someone can 'steal' your code, but honestly if they're doing that it means you did a good job)
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 tools/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">
Now with our case of an iframe we're going to use tables and iframes together. You can use iframes on it's own but it won't exactly know where to position the frame, it'll just put it starting whereever in your code it is.
Once we have this, we're going to move into getting our images onto the page. You can code an entire site through style sheets(for this layout we're going to use a vast amount of the style sheet, it makes centering easier and more comprehensible in firefox).
A few things to note, I call this a "iframes" layout but we still use div layers and tables in it. As it helps with centering and making things work in the manor we desire them to.
So onto the Next Part! We're going to start by centering our "table" (The one we haven't created yet) and to do this we're going to use a div layer. So the next line of code is this: <div align="center"> This code will simply center our text/table/page for us. We want a very centered table, after all anyone can align things to the left or right. Alright so our notepad code looks something like this: <html>
Depending on what you titled your layout, where your style sheet is located things might vary a little, but the overall appearance should be this. For the next Part... move onto the next page =P Let's Make a Layout(Tables!) Part One :: Getting Started
|
