website

Nobody

week_9_images_and_css.pptx

Home >Computer Science homework help >website

Colour & background properties

background-color

sets the background’s color

background-image

sets the background image for an element

background-repeat

sets the tiling (and tiling direction) of a background-image

background-position

sets the position of a background image

hit125 application concepts

background-attachment

defines whether the background image scrolls with the containing block or remains fixed to the viewport

background

sets the background’s appearance

color

defines the foreground color for text content

Background properties set the background of an element.

This is where you can set the images that are going to be part of your presentation not your content

<img /> attributes: height & width

height="n"

width="n"

Sets the height and width of the image in pixels.

May specify dimensions to increase speed of download

Also, if CSS is disabled the image dimensions will still be stable

Any content image should ALWAYS have the alt attribute included. It should describe the image to users who cannot either download or see it.

<img /> border attribute

In HTML:

In XHTML use the CSS border property

Sets the border thickness around the image

img { border-width: 5px;

border-style: dashed; }

<img /> surrounding space

Transitional XHTML:

vspace and hspace

Strict XHTML:

Set with CSS for the containing element using padding property

p { padding-right: 10px; }

Strict xhtml allows you to set the padding around an element using only the padding property – top, bottom, left or right.

<img /> title attribute

title="text" necessary for Netscape 6+, Mozilla browsers.

Short description of image appears when hovering over it -

Using Images

Content images

Use an <img /> element if the image is crucial to the content of the document.

Eg a photo of the author; a graph showing some data,

Needs the ‘alt’ attribute

Background images

Use CSS background images If the image is for presentational purposes (eye candy)

these images should not have any alternative text

There are a lot more options to deal with image styling in CSS than in HTML

There are two main ways of using images. Generally in static content you only include content related images. Images that are part of the page layout should be in the CSS.

More on images

Does image size matter?

How do you know what size the image is?

How do you resize images?

Free online editors – fotor.com, pixlr.com

If you don’t have any software that can tell you the dimensions of your image, right click on the file and open in Firefox, then use the web developer toolbar.

Choose Image -> Display image dimensions 400x250 means 400 pixels in width and 250 pixels in height.

Graphic file formats

gif

jpg

png

The three most popular file formats for web images.

Gif (Graphics Interchange Format)

Logos

Rendered text

Images with large

areas of single colour

Supports transparency & animation

Best suited for well-defined, bold colours

Limited to 256 colours

http://www.webopedia.com/DidYouKnow/Internet/2002/JPG_GIF_PNG.asp

filename.gif

GIF=5 KB

JPG [15% Compression] 6 KB

JPG [60% Compression] 4 KB

JPEG (Joint Photographic Experts Group)

Supports 16 million colours

Use for photographs

Complex graphics

Does not work well on drawings or line art

http://www.webopedia.com/DidYouKnow/Internet/2002/JPG_GIF_PNG.asp

filename.jpg

PNG ("Portable Network Graphics", unofficially "Png is Not Gif").

capable of (losslessly) compressing true color images

Combines best of GIF and JPG

more effective than GIF in storing palette-based images.

filename.png

PNG also compresses better than GIF in almost every case (5% to 25% in typical cases)

Graphics Usability

Use graphics wisely

Avoid:

using only graphics as links

graphics on search pages.

Limit:

large images

use of images

Label clickable images

Graphics should not look like banner ads

Do use:

simple background images

thumbnail image to preview larger images

images to facilitate learning

Ensure that images do not slow page downloads

Ensure website images convey the intended messages

There are some usability issues to be addressed when including images in a webpage.

Looking for graphics?

Take your own using a digital camera

Save in .bmp, .tif, .raw format if possible

Free sites on the Web (creative commons)

Commercial sites on the Web (buy them)

Easy to grab images from your browser’s window but

Beware of copyright infringement

If you can legitimately use a graphic – REFERENCE IT’S SOURCE

Good Practice Tip

When storing images for your projects, have two folders:

Originals – where you store the largest image possible

Images – where you keep the images you are using in your html files

Web Project

 Site

 index.html

 html/sections

 images

 Originals

 Documents

Make copies of your originals and resize, crop etc the copy.

This is the project folder on your hard drive, not on the server.

Tips: using colour & images

Use of different colors in page backgrounds/text is limited to a maximum of three or four colors plus neutrals

Color is used consistently

Color has good contrast with associated text

Color is not used alone to convey meaning (accessibility)

Use of color and graphics enhances rather than distracts from the site

Graphics are optimized and do not significantly slow download

Each graphic used serves a clear purpose

Image tags use the alt attribute to configure alternate text to display if the browser or user agent does not support images (accessibility)

Animated images do not distract from the site and either do not repeat or only repeat a few times

hit125 application concepts

<img /> alignment

Use the CSS float property

Aligns the image with the text in the browser’s window