logo wide 2000x350

5 Create Web Pages

Chapter Five includes the following four sections:

5.1 Create Categories and Folder
5.2 Write your Web Page Article as a normal Document
5.3 Transfer Article Images to the Media Manager
5.4 Post your Article with the Article Manager

In Section 5.1, we cover how to create matching categories on your Home computer and Joomla website to organize and place your website articles and images in.

In Section 5.2, we explain step by step how to write an article that includes both text and images.

In Section 5.3, we review how to efficiently transfer those images first from your source document to an image folder on your Home computer and then from this images folder to a matching images folder in the back end of your Joomla website.

In Section 5.4, we show you how to reinsert these images using the JCE Editor as you post your article with the Joomla Article Manager.  

00
This article describes the process for posting an article to Joomla by first pasting the text into the Article Manager, Article Edit Workspace, then re-inserting images stored in folders in your Media Manager. In this article, we will cover the last two steps of the 5 steps for creating and posting articles. We will post the text only version of the article with the Article Manager. We will then use the JCE Editor Image Manager to add the images back to the article.

Step 4: Post Text Only Version of Article with the Article Manager

01

Open up Article Manager – Edit and post your article (copy and paste the text) into the Editor workspace with the JCE Editor. Then reinsert the images back into the workspace one by one with the JCE Editor Image Manager. Then save your new article. Now that all of our images have been loaded to the images/category/article folder on our website’s Media Manager, we are ready to post our Welcome article on our website with our website’s Article Manager. Log into the Control Panel. Then click on the Content, Article Manager.

02

If you installed Joomla without the sample content, there are no articles currently in the Article Manager. We will now add our Welcome article. Click on the big green NEW button. This will take you to the Add New Article page.

03

Give your article a Title, such as Welcome to our Website!. Then for Category, Select 00 Frontpage. For Featured Article, select YES. This will place the Welcome Article on the Front Page of your website – meaning visitors can see it without clicking on a Menu Item. Then open the welcome articles folder on your HOME computer:



04


Select the article which begins with W00. This is the TEXT ONLY version of your Welcome article. It is important that articles pasted in Joomla have no images, only text. Open and copy this article into your clipboard. Then, put your cursor in this Joomla Article Window and right click on Paste.

05

This brings up the JCE Editor Paste window. Put your cursor in this window and press Control +V on your home computer keyboard. This will paste the text into the Window.

06

Then click on INSERT to paste the text into the workspace.

07


TIP: To expand the workspace, drag out the triangle at the lower right corner of the workspace.

Save the Text Only Version of your Article.
After the text is in, but before adding images, it is a good idea to click SAVE. This is because only a limited about of information can be transmitted to the server with any given request. Now that we have posted our article into the Article Manager, it is time to insert the images back in.



Step #5... Re-insert Images into Web Article
The next step will be to add back in all of the images which are now in the images/00frontpage/01welcome folder.


Here is what the Text Only version of our article looks like as a WORD document:

Introduction Content TEXT
W01
Main Body Content First Idea TEXT
W02
Main Body Content Second Idea TEXT
W03
Main Body Content Third Idea TEXT
W04
Conclusion

Here is what the WEB version of our article looks like in the EDITOR:

08

Delete the Image Placeholder Text.
Before we transfer the W01 image back to our web article, we need to first delete the placeholder text W01, leaving our cursor where this image placeholder was.


09

Image Insertion Method #1... The Joomla Image button
Click on the IMAGE icon at the bottom of the page. This brings up the images folder in the Media Manager:


10

Click on the 00welcome images folder to open it.

11

Click on the Image you want to insert to select it. Our Welcome Article has four images. Select the first one (W01). Click on INSERT.

This will place the image in the correct place inside the article. If your web browser is giving you trouble by putting the article somewhere it does not belong, try switching browsers.


12


Image Insertion Method #2... The JCE Image Manager button
If you want to insert images faster – without always navigating through images folders, or if you merely want to change the size or position of the image, click on the JCE Picture Icon in the bottom row of the JCE Editor.


13

This brings up the JCE Image Editor:

