• Why web mania?
• I have a business can I have my own web site on Web Mania?
• Where do I start?
• I am registered what next?
• How do I create my web site?
• What is the difference between Site weaver and HTML weaver?
• Ok I am ready to start building my site where next?
• Ok so now I have a web site how do I change what is displayed on it?
• Why does one of the pages need to be called index?
• I want images on my web site how do I do this?
• Can I FTP my site to the server?
• What are all the options on the edit your site page?
• What is my web site address?
• What are plugins?
• How do I add a plugin?
• How do I plan my web site and why is it important?
• What is Site-Weaver and how do I use it?

Web Mania is a free web site where you can create your own web site and host it for free. At webmania.co.za creating your web site is easy you can either use Site-Weaver or HTML Weaver. There are plugins that you can use to enhance your web site such as Image Gallery or create some cool additions with a Guestbook, Forum or run a Poll. If you need something faster and on the cutting edge of web sites you can create and maintain your own Blog.

Yes you can. Please do, however Adult content is not permitted. Send your new web site address to everyone. You can advertise your products or services via your web site and this gives all businesses a free platform to advertise their wares.

The starting point is to register using the "Register" link on the top of the home page

Start working on creating your own web site or blog or both. For tips on how to plan your website [ click here ]

You need to login and decide whether you are going to use Site- weaver or HTML weaver to make and use your site. By choosing one of these editors you need to move onto setting up your web site.

Site weaver does all the code for you by simple clicks. The HTML weaver is for the more advance developer, here you will need to do your own HTML code. This is great for people that want to create there own web site using there own HTML editors and copy and paste the code into HTML weaver thereby creating their own sites.

Next you need to create pages in your site. Lets use site-weaver for our example:

Reason is that web a web browser goes to a directory the default page is called index. Without this you will need to specify the actual page you are looking for or none can be displayed.

First you need to upload your pictures this can be done from the edit your site page. On the edit your site page you will see a link that says upload files. By clicking this a new page will open. By clicking browser the browser will browse your computer for files on it. You just click in the file name box to be sure your files have a name when they reach the server. Select which file you would like to upload and give the file a name. You can upload up to 10 files at once. Once you have selected the files you would like to upload you must click upload files at the bottom of the page.

No you cannot you must use the upload function or by using the HTML-weaver and copy and paste code.

Access Site-Weaver - site weaver is where you can edit your files
Create Site-Weaver Page - you can create a new page
Access HTML-Weaver - this is for advance users
File Manager - this is the brains of your site where you can change file names or delete them
Upload Files - upload your files to the server
Spider Files - advance users who have a web site and want to copy files over
Perform Backup - prefer a back up of your site
View Hit Logs - see stats on your web site
Check Spelling - check the spelling of your web site
Check Links - check the links of your web page
Submit Site- submit your site to the search engines

Your web site address is in the middle half way down on your "Edit Your Site" page. Once logged in click "Edit Your Site" and this page will be brought up. You will see - " Your web page can be viewed here:" with your web site address below it. You can send this your web site address to family and friends so they can visit it.

Your web site URL is made up as follows: (example)
Main part: www.webmania.co.za
Community you live in: Baby Mania
Username: Skye

www.webmania.co.za/babymania/skye

Plugins are "packets" of code that are added to a web page to do some awesome automatic add-ons such as a guest book, poll or a forum depending on what you want to do with your site.

When you are in edit mode of your web site there is a Plugin link in the middle of the page. By clicking on this link a plugin menu will open. When this menu opens you have a choice of plugins. Once you have selected the plugin that you want to add, it will return to your page. Once it has opened you will see buttons saying "add here". Choose the "add here" button in the place you would like to add it. Some of the plugins are "editable". This means that you can click on the "placeholder" and make some changes or adjust the settings. If a plugin is editable and "edit" button will appear below the "placeholder". The "placeholder" is set where your plugin will run in your page. Click and view the site in normal form and you will see the plugin in action.

Putting a plan together before designing your website will make the design process smoother and far more enjoyable. To see an example of how to plan your website [ click here ]

Site-Weaver is a WYSIWYG (What You See Is What You Get) editor, meaning that it works visually. You can move and place elements in a page, which in turn will be transformed into special HTML coding by Site-Weaver.

There are two basic frames within Site-Weaver that you should be aware of. The smaller frame contains a Tool Bar made up of the various instruments at your disposal. The much larger frame is the Work Area, where you will build your actual page. If you have created a page using one of our themes, then the theme should already be in the Work Area.

Before we proceed to go through the various Tool Bar elements in detail, let's first cover some basics of the Work Area, since it is important to understand how Site-Weaver works before learning any specifics.

The Work Area of Site-Weaver

Every page that you will use to build your web site is made up of an invisible table - a series of 8 rows by 5 columns for a total of 40 cells. You can get a very quick, clear view of this table by clicking on [Table Cell], the very last item to the right on the Tool bar above the Work Area. It is into these 40 table cells that you will be adding your content.

