Psychotic Princess
The Ranting Tales of a Raving Lunatic...
I have received many requests from my visitors asking how to create the intro page on my website. Below you will find the instructions to make it work specifically for Freewebs Site Builder accounts, as well as the file you can use to get the exact same effect I used.
The Basics
I will get into greater detail below - here is just a basic step by step of what we're going to do to create your intro page.
Remember these instructions are specific to the Freewebs Site Builder. Freewebs, by default, makes a Home page in your Site Manager. Although it is not listed in the File Manager, the corresponding HTML file is called 'index.htm'.
Notice the difference between the name of the file in step one - index.html and the name of the Home page file created by Freewebs - index.htm. Although they seem like they are named the same, because of the shorter file extension in the file created by Freewebs (.htm is called a File Extension) actually ensures that two completely separate files are created.
Now that I've thoroughly confused you, lets go through the step by step process in greater detail.
- Create an HTML file on your computer called index.html
- Upload the file to your File Manager
- View your site
Remember these instructions are specific to the Freewebs Site Builder. Freewebs, by default, makes a Home page in your Site Manager. Although it is not listed in the File Manager, the corresponding HTML file is called 'index.htm'.
Notice the difference between the name of the file in step one - index.html and the name of the Home page file created by Freewebs - index.htm. Although they seem like they are named the same, because of the shorter file extension in the file created by Freewebs (.htm is called a File Extension) actually ensures that two completely separate files are created.
Now that I've thoroughly confused you, lets go through the step by step process in greater detail.
Creating the Intro Page
You can download the HTML file I used for my intro here. Save it to your desktop so you can find it easily.
The file is called "splash.html" right now, once you're done editing it, you will have to save it as index.html.
Editing the File:
The file is called "splash.html" right now, once you're done editing it, you will have to save it as index.html.
Editing the File:
- Right click on the file on your desktop, and you should have the option to "Open with..."
- Select Notepad from the list of programs to use. Make sure "Always Use this Program to Open These Files" is not checked.
- Notepad will open an extremely intimidating file full of HTML code (or to the beginners gibberish). Take a moment to actually read the code. It's actually not as scary as it looks.
- Where you see "Your Title Here", change that to the title of your website. For instance, the title of my website is "The Ranting Tales of a Raving Lunatic"
- Add your own Meta Keywords and Description. These help search engines find you. The description is what shows up when your site is listed in a search engine.
- Edit the body style
- background:url(http://www.address.com/filename.jpg); - replace http://www.address.com/filename.jpg with the URL of your image. If you're not sure what it is, go to the File Manager, locate the image file listed there, right click on it, and select properties. You will see the address/url. Copy and paste that into the file. You don't have to use an image if you don't want to. Just delete the url.
- background-repeat: no-repeat; - this is for the placement of your image. no-repeat means the image will only appear once. Replace with repeat-x if you want the image to repeat horizontally or repeat-y to repeat vertically. If you want the image to tile the entire page, use repeat.
- background-position: top left; - this only applies if you're using the background-repeat property. Top is the horizontal placement (top, middle, bottom) and left is the vertical placement (left, center, right)
- background-color: #FFFFFF; - the hex color of the background. Need colors? Try out the Visibone Color Chart
- Edit the var intervals=5000 - this is how long each message will appear in miliseconds (for instance, 2 seconds would be 2000)
- Edit the var targetdestination - this will be the page the intro page redirects to. For instance, if you want it to go to your Site Manager's home page, it would be http://www.freewebs.com/username/index.htm
- Edit the var openingtags - this is the font style of the text in the splash message. If you're not sure, leave it as is
- Edit splashmessage - this is the text and images that will appear. If you want to add more splash messages just add another line under splashmessage[3]=' ' of splashmessage[4]=' ' and add your text/images between the ' '.
- Scroll all the way down to the bottom of the page where you see the comment to "Set href in below link to the URL of the target destination" and be sure to do that. The target destination should be the same as it was in var targetdestination(step 5).
Saving the File:
- Go to File, Save As... in Notepad
- Change "Save As Type" to All Files
- Save the file as index.html - this is crucial. If the file is not named exactly that, it wont work.
Uploading the Intro Page
Uploading the File:
- Log into your Freewebs account
- Click Build and Edit then click File Manager
- Select Upload a File
- Browse to the index.html file you just saved on your desktop
- When the file is uploaded, it will take over as the default page viewed when you click View my Site or when people type in your site address
Troubleshooting
My Site Is Gone!!
If you try to view your site and run into problems, don't worry your site is not gone!
This most likely means there is an error in the intro page you created. The first thing to do is go to your File Manager and delete the file called index.html. Then, you can comfortably check the index.html file on your computer for errors, and people will be able to access your site.
To check the file for errors, start back at Creating the Intro Page
The intro works, but it doesn't redirect to my website!
That means the URL in the var targetdestination (step 5) and the URL in step 8 is wrong. Check the URL for typos, and make sure you've put an address that exists. If you're not sure what the address of your home page is, click the View my Page icon in the Site Manager, and copy the address from your browser's address bar.