14

You can quickly locate and select images. Then click Insert. You can format the size and alignment of the image if you want to make it bigger or smaller.

15

Increase the size of the image by entering 400 in the Dimensions box. Type Open for Business in the alternate text box. And select Align Left for the Alignment box. Then click UPDATE to return to the Article Edit Screen.

Delete the extra spaces between images and paragraphs.
The JCE paste function has a tendency to insert a lot of hidden line breaks in documents which get pasted into your website article. These should all be deleted as you scroll down the page adding your images.


Repeat the above steps for the remaining images in your article.
Then scroll down the Welcome article to the w02 text, delete it and insert the w02 image. Repeat for the remaining images if there are more of them.


TIP: Only add 10 images at a time. If you have more than images, add 10 then click on the SAVE button, then add 10 more.

Then click on SAVE. Then click on VIEW SITE to see how the Front page looks.

16

When it is looking the way you want, click on SAVE and CLOSE. Repeat this process of pasting in the text only version and then adding back images for every article.

Now that we have posted our article with its images, we need to create the category structure for our main menu and then create a menu item for our article in the main menu. Those subjects are both covered in the next chapter.
Website images are handled differently from text in that text can be copy pasted directly into a website article with the website's text editor. Images on the other hand must be transferred and posted one at a time as websites and the internet consider every image to be an individual link. This article explains how to transfer images from your Welcome article you wrote on your Home computer to folders created in your Joomla Media Manager. An interesting interactive website may have hundreds of images – ten to twenty per article.

Step 3: Add Images to the Images folder in the Media Manager

01

In the previous section, we first wrote a document called Welcome to our Website including some text and four images. We then copied this article creating another document called WEB Welcome to our Website. We then created folders to keep the documents and images organized in. Finally, we copied all of the images from the text only (web) version of the document and placed these image files in a folder called welcomepageimages.

The web version of the Welcome article now contains ONLY TEXT. There are no actual images in the web version. All four images have been transferred to the welcomepageimages folder. Now it’s time to create an images folder on your Joomla website so we can transfer the article images to this folder. So log into your Joomla back end and click on Media Manager. We will use the Media Manager to create a new images folder for our new article.
03
Set Up the SAME Category and Article folders in your website Media Manager
We will next create an identical images structure in the images folder on our website root folder. Log into your Joomla Administrator Control Panel. Then click on Content, Media Manager. Below is the current structure after deleting all of the default images folders and adding the image categories folders. All of the images on your website should be stored in the images folder. Inside of these Category Images folder, you should create Article Images folders for the images in every one of your articles. All you need to do to create a new images folder or sub-folder is click on Create New Folder:


Type the name of the category (in lower case with no spaces) in the box to the left of the words CREATE FOLDER. We will also use the category numbers to help keep these image categories organized. Then click Create Folder.

Repeat this process for all of your images category folders and article image folders. There should be four article image folders inside of every category image folder because there will be four articles in every article category. Each time you write a new article, or add a new web page, you should create a folder for the images in that new article in both your home computer’s images folder and also your website’s images folder. Now that we have our category folders made, we are ready to transfer our welcome article images from our home computer images welcome folder to our website welcome folder.

Add Images to their Folders in the Media Manager
Now that we have the folders for our images, we are ready to add the images to these folders using the uploader tool in the Joomla Media Manager. Go to the Media Manager and clicking on the green UPLOAD button. Then click on the Browse button.


04

Navigate to the 0_welcome images folder on our Home computer and click on the first image file to select it. After selecting the first image in your images folder, hold the control button down on your keyboard as you select all remaining images in this folder. This will allow you to load 20 images at a time. Here is the select screen with all four images selected:

04a

Then click Open. These four files are now shown to the right of the Choose Files box.

04b

Once you have found and selected the image(s) you want to load, then click on the Blue Start Upload button. This is what the welcome folder looks like after adding our four images:

05

Once you have loaded your images for your Front Page articles, you are ready to add the Welcome Article to your Joomla website. That is the topic of the next article.
The article describes how to create content for a web page – the text and images – using a standard document. Because Microsoft Word adds a huge amount of harmful coding to Word documents, it is best to create your web pages using a free word processor called Libre Office. This free program is available for the Microsoft Windows operating system, the Apple Mac operating system and the Linux operating system. Libre Office is also very useful for optimizing and compressing the file sizes of images (with a single right click). Ideally, this should be done on a Linux computer – which comes with Libre Office. But you can get a free copy of Libre Office for any computer at the following link:

https://www.libreoffice.org/download/libreoffice-fresh/

5 Steps for Writing and Posting Joomla Articles with Images
This article describes 5 steps for writing and posting a Joomla article. These five steps are done every time you want to add a new article or a new page to your website.


01


We will cover Steps 1 and 2 in this article, then Step 3 in the next article and Steps 4 and 5 in the final article in Section 4.

Step 1: Write and Post Your First Article – Welcome to our website – as a normal document

02

The first article you should write and post at the top of your Home page is called the Welcome Article. The title is typically Welcome to Our Website! The Welcome Article explains what your website is all about and why viewers should take the time to read it. Like all your other articles and web pages, your first article will consist primarily of a combination of text and images. The first step to creating your Welcome article is to create a normal document of your article. This document will look like the following:

Welcome to our Website!
Introduction Content TEXT


Welcome to our website. Our mission is to help you!
Image 1

03

Main Body Content First Idea TEXT

We offer all kinds of tips to help you achieve your goals.
Image 2

04

Main Body Content Second Idea TEXT

We also provide resources to help you!
Image 3

05

Main Body Content Third Idea TEXT

Finally, we provide a network to help you reach others.
Image 4

06

Conclusion TEXT

Call for Action: Feel free to contact us with any questions you may have!


Most articles and web pages are simply a combination of text and images. A common problem with websites is that they contain too much text and not enough images. As a rule of thumb, there should be at least as much space taken up with images as there is with text. Before posting this article, let’s first review how to get images to add to your article.

Getting Images to Add to your Articles
In the above example, we wrote our first article, called Welcome to our Website. We had four images in this article. But where did they come from? The Internet is very visual. Take your time to find images which support your ideas. Use as many images as possible which show people and especially showing children. Charts, graphs and tables can also be copied as images. Images often convey much more information than text and help readers, and especially beginners, better understand the message you are trying to convey. Avoid simply putting in a bunch of text on your web pages.


Use a Screen Capture tool to Capture Images
One way to get images for your articles and slide shows is to take them with a digital camera. Another is to capture images and screen shots from the Internet using a screen capture tool. In Linux, there is an excellent free screen capture tool called Shutter. In Windows, you can use a free program called Snag Screen.


Reduce the File Size of your images by compressing them

Before posting any images to the Internet, we will need to optimize them. The file size of a normal captured image is over 100KB. Once we are done writing our article and adding all of the images we want, assuming we are using Libre Writer, we can go through the article and right click on each image. Then click Compress. This will turn the image into a JPEG image and also reduce its file size for the web.

After making sure that all the images in your article have a small enough image size and file size, we are ready to create a text only copy of the welcome article and place all of the welcome article images in the images/frontpage/welcomearticle folder.


Step 2: Create a Text Only version of your Article

07

We have previously created a folder structure on our Home computer. This folder structure includes the root folder for your website with an articles folder inside of that and a 00Welcome Articles folder inside of that. After your first article is written, put the document complete with the 4 images in this folder and call the article file 00 Welcome to our Website. The path to this article on your home computer will be mywebsite/articles/00 Welcome Articles/00 Welcome to our Website.

08

Note that each article above is listed twice. The duplicate article has a W in front of the file name to indicate that it is the Web Version or Text Only version of the article. To create this Web version, copy the article and save it AGAIN in the same folder as a new and separate file called W00 Welcome to our Website. Thus, you will have TWO versions of each article. Next, close the first Document and continue working with the WEB version of your Welcome article. Here is what the web version will look like. Note that before removing the images, and replacing them with “placeholder text” this document is an exact copy of the original document.

Welcome to our Website!

Introduction Content TEXT

