Inserting pictures and links, researching information and presenting it.
HOME
Additional activities supporting learning for this page
Time to change the leader and evaluate your team performance again. Have you improved?
Remember what we need to do to evaluate the performance of the team.
First the leader.
- Did they give clear direction and keep the team on task?
- Did time get used well?
- Did they help make sure everyone was involved?
- Were they patient with members they thought were not helpful?
- What could they have done to make things better?
Now each team member using the following:
- Was the team member co-operative and helpful in contributing to the task?
- Did the team member support the leader or make life difficult for them?
- Did the team member accept help if it was needed? Now the team overall
- Did the team get the jobs done successfully in good time?
- Was the team supportive of members with problems?
Now rate the leader as ineffective, effective or outstanding and the same for team members as before. The most important thing is to improve. Do you think you made any improvements from last time?
Inserting pictures into your web page
The team leader needs to ensure that by the end of this section all team members are confident to insert pictures and display them in their pages.
In order to put a picture in a web page, Drupal has to know where to find the picture. If you know where the picture is on the internet, the simplest way is to provide the Web Address (URL) of the picture in the form of an HTML tag. The disadvantage of this method is if the address changes eg if the person owning the picture decides to move it from that location. Then your picture will disappear from your web page. To avoid this you can upload the pictures you want to use to your personal files. This is how to do it.
 |
We will find a picture of your celebrity somewhere on the internet, check that we are free to use the image, download it to the local computer and then upload it to your file space. On the rich text formatting ruler find the Insert Picture icon next to the anchor symbol. Click this and you will get a dialogue box as shown in the picture on the left below the ruler. |
 |
We now need a URL to go in the web address input box on the image properties dialogue. Open another tab on your browser and search Wikipedia for your celebrity. The reason we start with Wikipedia is because we can be fairly certain that images there are free to use because Wikipedia content is licensed for sharing. If you find an image in other places you should check that it is legal to use it. Copyright and licensing are always things to consider. It is safer to use things you know are free to be shared and one reason content providers license their copyright work for sharing is to encourage people to use and re-use it. So I will search for "Wikipedia Hayden Panettiere". I then right click on the image to download it to my computer using "save image as". Make sure the image is a suitable size and format. For pictures of people .jpg is best. The image should be no bigger than 500 pixels wide or the upload to the INGOT web site will fail. Typically the image should be less than 100k in size. This one of Hayden is just 22k. If your image is too big or in a different format you can use an image editor to change it. Here is a link to more information about images and editing them. |
 |
Make sure you note where the image will be saved on your computer! It is easy to lose the file. Now click browse server and you will be transferred to your personal file space. Click upload and you will be able to navigate to where you saved the image on your computer. Now you can select it and up load it to your file space. Once it is in your file space you can select it and click "Send to FCK editor" and the image will appear in the preview in the insert image dialogue box. The text is to show how text will appear in relation to the image. The sequence is shown to the left When the preview appears in the dialogue the image dimensions appear in width and height boxes. Underneath the URL box is a box with alternative text. This text will be printed if for some reason the image is unavailable. It is always a good idea to fill this in. Some software might use this to tell a blind person what image is on the screen using a speech synthesiser. If you want a border around your picture you can put a number in the border box. Hspace and Vspace let you make a space between this picture and your text or other objects on the page. Usually putting 5 in these boxes is about right for pictures that will be surrounded by text. The alignment determines where the picture will appear. It could be to the left or right of the page. Now click disable rich text and look at the HTML tags that the editor has inserted for the picture of your celebrity. It should look something like this. <p><img hspace="5" height="497" align="left" width="327" vspace="5" src="/community/sites/default/files/uploads/user4/394px-Hayden_Panettiere_%25281%2529.jpg" alt="Picture of Hayden Panettiere" /></p> <p> for new paragraph then the image details as you specified them in the dialogue box. src stands for source and this tells the page where to find the picture image. In this case it is a path to my personal files as I am user4. And now we have the picture of my celeb embedded in the page. One thing is that it takes bit of getting used to where the text flows around images. With a word processor the page dimensions are fixed to the size of a paper page, on the web more flexibility is needed because screens vary a lot, from mobile telephones to hi-res graphics workstations. Sometimes it helps to organise your images and text in a table as has been don on this page. |
|
|
Of course we have used the similar methods to insert all the screen shots and illustrations in this course. Finally, here is our picture of Hayden taken from Wikipedia. |
Time to evaluate the team again and change the leader. Is everyone now confident to upload images and display them on the page