Docstoc

Inserting images into documents

Document Sample
Inserting images into documents Powered By Docstoc
					1
FCK EDITOR TUTORIAL

This tutorial is for staff who wish to create and edit webpages using the Plone
content management system.

It will show you how to use the FCKeditor and Plone to format text, insert
images and links and create webpages.

    Introducing the FCKeditor ....................................................................... 1
    Formatting and editing text. .................................................................... 2
    To edit the document.............................................................................. 2
    Optimising images for the web ................................................................ 2
    To insert an image in a webpage ............................................................. 4
    Inserting tables ...................................................................................... 5
    Inserting links ........................................................................................ 5
    Inserting anchors.................................................................................... 6
    Plone Articles ......................................................................................... 7

Introducing the FCKeditor

FCKeditor is a simple editor using mostly conventional symbols such as you
would find in MS Word. Bold, italic, bulleted and numbered lists for example.
It is important however to understand that we are creating webpages not
office documents. You will therefore find that many MS office tools are not
available in the FCKeditor editor and there are a few new tools specific to the
web.

Take a look at the picture below. You will recognise most of the symbols.
Some might need an explanation.




      Subscript – makes text smaller and lower
      Superscript – makes text larger and higher
      Remove format – removes formatting from documents
      Paste
      Paste from a Word document
      Inserts a table
      Inserts a horizontal line
      Insert an image
      Inserts an anchor – a place in a document you can jump to
      Inserts a link to a website, a document, or an anchor



                                                                          Robert Shimield for Surrey HIS 09/05
2
Formatting and editing text.

To create a page of text.
   1. Go to a folder
   2. Select add new item > document
   3. Fill in short name, title and description
   4. Type or copy and paste text into the body text panel
   5. Click save



To edit the document

Select edit . . .




. . . wait for a few seconds . . . and you will see the editor.


Now you can use the editors tools to format and layout the page.
Experiment with the buttons to see what they do. Click save to view your
results.




Inserting images in a webpage

Optimising images for the web

    Images must be optimised for the webpage before uploading.
    This means their file size and dimension must be set before
    uploading.

    A photo from a digital camera maybe 1megabite or more. This is too big
    for a webpage. The maximum dimension for an image should be no
    more than 500px x 500px and the file size 80KB.

                                                        Robert Shimield for Surrey HIS 09/05
3
    Smaller images will look better and load more quickly.

    To ascertain an image size right click on the image > select properties.

    If you don’t have access to image editors such as Photoshop, Paint Shop
    Pro or Fireworks you can use Microsoft Word 2003 to compress
    pictures.

       1. Open Word 2003
       2. Insert > Picture > Picture from file
       3. Browse for your picture and insert it
       4. Drag the corner to adjust to the approximate size required. (This
          can be adjusted later.)
       5. Right click on the picture to get the picture toolbar > select
          compress picture




       6. On the next screen tick web/screen > OK




       7. On the next screen click apply




                                                      Robert Shimield for Surrey HIS 09/05
4




       8. The picture has been compressed.

To export the compressed picture from Word:
   1. Right click on the picture > copy
   2. Right click on your desktop > paste
   3. You will be asked if you want to save a copy > click Yes
   4. Browse for the folder you want to save it in > save
   5. You will be asked if you want add this active desktop item the desktop
      > click No

    Your picture will have been saved with the prefix Clip_
    Rename it by right clicking > rename

    It is ready to upload to the web.


To insert an image in a webpage

    1. Insert cursor where you want the image
    2. In the view mode, click edit, select the add image icon >




                                                     Robert Shimield for Surrey HIS 09/05
5

    3. You can either enter the URL (address) of the image you want,
       browse for an already uploaded image or upload a new image.

All images must have ‘alt’ tags. When you ‘mouse over’ an image an
understandable description of the image must show. This is to comply with
accessibility laws. For example ‘House’ would not be suitable but ‘A picture of
a house’ would be.

You can then edit the image by:

    1. Filling in a short description in the Alternative text field.

       (This is mandatory in order to comply with accessibility laws!)

    2. Specifying width and height, making sure the maintain proportions tool
       is selected.
    3. Specifying border, Hspace (Horizontal space), Vspace (Vertical space)
       and alignment as desired.
    4. Click OK
    5. Save the page

You can edit the image further by selecting it and clicking the image button.


Inserting tables

Click the insert table button >      > Specify number of rows and columns
> Click OK
You can delete or insert rows or columns by right clicking in the table as you
would in MS Word.
You can colour table cells and rows by using the background colour tool >


Inserting links
Select the item to be linked, click on the insert link button >        > and fill in
the required fields
Here is a link to Google:




                                                       Robert Shimield for Surrey HIS 09/05
6




Inserting anchors

An anchor is a place in a page or a website to jump to.
In this case I am going to make a link to an address

Place cursor before some text > click the insert anchor tool >             > and
name the anchor (address)




Select some other text > Click add link button > > select link type >
anchor in this page > and select the anchor name (address in this case)

You will jump to the address when you click on the selected text.




                                                     Robert Shimield for Surrey HIS 09/05
7




Copying and Pasting from Word documents

You can turn MS Word documents into webpages like this:
Copy the desired text > insert your cursor where you wish the text to go >
click the Paste from Word button >

This removes MS word formatting. You can then format the content with the
FCKeditor.

It is important to use this technique because MS Word does not
make compliant or efficient webpages.

Plone Articles

A Plone Article is another sort of page that allows you to select a layout for
your page from predefined layout templates.
The template automatically arranges the layout of text, pictures, links and
attachments and produces neat and stylish pages for you.

    1. Choose add new item > article and fill in the required fields.
    2. Add the text of the article and format it > save
    3. Click the images tab > and upload some (optimised!) images, filling
       in the required fields. Use the bottom browse button for this:




                                                     Robert Shimield for Surrey HIS 09/05
8




    You can add multiple images to a page. Here I have uploaded four.

    4. Click the model tab to choose your layout.
    5. Here I have chosen the newspaper template, which gives me a layout
       like this:




    Note: The images on the right have automatically been made into
    thumbnails which will enlarge when clicked on.

    You change the order the images appear in the page by clicking on the
    image tab at the top and using the arrows to move the images up or
    down. You can also delete or copy images using the buttons at the
    bottom.




                                                    Robert Shimield for Surrey HIS 09/05
9




    You can add attachments and links to a Plone article using the
    appropriate tabs. They will also be displayed according to the layout
    template you select.




                                                      Robert Shimield for Surrey HIS 09/05

				
DOCUMENT INFO
Shared By:
Stats:
views:42
posted:2/19/2010
language:English
pages:9
Description: Inserting images into documents