Tips for editing Joomla Web pages
Editing Pages | Article Checkin | Plain Text | Inserting Images | Resizing Images | Uploading a PDF | Keyboard Shortucts
Writing webpages isn't exactly like using your favorite word processor. There are a few quirks when it comes to webpages. Although you may not know it, you are actually writing in HTML code - and this code has its rules.
True, we have a fancy editor for you to use that kinda looks close to a word processor - but this editor is transforming your text to HTML in the background.
So here are a few tips in using our editor, and writing basic HTML code.
Editing Your Pages
First your need to log onto your website.
Then, when you come to page you can edit, you will see the 
button. Click on it to enter the editor.
Can't Edit the Page? Article Checkout (Padlocked)?
When a User edits an article, that article becomes "Checked Out" (represented by the padlock icon 
). Only the User who has checked it out the article can modify it. This is a safety/security feature that prevents two Users from editing an article at the same time, thus preventing the loss of any data upon saving.
The article remains "Checked Out" until the User clicks Apply, Save, or Cancel during editing. Once saved, the Content Item is Checked In. However, if there's a connection error, such as when the User presses the browser's Back icon, or they navigate to another page without saving or cancelling, the article remains Checked Out. This means no one else can edit it.
We can overide this with a "Global Checkin" which will unlock all articles currently checked out across the whole site. However performing a Global Checkin while documents are open for editing will result in data loss. All Checked Out Items will be checked in, and any unsaved changes will be lost.
Save your work regularly - every 5min
As with any application, it is recommended to save your work regularly. Also online web editors can timeout - so if you don't save your work your session could expire.
This may sound a bit daft - but it is a security measure. Logins will expire if there is no activity for a set amount of time.
If this is becoming a hassle - please contact us and we can increase the timeout.
Copying Plain Text into your Article - important!
When pasting in text from other sources such as Word, or from other web pages, you should Paste as Plain Text and then reapply the formatting to suit. If you otherwise do a regular paste, you will copy hidden codes that could effect your webpage formatting.
To paste as plain text, click the down arrow next to this button 
and select 
"Paste as Plain Text"
Images and Tables TIP
If you are using images left or right of text, it is often better to first build a table. Put the image in a cell and the text in the adjacent cell. You will find that you will have better control of how the text wraps around the image.
To build a table, click on 
. Sometimes it is good to make the cellpadding 10 - this pads out the cells 10 pixels, putting a space between image and text.
Inserting Images
Step 1: click on
to open the image tool. You should get a dialogue box like this one popping up...
Step 2: Because you are using a live web editor, you need to upload your image from your PC to the webserver. Click on 
to upload a new image (its above the details window).
Step 3: Click on Add File... Select your file(s) and click Open.
TIP: you can select more than one file with CONTROL or SHIFT.
Step 4: Click Upload. When the files have uploaded, you should return the dialogue box above in Step 1.
Step 4: Important: find your picture and click it once, and then click again until the image details (URL, Dimensions, etc) are shown in the Article Image box. The image is now selected for inserting.
Step 5: Choose the Align option.
|
|
The preview picture of the beach (top right) gives you an idea of how the image and text will wrap.
|
Step 7: If the image is right against other objects (like text), you may need to add a margin. The Margin settings are just under the Alignment settings. Something like 10px all around is usually good.
Step 6: Press Insert.
TIP: You can edit your image settings by selecting your image, and clicking the
TIP: For stricter control on wrapping text around images, try inserting a table () with two columns, one row. The place the image in one column, and the text in the other column.
Re-size Your Images *before* Uploading Them
There are three good reasons to re-size your images before you upload them to the web...
- Small images take up less webspace
- Re-sized small images are clearer and look better.
- Small images are faster for your readers to download.
There are many ways to resize a picture...
- If you are using XP, download the image resizer power tool and you can resize in filemanager. More info here.
- You can use packages such as Photoshop, Paintshop, Corel Draw, or even Paint before you upload them.
- If you don't have a program to resize your pictures, you can get a free one here.
- There are other website that re-size pictures for you like www.resize2mail.com.
- Use the edit picture button on the Imagemanager. It looks like this
and is found on the right hand side/lower part of the popup box. To use this button, you will need to first upload the image to the web - then resize it with the button. This is ok for a few files, but for muliple files you maye find the other methods better.
Small images like thumbnails are usually at 200 pixels wide. The largest picture you would have on your website would not be bigger than 800 pixels wide (~100kB). An image you get off a camera may be around 3500 pixel wide (~2000kB).
Sure, if you are feeling lazy you can re-size the image withby changing the dimensions, but as you'll see, it will look slightly fuzzy. This is because this tool is using a basic HTML code to re-size the image. This method also does not reduce the file size - so it will take longer for your readers to see it, and it is chewing up your webhosting space.
Uploading a PDF
The proceedure for uploading a PDF is similar to uploading an image...
Step 1: Click on
to open the insert/edit file tool. You should get a dialogue box like this one popping up...
Step 2: You need to upload your PDF from your local computer onto the server for the public to see it. Click on 
to upload a new PDF file.
Step 3: Click on Browse to find your PDF on your local computer. Select the PDF and click Open to add it to the upload list.
TIP: you can select more than one file with CONTROL or SHIFT.
Step 4: Click the Upload button to start uploading your selected PDF files. When the files have uploaded, you will then see the dialogue box again, as shown above in Step 1. The files have been uploaded from your local computer to the server, and you should be able to see them in the dialogue box.
Step 5: In teh dialogue box, click on the new PDF file that was just uploaded to the server. The URL and Text boxes will automatically fill when the PDF is selected. Continue to tweak the settings to your preference. Checking the Icon check box, and setting the Target as "Open in new window" is generally recommended practice.
Step 6: When done, click the Insert button. The dialoguebox will close and a link to the PDF file will be inserted on the web page.
Keyboard Shortcuts
There are some keyboard shortcuts that are the same across applications, including our CMW.
- Control+Z: Undo
- Control+X: Cut
- Control+C: Copy
-
Control+V: Paste
Use Predefined Formats
If you can. try to resist making your own styles with colours, fonts and font size. Instead, highlight your text and apply a format tag style. These format styles are basic HTML tags used in all webpages. That way all the headings on your site will look the same, and we will have better control of them if we need to change the look of your page.
The Format box looks like this 
- but it may have the words Paragraph in it. You can change for format with the dropdown arrow on the right.
The Styles box 
could also be used to format your text. But this may not be too helpful for you, as you'll find there are a lot of styles listed in this box that are unhelpful. This is because you are seeing styles used from behind the scenes on your webpage.
Example formats that are used regularly are:
- Paragraph - for regular paragraphs
- Heading 1 - used for things like the title of the page
- Heading 2 - used for subtitles. For example "Use Predefined Formats" is a Heading 2.
Seeing your HTML
Don't think you are writing HTML? Then click on this button 
to see what is happening behind the scenes.
If you understand a little HTML, you can also edit it direct by using this button. This can help sometimes if the editor gets confused.
Inserting Links
Use this tool 
to insert a link. Sometimes you need to high light some text for the tool to become active. You can use the same tool to edit a link.
When linking to one of your own pages, use the link tool and under the Content section, find and select your article.
Webmaster's TIP: when you are linking to an outside site, set the Target to be Open in new window. This will open a new window for the outside site, and the reader won't loose your web page. As a webmaster - you don't want your readers to loose your webpage.
Inserting emails
Step 1: Use this tool to insert a email. Sometimes you need to high light some text for the tool to become active.
Step 2: Under the Email section type in the email under Address. If you like, you and type in a subject for your email too.
Step 3: Important! Click on the Create button. The tool will then create the correct HTML link code for the URL.
Step 4: Click Insert.
By using this tool, an email is placed on the webpage with extra codes that inhibit email harvesters.
Misbehaving Formatting
If the format of your text is misbehaving - it is most likely due to some hidden codes. To fix, you need to remove all the formatting and the reapply it. There are a few ways to do this. Try one of these...
- Try to clean up the hidden text by selecting large sections and clicking the erase formatting icon (
) - Select all you text from start to finish. Cut and paste as text (). You'll have to re-insert your images and tables again.
- Last resort for the advanced user - get into the HTML code and manually clean it up. You can edit the HML code using the Edit Code button ().
How to Space Paragraphs With More Than One Line.
Some internet browsers will delete empty lines. The editor will also do this in an effort to show you what some of your readers will see.
If you really would like a big gap between paragraphs, simply add a Space on each line and then Enter. Like below...
Because the space is there, its not an empty line, hence it doesn't get ignored.
SHIFT + ENTER
Holding the SHIFT key when pressing ENTER is different than just an ENTER.
- SHIFT+ENTER is used for a new line, not not a new paragraph. The gap between lines of text will be small.
- ENTER (alone) means new paragraph - so there is often a bigger gap inserted between the text.
