Welcome to the Vancouver Web Design Studio of Jordan Klassen

Using CK Editor / FCK Editor to Edit the Content of Your Website

The content editor works much like any word processing application, with a few differences because web pages have unique requirements (links, images, etc). Differences to keep in mind:

The Remove Formatting icon (3rd in on the top line) which looks like a rubber eraser, can be used to remove any styles or formatting you may have applied. Simply highlight the text whose style you want to remove, and click this icon and it will revert it to plain text.

To paste onto the page, use the Paste as Plain Text icon which looks like a clipboard with a "T" on a yellow square over it. You will then have to re-apply any formatting. This ensures that no artifacts from the program you pasted from end up messing up the code.

The Source icon, let's you see and edit the html source code behind the output. If you need to embed external code, like the code provided by YouTube to embed a clip, switch to this mode, click where you want the code to go, then hold "Shift" and click the "Insert" key to paste the code.

The Format menu allows you to toggle between normal text and headings. The Style menu lets you make text smaller if needed.

To insert an image, click where you want the image to go, then click on the Insert/Edit Image icon (a sun and mountains on a yellow background). In the dialog box that appears click on the "Browse Server" button. You can then click on the image name if it is there already. If not, click on the "Browse..." or "Choose File" button at the bottom and find the image on your computer to upload. Once you've located the image and clicked ok, click on the "Upload" button. After a few moments, the new image's name should appear on the list. Click it to return to the previous dialog box.

It's best to resize images before you upload them. Ask your web designer what maximum width your particular website can accommodate. You can often resize the image using image editing software on your computer, or you can use Resize and Crop to resize the image. It is possible to resize the image after uploading it, by right-clicking on the image in the file browser and selecting "Resize".

Once you have the image selected, there are a few more settings to consider:

• The Alternative Text field lets you give the image a label for search engines and for users to see before the image has loaded.
• The width and height fields should not be blank. If they are, click the "Reset Size" icon next to it and it should populate these fields with the correct sizes.
• The align field lets you position the image relative to text or other content. The main ones to use are "Left" or "Right". Otherwise, you can usually leave it blank. If using "Left", I recommend also going to the "Advanced" tab and in the style field enter "margin-right:20px;" (without the quotes). Similarly, if using the "Right" alignment, enter "margin-left:20px;" in this field.

To insert a link to a webpage, type and then select the text you want visitors to click on to use the link, then click the Insert/Edit Link icon which looks like a globe with a chain link over it. In the URL field paste in the location of the page you want them to go to. It's safest to always paste the full link (e.g. http://www.grainworkersunion.com/board.php ). However, if the link is on your domain, then you can also just use the part after the domain (/board.php). If the page is in the same folder or directory as the page you are editing, you can simply use the file name (board.php).

To insert a link to a document on your server, you can use the same steps as above but instead of pasting in the URL, click the "Browse Server" button. In the next dialog, find the file's name, or use the "Browse" or "Choose File" buttons to select the file from your computer. Then, click the "Upload" button and the file will be added to the list. Take note of the file size listed to the right of the file as we will use this later. Click on the file to return to the previous dialog box. The URL field will now be populated. Click on the "Target" tab and change the Target menu to "New Window (_blank)". Then click OK to add the link. Because you are inserting a link to a document, it's helpful to tell users what to expect when they click on it, therefore, after the link text added a set of brackets with the file extension/type and the file size you noted earlier. The format will look like this: Document Name (.pdf 48KB)

To insert an email address just type the address. On the live site, it will be encoded to prevent Spambots from harvesting it and displayed to users as a link. If it appears as a link in the editing interface, this will mess up the formatting on the live site. To get rid of the link, simply click on the email address, then on the Remove Link icon which looks like a globe with a broken chain link over it.

For more information on using FCK Editor, see the official CK Editor user guide.

^ Back to Top