Welcome to our website. Our mission is to help you!

Image 1

09

Main Body Content First Idea TEXT

We offer all kinds of tips to help you achieve your goals.

Image 2

10

Main Body Content Second Idea TEXT

We also provide resources to help you!

Image 3

11


Main Body Content Third Idea TEXT

Finally, we provide a network to help you reach others.

Image 4

12


Conclusion

Call for Action: Feel free to contact us with any questions you may have!



Next, if you haven’t already done so, create an article image folder for this article inside the front page category images folder we created previously on your home computer.

13

Name the image folder 00welcome. Inside of this 00welcome images folder will be the four images of the welcome article. This should be numbered w01, w02, w03 and w04. So the path to the first image in the Welcome article on your home computer will be mywebsite/images/00welcome/0owelcome/w01.jpg.

To be clear, each of your website articles will require making a folder for its images. If you have a lot of images in your article, it is useful to number them to keep them in order. The first number refers to the article (they are all in the same article). The second number is the image number in the article.

Below are 4 images in our Welcome article:

14


Once you have created the welcome article images folder, if you are using Linux with Libre Writer, right click on each image and click on SAVE GRAPHIC. If you are using MS Word, use Snag Screen to copy jpeg files of every image in the web version of your Welcome article to the images folder. These image files should be numbered, (for example, w01, w02, w03). For the sake of speed, names of images are usually avoided. Also because these image files will be transferred directly to your website, file names for these image files should be in lower case. No spaces or capital letters. It is best to save images as JPG files. So use the drop down arrow to select JPEG. Then give the image a name and click SAVE. Below is what the Text Only (web) version of the Welcome article looks like after the four images have been copied to the images folder and the images have then been deleted from the WEB version of your Word document and replaced by the placeholders, w01, w02, w03 and w04:

Text Only (web) VERSION of Welcome to our Website!

Introduction Content TEXT

W01

Main Body Content First Idea TEXT

W02

Main Body Content Second Idea TEXT

W03

Main Body Content Third Idea TEXT

W04

Conclusion TEXT

Note that the web version does not have any actual images. It now consists only of text – with the w01, w02, etc indicating where the images should be inserted back in to the text one the text itself has been copied and pasted into the website article.

This is what your four image files should look like in the 01welcome images folder on your home computer:

15


Here is what the icon version of this folder looks like:
16


Note that all of the images are under 50 KB. Now that you have created a WEB or TEXT ONLY version of your Welcome Article and your Welcome Article images are organized and placed into their proper folders in the mywebsite/images/00welcome/0welcome folder on your HOME computer, it is time to copy each of these four images into a similar folder on your website server. That is the subject of the next article.
Setting up categories to place articles, images and menu items in is important in order to avoid having your website turn into a mess over time. While categories can be added later, attempting to change the location of articles and images will likely result in broken links. This is why setting up your categories should be done before writing articles and adding images. But before we describe the steps for creating new categories, we will begin with a brief overview of the entire process of creating articles and web pages with Joomla.

5 Steps for Creating your Category Folder Structure
We now have our custom Editor and Template installed and configured. Before we write articles, we need to set up the categories to put the articles in. This section describes 5 steps for creating the Category folder structure of our website. These steps are done only once. But you can add more categories later if needed.


01


Step One: Create your Website Table of Contents using Categories

02

Your website categories are like the chapters of a book. Your website, including your Main Menu should be more than just a collection of pages and links to navigate between pages. It should be organized like the Table of Contents in a book, describing the layout of the book and the logical flow from one page to the next by organizing the page subjects into chapters (which Joomla called categories). Only AFTER designing the structure of your website will you be ready to build your Joomla website. First you create the structure or the plan for your new house. Then you create the webpages and put them all in like building blocks in the proper place in the house. In this article, we will outline how to create categories which are the crucial first steps in building your website.

Understanding the Joomla Content Management System

03

The first step is to consider the entire layout of your website – not merely what it will look like now, but what it might look like in the future. Building your website is like building a home. You may want to start with a simple one story, one room house. But most folks add extra rooms onto their homes over time. You want to plan ahead by designing and building a solid foundation so that you do not need to tear down your entire home when it comes time to add that extra bedroom.

