Are you using Joomla to manage your website? Then you owe it to yourself to replace the default WYSIWYG content editor with mosCE. You can get it here for free. I strongly urge you to check out it’s extensive feature set. It’s a very easy to install Component. You will also need to get the Mambot. Got it? Then let’s go!

This breif tutorial will teach you how to create a page, like this one, using the Joomla Content Management System.  

I will assume you know where you want to put your article, within your site structure. If not, stay tuned for another Joomla Article on planning your site architecture.

Once you select Create New from the Content area of your admin, you will now have a few options not available with the default Joomla interface, thanks to mosCE

The first thing you need to do is write your content. I suggest doing this offline, in a word processor. I say this for two reasons.

1) If you are like me, it sometimes takes a while to write. If it takes you too long, you will time out of your session in your admin, and then when you go to SAVE, you will lose all your work.

2) There is no spell check yet for mosCE, so you are better off letting the word processor do that for you, as well.

If you have no choice but to write online, at least hit "Apply" every few minutes, so you will keep your session active and save your work as you progress.

If you use Microsoft Word to write your copy, when you are done proofreading, simple Select All (CTRL+A) of your text and then Copy it (CTRL+C). Now click the "Paste from Word" icon in the top row (see blue square in img above). Simply Paste your text (CTRL+V) into the window and click Insert.

This will take out all the MS-isms that would come over from doing a direct paste into the mosCE text editor.

UPLOAD YOUR IMAGES

The other assumption I will make is that you have your images already prepared for your website. If you have a lot of images to import, I suggest using FTP to move your files from your computer from your hosting account. If you are only moving a few images, then you should use the mosCE image upload system (as opposed to the Joomla native upload).

The first thing to do is click on the mosCE IMAGE icon in the bottom row, as shown by the red circle. You may see two image icons in your toolbars (but on different rows). You can go into your mosCE component and actually change the layout of your WYSI editor buttons to remove any legacy buttons that were carried over from the original Joomla WYSIWYG tool bar. But that is another article in the future.

The bottom row box shows where it typically is by default. Click the IMAGE icon and you will see the following window pop-up:

You will find the UPLOAD Image icon in the middle of the top level  Click on the UPLOAD icon, as shown in the red box. That will present you with another pop-up to upload your full-size image. Click on BROWSE and simply use the drop-down at the top of the third (and final) window to navigate to the location of the file you want. Select the image and click OPEN. That will grab the file location. Next click "Create Thumbnail" and when you upload, mosCE will create a thumbnail automatically. You can vary the width of the thumbnail that will be created, by changing the default (150px). If you want to resize your main image, simply click the Resize Image checkbox and you can resize the main image, at the same time.

Now to add the image to your article, simply scroll over to your image snapshot, until you find the image you want.

Click the Optional Image radio button and check off "Popup Image" to yes. Click on the image you want. You should get an alert asking if you want to use the thumbnail for that image. Click yes, and it will grab the information of the thumbnail for you.

I would suggest changing the image titles from the file name to something more descriptive. You might also want change the image position from the default of LEFT by changing the option in the dropdown (you’ll find it in the area shown by the big red box on the bottom left). Otherwise, that’s it, folks.

Next, click INSERT and the thumbnail image will be inserted into the page, wherever your cursor was.

And you now have the ability to make as many images with pop-ups as you wish on the page. Just upload the images you need for the article.

Nice, huh?

Two more things to pay attention to as you add your new articles to simplify things for you.

You can decide if this content is going to be part of your front page, by clicking on the FRONTPAGE checkbox.

You should also see a few other tabs to the right, as well.

The first tab to look at is Meta. This will give you the ability to add unique and descriptive keywords and description of the page content. The Meta tags are used to varying degrees of importance by the major search engines. But there is no harm in having accurate ones.

The next tab to focus on is Link To Menu. If you are creating Static Content (like an About Us or Our Services page) you can now integrate your page as part of your overall site navigation. You will most likely want to select MAIN MENU. Then you simply name the link what you want.

Once you are done, click "Save" and you will be back in the article manager.

Now simply repeat the process a few more times and that’s how you can build a simple, but well designed site in just a few steps.