Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
DePaul University SNL 262 Web Page Design Chapt 10 - Putting Graphics on A Web Page Instructor: David A. Lash AdvWeb-1/12 Image Files Are Separate Files Lion.gif mypage.html <P>Welcome</P> <image src=lion.gif> Welcome Displays as: AdvWeb-2/12 Placing Image on a Web Page Image files are typically saved in separate, external files from the HTML text. You need to include the image files from the HTML text – The basic command to include images is: <img src="elivs.gif"> You can also use an absolute address to the image: <img src="www.depaul.edu/~dlash/surfer.gif"> Typically copy the image to your server area and use local address. AdvWeb-3/12 Getting Images to Put On Your Web Page There are many sites on the WWW – – http://dir.yahoo.com/Computers_and_Internet/ Graphics/Clip_Art/ http://www.web-animator.com/ General Procedure To Copy Web Graphic From Web Page to Hard Drive – – – – – Place your curser on the graphic to save. Right click with your curser on the graphic to display a pull down menu. Pull Down to Save Image As. Fill in the "Save As ..." information (See below). Hit the Save button to save. Warning some images have copywrite protection! AdvWeb-4/12 The Save As … Dialog box AdvWeb-5/12 Types of Graphic Files - 2 major file formats for WWW graphic images – GIF (Graphic Interchange Format) - uses 8 bit or 256 possible colors. Particularly good for areas of flat colors like logos, cartoons, icons. Does not good for photographic images since it reduces all images to 256 colors. On a side note, Unisys holds the patent on the compression method that gif files uses. – – In 1994, announced will charge for sites using GIF, causing people to move towards nonproprietary format. JPEG (Joint photographic Experts Group) Uses a 24 bit RGB color information, (displays 8 bit colors on 8bit color systems) ideal use for photographs. Not good at compressing images with solid colors such as logos, line art and cartoons. AdvWeb-6/12 The ALT Attribute: Use Atl= inside the <image> tag, to define some alternative text to display For example: <image src=“hi.gif” ALT="your message here”> – – – Where your message here will display on older browsers that don’t display graphics. Also displays this message when you point to the image. For example look at Calvin example Created by the following line: <img SRC="calvin1.gif" ALT="This Is Calvin" > AdvWeb-7/12 Making an image “clickable” Any image can be made to be “clickable” – That is, when click image it takes you to another link. Combine the Anchor tag with image src to make an image click able: <A HREF=http::/www.disney.com"><IMG SRC=sebastin.gif"></A> The destination link Sebastin example click here AdvWeb-8/12 The image file that will load. Horizontal And Vertical Alignment Need to use a separate tag to properly wrap text around an image. For example may want the image to be on left and text wrap around it properly: <DIV ALIGN="left"> <Img SRC="snoopy.gif"> </Div> The following will align the image left but not allow text to wrap around it giving it a different feel: <img align="left" src="snoopy.gif"> Click here to see an example of using the DIV tag to align left right and center. Click here for a snoopy example AdvWeb-9/12 The Height and Width Attribute of Image Tag As pages download, a browser first downloads the HTML code to figure out how to lay out page. – If there are images must then download the images to see how big they are to properly lay things out. You can help this process out by specifying the HEIGHT and WIDTH of image in the IMG tag. E.G, <img SRC="snoopy1.gif" height=32 width=30> The browser can therefor not worry about the size o the image, display the HTML right away (giving impression of faster page loading), and then download graphics. You can use the height and width attributes to change the size of the image: <img SRC="snoopy1.gif" height=60 width=56> For example, snoopy.gif created bigger AdvWeb-10/12 The Size Of Graphical Images Large graphical files take longer to download across network than small. If images are too long, people won't hang around to wait for page to load. On a 28.8 KB modem connection each 1 KB of size takes about 30 seconds to download. – – – 1 KiloByte (KB) => 1024 bytes MegaByte (MB) => 1,024 KB => 1,0048,576 bytes 1 GigaByte (GB) => 1,024 MB => 1,073,741,824 bytes You can use explorer to look at size of files AdvWeb-11/12