Let's Make a Layout
So we're through the tables part, but we're not even at the difficult part... aren't you excited? I'm sure you are.
iFrames can be considered the easiest part and the hardest part. I find memorizing the code for an iframe annoying, I typically have it once and then just use the same code altering it.
So I'm giving you the iframe code, and in the future you can either memorize it for other use or you can just do as I do, save it, copy and paste then alter.
So let's take a look at what an iframe code looks like:
<iframe src="main.html" width=311 height=264 name=main frameborder="0" scrolling="auto" style="FILTER: chroma(color=#553A6E)" allowTransparency><frame src="main.html"></iframe>
Looking at this we know we have a few properties to set. We're going to want to set the src(location of the initial page) width, height, name, frameborder, and scrolling. Then we're going to add a style Filter, this will be to make the scroll bar transparent.
So let's start with main frame. In your index.html code I want you to find this:
<td class=mainframe></td>
Now we're going to add the iframe code inbetween the td and the /td tag. So that code should look like this right now:
<td class=mainframe><iframe src="main.html" width=311 height=264 name=main frameborder="0" scrolling="auto" style="FILTER: chroma(color=#553A6E)" allowTransparency><frame src="main.html"></iframe></td>
Obviously if we were to save and then preview our page we'd have a frame that didn't fit and gave us a page cannot be displayed error. So let's fix this up. First of all what we want to do is fix the properties in the iframe code.
src="main.html" this one is alright to leave as is, this tells us that the initial page to load in the frame is called main.html. We're going to create this page after.
width=311 if we check in our css for the td.mainframe width we'll know the width is 461px so we're going to change that to width=461
height=264 again we know the height from your css for td.mainframe is 325 so we're going to change this to height=325 this way our frame now matches the size of the cell that it's nestled in.
name=main This is the name of our frame, for our purposes we don't need to change this because main will suit the name of this frame. (This is used for linking)
frameborder="0" Again we don't want a border around our frame so leaving this as 0 is good.
scroll="auto" if this were a frame that remained a certain size and never changed we would set the scrolling to "none" but it's not. We want people to scroll to view the page, so we leave the scrolling at auto.
style="FILTER: chroma(color=#553A6E)" allowTransparency This is what makes it so our scroll bar can become somewhat invisible. However this is an IE function, it does not work in firefox. Firefox does not allow the altering of scroll bars. the color=#553A6E is the color we would set anywhere in the css where we want something to be transparent. However if the transparency doesn't work the color #553A6E will show up. So it's best to make sure this is a color that still suits the webpage. (We still have to go back to alter our code so that the transparency will work properly, but we'll get to that when we talk about the transparency in the CSS)
So now this piece of the code should look like this(Depending what you set that color to I set mine to #76CBAE):
<td class=mainframe><iframe src="main.html" width=461 height=325 name=main frameborder="0" scrolling="auto" style="FILTER: chroma(color=#76CBAE)" allowTransparency><frame src="main.html"></iframe></td>
Simple ne?
However, we're still getting a page cannot be displayed error, so let's remedy that. Open up a new notepad page and add the following code:
<html>
<head>
<title>MiD Let's Make a Layout // There is No Cure ..//</title>
<link rel="stylesheet" href="stylemain.css">
</head>
<body>
</body>
</html>
Now save it as main.html
There we go, now we don't get a page cannot be displayed error, we just have a blankpage. (We'll come back to make it none blank, we still need to fix up the other iframe.) If you still see the page cannot be displayed error, close the browser window and then open the page again. It'll fix the problem. Also if it mentions anything about Active X controls just click the information bar and click "Allow blocked content" it's not blocking anything right now but the bar is ugly.
Okay so one iframe done, let's get the second one on there.
So in your html code (index.html) I want you to find this:
<td class=linkframe></td>
And in between it we're going to add in our iframe code. So that this section of code now looks like this:
<td class=linkframe><iframe src="main.html" width=461 height=325 name=main frameborder="0" scrolling="auto" style="FILTER: chroma(color=#76CBAE)" allowTransparency><frame src="main.html"></iframe></td>
This time we're going to have more properties to change. So let's start in on it shall we!
src="main.html" here we want to change where this frame links to. We don't want the main page to show up in both places, so let's change that to links.html as this piece was designed to hold our links. src="links.html"
width=461 using our css and referring to td.linkframe we will know our link frame's width is 127 so we'll change that width=127
height=325 again our css for td.linkframe tells us the height of where we're putting the frame is 281 so we're going to change this to that. height=281
name=main before leaving the name as main worked, we can't have two frames named main or our links won't know where to go, so we're going to name this frame links. (KISS rule <3) name=links
frameborder="0" Again we don't want a border so we don't need to change this.
scrolling="auto" we want users to be able to scroll when needed so we'll leave this.
style="FILTER: chroma(color=#76CBAE)" allowTransparency This doesn't have to be changed, it can remain the same or it can be changed. Again the #76CBAE will be the color that if used in the CSS will be transparent. It's always best to use a color that will look good with the layout if the transparency doesn't work but will also not be a color you'll want to use anywhere else.
Also it's important to change both src's to links.html
So now this piece of the code should look like this(Depending what you set that color to):
<td class=linkframe><iframe src="links.html" width=127 height=281 name=links frameborder="0" scrolling="auto" style="FILTER: chroma(color=#76CBAE)" allowTransparency><frame src="links.html"></iframe></td>
Right so again we have a fitting iframe but we still have a page cannot be displayed error... so open up a blank notepad and add in the following code:
<html>
<head>
<title>MiD Let's Make a Layout // There is No Cure ..//</title>
<link rel="stylesheet" href="linkmain.css">
</head>
<body>
</body>
</html>
Now save it as links.html
There we go, now we don't get a page cannot be displayed error, we just have a blankpage. If you still see the page cannot be displayed error, close the browser window and then open the page again. It'll fix the problem. Also if it mentions anything about Active X controls just click the information bar and click "Allow blocked content" it's not blocking anything right now but the bar is ugly.
Alright so all the coding for the index.html file is done, you can close the notepad version of it. We're not going to edit it anymore. The rest of our work involves the three CSS files we call to. style.css, stylemain.css, and stylelinks.css
So let's move to the next section so we can format them to be pretty.
Let's Make a Layout(iFrames!) Part One :: Getting Started
Let's Make a Layout(iFrames!) Part Two :: Tables
Let's Make a Layout(iFrames!) Part Three :: iframes
Let's Make a Layout(iFrames!) Part Four :: CSS
Let's Make a Layout(iFrames!) Part Five :: Final Touches.
| 
.jpg){kind=icon}