Now that you have looked at this briefly, click on [Done] to return to your Work Area's main page. When you first see the Work Area, it will contain a default set of images, text, and links that you will want to replace with your own. Each of these items take up one cell each, and the cell stretches to fit that item. Next to each item, you will notice an [Edit] button. As you add your own content to the page, a new [Edit] button will appear next to each of your new items.

Example: if you add a picture in one cell, and then want to add a text caption underneath it, there is no need to add the text into a new cell. When you add the picture, two new edit buttons appear , one for placing something above the picture, and one for placing something below. You can use the lower one to add the text caption.

The [Edit] buttons will always be present, and after you've added a piece of content, you can use that button to edit the content (i.e. correct spelling, change the name of the picture, etc).

The Tool Bar of Site-Weaver

There are 11 items to be found in the Tool Bar. The first of these is a link back to the Main Menu, or Introductory Area. The other 10 represent tools that are at the user's disposal. They are. . .

• Add Text
• Add Picture
• Add Link
• View Page
• Plugins
• Move
• Copy
• Delete
• Page Properties
• Table Cell

Clicking on one of the [Add Here] buttons will open the "Edit Text" window in the Work Area. There will now be a single [Cancel] button in the toolbar instead of the regular tools. Selecting it will return you to the standard Work Area view without saving any changes.

The page is divided into two sections, and there are several elements that must be decided upon in each:

Add or Edit your Text Here - is primarily a large text field. This is where you will enter whatever text you wish to add to your page.

Preserve Blank Lines - located directly beneath the text field is a checkbox. If you have hit the [Enter] key within the text field and it has created blank lines, the program will normally strip these lines out. These blank lines will only be preserved and translated onto the page if you have the checkbox filled in. However, if you are entering code, or do not want line breaks in your entry for some other reason, you can leave the box unchecked.

SpellCheck - also located beneath the text field, this link will open a new pop-up window displaying any words entered into the text field that are not recognized by the dictionary, as well as possible substitutions.

Finally, there are two buttons that go with the text field. They are [Done] and [Clear]. [Done] will save your text and use the default settings for text size, color, etc. [Clear] will wipe out the contents of the text field. Any settings past the [Done] and [Clear] buttons are optional and are set to default values. If you want to specify text settings that are special to this text, you can scroll down to the lower half of the page. If you want the text settings to run off of the default, you can ignore the lower half of the page and click the [Done] button.

In the lower half of the page is an area where you can "Adjust the Text Settings". It allows you to assign special qualities to the text that is being added. By special qualities, we are referring to the following:

Font Face - Times New Roman, Courier etc

Font Attributes - Bold, Underlined

Font Size - 8, 9, 10

Font Colors - this is actually a color chart with corresponding color # beneath it. You simply have to click on a color in the chart to select it.

Paragraph Alignment - This is a drop down menu with the options on how you would like to align your text: to the left, to the center, or to the right.

If you want to circumvent your defaults, then this is where they do it. For example, you may want to make this particular set of text larger and more colorful than the rest of the text on your page.

There is a second [Done] button, this one at the very bottom of the window. Clicking on it will save any entries/edits made.

From now on, if you click on the [Edit] button next to this bit of text in the Work Area, you will be brought back to this exact same page, where they can update the information entered.

Clicking on one of the [Add Here] buttons will open the "Edit Picture" window in the Work Area. This window consists of a form for entering the needed information, and is an easy, step-by-step process:

Picture Url - the location of the desired picture must be entered into this field. If you are not sure of the location, you can click on [Browse]. This will open a new pop-up window that will allow you to browse through the files in your File Manager.

In that same pop-up window, there are two buttons in the top-right corner: [Upload Files] and [Spider Files]. If the image file that you want is not already in your File Manager, no problem. You can easily retrieve it from your personal computer using the [Upload Files] button, or from the Internet using the [Spider Files] button. The interesting thing is that once you have uploaded or spidered the desired image file, the file will appear in the pop-up file manager right away. All that you need to do is simply click on the image link in the pop-up and voila! It fills in the Picture Url and the image Height and Width automatically for you on your main page.

Height and Width - this information usually appears automatically when a picture location is entered. These fields must have values in them in order for the picture to be displayed properly.

ALT text - this is alternative text, which will appear if for some reason the image is unable to load properly. People using text-based browsers will see this regularly, and it will appear if you hold your mouse over the image for a short while.

Top and Bottom Space (a.k.a. VSpace, VerticalSpace) - this is the amount of space (in pixels) that you want above and below the picture. The higher you set your VSpace value, the more row space it will take up.

Left and Right Space (a.k.a. HSpace, HorizontalSpace) - this is the amount of space (in pixels) that you want to the left and right of the picture. The higher you set your HSpace value, the more column space it will take up.

Make This Picture a Link - by filling in the checkbox next to this message, you will be able to make the picture that you are adding a link (to another page). If you are using Internet Explorer, when you fill in the checkbox for making your picture a link, more options will appear (through the magic of Dynamic HTML). If you are using Netscape, they will already be apparent. These new options are:

Link Url - the address that you are linking the picture to.

Test Link - located to the right of the Link Url field, when you click on it a new window opens up the link that you have specified. This lets you make sure that the link is not broken or pointing to the wrong spot.

