Editing your first page

All good websites should have a 'home' page, the first page that is seen by a person when they go to your website. Currently, your site has only one page – the home page – and it doesn't yet say anything about what you do. As an introduction to editing content of your site, we'll begin by editing the home page.

In order to change the page's content, we need to log in as a registered user who has editing privileges, so let's log in as the editor edward that, conveniently, we created earlier.

Notice how, when we are logged in a as a user with an editor role, the home page appears with 'view' and 'edit' tabs. This means that, if we click the edit tab, we can edit the contents of the page.

Now, you are presented with a form that allows you to edit many aspects of the page. Let's concentrate on the 'body' field, which allows you to edit the contents of the page.

This page can be edited in a similar fashion to a word processing document, though the look and feel of web-pages is often restricted somewhat over that of a word processing document. Nevertheless, text can be entered here, and manipulated with various styles (e.g. headings, bold, italics, bullet points, etc.) - the best way to find out what the various style buttons do is by hovering your mouse pointer over them for a few seconds until an explanation of a particular button is displayed. Also, images can easily be added to your web-page.

This is your website, so write anything now on this page, and try some of the buttons to see what they do.

Now, as in the previous steps, scroll to the bottom of the page and 'submit' your changes by clicking the submit button.

Adding hyperlinks to a page

To add a hyperlink (a link to another webpage on the Internet), simply highlight the text, and click on the hyperlink button (this looks like a chain link). Then, when the hyperlink window appears, type in the address of the webpage, starting with http://..... or paste it in from your browser's address line.

Adding images to a page

Before an image can be added to one of your website's pages it must be 'uploaded' from your computer to the website. To upload an image, click on the small camera icon in the text editor and then when the images window pops up.

In the 'upload' window, type a name for the image that you are about to upload. Then click the 'browse' button to select the image from your computer. To finalise this process, as in the other steps, scroll to the bottom of the 'upload' window and click the 'submit' button. Note that you may have to wait a short time, depending on how fast your Internet connection is, for the image to be uploaded from you computer to the website.

Now that your image has been uploaded, you may insert it into the page by clicking the 'insert' button.

Once the picture is in your page you can drag it around, align it, and resize it as you would with a word processor.

Remember to click the submit button at the bottom of your page to save the recent-most changes.

Important Note: Page width

Since you can add any content to your pages (e.g. images, text, and even tables), you must be cautious not to make the page so wide that it spoils the layout of your site (e.g. pushes the right-hand blocks rightwards and out of the page). In some cases, such as on wide administration pages, this is unavoidable, but in most cases you can resize images and tables accordingly; or if you do want a wide page, then it is possible to hide blocks on certain pages (e.g. if you wanted a big map on a page, etc.).

Creating a new page

So far we have edited an existing page, but the ability to create new pages – or, indeed, any other type of content - will allow your website to grow with information.

To create a new page, make sure you are logged in as a user who is capable of editing core content of the site (i.e. a user with the role of 'editor'). Once you are logged in, click on the control panel icon at the top of the page. Now you should see some icons and categories – notice that there are fewer available for a user with role 'editor' than there were for the more privileged user webadmin.

Since we want to create some content, scan the control panel for the relevant options, and you will see the icon 'create content' and a collapsed icon list also called 'create content'. If you want more information on the types of content you can click the icon, otherwise, to quickly create new content, click on the icon list header.

The icons in the 'create content' area represent different types of content that you can create. They are fairly self-explanatory, but to give you an idea of what each piece is for:

  • blog entry allows you to write entries for your personal diary.

  • forum topic allows you to write a topic on one of your website's forums

  • image allows you to upload an image to your website

  • newsletter allows you to write a special page that will be emailed to a list of newsletter subscribers

  • event – an piece of information that is associated with a time (e.g. a party, a meeting, a holiday). Events can be easily browsed on a calendar by visitors to your website.

  • page allows you to create a new page for your website

  • story is similar to a page, only it is better suited to dynamic content such as reports and news articles that will eventually be archived (i.e. a story about an event that took place, etc.)

Now, by clicking on the page icon, we will create a new page for your website. From this step onwards this scenario is very similar to the one where you edited the 'home' page, only this time you will have to create the page and then add it to your main menu so that users of your website can find it.

As well as having a home page, every good website should have a 'contact' page to tell website users how to contact the group or organisation. Type in a title, and then, as before, type in a some text, and perhaps add some images, to your new 'contact' page.

Now, before submitting the new page, if you scroll down to the bottom of the editing page you will see some advanced options for your new page. By default these options are hidden/collapsed because you don't necessarily need to change them to add a new page, however since we want to add the new page to the website's main menu, we'll want to expand the 'menu settings' options by clicking on the heading.

The 'menu settings' options will be expanded as follows, whereupon you can fill in the title and description for the new menu entry:

Before changing the remaining menu settings, it is important to know how menus are structured on your website. Firstly, there is more that one menu on your website, and it is likely that you will only ever want to change one of them, called 'Site Menu', since this is the menu that appears to users on the top left hand side of your website.

The next import point about a menu's structure is that it is not simply a list of links to pages on your site, but it is a hierarchy of links. This means that related menu items can be grouped to help a user to find related pages whilst avoiding having a very long, flat menu. When you add a new page to a list, you must therefore locate the correct menu, in this case 'Site Menu' or 'Main Menu', and then choose a 'parent' item from within that menu – the new menu item will be grouped below its parent menu item. The last point about menus is that the order in which menu items are displayed in a menu is controlled by assigning a 'weight' to them.

You can experiment by choosing different values for 'parent item' and 'weight' and then submitting the changes to see how the position of the menu item changes. Here are a few possibilities: