6. Adding Web page Graphics

Page Contents - Graphics

Introduction
Copyright	Right clicking Java Script
How to use image files	Purely as an image As a background.
File Formats	BMP GIFF JPG JPEG PNG
Flash	Macromedia Web Design Studio. Students discount Flash information Links Books
Watermarks	Robust and fragile watermark
Uploading
Grahics don't show on my web site	Common errors that prevent graphics showing on your web page.
Download mage files Sites
Create Free 3D Textfor Your Site	Such as this
Links

Top

Graphics Introduction

The quality of your web pages can be greatly improved by the inclusion of graphic files within them. You do not require any additional programmes to do this. If you wish to create your own images or manipulate an image files you have, you will require a graphic editor program that saves work in the correct file formats, to do this.

The downside of images is that they greatly increase the download time. You will learn about how to minimise this problem, by using optimised image files, image files where the file size has been decreased in some way or other.

The things that effect the image file size can include, file format used, size of the image in width pixels x height pixels, number of colours used, the degree of file compression.

There are sources of free graphic files such as

• Programs already installed on your computer. E.g.
  • Microsoft Office or Word.
  • Most graphics programs.
• Downloadable from web, a list of Web sites can be found below.

Ensure you read the Copyright Section below before using anybody elses graphic files.

Copyright

The following is not the legal position but basically common sense tips I have picked up. Although I am talking about graphic files the same copyright laws also apply to text.

Somebody has put time and effort into producing a graphic files image and that person will own the copyrights to that image files. This right can be sold on to say a publishing company.

It is very easy to download graphic files from a web site. All you have to do is right click on the image and select the option to save it. Right clicking can be disabled by Java Script on the web page, but this is easily defeated by using a browser with Java disabled.

Using this downloaded graphic on your web page would be a breach of copyright, and you could be sued by the copyright owner.

If you wish to use other peoples graphics, then you must receive permission to do so. There is a certain amount of latitude given to students on courses like T170 and T171, for use on course work. Presenting that work to the world can remove you from that protection. The course will give you information on this.

Many of the free graphic sights will have a section stating the copyright policy. Read the small print to find out about this policy. Some of the common clauses are similar to the following.

The graphic is probably free to use:

• If it is going to be used on a non commercial site.
• If you place a link to the website where you downloaded the graphic from.
  • They may provide a small graphic for this purpose.
• Acknowledge the source in some way.
• The Web sites vary, some stipulate the above, others request that you do more.

You will also find Web sites that offer graphics for a small, or not so small fee. Some of these Web sites will also produce custom graphics to order.

Top .Placing a graphic onto a web page

Suitable File Formats

The following formats are suitable

• Gif
• Jpg
• Jpeg
• Png. Not suitable for older browsers pre versions Internet Explorer 4.01 and Netscape 4.04

File Formats

BMP

A BMP is a Bit Mapped image.
BMP files are very large files and are not as suitable for producing graphics for the Web.

GIFF (Graphic Interchange format)

• Limited to a maximum of 256 colours.
• The file format can be compressed using lossy compression. (See JPG)
• Some versions allow a transparent colour, this allows the background to show through.
• Allow animations
• Allows interlacing- The imageis generated in 3 passes. Pass one displays the even scan lines, passes 2 to 3 fills in every third odd scan lines. Interlacing allows the user to view a poor image reasonably quickly (pass one). The image quality improves with passes 2 and 3. Overall interlacing increases the download time.

Suitable for images

That have 256 colours or less and largish areas of the same colour. The best compression occurs when areas of the same colour are in horizontal bands. Keeps sharp edges and this format is good for line art, cartoons, blocks of the same colour.

Attempt to use only web safe colours in giff images.

Optimisation

Reduce the number of colours used.

JPG JPEG (Joint Photographic Experts Group)

• These images use a lossy compression when they are saved. This means that information is lost. The degree of compression can be changed. The higher the compression, the smaller the file size, but more fine detail is lost. There is always a degree of compression and loss of detail every time a file is saved. If you are working on an image this should be taken into consideration. Repeated save and reloading the image into your graphic program will degrade the image. You should keep the original master copy to work from.
• Millions of colours
• No transparency

Suitable for images.

JPEG is far superior to GIF for storing full-color or grayscale images full of fine detail such as photographs and images with continuous colour variations, e.g. gradient colouring, or intricate artwork.

Not as suitable for line art

Optimisation

Altering the amount of compression. The better graphics programs display the original image alongside the optimised image. Always save the optimised image under a different file name, keeping the original file safe. You can't improve the quality of an optimised image back to that of the original.

PNG (Portable Network Graphics)

The format produced by Macromedias Fireworks

This format may become asuccessor to the GIF file format, but browsers Netscape versions 4.04 and later and Internet Explorer version 4.01 or later are required.The format is platform independent.

 Top .

Preparing for Your Web Page that includes graphics

Folder

1. Create a folder that will contain all your work, HTML file(s) and graphic file(s), Give this folder a suitable name For Graphic Exercise 1 call this folder Project6
2. Decide if you will keep the graphic files in the same folder as your HTML file(s), or place them in a subfolder.
   1. Same Folder
      1. This way MUST BE USED for the OU ETMAs
      2. Only realy suitable for very small sites i.e. with only a few pages (HTML files) and ony a few graphic files.
   2. Sub Folder
      1. Suitable for larger sites or to practice with using a folder/ subfolder system.
      2. We will use a folder/ subfolder system for Graphic Exercise 1. (This page is being improved and this exercise will be done shortly)

Image code Examples

This graphic was placed with the following code.

<IMG src="../graphics/layout/html-25x25.gif" width="25" height="25">

align attribute

Align is depreacted in HTML 4.0 in favor of style sheets.

Often graphic images are placed within a cell of a table. This gives the designer more control over the placement of the graphic. But there are a few allignment attributes that can be used. This left allignment achieved with
<img src="graphics/T171.gif" alt="T171" width="55" height="21" align="left">

left can be replaced with these other alignments: top, middle, bottom, left, right, absolute middle, absolute bottom, baseline

T171, T170 and TT280 students should remember about the flat file structure if using graphics with the ETMA system.

More Information on Inserting Images

How to use images

There are 2 main uses of images.

1. Purely as an image
2. As a background.

The same image file can be used for either purpose

Samples showing the use of images and background images

1. Text on a background Image	2. Purely as an image	3. Text and an image placed on a background image
4. Background Image make text difficult to read

As an image

• Uses the code
  <IMG src="Graphic file">
• Sample 2. An image, html03.gif, placed on a white background.
• Sample 3. The same image image placed on a background image, cwall.jpg.
• You can not place text over an image unless you use a graphics program that will include the text within the image. This has been done in the image that is used in samples 2, 3 and 4.
• To aid the layout of your page, images are often placed in tables to position them. See samples 2 and 3 above.

Background image

• Uses the code
  background="Graphic file"
  background is an attribute of the TABLE, TD or BODY tag. A table cell example.
  <TD background="cwall.jpg">
• A small background image tiles (repeats) itself to fill the allocated space, which can be the page or in the above example table cells. Samples 1,3 and 4. Control over the
• Select background images with care if you do not want the repeat pattern to be noticeable, as can be seen in sample 4. But not in samples 1 and 3.
• They make it more difficult to read the text. Often requiring bold or larger text. Note how the "make text difficult to read" is almost impossible to see in sample 4
• Text or other images can be placed over background images, see samples 1, 3 and 4 above.

Code for the above table

For the following code to work the graphic files must be in the same folder as the html file.

<TABLE width="90%" border="2"  align="center">

   <TR align="center"   valign="top"> 
      <TD background="cwall.jpg" width="33%"  height="53"> 
      <B><FONT color="#FFFFFF">1. </FONT><FONT  color="#FFFFFF">Background Image<BR></FONT></B></TD>

      <TD width="26%" height="53" bgcolor="#FFFFFF"> 
      <B>2. Purely as an image</B><BR>
      <IMG src="html03.gif" width="25"  height="22"></P>
      </TD>

      <TD background="cwall.jpg" width="41%"  height="53">
      <B><FONT color="#FFFFFF">3. Text and an image<IMG src="html03.gif" width="25"  height="22">
         placed on a background image</FONT><BR></B> 
      </TD>
   </TR>

   <TR align="center" valign="top" background="html03.gif"> 
       <TD colspan="3" height="46"><B><FONT  size="+3" color="#FFFFFF">4. Background </FONT><FONT size="+3">Image</FONT></B> 
       make  text difficult to read
      </TD>
   </TR>

</TABLE>

Top .

Graphic Programs

The graphics program, MSPaint, that comes with windows produces files in format BMP. Because of the large files that the BMP format produces MSPaint is unsuitable for producing graphics for the Web. Fortunately there are some very good free programs, shareware programs, and paid for programs available.

The graphics program, MSPaint, that comes with windows produces files in the BMP format. As stated above BMP files produce very large files and are therefore not as suitable for producing graphics for the Web.

You will there fore require a graphics program to either create or ammend graphics for the Web.

Fortunately there are some very good free, shareware, and paid for programs available, that produce or convert to file formats that are suitable for the web.

PSP (Paint Shop Pro)

One of my favorite graphic programs at a reasonable price is PSP (Paint Shop Pro)version 7. More details (Will open in a seperate window). Excelent

FREE Versions

Download the older version 4 in a zip format, 3mb, from an OU tutors site. (Will open in a seperate window)

Version 5 of Paint Shop Pro has appeared Free on Computer Mag CDs.

Adobe Photoshop

This is one of the best graphic program. A discounted Student version is/was? available from the Adobe web site.

Adobe Photoshop Elements

A cut down and cheaper version of Adobe Photoshop, an excellent graphic program

Top .

Flash

Flash is a newish graphic file format that brings movement to a web page, and the latest in Web animation developments. Flash is achieved by a system of layers, motion guides and tweens. Macromedia is the leader in flash and its latest program is part of the Macromedia Student Studio MX. Available on a students discount.
Further details on this site
Latest price and additional information from Amazon.
Platform:

Windows

Mac

Possibly the biggest cons against using Flash are:

It requires an add in to be downloaded before it will work. This only has to be downloaded once.

Flash files tend to be rather big, taking a longish time to download. Too long for the patience of many possible viewers to your Web site, especially if they do not have a fast connection to the Internet. This will change as and when Broadband connections become cheaper and more popular.

See Books on Flash

Top

Swish

Swish is a cheaper and good alternative to Flash.

Download Page

Watermarks

Watermarking a graphic is a method of placing your "signature" into a graphic that can be used in copyright disputes, a robust watermark, or can detect if changes have been made to the image, a fragile watermark.

The signature is

A selection of pixel, chosen by an algorithm.

The colour of these pixels is altered by a value

This value may be 1, the colour change is so low that it is hardly noticeable by the human eye, but can be detected by watermark searching programs. Although the change is slight the quality of the graphic must be slightly degraded.

The value may be quite high making the watermark highly visible and the picture useless to use. A purchasable key will remove the watermark. IBM are perfecting this system.

The signature is repeated all over the graphic.

The signature if applied by robust techniques, can remain after manipulation of the image in a graphics program.

Top

Uploading

When you upload your web pages to the hosts server, you must also upload all the graphic files that you have used. Make sure they are uploaded to the correct folder (directory) if you have used a folder system.

OU students can use a folder system on there OU Web space, but MUST NOT use a folder system for ETMAs

Grahics don't show on my web site

There are several common errors that web masters can make that can prevent your graphics showing.

1. Make sure you have uploaded the graphic files.
2. Check that they are uploaded to the correct folder.
   OU students using the etma system can't place the graphics in a seperate folder. Also the graphic file(s) and HTML files must also be zipped together. You have full instructions on how to do this.
3. Check the spelling is the same in the code and the file name. Note For the purpose of this reguard myGrapic.gif as being a different spelling to mygraphic.gif. It is best to only use lowercase letters and the underscore my_graphic.gif
4. Do not use the wrong extention do not use .gif for .jpg or vice versa.
5. Do not use any spaces (or %20) in the file name, use an underscore if you like. Note spaces are often converted to %20 by some HTML editors. Many browsers are very tempermental with spaces or %20
6. Use relative addressing for your graphics in your code. See next tutorial. Ensure that there is no reference to your C: drive. When using HTML editors it is best to save the HTML document to its correct location, and to move the graphic files to there correct location, before adding any graphics code to the HTML code. The HTML editor can then work out the correct relative address.
7. Check your code for an entry like
   <img src="file:///C|/Tutorials4u/some.gif" width="10" height="10">
   This is an absolute address pointing to y our hard drive C. This code will  look OK only on your computer. Rectify this error by removing the file path shown in bold and use
   <img src="some.gif" width="10" height="10">
   1. This error is usually created by HTML editors and can usually be prevented by
      1.  1. Make sure you have copied the graphics you require to the correct folder
      2.  2. Save your HTML file before trying to insert graphics into it
      3.  3. Insert your graphic(s) using your editors facilities. Some editors may display the file starting file:/// but corrects this after saving.
      4.  4. Save the HTML file. This order of working usually prevents this error. But check...
      5.  5. Check the code and search for file:/// if you find this code you can always ammend the actual code. Early versions of the netscape editor, make it difficult to edit code, you can always do it in notepad.

Download Image Sites

The graphics on this page were produced by Xara Webstyle why not try this program with a free trial download.

Top

Create Free 3D Text for Your Site Now

The following is a sample of the type of free 3D text that you can quickly download.

You can change the font, colour, size and style.

1. Reduce the size of this window if it is maximized so that you can view this window and a small pop up window.
2. In the Xara 3D Sampler below
3. Click preview. This will bring up a pop up window with the default text in it.
4. Drag the pop up window so that it overlaps this window and the background desktop, and does not hide these instructions or the sampler.
5. In the sampler below, type in the text you require.
6. Click on the style button, then select the style you like, by looking at the general shape, depth of 3D and letter angle.
7. Click on the Size, Font, and Colour buttons to change the look further
8. View the preview, and either amend or save the graphic.

The full program allows many more adjustments to the look of the resulting grahics including animation.

Download some handy tools

Additional Tutorial for OU students and Composer users Use this link if you use Netscape Composer or are an OU student for an additional; tutorial on inserting images, and the OU ETMA system. Links Adobe Photoshop Tutorials Adobe Photoshop Elements Tutorials Else click on Next below.

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

			Last minute	Save 10%
Book a Thomas Cook holiday	Book a Thomson holiday	Book a Portland Holidays Direct
Thomas Cook flights	Thomson holiday flights	Flybe Cheap flights	British Airways flights	My Travel flights

The London Pass - Adult Welcome to The London Pass, the brand new leisure pass that lets you experience the very best that London has to offer. With free entry to over 50 attractions, free public transport and the ability to beat the queues, The London pass helps you to make the most of your stay.

More Tutorials by John McGuinn

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

.