Your SlideShare is downloading. ×
0
ID01 Week 3
ID01 Week 3
ID01 Week 3
ID01 Week 3
ID01 Week 3
ID01 Week 3
ID01 Week 3
ID01 Week 3
ID01 Week 3
ID01 Week 3
ID01 Week 3
ID01 Week 3
ID01 Week 3
ID01 Week 3
ID01 Week 3
ID01 Week 3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

ID01 Week 3

1,102

Published on

Images and Typography

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,102
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 1. Week 03Images and Typography
    • 2. Images in HTML<img src="images/full/factory.jpg" alt="factory-pic" title="Factory" />
    • 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. IMAGE TYPES: GIFs, JPGs, PNGsGIF Low quality, use for simple graphics only.JPG Photographic Imagery, Complex patters or gradients. Images with Alpha TransperencyPNG
    • 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. 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. Font-Family Font Family Property Desired Font Next Best Most Generalh1 { font-family: "Trebuchet MS", Helvetica, sans-serif; } Font Stack
    • 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. 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. 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. 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. Embedding Fonts CSS - without IE code...@font-face { font-family: coolfont; src: url(fonts/coolfont.ttf);}p { font-family: coolfont, arial, sans-serif;}
    • 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. 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. 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. 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; }

    ×