Monday, 20th May 2013
Tips for editing Joomla Web pages
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.
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.
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.
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"
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.
Step 1: click onto 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.
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.
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.
There are three good reasons to re-size your images before you upload them to the web...
There are many ways to resize a picture...
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.
The proceedure for uploading a PDF is similar to uploading an image...
Step 1: Click onto 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.
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.
There are some keyboard shortcuts that are the same across applications, including our CMW.
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:
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.
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.
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.
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...
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.