Show the linked page in - lets you decide whether the link opens in the same window, a new window, or a pop-up window.

Align Picture - a drop-down menu that allows the user to choose how they want the picture aligned: to the left, to the center, or to the right.

From now on, if the user clicks on the [Edit] button next to this picture in the Work Area, they will be brought back to this exact same page, where they can update the information entered.

Clicking on one of the [Add Here] buttons will open the "Edit Link" window in the Work Area. The page is very similar to the "Edit Text" page, but there are some major differences:

Enter the text that your visitors will click - is primarily a large text field. This is where you must enter the text that will be clickable (i.e. Click Here!). Just below this text field are two buttons, [Done] and [Clear] the former saves any additions/changes and the latter clears the contents of the text field.

Link Url - the address that you are linking to.

Test Link - located to the right of the Link Url field, when you click on it a new window opens up the link that you have specified. This lets you make sure that the link is not broken or pointing to the wrong spot.

Show the linked page in - drop-down menu that lets you decide whether the link opens in the same window, a new window, or a pop-up window.

In the lower half of the page is an area where you can "Adjust the Text Settings". It allows you to assign special qualities to the text that is being added. If they want to circumvent their default text settings, then this is where they do it.

Please note that unlike the "Edit Text" option, the "Edit Link" option does not have a color palette or an option to underline the text. This is because all links are underlined by nature and must be the same color (the color of all links must be specified under [Page Properties]).

Selecting [Plugin] from the Tool Bar will open up a new window that contains a list of all available plugins. The word [Add] appears next to each. Clicking on [Add] will start the process of adding one of those plugins.

Please note that you can click the 'HELP' link on the Plugins page to get more specific help about our plugins.

After selecting which item you are moving, by clicking on [Move This], the Work Area will reload to display a series of [Move Here] buttons, located in areas of the page where there is room for something to be added. These allow you to decide the exact location on the page that you would like to move your item to. You will also notice a single non-clickable button named [Move From Here] in the page. This represents the current location of the item that is being moved; it lets you know where you are moving the object from.

Pressing on one of the [Move Here] buttons will automatically move the item to its new location and bring you back to the page that contains [Move This] buttons, with the newest layout displayed. If you decide that you don't like the new location of the item or if you choose to move something else, you may continue moving things until everything is the way you want it.

In order to return to the standard Work Area, you must click on [Done] in the Tool Bar area.

In order to return to the standard Work Area, you must click on [Done] in the Tool Bar area.

The Work Area will reload the page that contains the [Delete] buttons, with the newest layout displayed. You may continue deleting things until everything is the way you want it. In order to return to the standard Work Area, you must click on [Done] in the Tool Bar area.

Document Title - the name of the page
Document Description - a brief and accurate description of what the page is about.
Document Keywords - keywords that are related to the site's content. If listed in search engines, these will help people find the site.

Alignment - controls whether the table appears centered on the page, to the right or to the left.
Border - you may choose to have the border of the table visible, the number represents how many pixels wide the border should be.
Cellpadding - this controls the amount of space (in pixels) between the contents of a cell and the cell walls.
Cellspacing - this controls the amount of space (in pixels) between one cell and another. The higher the number of pixels, the further apart your cells will be.
Width - represents the width of the table. This can either be either a percentage (of the window) or an integer (representing # pixels).

Background (URL for background image) - this is the location of the image you are using for a background image. If you are not using one, simply leave it blank.
Text Color - controls the default color or all text. This setting can be overridden for each individual set of text that is added or edited.
Link Color - sets the default color of all links. This setting can be overridden for each individual link that is added or edited.
Vlink (Visited Link Color) - sets the color of the links after they have been clicked on.
Alink (Active Link Color) - sets the color of the links as they are being clicked on.
BGColor (Background Color) - sets the color of the background. This will be overridden if you use the Background (URL for background image) option.

Selecting a cell brings you to a new page, called "Edit HTML Tags". From here, the user can set the following:

Background (URL for background image) - allows the user to have a unique background image for that particular cell.
Vertical Alignment - a drop-down menu that allows the user to align the cell's contents to the bottom of the cell, the center of the cell, or the top of the cell.
Alignment - a drop-down menu that allows the user to align the cell's contents to the left of the cell, the center of the cell, or to the right of the cell.
Background Color - allows the user to have a unique background color for that particular cell. This will be overridden if you use the Background (URL for background image) option.

The very first row of cells in [Table Cell] is a bit special. It contains five cells that differ slightly from the other 35 cells. Those top five cells that are side by side contain one extra function. When you click on [Edit Cell] for one of them, the extra option is the second field:

Cell Width - works the same way as Table Width does (see [Page Properties]) except that it deals only with one cell. Because this cell is the top one in a column, all the cells below it will be assigned the same width by necessity.

Please note that Cell Width works best in conjunction with a set Table Width. For example, it would be a good idea for a user to set their Table Width to 800 pixels and then use percentages to set their cell widths. These cell widths should be entered before adding any large items to a cell, because cells containing items can be made wider, but their width cannot be reduced so as not to distort the item that they contain.