Creating Web Images Creating Web Images A bit
Creating Web Images
Creating Web Images A bit different from creating images for output on paper l Six main factors distinguish them: l 1. 2. 3. 4. 5. 6. Format Colour Size/resolution Speed Transparency Animation
6 factors that you keep in mind as you create Web pages
Format l Web accessed by Macs, Window-based PCs, Unix machines and etc l Two most widely used formats are on the Web l GIF l JPG l PNG l Netscape format and Explorer can view all three
Color l 24 -bit @ true color monitor 16, 777, 216 colors l 16 -bit monitor 65, 536 colors l 8 -bit monitor 256 colors
Size & Resolution l l Computer images are measured in PIXELS 640 x 480 pixels how BIG is that? Printer at 200 ppi (pixels per inch) 3. 2 x 2. 4 inches l Web the image depend on monitor 86 ppi 7. 5 x 5. 5 inches (19 x 14 cm) l l l The higher the resolution, the more pixels Web page designers, tend to keep their pages under 600 pixels wide, so that viewers can see the entire contents of the page without scrolling horizontally
Speed l How can you keep download time to a minimum? ? ? small picture l The larger an image’s file size the longer it takes
Transparency l Important for 2 reasons: You can create complex layouts by making one image move behind another 2. You can take advantage of transparency to give an image a non-rectangular outline, adding visual interest to your pages 1.
Animation l Moving l GIF l Flash images
Images l l l l Images are placed in Web documents using the img tag This tag is empty, and therefore has no closing tag The tag is < img >, … < img > by itself is pointless-- it will do nothing At the very least, you need to let the browser know where to find the image that it's supposed to place in the document. In order to make the img tag work, you need to use an src attribute src stands for "source, " as in, "the source of this graphic. “ The value of src is the URL of the graphic you want to have displayed on your Web page. Thus, a typical image tag will take the form: < img src ="URL of graphic"> images. ht m
Inserting Images on a Page l The location of the image <img src="Winter. jpg"/> l Offering alternate text l Add descriptive text that will appear of the image does not <img src="Water lilies. jpg" alt="water lilies"/>
Specify SIZE of the image l Within img tag, after src attribute, type width=“x” height=“y” (in pixels) <img src="Sunset. jpg" alt="sunset" width="150" height="100"/>
Links Starts with <a> and ends with </a> l Cannot use the <a> tag by itself, because it doesn't do anything. l You'll need to enhance the <A> tag with attributes like. . href Stands for “hypertext reference, “ l A way of saying, "The location of the file I want to load. " Most anchors are in the form <a href="URL">, where URL is the location of the resource to which you want the link to point. l
Linking Thumbnails to Images l If you have a particularly large image, you can create a miniature versions or thumbnail of it l That link leads the visitor to the full size image <a href="C: Documents and Settingshanamunira My Documents2007 -S 1IP-ICT 1083 -DSN 4mystuff week twoSunset. jpg"> <img src="ss. jpg" alt=“sunset” />
Making Images Float l Image float along side of your web page, with text and other elements wrapping around the other <img src="Blue hills. jpg" align="right" alt="bluehills" width="150" height="100"/> l as default LEFT l align RIGHT or LEFT
<!-- making image float --> <p> <img src="Blue hills. jpg" align="right" alt="bluehills" width="150" height="100"/> <img src="Blue hills. jpg" align="left" alt="bluehills" width="150" height="100"/> </p> <center> <img src="Blue hills. jpg" alt="bluehills" width="150" height="100"/> </center>
Stopping Element from Wrapping l Image will appear at the end of the image <br clear=“right” />
Adding Space around an Image l Use deprecated vspace and hspace attributes to add a buffer around the image <body> <h 1> MAIN TITLE </h 1> <img src=“image 1. jpg” align=“right” width=“ 200” height=“ 350” alt=“an IMAGE” vspace=“ 15”/> <br clear=“right” /> <p>This IMAGE 1 are align to the RIGHT of this text</p> </body>
Aligning Images l align text attribute is for aligning images with
<img src=“tall. jpg” alt=“tall image” />default <img src=“square. jpg” align=“texttop” alt=“square” /> texttop <p><img src=“tall. jpg” alt=“tall image” />default <img src=“square. jpg” align=“top” alt=“square” /> top</p> <p><img src=“tall. jpg” alt=“tall image” />default <img src=“square. jpg” align=“middle” alt=“square” /> middle</p> <p><img src=“tall. jpg” alt=“tall image” />default <img src=“square. jpg” align=“absmiddle” alt=“square” /> absmiddle</p> <p><img src=“tall. jpg” align=“texttop” alt=“tall image” />texttop <img src=“square. jpg” align=“bottom” alt=“square” /> bottom</p> <p><img src=“tall. jpg” align=“texttop” alt=“tall image” />texttop <img src=“square. jpg” align=“absbottom” alt=“square” /> absbottom</p>
1. 2. 3. 4. 5. 6. Texttop aligns the square with the highest text in the line Top align the square with the highest element in the line Middle aligns the middle of the square with the middle of the text Absmiddle aligns the middle of the square with the middle of the largest item in the line Bottom aligns the bottom of the square with the baseline of the text Absbottom aligns the bottom of the square with the bottom of the largest item in the line
Adding Horizontal Rules l One graphic element that is completely supported by the majority of the browsers is the horizontal rule <body> <hr size=“ 20” width=“ 80%” align=“center” noshade=“noshade” /> </body>
- Slides: 22
