Netscape Composer Tutorial - Inserting an Image - OU ETMA system

Page Contents - Netscape Composer - OU ETMA system

The Open University ETMA system

Because Open University ETMA system does not allow the use of folders (directories) then image files and HTML files will all be unzipped into the space allocated to you on the OU web server for that particular TMA or ECA.

To ensure your images can be seen then all images that you use must have relative addresses and because the image file and HTML file are stored in the same folder on your hard drive then that the address will only contain the file name e.g. "my_image.gif"

If you do not understand the terms relative and absolute addresses click here

Because of this it is essencial that the image file is that is used is stored in the same folder on your hard drive.

Composer can automatically do this for you, but you must ensure that Composer preferences are set up correctly

Set up Composer preferences

Click "Edit" menu
Click "Preferences"
In the Category column click the + plus sign against "Composer"
Click "Publishing"

Ensure there is a tick against the following 2 options "Maintain links" and "Keep images with page"

In order to place an image onto a Web Page you require to have the required image stored on your hard drive or in the windows clipboard after copying an image. In The T171 course you will be required to obtain an image from the World Wide Web

Exercise 1. Preparation for Exercise 2 and 3.

Either you can use one of your existing folders on your hard drive or create a new folder. This folder will be refered to as your working folder

Tip: Take a note of the folders name and the path to it.

Open Netscape Composer. If you have not already done so, check that your preferences have been correctly set (See above)

Open a new file from the file menu

Enter a few words such as
Inserting an Image Exercise

If you wish make this a H1 heading. Use the left drop list just under the File menu
Select "Heading 1". Those wishing to hand code <H1>Inserting an Image Exercise</H1>

Important Step

Save the HTML document as ex_image.htm or a suitable name of your choice.
Ensure you save it into the correct folder

Exercise 2. Obtain an image from the World Wide Web

Copy Method

1. Surf the web and find a small image
2. Right click on the image.

OR

Save As Method

1. Surf the web and find a small image
2. Right click on the image.

   Internet Explorer	Netscape
   3. In the pop up list "Save Image As ..."	3. In the pop up list "Save Picture as ..."

4. In the Save pop up window. Select the working folder folder you wish to save the file to, from the drop down list. You will have to navigate through the various folders to do this. If you wish you can change the filename, but do not change the extension, which should be either .gif or .jpg

Exercise 3. Inserting an Image onto your web page

You can insert GIF and JPG (JPEG) images into your web page.
Note: Composer has a converting function to convert BMP images to JPG

Paste Method

1. Click where you want the image to appear in your HTML document.
2. Paste from theclipboard Ctrl + V or Click Edit menu, click Paste

OR

Insert from File Method

1. Click where you want the image to appear in your HTML document.
2. Open the Insert menu and choose Image or click the Insert Image Icon
   1. Click the Choose File... Button
   2. Specify the image file and adjust settings in the Images
      Properties dialog box.

The dialog box

file:///C|/folder-a/folder-b/html-tut01.gif

Up to 80% off for Students from Adobe.  Plus FREE Shipping Offer

Using Composer Help

Press the F1 key or Click help, then click Help contents

In the left pane click "Creating Web Pages"

Scroll down to the section "Adding Pictures (Images) to Your Web Page"

Click the link "Inserting an Image"

Leisure Time - book your holiday or flights with our UK sponsors

Book a Monarch Holiday	Book a Thomson holiday	Book a Portland Holidays Direct
Fly Thomas Cook flights	Direct Holidays	Jet2 Cheap flights

More Tutorials

Home page of a tutorial in programming in Smalltalk, a object-oriented programming language. This is an ideal tutorial for anybody learning Smalltalk and of particular interest to students on courses: M206 at the OU Open University, and course CSC517 at NCSU North Carolina State University

Home page of a tutorial in programming in C This is an ideal tutorial for anybody learning C programming language, and of particular interest to students on courses: T223 at the OU Open University.

Home page of tutorials4u.com

Leeds my home town

Top

Leeds Web design

Copyright © John McGuinn 2001-03

.