Your website main menu is like the Table of Contents in a book.
There are several reasons to organize your website main menu like the Table of Contents in a book. The first is that your website viewers have been reading books and magazines and newspapers all their life. They are used to seeing a Table of Contents and having the content organized into Chapters and Pages (or in the case of a Newspaper, Sections and Pages and Articles). The Main Menu should be a Table of Contents which your viewer can quickly scan through in order to understand the organization of your website and where they might be able to find a particular page or article they are interested in reading. Another important reason is conservation of space. Unlike a book, the Main Menu will and should appear on every page to help the viewer with Site Navigation. Also modern pages often have a Header Image at the top of the screen and a Multimedia Slide Presentation near the top of the screen.


Plan Ahead... Organize your Categories to allow for Future Growth
Imagine you are writing a 400 page book. You may start out by just writing the first 4 pages. But over time, the book might grow into 40 or more pages. You should plan ahead so that you do not need to re-write the entire book just because you are adding extra pages and even extra chapters. You do not want your Table of Contents to be merely 40 randomly entered Page Titles. Instead, you should organize your book into Chapters so that there are four sections per chapter. So your 400 page book might have 10 chapters each with 40 pages. You can further divide these 40 pages into 4 sections each with 10 pages. This is exactly the structure we are using on this website, namely 10 categories with 4 sections or articles per category. Each section is a single page or link on the website. But each section is typically about 10 pages of text and images which is read by scrolling down the web page


Using our book analogy, the Joomla name for pages in the book is Articles, the Joomla name for Chapters in the book is Categories and the Joomla name for Table of Contents is the Main Menu:

Book Name >>> Joomla Name

Pages >>> Articles

Chapters >>> Categories

Table of Contents >>> Main Menu

There is an unfortunate tendency to head straight to the Menu Manager to try to create your menu. But the first thing to know about Menus is that they are creating links to actual pages. You first need to write some pages before you use the Menu Manager to create your links. This leads to the second unfortunate tendency which is to start writing articles. This leads to a poorly organized website. To use the house building analogy, you should not start building a house by constructing a bunch of rooms and hoping they will fit together. Instead, you first need to design a PLAN for the House and write this plan down on paper. In Joomla, there are two levels to this plan. The first level is the CATEGORIES. And the second level includes the actual ARTICLES. So you begin your house plan (or your book) by defining some categories. We will do this next.

Create Your Joomla Category Structure
One of the many purposes of a Joomla website is to help you organize the structure of your pages. This is why Joomla is called a Content Management System (CMS). With all Joomla websites, Web pages are called Articles, which are organized into Categories. Articles are placed inside of categories. Try to make these decisions before you ever open the Joomla Administrator page and get them written down on a Table of Contents for your website just as if you were writing a book.


04

After you create a Main Menu which matches the Content Structure above, the Main Menu for your website would then look like the following:

Front Page l Why Topic Important l Solutions l Plan of Action l Contact Us

Each Category link on the Main Menu above leads to a sub-menu with the articles. For example, the sub-menu for the category Possible Solutions would include links to three articles, Options 1, 2 and 3. Sub-menus can also be displayed directly in Joomla as hidden “drop down” menu items. You can always change and expand your Website Article Structure later. But get something down on paper at the beginning.

Example Two: createyourowninteractivewebsite.com
Our website has ten categories plus a front page only category. There are 4 Articles in each category. Thus, our Table of Contents looks like the following:


Website: Build Your Own Business Website (10 categories) (41 Articles)

Category #0 Front Page only
0.1 Welcome to Create Your Own Interactive Website!


Category #1: Start Here
1.1 Why Joomla is better than Wordpress

1.2 Evolution of Web Building Tools
1.3 How to Protect your Online Business
1.4 Secure your website Domain Name and Hosting

Category #2: Site Set Up
2.1 Install Joomla on your website

2.2 Getting Started with your Joomla Interactive Website
2.3 How to Research Joomla Extensions
2.4 Add a Better Text Editor to Your Website

