ID01 Week 3
Upcoming SlideShare
Loading in...5
×
 

ID01 Week 3

on

  • 956 views

Images and Typography

Images and Typography

Statistics

Views

Total Views
956
Views on SlideShare
209
Embed Views
747

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 747

http://www.mkontopoulos.com 421
http://www.ryandorazi.com 326

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

ID01 Week 3 ID01 Week 3 Presentation Transcript

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