How To Use These Layouts

Ok, apparently people are not reading the readme file include in the .zip file, or else my instructions in there are not very good. So, this is an expanded version of my basic readme file with hopefully more clear instructions. ^_^;

Notes: This tutorial was written for non-frame and non-iframe layouts. You can use it for them, but as I don't do them very often, I didn't see the need for a seperate tutorial when the steps are the same. It's just that the file names are different and some of the items are in different places. Click on the thumbnails for larger images.

Step One: Extracting the files

If you use WinZip, open the file you just downloaded in WinZip. You'll get a window looking something like this:

This is your main WinZip window. You'll see all the files listed there. Next, click on the Extract Button.

Ok, make sure the 'Use folder names' checkbox is checked, and pick a folder to put it in. You may need to make a new folder. I would suggest your Desktop, simply because it's easy to find, but if you have another spot, it doesn't really matter. Just remember where it is. ^_^

Extraction done! Now, lets put your information in.

Step Two: Modifying the files

I put this before uploading simply because some hosts are FTP only, and you have to edit these pages on your own computer. And really, it's easier to do that anyways. So I've divided this up to hopefully make it easier.

1. Modify the main content page.

The readme.txt file in the layout .zip file you downloaded will tell you what that is. Sometimes, I do a splash page so the main content file will be main.htm. Sometimes I don't, so the main content file will be index.htm. On frames and iframe layouts, it's something else entierly. So check the readme.txt file to find out what it is.

Once you know which file to edit, open up Notepad. This is found in Programs -> Accessories. If you have a good HTML editor (not Word!!!), then you can use that, but Notepad works just fine and it comes with your computer. Once in Notepad, go to File -> Open and open that main file. You'll have the change the file types to "All Files Types" to see it, but it'll open just fine.

2. Change the navigation links.
Look for the <!-- and the -->. These are comment tags, and they don't show up on the page in the web browser. I use them to let you know what is editable and what isn't. Makes it easier in the long run. Anyways, look for the <!-- navigation links --> tag. That will be the basic navigation that's on all your pages. Anything between <!-- navigation links --> and <!-- stop editing navigation --> can be anything you want! Keep in mind, however, most of the time the navigation links are a set width and/or height, so putting to much or in some cases images can mess it up. I always try to note that in the first navigation comment tag so that you'll know about it.

There will usually be another comment tag about a disclaimer. This will include my name and site link as the creator of the layout, but will also have a place for you to add your information if you wish. If not, take that line out, but please leave my link in there.

3. Change the content.
Ok, look for the <!-- start editing content --> and <!-- stop editing content --> tags. Anything between these two tags is the content that changes from page to page. I usually have a blog-type setup, which you can modify for news on the main page or take it out entierly. That's completly up to you.

Remember, don't edit anything other than what it says! If you do, you can mess up the layout itself, and that's not a good thing! ^_^;

4. Save!
Go to File -> Save and save your page! If you want to save it with a new name, go to File -> Save As and type the new name in the file name box. Make sure you add the .htm after the file name, otherwise it'll save it as a .txt file!

5. Create new pages.
Ok, now, the easiest way to make new pages is just to copy and rename the main file you just edited, and change the content. Do that for every page you have. One thing to keep in mind is that the navigation will remain the same across all the pages this way, so if you add or remove a link later, you'll have to edit all of your pages. Later, I may do a simple PHP tutorial on PHP includes to help solve this problem, but that's a little ways down the road. ^_^;

6. Modify the splash page (if present)
The splash page is pretty easy. The link to your main page is already there, but some people like to add sister sites or other things. Just open it the same way you did the rest of the pages and scroll down to look for it. Unfortunatly, I didn't comment most of them because the changeable parts are pretty easy to find.

They'll all look like that, so you should be able to find them pretty easy. ^_^

Yay! Your pages are done! Now, to get them on your server.

Step Three: Uploading to your server

Now, here's where it might get tricky. Since there are SOOOOO many options out there for webhosts, free and paid, I really can't tell you exactly what to do. But here's the steps you need to follow:

  • 1. Create an 'images' folder. Go to your main folder where this layout will be used and create a folder called 'images'.
  • 2. Upload your images. Go to whatever page/program you use to upload files to your host, and upload all the .jpg, .gif, and/or .png files. You may be able to upload them directly to the images folder you created, or you may have to move them one at a time. Each host is different.
  • 3. Upload your other files. Go back to your main folder where this layout will be used. Upload the .htm and .css files into that folder.

That's pretty much it! To make changes later, you can either edit the pages on your computer and overwrite them on the server (which is what I do so that I always have a backup) or just use whatever online editor your server has. Either way is fine.

Go Back

Graphics by Dubird, JadeSlash Graphics and © Dubird 1997-2011. All Rights Reserved.
Downloading and using graphics or resources from this site means you have read and agreed to our terms of service.