Category #3 Real Site Security
3.1 What is Real Website Security?
3.2 First 10 Steps to Website Security
3.3 Second 10 Steps to Website Security
3.4 Manage your Website Security over Time

Category #4: Site Appearance
4.1 How to Select a Flexible Template

4.2 Download and Set Up your Custom Template
4.3 Create a your own Custom Header
4.4 Website Layout Tips

Category #5: Site Content
5.1 Create Categories to Organize Web Pages

5.2 Write your Website Articles as a normal Document
5.3 Transfer Article Images to the Media Manager
5.4 Post your Article with the Article Manager

Category #6: Site Navigation
6.1 How to create Menu Item Links

6.2 Create Category and Article Menu Items
6.3 Divide and Links your Web Pages
6.4 Create a Module Based Menu Page

Category #7 Custom Modules & Module Menus
7.1 Make Custom Modules
7.2 Place Module Menu Items in an Article
7.3 Use the Sparky Mega Menus to Place Modules in a Menu
7.4 Make Dynamic Modules

Category #8: Slideshows & Videos
8.1 Add a Front Page Slide Show
8.2 Place a Slide Show in an Article
8.3 Insert a Video in an Article
8.4 Place a Video in a Module

Category #9 Design & Use Feedback Forms
9.1 Add Feedback Forms to Your Website
9.2 Create a Contact Us Feedback Form
9.3 Create a Feedback Form Notification System
9.4 Add a Feedback Form Menu Item

Category #10 Site Management Tools
10.1 Add a Downloads Manager
10.2 Search Engine Optimization
10.3 Add a Site Map
10.4 Add a Website Broken Link Redirection Tool


This is how the above plan was translated into the main menu of our website:

05r

Step 2: Create Category Folders for Articles on your home computer

06

Once we have our Table of Contents planned out on paper, we are ready to turn it into category folders on our home computer. We will first use our categories to create folders for articles and images on our home computer. We will then use those same categories to create folders for our articles and images with our website’s Category Manager and Media Manager. Below is what the folder structure will look like on your Home computer.

07

We will create an identical folder structure on for the articles and images on our website administrator control panel using the Joomla Category Manager and Joomla Media Manager:

08

What your Folder Structure will look like when you are done
First, we create categories as folders on our home computer to store our articles in. To create your folders, click on your File Manager to open it. Then right click and select new folder. The new folder will look like this.

09r

Right click on the folder and select Rename. Then change its name to the name of your website.

10r

The top folder with the name of your website is called the root folder or the root directory. It is best to get in the habit of naming your website folders with lower case letters and no spaces. Click on this new folder to open it. Then right click on New Folder again to create a folder for your articles inside of your root folder.

Create two more folders for website images and extensions. The following is the folder structure you should have on your home computer for every website you make:

11r

We will use the extensions folder to keep all of our add on extensions. The other two folders, articles and images will be used to organize our website content on our home computer:

12

The first folder is called articles and should contain all of the articles which will eventually be posted in your article manager. These articles should be assigned to category folders just as articles on your website are assigned to categories. Click on your articles folder to open it. Then right click and create a new folder for each of your website categories. When you are done, the inside of your articles folder should look something like this:

13r


The articles folders do not need to be lower case. This is because the Joomla Category Manager allows for folder names to have capital letters and spaces. This is also a good way to tell your Articles folders from your images folders (which have the same names).

Note that there is an extra category for articles such, as the Welcome article, which only appears on the Front Page. On the server, you would put these articles into a folder called frontpage or you could leave them as Uncategorized. In other words, the 00frontpage folder on your HOME computer equals the Uncategorized folder in the backend of your website. The key thing to understand is that the category folders on your HOME computer should match the categories in the Joomla Category Manager.

14

Should match this:

15

There will eventually be four articles inside of each of these articles folders. But as we will explain further below, there are always two versions of each article, the original version with images and a web version in which the images have been removed. These articles are also numbered to keep them in the right order. Below are the 2 articles in the 01 Start Here articles folder.

16r

