Welcome to ms.sd.net! A few resources here and there, long meaningless blogs and a whole lot of other junk. Enter my contest?
Well, anywho, you can view this website in almost any browser.. It turns out a little funny in Internet Explorer, but it's still viewable. Sorry all.
Everything on MS.SD.NET is copyright to SHANNON! Don't even think about stealing or my monkey will eat your head...
Okay, you caught me, I don't have a monkey, BUT, still, don't steal, redistribute or copy anything on this website!
Or any website for that fact.
Coding a website with Iframes
So, it doesn't work that well with Piczo because of their stinkin' ads, but it goes well with many other free hosts like
Freewebs! In this tutorial I will take you through the steps into coding
a website with Iframes!
What is an Iframe?
An Iframe is really just another frame or window-like box on your homepage. This is so that all of your links will show up in the
Iframe. It's easier than it actually sounds, let get started!
Getting started
To start off, make these pages, with these names exactly:
+ index.html
+ blog.html
+ nav.html Along with these pages, also open Notepad, a Windows default program (most computers have it). You can find it by clicking
START > ALL PROGRAMS > ACCESSORIES > NOTEPAD. Got it? I'll explain the CSS page first.
You've hopefully made those pages now and opened Notepad, so let's continue.
CSS
Or Cascading Style Sheet. Your CSS helps you put colour into your site. Like the colour of the scrollbar (which you cannot
see in programs like Mozilla Firefox or Safari), the colour of your background, text, links and even your bold, italics,
underline or strikeout text! CSS is awesome and super duper helpful! Here's a CSS code, just copy and paste it into
the CSS document that you opened up earlier.
Now, that is my CSS, so you may want to change the colours. I'll explain bits and pieces of it, here we go, starting from the top!
Each section that I'll explain has a space between them so that you could tell them apart.
Background colour Go to where it says {BACKGROUND:url(http://img219.imageshack.us/img219/5282/bgblueew7.png) repeat} in the CSS code.
Change where it has http://img219.imageshack.us/img219/5282/bgblueew7.png with an 100x100px background. It can be a pattern or
even just a solid colour. You've just changed your background colour! There's also a line below with a colour code showing
a (#) with six numbers following after. Replace the site numbers with the background colour if you have a solid colour.
Text and pointer The next section is really simple. Change your font. Don't put it as some fancy font though. This is the font that
everyone's reading. I usually set mine to something like Arial or Tahoma. They're both very common and easy to read.
The font colour just has to be easy to read on your background. Simple as that. For your pointer, you can find some
here. They're the windows defaults, if that's okay. xD
Scrollbar colours Super simple here, just put in colour codes. I usually put them all the same, that way it matches my background :)
Textarea These are your textarea colours. Really simple, background colour, text colour, easy peasy.
Text formations Bold, italic, strikeout and underline. Keep everything the way it is, except the colour codes. Change them. And, by the way,
b= bold, i= italics, s= strikeout and u= underline, just incase you can't read.
Link Change the colour, font, decoration or anything. This is for a link, just how you see it.
Hovered link Same as above, except this is what your link will look like once you hover your mouse over it.
Header Change the colour, font, etc. If you would like a header image, like mine, just change the url. Simple and just plain easy.
Your header code is:
Now that you've finished with that, save the document as style.css. Exactly that. Now upload the file to your File Manager
or whatever you're using.
To put your CSS onto every page, put this code on the top:
But you'll learn more about that later! And that's your CSS!
Index.html
Let's work with the index page. This is your homepage. The page that everyone sees when they first come to your site.
Let's get started. First, let's copy and paste this onto your page entitled index.html.
That's one heck of a code! Here's what you need to change:
+ Change your title bar text with your own where it says 'TITLE HERE'
+ Upload your header image and your background image to a freesite like www.imageshack.us,
insert the header image url where it says http://www.HEADER PICTURE URL GOES HERE.png
insert the background image url where it says http://www.BACKGROUND IMAGE URL GOES HERE.png.
Ensure both the header and background image source includes "http://www."
Now for the very important part. Positioning your iframes.
Well, I guess this is just as important as everything else when you're coding, but it's really important to know where you put
your frames. First, let's position your blog/content. Search for this in your document:
Now edit it. Change the width, top and left dimensions. Leave the height at 3000, unless you want a scrollbar or if you have something like a small box
for content, but having it long is good.
Easy, right? Do the same thing, but this time, search for this:
Now, save this page and go to blog.html.
Blog Page
Making the blog and navigation (nav) pages are really easy. First, I'll explain setting up you blog page.Paste this code onto the page:
Do not change any of this code past where it says
! That is very important. Just leave the code, but write your blog underneath.
This is for people who blog manually, which most Freewebs users do. Now save this page and open up
nav.html.
Navigation bar
Again, this is so simple!! Here's the code:
And once again, do not edit from
and before that!! Simple, eh?
Other notes
Just because I've just explained a million, bajillion things to you, it doesn't mean that there can't be more! Here are just a few extra notes...
+ Every page will have the blog template
+ Here are some templates for links that you'll need:
When linking to the blog...
***Clue: You don't need to typ the whole link out! if I wanted to put this link:
http://murderscene.sodevious.net/iframetut.php I would actually only have to put:
iframetut.php When linking to a new window...
***Make sure that any pages leaving the website have the http:// included with the link!
+ If you need any furthur help, just email me at shannerdy@gmail.com, subject line: Iframe Help or use a form!
Shannon
Murderscene
Nicole
click
form here
23 blogs
