images programming
TRANSCRIPT
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
8/6/2019 IMAGES Programming
http://slidepdf.com/reader/full/images-programming 3/19
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.
8/6/2019 IMAGES Programming
http://slidepdf.com/reader/full/images-programming 4/19
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
8/6/2019 IMAGES Programming
http://slidepdf.com/reader/full/images-programming 5/19
• 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)
8/6/2019 IMAGES Programming
http://slidepdf.com/reader/full/images-programming 6/19
Declaration for textcolor
Declaration for text background
Declaration for heading background color
Declarations above will take
effect here
8/6/2019 IMAGES Programming
http://slidepdf.com/reader/full/images-programming 7/19
(after save and view on browser) This would be the output.
8/6/2019 IMAGES Programming
http://slidepdf.com/reader/full/images-programming 8/19
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.
8/6/2019 IMAGES Programming
http://slidepdf.com/reader/full/images-programming 9/19
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.
8/6/2019 IMAGES Programming
http://slidepdf.com/reader/full/images-programming 10/19
Here’s how to open a CSS file: On the menu bar click ‘File’, ‘Open’, then ‘CSS’.
8/6/2019 IMAGES Programming
http://slidepdf.com/reader/full/images-programming 11/19
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)
8/6/2019 IMAGES Programming
http://slidepdf.com/reader/full/images-programming 12/19
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)
8/6/2019 IMAGES Programming
http://slidepdf.com/reader/full/images-programming 13/19
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;
8/6/2019 IMAGES Programming
http://slidepdf.com/reader/full/images-programming 14/19
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
8/6/2019 IMAGES Programming
http://slidepdf.com/reader/full/images-programming 15/19
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.
8/6/2019 IMAGES Programming
http://slidepdf.com/reader/full/images-programming 16/19
This is the output on the browser. Now let’s play a bitmore to make it more colorful..
8/6/2019 IMAGES Programming
http://slidepdf.com/reader/full/images-programming 17/19
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.