IMAGES Programming

8/6/2019 IMAGES Programming

http://slidepdf.com/reader/full/images-programming 1/19

Basic HTML/CSS Programming Basic HTML/CSS Programming using Adobe Dreamweaverusing Adobe Dreamweaver

Adobe Dreamweaver is a web software application that provides total support for website creation and management.This advanced program meets the needs of many skills levels, from professional web designers to beginners just

learning about webpage creation





Now we’re getting on to moreexciting part of web design.. The

use of IMAGES.

I will guide you through some of the basics of putting on colors

and images as part of your

webpage design.



Web-safe palettes, or brow ser-safe palettes as they arealso known, consist of 216 colors that display solidly, consistently,and without graduation on any monitor capable of displaying at least8-bit color (256 colors). The reason why this palette doesn’t containthe maximum 256 colors is that only 216 of this number will displayexactly the same on all computers (the remaining 40 vary somewhat

from Mac to PC, for example)

Colors may be specified in a number of ways (the following areexample for the color red:

•RGB triplet in hexadecimal format (a hex triplet) - (#f00, #ff0000)•Common English names - red•RGB percentages or decimals - rgb(255,0,0) , rgb(100%, 0%, 0%)

COLORS



• Color for TEXT:

p {color: #F00;

}

ORp {

color: red;

}

• Adding Background Color to TEXT:p {

color:#000;background-color:#FF0;line-height:150%;

}

• Adding Background Color to Headings:h2 {color:#000;background-color:#808080;

padding:0.3em;}

SYNTAX DECLARATION FOR COLORS (Samples)



Declaration for textcolor

Declaration for text background

Declaration for heading background color

Declarations above will take

effect here



(after save and view on browser) This would be the output.



Image Formats for Backgrounds

Choosing the correct format of your image makes an incredibledifference to the quality, file size, and download time. Basically,this is one of the major factors that separates a good design froma great design.

Three main formats are acceptable, namely GIF, JPEG, and PNGfiles.

GIF - format uses a proprietary compression scheme to keep thesize of the file as small as possible.

JPEG - incredibly flexible, but isn’t analyzed for color in the sameway as a GIF. This is the most commonly used standardmethod of lossy compression for photographic images.

PNG – has greater flexibility but maximum image quality

retention.



Starting.. Open a new HTML file again then type what’s shown above.

Change ‘Untitled Document’ to your own preferred title

On our previous codings, we useto put our css declarations on the

heading part <head> </head>,but here, we will declare anexternal css file namedIMAGE2.css (refer to the nextslide)

div (short for division) divides the content into

sections. Each section can then have its ownformatting as specified by your declarations.



Here’s how to open a CSS file: On the menu bar click ‘File’, ‘Open’, then ‘CSS’.



Declarations for page body

Declarations for image container

image jpeg filename (by the way, For you to be able to insert animage, the image file that you choose to display has to be saved in

the same folder where your HTML and CSS files are also saved)

So here is where we will put all our CSS declarations. This is linked toour HTML file (IMAGES2.html)



See this output after saving both HTML and CSS coding sheets.

By default, the image is repeated to fill your declared size of the container. But CSS has aprepared solution for this if you don’t want your image repeated. That is by the use of

Image Tiling property (see next slide)



Other Declarations you can use in manipulating your

IMAGE

• IMAGE TILING:

background-repeat: value;

-values are: repeat, repeat-x, repeat-y, no-repeat

• IMAGE POSITIONING:

background-position: value;

-values are: top left, top center, top right, center leftcenter center, center right, bottom left, bottom center

bottom right, x-% y-%, x-pos y-pos

here are examples for the last 2 values above : (x-% y-%, x-pos y-pos)

background-position: 50px left;background-position: 10% 50%;background-position: 10px 20px;background-position: 20px bottom;



Image container size

I declared image tiling with ‘no-repeat’ butsee that I also changed the size of the

container to slim-fit our image



In our IMAGES2.html file, I put <center> </center> in between our div containerdeclaration to have a centering effect on our image. Now, save both coding

sheets and view.



This is the output on the browser. Now let’s play a bitmore to make it more colorful..



Now, I added another image file. Iset its position to ‘top center’ usingbackground-position property. and I

adjusted the margin to make thecenter image appear to be layed on

the hands

Here, I broaden the image borderfrom previous 2px to 10px. I alsoset the image at the center of theboarder.





Now that’s more funwith colors around!

Documents

IMAGES Programming