To give you a first real challenge, let's create a first page on your new website. It will be an about us page on which you can write about your company, your project, or yourself. Most of the time, a page like this contains a title, text and perhaps a few images.
Static vs. dynamic content
An "about us" page is usually created once, is accessible via a menu link, and in the future all you will have to do is change it as you go. It has a static character. A press release or blog entry, however, has a dynamic character.
- For static pages, in contrast to dynamic pages, the creation date and author do not really matter.
- Static pages are usually accessible via a menu link whereas dynamic pages can be accessed through lists.
The 'about us' page should consist of the following components:
- a title,
- a text,
- an image.
- The page should not appear on the front page.
- We want a link to the page in the top horizontal menu (top).
This may sound simple at first :-). Go ahead and log into the administration interface!
Step 1 - Create content
Go to the Article Manager (Content -> Article Manager). There you might still see your unpublished sample data (Figure 1).
Figure 1: Article manager
Click the icon to get to the appropriate form and then add the title and text. In the upper pane, below the title, select "uncategorized" as a category. This category was created by installing the example data. The field Featured indicates whether the content should be displayed in the featured blog layout, which is mostly used as the front page. This still works in Joomla! 1.7 but the terms can easily be misunderstood. Select No. In the editor window, you may now enter your text. Joomla! comes with the default editor TinyMCE (Figure 2).
Figure 2: Article edit form
Inserting an image from a URL
As a first example we are going to use an already existing image on the web.
For example, this one: http://farm2.static.flickr.com/1198/8982... (Figure 3)
Figure 3: Example image
Move the cursor to the position in the text at which you would like to insert the image. Click on the image icon in the editor toolbar and paste the URL of the image to the pop-up window. Configure the image with a left alignment and use 10 pixels vertical and horizontal space (Figure 4).
Figure 4: Insert image
The image will appear in your editor window. Click Save and your item is stored. There are several ways to save it:
- Save - Item is saved. Form is not closed. Used for saving when you still want to continue working.
- Save & Close - Item is saved and form will be closed.
- Save & New - Item is saved, form will be closed and a new empty article form is called.
Exit the form.
Step 2 - Creating a Menu Link
The post has been created but is not appearing on the website. For it to appear, we need a link!
Click the New icon in the Menu manager in the top menu (Menu → Top).
Hint: Top is the name of the position in the default template. If you are not using the default template and the example data the Top menu doesn't exist or may have another name.
Click the 'Select' button next to the field Menu item type. A window with various links will pop up. Click on the link single article (Figure 5).
Figure 5: Select a menu item type
Now you need to choose the desired article. Click the button Select / Change in the right pane (Select Article) to select it. You will see a search box with all articles. In case you can't find your article on the page right away, you can filter the list by typing a part of the article's title in the search box and then clicking on the title of the correct article in the result list (Figure 6).
Figure 6: Menu type - single article - select article
Enter a title for the link "About us" and make sure that top is selected in the menu location. We can leave the remaining options with their settings for now.
Step 3 - 'About us' on the website
If you now load the frontend website, you will discover the new link in the top menu. Click it and you will see the about us content - congratulations on having created your first page (Figure 7).
Figure 7: About us page
Step 4 - Image Upload
If your image is not already available on the Internet, you will need to upload it from your PC. Let's go through the example together. Go to the Article Manager (Content → Article manager). If you can't find your article, locate it easily by using the search box. Select the article's title and the edit form will open. Delete the linked image from the text.
Below the editor window you will find the Image button. This button launches a dialog box to upload an image. You can choose between existing images or upload new ones (Figure 8).
Figure 8: Image upload
Once the image has been inserted into the text, the formatting can be changed by using the image icon in the editor's toolbar. This separation of functions in Joomla! was purposely chosen because you have the possibility to use different editors. The Joomla! Image button will always remain the same but the image formatting in the editor might differ.
Attention: Joomla! uses the images as they are. The images will not be resized!