Editing Joomla 1.5 - Fast start

Important Tips When Editing

There are many things that are different about editing web pages, as compared to other types of editing. Often this is not communicated by commercial developers because they have an interest in making things seem as easy as possible, and they dont want to spend hours educating clients. Almost always, the client also does not want to hear that there is a whole new set of dos and don'ts.

But if you want to create a quality web presence, then there is much to learn.

Pasting from MSWord or other Applications

- including Outlook, Express etc, Be very careful when pasting text from other applications. Dont do it without first understanding the following.

The problem is that you get a lot more code than you think, and it can make life extremely difficult if you are not expert in html.

So don't paste from MSWord, but if you must, then use the "Paste from Word" button, and then the "Clean" button. This will probably strip out all the unwanted formatting code.

Another way is to first paste the content into notepad. This will also strip out all the formatting. Then just copy the text from notepad, and paste into the editing window.

You will need to re-apply any formatting that was in the content - bolds, headings etc, but that is a good thing - as web formatting is very different from word processing formatting.

Formatting Text & Style Control

Some people have a strong urge to over-format text. Making text different colours and sizes is to be avoided.

Say you decide you want to make a heading a particular colour...

The worst sin is to try to make all body text, or all headings, a certain colour or size - and then systematically going through all articles to change them manually.

It is far better to change the definitions for all headings or text in a single central location - a style sheet (CSS). This is not soething I will cover - it is complicated - just ask your web developer to make whatever changes are needed.

Modern web pages have a system of style control whereby many page elements will have a certain look that is consistent across all pages. This is achieved by using just one file called a "cascading style sheet" (CSS). A basic understanding of the style sheet is extremely important, but to master them is difficult.

The main advantage to this way of controlling styles is that almost the entire look of a website is controlled from a single file. This can lead to massive savings in development costs, and it ensures your formatting maintains a professional appearence throughout the whole site.

The 'problem' is that when you make a change in the editor - eg you give something a font size - then that will over-ride the style-sheet settings.

If you decide that you want to change it, then you have to re-edit the article. If you have implemented the same formatting accross many pages, then it can be quite a task.

The code that is used to generate some types of formatting is quite bloated (slows down page loading) and sometimes it can look different in different browsers. Code used in style-sheets is much more economical.

Global style definitions usually exist for the following elements:

• Paragraph text  - <p>
• Headings - <H1>, H2, H3 etc
• Lists - <UL>, <OL>

Removing Unwanted Styles

Often people get stuck on this point.

1. Select the text that is needing the styles removed
2. Click the "Eraser" button (Remove formatting)

The styles should now be erased, and the text should have minimal 'mark-up' (code that is used to format it).

The problem is - this doesnt always work - especially if the text has been pasted from MSWord.

Place your curser in the middle of some text that you want to 'clean'. Look at the bottom of the editing window:

Here I have pasted some text from MS Outlook.

I have placed my curser in the orange bit.

Notice down the bottom is:

Path: p.MsoNormal >> span ... etc

This "path" shows all the "tags" that are influencing the text. These need to be removed in order for the text to be cleaned.

Here is some of the HTML code that is used in the above example:

<span style="font-size: 12pt"><i><span style="background: red; color: navy; font-family: Arial">The </span></i><i><span style="background: red; color: olive; font-family: Arial">problem</span></i><i><span style="color: olive; font-family: Arial"> is that you get a lot more code than you think, and it can make life</span></i><i><span style="font-family: Arial">

If you know a little about HTML, you can probably see how to clean up this text - but to do this to any significant amount of text is painful (and expensive if you dont have html skills)

So best not to introduce complex, formatted text in the first place.

Good news is that the "Clean" button seems to work much better in recent versions of JCE.