Note that there are TWO versions of each article. The first is the actual article as created in a document with the images in the articles. Because only TEXT can be entered with your website’s text editor, images cannot be transferred directly into your web articles. It is therefore essential that you create a second text only article with the images removed and replaced by placeholder text indicated which images go where in the article. We will review how this is done in a later article. The images for the WEB version of each article are copied into folders created for each article and placed in the images folder as shown below.

Step 3: Create Category folders for your images on your home computer

17

In addition to using our categories to create folders to place articles on our home computer, it is also wise to create identical category folders for the images on our home computer. Opening up the images folder reveals the same category folder structure used for articles. Note that these folders are in lower case letters:

18

The images folder category names are the same as the article category names on our home computer:

19

Then if you open up any of these image category folders, you will see another folder for all of the articles in that category. These folders will be used to hold the images which will later be transferred to the images folder on your server.

20r

The folder names are short as these will eventually be used as part of the file pathway for our images on the server and we do not want long names in the file pathways. We know they are images folders because their folder names are lower case with no spaces. Each article gets its own images folder. If you have three articles in a given category, you should have three images folders for that same category:

21

When you open up any of the images folders, you will see all of the images that were removed from the WEB version of the article. This images are listed in numerical order to help re-insert them in the proper order AFTER the WEB or TEXT ONLY version of the article has been copied and pasted into the article by your text editor.

Here are the first three images from our Welcome article:

22

These images are also numbered to keep them in the right order. There were 26 images with this article. It is important to use a lot of images on your webpage as images often convey more information to readers than text. You can imagine that if you have 40 web pages and 20 images per page, it is extremely important to keep these 800 images organized on your home computer and on your Internet website backend. We will soon set up this same image folder structure in the Joomla Media Manager.

Step 4: Create identical category folders with the Joomla Category Manager
The process of building your website begins with the creation of new categories. If you did not install sample data, then when you go to Content, Category Manager, there will only be one category, called Uncategorized:


23

To build your website, first you create categories, then place articles inside of categories. We will now build the category structure for the Create Your Own Interactive Website dot com website:

Website: Create Your Own Interactive Website (10 categories)
Category 1 Start Here
Category 2 Set Up
Category 3 Security
Category 4 Appearance
Category
5 Create Web Pages
Category
6 Menus and Links
Category 7 Custom Modules
Category 8 Slideshows & Videos
Category 9 Design Forms
Category 10 Site Management


From the Category Manager, click on NEW to bring up the Add New Articles Category screen:

24

Give each category a title and a brief description such as “This category includes all four articles in the Start Here chapter.” (Joomla will create an ALIAS so you do not need to fill in the Alias box). It is okay to use capitals and spaces. Then click SAVE and NEW. This will bring up a second New Category screen. Give this category a Title and Description and click SAVE and NEW.

Repeat until all ten categories are done. Then click SAVE and CLOSE. When you are done, the ten new categories will look like the following:

25r
The numbers in front of the names help keep the categories and articles organized. Creating all 10 categories takes only a couple of minutes.

Step 5: Set Up the SAME Category and Article folders in your website Media Manager

26

We will next create an identical images structure in the images folder on our server root folder. Log into your Joomla Administrator Control Panel. Then click on Content, Media Manager. Below is the current structure after deleting all of the default content images folders and adding the categories folders, and after clicking on Detail View, the media manager side menu will look like the following.

27r

We have a folder with our Home page slideshow images, another for our Home page Welcome article and another for the four articles in our first chapter/category, Start Here. We have already put our images in these folders. We will now create a new folder for our second chapter/category. Click Create New Folder. Then type in the name of the folder using lower case letters and numbers with no spaces.

28

Then click Create Folder. Repeat this process for all of your images category folders and article image folders. Here is what our website images folder structure looks like after creating folders for all ten categories.


29

There should be four article image folders inside of every category image folder because there will be four articles in every article category. Each time you write a new article, or add a new web page, you should create a folder for the images in that new article in both your home computer’s images folder and also your website’s images folder. Now that we have our category folders made, we are ready to create our first web page. That is the subject of the next article.