ID01 Week 3

1,283 views
1,219 views

Published on

Images and Typography

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,283
On SlideShare
0
From Embeds
0
Number of Embeds
939
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • ID01 Week 3

    1. 1. Week 03Images and Typography
    2. 2. Images in HTML<img src="images/full/factory.jpg" alt="factory-pic" title="Factory" />
    3. 3. Images in HTMLStart Tag Alternate text if End Tag image doesnt Search Path to Image Alternate appear Title Image Title Attribute Attribute Attribute <img src="images/full/factory.jpg" alt="factory-pic" title="Factory" />
    4. 4. IMAGE TYPES: GIFs, JPGs, PNGsGIF Low quality, use for simple graphics only.JPG Photographic Imagery, Complex patters or gradients. Images with Alpha TransperencyPNG
    5. 5. Background Images in CSS HTML CSS Browser<body> body { background-color: grey; <div id="box"> } This sentence is the intro to this <p>This sentence is the intro to this p { paragraph. paragraphs. </p> font-size: 14px; </div> color: white; text-align: center;</body> margin-top: 30px; } #box { height: 300px; width: 400px; border: 2px solid green; background-image: url(../images/factory2.jpg); }
    6. 6. Background Images in CSS HTML CSS Browser<body> body { background-color: grey; <div id="box"> } This sentence is the intro to this <p>This sentence is the intro to this p { paragraph. paragraphs. </p> font-size: 14px; </div> color: white; text-align: center;</body> margin-top: 28px; } #box { height: 300px; width: 400px; border: 2px solid green; background-image: url(../images/factory2.jpg); }
    7. 7. Font-Family Font Family Property Desired Font Next Best Most Generalh1 { font-family: "Trebuchet MS", Helvetica, sans-serif; } Font Stack
    8. 8. Embedding Fonts CSS@font-face { font-family: coolfont; src: url(fonts/coolfont.ttf), url(fonts/coolfont.eot);}p { font-family: coolfont, arial, sans-serif;}
    9. 9. Embedding Fonts CSS give the font a@font-face { simple name font-family: coolfont; src: url(fonts/coolfont.ttf), url(fonts/coolfont.eot);}p { font-family: coolfont, arial, sans-serif;}
    10. 10. Embedding Fonts .OTF and .TTF fonts work with all browsers CSS but Internet Explorer@font-face { font-family: coolfont; src: url(fonts/coolfont.ttf), url(fonts/coolfont.eot);}p { font-family: coolfont, arial, sans-serif;} .EOT format required for Internet Explorer Use.
    11. 11. Embedding Fonts paths to the font files, in CSS a font folder.@font-face { font-family: coolfont; src: url(fonts/coolfont.ttf), url(fonts/coolfont.eot);}p { font-family: coolfont, arial, sans-serif;}
    12. 12. Embedding Fonts CSS - without IE code...@font-face { font-family: coolfont; src: url(fonts/coolfont.ttf);}p { font-family: coolfont, arial, sans-serif;}
    13. 13. Resetting Default CSS Styles CSS* { vertical-align: baseline; font-weight: inherit; font-family: inherit; font-style: inherit; font-size: 100%; border: 0 none; outline: 0; padding: 0; margin: 0; }
    14. 14. Styling Links w/ Pseudo-classes CSSa:link { color: blue; text-decoration: none; }a:visited { color: lightBlue; text-decoration: none; }a:hover { color: white; background-color: yellow; text-decoration: none; }a:active { color: blue; text-decoration: none; }
    15. 15. Styling Links w/ Pseudo-classes CSSa:link { color: blue; text-decoration: none; }a:visited { PSEUDO-CLASSES color: lightBlue; text-decoration: none; }a:hover { color: white; background-color: yellow; text-decoration: none; }a:active { color: blue; text-decoration: none; }
    16. 16. Styling Links w/ Pseudo-classes CSSa:link { Unvisited Link color: blue; text-decoration: none; }a:visited { Visited Link color: lightBlue; text-decoration: none; }a:hover { Mouse Over Link color: white; background-color: yellow; text-decoration: none; }a:active { Selected Link color: blue; text-decoration: none; }

    ×