Joined: 14 Jun 2006 Posts: 860 Location: United Kingdom
Posted: Fri May 23, 2008 4:41 pm Post subject: NEW DIV/IFRAME TUTORIAL(S)!!!
PLEASE READ EVERYTHING:-
Rules
DO NOT MESSAGE ME ON MY HOMEPAGE ASKING FOR HELP!!!!!!!!!!!!!
- DO NOT SELL MY LAYOUT! I have made this tutorial to HELP people, I do not want to go to the graphics and arts forum and see people selling my layout which I have created a tutorial for, for free. It really annoys me.
- If you use my tutorial then a little credit wouldn't go a miss? If you don't know what I mean by that, I just mean please let people know that you used my tutorial to create your homepage! A button can be found at the bottom of this post which you can use to link to my tutorial on your homepage.
- Do not message me on my homepage, or through the forums asking for help... I have created this topic so that you can post to ask for help, other people who have HTML experience are welcome to help out aswell if they like.
- Please respect other people when posting on this topic. Especially me, it is my wishes that you keep polite in here, please respect that.
- Please do not use any of the images you see on this tutorial. All images were made by me and are for educational purposes only.
- YOU MUST FOLLOW EACH STEP AND READ INSTRUCTIONS CAREFULLY! Do not just go rushing through it and then complain loads when things go wrong.
Some things you should read before you continue these tutorials:
- These tutorials are designed for FireFox, you may try it in I.E or other browsers but I am unsure of how it will look.
- Previous HTML experience is an advantage.
- You must have the ability to follow simple instructions step by step.
- I do not offer web hosting or web space.
- The codes that I have provided have been tested and tried... any other codes that you choose to insert are at your own risk.
- I will be here to offer help, but please do NOT send me messages on my homepage or forum PM's regarding HTML help.
- I will not create graphics for anyone, sorry.
Introduction
Hey there, I have decided to create another version of my DIV/IFrame layout, the idea behind this is to help you to make a more complex version of a DIV/IFrame layout for your homepage on IMVU. If you do not know what a DIV/IFrame layout is then you can click here to view a very basic example.
These tutorials are here to help you make either one of the following two designs:
You will be able to view more details examples under each tutorial section. Also if you would like to request a different layout tutorial then feel free to ask.
With all of that said scroll down for the tutorials.
Last edited by on Fri Jul 18, 2008 9:11 am; edited 4 times in total
Joined: 14 Jun 2006 Posts: 860 Location: United Kingdom
Posted: Fri May 23, 2008 4:41 pm Post subject:
Example Step 1
The first thing that you must do is create the image that you would like to go in the box on the right. The image must be 350 pixels wide and 425 pixels high. You can do whatever you want to it, it is your homepage at the end of the day. Be creative, you could even request for someone to do it for you here if graphics aren't your thing. Click below to view my completed homepage image that I will be using for this example.
Step 2
The layout works using IFrames, IFrames are little boxes which have webpages in them. So now we need to create some webpages to be displayed in the IFrames on your homepage. The first webpage that we are going to make has the image on it.
Firstly you will need to upload your image to an image hosting website. Some websites that I recommend are:
There are more out there, but for now one of the above will do.
Now you must open up notepad. Notepad can be used as HTML editor. You can find it in Start > All Programs > Accessories > Notepad.
Paste the following code in to your empty notepad document:
Code:
<html>
<head>
</head>
<body>
<img style="position:absolute; top:0px; left:0px" src="URL OF YOUR HOMEPAGE IMAGE HERE">
</body>
</html>
Where it says URL OF YOUR HOMEPAGE IMAGE HERE, replace it with the URL of the image that you just created and uploaded.
Now you must save your notepad file. Go to File > Save As and save it somewhere you can find it, name it Image.html and choose All Files on the drop down list. It is important that you name it Image.html you must include the .html. You can see how to save below:
Step 3
Now you have made your first simple webpage for the image the next bit should be easy for you, right? You are now going to create 3 more webpages, this will be the content of your homepage.
Open up a new notepad document, if the other one is still open go to File > New. You are going to create a page for "About Me" where you can explain about yourself, a page called "Information" where you can put any info for people wanting to leave you messages, and also a page for "Home" where you welcome people to your page, and put any other schtuff. If you find this step ok to do then you can consider adding more or naming them differently, but for now we will keep it simple and stick with these three.
In the new notepad document put the following code, change the blah blah blah's to what you want it to say for the About Me page.
Go to File > Save As and name it About.html and change the file type to All Files, just like before.
Repeat this step for the Information page and the Home page, make sure you remember to name them differently. Name the Information page Info.html and the Home page Home.html.
Step 4
Now you have to upload your webpages to a server. This is so that the webpages can be visible to everyone on teh internets! There are a number of different hosts who offer a free service for you to upload your pages to, there is a list of hosts that I recommend below:
Step 5
Now that your webpages are set up you must create the buttons which people will press to view the different pages. I recommend making four buttons. You can see my buttons below:
You can do your buttons however you like... once you have finished your buttons, upload them to your image host like you did with the first image.
Step 6
On your homepage, drag your URL panel to the top of your page. In the url panel insert the following code:
Where it says YOUR HOME.HTML URL etc.. replace them with the appropriate pages. The ones that you uploaded to the webhost.
Step 7
Now it's time for you to pretty it up abit, however you wish. Add stickers or more images, it's completely your decision. You can hide any panels and also have them visible.
And voila! You have just made your very own IFrame layout. I hope you found this tutorial easy to understand and follow. If you have any questions please feel free to ask me here. _________________ DIPLODOCUS?!?!
Last edited by on Fri May 23, 2008 4:55 pm; edited 3 times in total
Joined: 14 Jun 2006 Posts: 860 Location: United Kingdom
Posted: Fri May 23, 2008 4:42 pm Post subject:
Example Step 1
Here's where things become a little more complicated. The first thing that you must do is create an image for your homepage. This image must be 900 pixels wide by 600 pixels high. You must use the template that I have provided below to create your image. If you do not, then the coding will not work as things won't line up correctly.
Template
Use this template so that your text box lines up correctly when inserting the coding. You can do any design that you like on it but make sure that you leave the left hand side blank. You can put your avatar image anywhere you like! Get creative, this is your homepage. You can see the image that I have made to use below:
Homepage Image
See how the box on my completed image lines up with the one on the template? Yours should be the same. I personally think it looks better if you create your image and make it transparent, this way the main page background will be seen through your image to give the page a seemless effect.
Step 2
Now you must start to create the buttons that you will be using on your homepage. You must think about the different pages that you want on your homepage. As this is just an example I have decided to make three pages. You may add more if you feel like you have the ability to.
The pages that I have decided to make are About Me, Information, and Home. Therefore I must make a button for each page and also a Message Me Button. You can see the buttons that I have created below:
You can make your buttons any shape, colour or whatever.
All images are complete so you must upload them to your own image host... I recommend:
There are more out there, but for now one of the above will do. Make sure that you upload all of your buttons and your 900x600 homepage image.
Step 3
Now that the images are complete it's time to start creating the pages that will appear in the box on the homepage. If you have done my previous tutorial before then you should know exactly what to do.
Open up notepad, notepad can be used as a very simple HTML editor. You can find notepad in Start > All Programs > Accessories > Notepad. Paste the following code in to your notepad document, changing the blah blah blah's to what you would like it to say for your About Me page.
Now you must save your notepad file. Go to File > Save As and save it somewhere you can find it, name it AboutMe.html and choose All Files on the drop down list. It is important that you name it AboutMe.html you must include the .html. You can see how to save below:
Repeat this step for the Information page and the Home page, make sure you remember to name them differently. Name the Information page Info.html and the Home page Home.html.
You should end up with three pages, like I have which can be seen below:
Now you have to upload your webpages to a server. This is so that the webpages can be visible to everyone on teh internets! There are a number of different hosts who offer a free service for you to upload your pages to, there is a list of hosts that I recommend below:
Step 4
Now it's time to put together all of what you have just made. Go to your IMVU homepage and drag the URL panel to the top. When your URL panel is at the top click on Edit and then click on Body background. Where it says URL for background image enter the URL of the main homepage image that you uploaded.
Now insert the following code in to the HTML part of the URL panel.
You must replace all parts that are in capital letters with the appropriate URLs that it tells you to.
Please Note: If things don't quite line up correctly for you, you could try to delete some of the <br>'s in the code... these layouts really are all about messing around with the code until you get it right, so keep trying! You could even add more <br>'s.. just have a play around with it xD
Ta da!! You have made your own IFrame layout in a more complex format. If you have any problems with this tutorial or with the codes that I have provided then please ask me for help! This is a brand new tutorial so I'm unsure of how it'll work out. _________________ DIPLODOCUS?!?!
Last edited by on Sat May 24, 2008 7:11 am; edited 3 times in total
Joined: 14 Jun 2006 Posts: 860 Location: United Kingdom
Posted: Fri May 23, 2008 4:42 pm Post subject:
Since a lot of people are having problems with uploading webpages I have decided to write a tutorial to teach you how to upload webpages.
Step 1
The first thing that you must do is go to www.ripway.com. On the top bar you will see a button called Sign Up, click it and follow the instructions to set up your very own free web hosting account.
Step 2
Now that your account is set up look on the top navigation bar for a button called My Files... click on it.
Step 3
Click on the Upload Files button, like you can see below.
Step 4
Click on browse and choose your HTML files that you made. Click on Upload.
Step 5
Now, your webpages have been uploaded! If you click on open you can copy and paste the URL of your page in to the code I have given on the tutorials... I hope this makes sense :B
Other Info
You can also edit what is written on your page through ripway!
Click on Edit Text as you can see on the screenshot above. Scroll down in the box and change the writing.
When you have finished writing you must make sure you click on Save Changes if you do not you will lose whatever you have written.
After you have pressed Save Changes you should be taken back to the following screen. Click on open as shown and refresh that page a few times.
Joined: 14 Jun 2006 Posts: 860 Location: United Kingdom
Posted: Fri May 23, 2008 4:56 pm Post subject:
If you found my tutorials useful and want to share them I have created a button for you to put on your homepage... xD!
Thankyou to everyone who uses this button, I really appreciate it if you do.
Just copy and paste the code on to your homepage!
Joined: 18 Mar 2007 Posts: 9641 Location: USA - MO
Posted: Fri May 23, 2008 5:17 pm Post subject:
I don't even use your codes, but I'm damn tired of people asking me to make a layout like what I have.
So I'll be slapping that little bannerbutton thingy on my page eventually.
I can't be bothered now.
And -ahem- in case you guys don't already knoooow...
Paula's thread has won an award. It is very official.
_________________ Sarah wrote:
It wouldn't be near as funny if you were straight.
Dak wrote:
CAUSE THAT WOULD BE CONSIDERED DOMESTIC ABUSE.
Having a few errors .......UM Well i have the buttons but they pop up in another browser also in my scroll box it shows the imvu community page??? Wich i have no link of an my picture thats suppose to be the background that your suppose to go like the edit body background set image the image wont show. An my boxes wont shoe only the imvu community page pops up in a box but my pic dosent shoe up thats suppose to be right next to the scroll box with the information an etc in Lolz sorry about the long message im just needin lotz of help with this im sleept its 12.01 am here i gusse i try to work on it 2 morrow.
Joined: 14 Jun 2006 Posts: 860 Location: United Kingdom
Posted: Sat May 24, 2008 4:39 am Post subject:
@Mommajack - Thankyou muchly xD
@channtice - I have nooooo clue how you ended up with your community page appearing lol, my code doesn't even include anything that should make that happen. If you double check the code and refollow each step see if things sort themselves out. If not would you be able to take a screenie for me so that I can see what's going on? xD This is the only problem with new tutorials... BUGS D: lol
@dot - Fanks bb ily2 <3
@Fudge - I'm glad you like the new tutorial xD did you find it easy to follow or do you think I should add more details? I'm kinda looking for feedback on tutorial number 2 I wanna know if people find it easy or not :B _________________ DIPLODOCUS?!?!
Joined: 11 Jan 2007 Posts: 93 Location: United Kingdom
Posted: Sat May 24, 2008 5:18 am Post subject: ..........
No trust me .. it worked perfectly xD
dont add more detail... be more to read n understand
d/w hun tis fine
can we chat on CLINET plz?
i need to ask u couple questions plz? _________________
Wow Destiny this tutorial is great! You really do have a way with explaining things for other people to understand. Ill be lurking around in case people need any help.
All times are GMT - 8 Hours Goto page 1, 2, 3 ... 91, 92, 93Next
Page 1 of 93
You can post new topics in this forum You can reply to topics in this forum You cannot edit your posts in this forum You cannot delete your posts in this forum You cannot vote in polls in this forum
FAQ
Memberlist
Usergroups
Register
Profile
Log in for private messages