jpg<\/h4>\n
For most photos, a .jpg will
\nhave the smallest file size.<\/td>\n
gif<\/h4>\n
Used\u00a0for transparent back,
\nanimated gif; smaller size for
\nimages with large blocks of solid color.<\/td>\n
png<\/h4>\n
Used for transparent back.<\/td>\n<\/tr>\n
![\"bird](\"http:\/\/www.art556.com\/images\/birdPhoto122x106.jpg\")
<\/td>\n<\/td>\n![\"bird](\"http:\/\/www.art556.com\/images\/bird.png\")
<\/td>\n<\/tr>\n![\"bird](\"http:\/\/www.art556.com\/images\/birdOnGreen122x101.png\")
<\/td>\n<\/td>\n<\/tr>\nformatting<\/b><\/p>\n most importantly:<\/strong><\/p>\n Text within an image allows you to control typography and achieve a desired effect, but the text is:<\/p>\n The use of web fonts is always a better choice for displaying text.<\/p>\n alt text The alt tag provides alternate text for an image<\/p>\n Images placed in the css are defined to have only aesthetic value. You are not able to apply alt text to a css image. If an image has meaning, then use img element.**<\/p>\n You can place an image with just html.<\/strong>\u00a0It will float to the top and left. If there is another image before it, this image will stack to the right if there is room, or fall to the next line if there is not room. The <div> tag (above) acts as a container for the image. The container or div is defined by\u00a0a class called “bird” and may look like this:<\/span><\/p>\n .bird { Click here<\/a> to see my version of the class in the css file.<\/p>\n notes:<\/strong><\/p>\n In class I demonstrated with a black and white image, but it can also be done with color images, especially those on a white or near white background. For color images, rather than creating a new layer, use the selection to delete the background on the image layer.<\/p>\n Clean up\u00a0 your poem image as demonstrated in class.<\/p>\n Create a second texture image the same way and place it in the html file.<\/p>\n Note that you will have more design flexibility if your images:<\/p>\n When working on your page layout in InDesign, your images can be:<\/p>\n images.html<\/a><\/p>\n imagestyles.css<\/a><\/p>\n about titles and tags<\/a><\/p>\n\n
\n
text in images<\/b><\/h2>\n
\n
\n<\/b><\/span>alt : <img alt=\u201dtext\u201d><\/b><\/p>\n\n
Placing Images on a web page<\/h2>\n
\n<img src=”images\/bird.png” width=”500″ height=”507″ alt=”bird with transparent back”><\/span><\/p>\n
\nYou can place an image by using html and css together. <\/strong>
\nThe html would read as:\u00a0<div class=”bird” img alt=\u201ddrawing of raven\u201d><\/div>. Click here<\/a> to see my example of both html code versions.<\/span><\/p>\n
\nposition: absolute;\u00a0\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0————>\u00a0the position is defined by “top” and “left”<\/span>
\nleft: 400px; \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0————> this image will be 400 px from the left side\u00a0of the window<\/span>
\ntop: 200px;\u00a0\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0————> this image will be 200 px from the top\u00a0side\u00a0of the window<\/span>
\nwidth: 500px;\u00a0\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0————>\u00a0the box containing this image will be 500px wide<\/span>
\nheight: 507px;\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0————>\u00a0the box containing this image will be 507px\u00a0tall<\/span>
\nbackground-image: url (images\/bird.png)\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0————> this is where the image is found<\/span>
\n}<\/p>\n\n
Using channels to create a png:<\/strong><\/h2>\n
\n
exercise :<\/b><\/h2>\n
![\"\"](\"http:\/\/art556.com\/wp-content\/uploads\/2014\/09\/raven-150x150.jpg\")
<\/a><\/p>\n\n
\nMake sure you use both methods (html and css) to place the image.<\/li>\n![\"\"](\"http:\/\/art556.com\/wp-content\/uploads\/2014\/09\/dirt1-150x150.png\")
<\/a><\/p>\n\n
\n
examples :<\/h2>\n
resources<\/h2>\n