Professional and Affordable Web Design
0800 080 5401
Using FCK editor with images
This is a tutorial on how to use some of the basic functions relating to placing images within a content managed webpage.
If you are not familiar with the basic features of FCK editor, see our previous tutorial.
Adding Images using FCK Editor
Click on the Add an image icon – this box appears:
Taking you through the tabs across the top of the image properties box, there is:
This tab allows you to browse the server your website resides upon for images that have been loaded – as per above screen
Allows you to make the selected image into a Link – with the ability to target where the link opens (leave alone for normal behaviour, set to “blank” if you want the linked to resource to open in a new window)
Allows you to search your computers hard drive for images to upload to the server.
Once loaded into the server you can resize the image via the “Image info” tab
Not as advanced as you would think! Add descriptive alt text to your image. Alt text is read by screenreaders – describe the image here, so that viewers using screen readers know what is on the page.
Manipulating an image on the page
When you click the browse server button, pop up appears displaying all available images on the server
Clicking on an image will load it into the preview box:
The preview box allows you to manipulate the image. You can set the following parameters:
- Width and Height of image
- Give Image a border – see slide – has 5 pixel black border
- Place the image in a fixed position thru a combination of the Hspace ( Horizontal spacing), Vsapce (Vertical spacing) and the align drop down tab.
- The Align tab allows you to fix the image in many different places on the page.
- The example shown is for the image to appear in the absolute Middle of the page.
Uploading images from your computer
Clicking on the Browse button will produce a windows “file upload” pop up.
Navigate to the location of your images, click on selected image to highlight then click on “Open”
This will fill in the file extension box:
Click on send it to the server button
Clicking OK will take you to the Image Info tab with the relevant image in the preview pane:
From here you can resize and determine where on the page the image will appear.
This concludes the FCK editor upload image tutorial from Mutiny Design.
All comments are moderated for spam and will not be shown. All genuine comments wil be show, however the links will be based on a NO FOLLOW RULE. Repeat commenters adding value to the articles and discusions will have removed alowing Follow Rule to Work.
Make a Comment
See Full Portfolio Some Of Our Work
Driving Schools Booking Service (DSBS) is a network of driving instructors, covering the whole of the UK. For this project, we were...
County Security is a fully featured E - commerce solution, with an integrated "system configurator", which allows users to choose...
Customer News & Resources
At Mutiny Design we are constantly gathering together articles and help guides to assist our clients.Introduction to sitemap.xml
Checking for a sitemap A site map (or sitemap) is a list of pages of a web site accessible to crawlers or users. It can be either a document in any form used as a planning tool for web design, or a web page that lists the pages on a web site, Some developers feel that site index is a more appropriately used term to relay page function, web visitors are used to seeing each term and generally associate both as one and the same. However, a site index is often an A-Z index that provides access to content, while a site map provides a general... Read More »Center a web page in CSS
One simple way to center a web page using CSS is to create a container div, that is horizontally centered by having its left and right margins set to auto. Using this method, you can still apply colours / background images to the body tag, so its a flexible solution. (if you didnt need this ability, just apply margins and width to the body tag instead, and forget using the container div). The container div has the same width as your webpage and, well, contains it. All the code for your web page is placed inside the container div. This will... Read More »