Planning Ahead

It's a good idea to plan out your site before you begin building it. This will help you avoid lots of extra work in the long run. Going low-tech works best for this, so grab a pencil and paper! Think about the components of your site, such as the layout, text, images, and overall feel. Visually map out your site's files and directories, and how they're going to link to each other. It's a whole lot easier when you know where you're going, rather than making it up along the way.

Files and Directories

A good way to remember the difference between files and directories is to think of it this way: A directory is like a "folder" where your files are stored, and a file is like a "piece of paper" that could be an HTML page, an image, a music file, or some other item. A directory can contain many files.

When you first log in to the Web Shell, you'll see a file called index.html, and a directory called /images. The index.html file is the first page of your site. The /images directory is where you can store the images you'll be using on your site. You can create additional directories to help organize your files, and you can create additional files to add pages and content to your site. The Web Shell is like a cabinet that holds all of your folders and files and keeps them organized.

More about index.html

The index.html file is the first page people will see when they type in your URL. For example, when you type in: www.angelfire.com/electronic/newbietutorial/, the web browser looks for www.angelfire.com/electronic/newbietutorial/index.html. This is a web standard, like it or not. If you've already made a site, and you've named your first page something else (some common ones are: main.html, page1.html, or mypage.html), make sure to go back and rename that file to index.html with a lower case i. The Web Shell's Rename button makes this a simple process.

Editing Options

The Web Shell is a file manager with an interface that lets you upload files (HTML, CSS, Images, JS, etc.) and/or create and edit HTML/CSS files. There's a Basic version, for those of you who want to use HTML, but will need some help along the way. And an Advanced version, where you get a clean slate that you can write your own HTML in, or copy and paste HTML templates from our template library to give you a head start.

Using the Basic Editor

To start building your first page, log in to the Web Shell. Highlight the index.html file, and click the Edit button on the Web Shell toolbar. You'll be given several choices as to the layout and content of your page, using our Basic Editor Standard template. Once your choices have been selected, click the Save button. This is where the content editing begins!

The rest of the Basic Editor is fairly self-explanatory, but there are some things to note. First of all, if you're going to use any images on your site, you'll need to put them in your Angelfire directory. The Web Shell's convenient uploading feature can be used for this.

Uploading Images

In order to display images on your Web pages, you'll need to upload them to your Angelfire directory first. Next, you'll create a reference to the image that tells the browser where to find the image to display. Most people decide to store their images in the /images directory that we provide. You don't have to do this, but it can help you keep your site more organized. Just remember that if you put your images in the /images directory, you'll need to reference them like this to display them on your pages:

images/mypicture.gif

If you leave them in your top level directory, reference them like this:

mypicture.gif

In any case, make sure that you DON'T put in an extra slash, like this:

/images/mypicture.gif

The extra slash will reference Angelfire's top level directory, instead of YOUR account, and your image will not show up on your page.

Switching to the Images Directory
To place images in your /images directory, you'll need to highlight the /images directory, and click the Open Directory button. This will show you what's contained inside that directory, and allow you to add or delete files from the contents.

How to Upload
Once the directory is opened, you can use our Uploader to copy your images into this directory in your Angelfire account. If you have more than one image to upload, use our multiple file option to save time. Once you've selected all of your images, click the Upload button, and the files will be copied into your /images directory. To return to the top level directory, click the small blue folder icon on the toolbar.

Adding New Pages

You can create additional pages for your site by using the Web Shell tool. To create a new page, be sure the New File radio button is selected, then type the new file name into the File/Subdirectory Name field (don't forget the .html extension!) and click the Create button.

In the Create A New Page screen, select the Basic editor, choose a layout and colors, then hit the Submit button. The Basic Editor screen will appear and here you can customize your new page. Follow the steps listed in red and click Save. If there is a particular feature you don't want on your page, just leave the field blank and it will not appear.

Linking Your Pages

For visitors to navigate your site, you'll need to link all of your files together. Links can also be used to bring visitors to an outside page. In the Basic Editor, if you wish to add links, you'll need to type the URLs, or web addresses, for the links in the text boxes. Don't worry, this is easy! To link to a page within your site, use this format: page2.html (links to page 2 of your site) To link to a page elsewhere on the web, use this format: http://www.lycos.com (links to Lycos).

Saving & Updating Files

Saving Files

Save as often as possible! There is nothing worse than spending two hours working on your site and having something go wrong. Just click the Save button on the editor screen. Once you click it, you will be brought back to the main Web Shell screen.

Updating Files

Updating your site is no different than the first time you worked on the files, only now you'll have more files to work with. Highlight the file you wish to work on and click the Edit button.