Introduction To Web

1,241 views

Published on

Internal presentation given by Nick DeNardis at Wayne State University to the Marketing and Communications creative group for internal employee development.

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

  • Be the first to like this

No Downloads
Views
Total views
1,241
On SlideShare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
24
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introduction To Web

  1. 1. Introduction to the Web Nick DeNardis Wayne State University Office of Marketing and Communications February, 26, 2008 mac.wayne.edu 1
  2. 2. the web is square February, 26, 2008 mac.wayne.edu 2
  3. 3. five main elements • HTML (just text) • CSS (just text) • Images (compression is key) • Javascript (for added functionality) • Flash (cross platform interactivity) February, 26, 2008 mac.wayne.edu 3
  4. 4. an http request February, 26, 2008 mac.wayne.edu 4
  5. 5. detailed page load February, 26, 2008 mac.wayne.edu 5
  6. 6. html tag <a href=”http...” target=”_blank” title=”Go...”>Text</a> <img src=”http..” width=”1” height=”1” alt=”...” /> a basic web page February, 26, 2008 mac.wayne.edu 6
  7. 7. document object model February, 26, 2008 mac.wayne.edu 7
  8. 8. headers February, 26, 2008 mac.wayne.edu 8
  9. 9. other common tags • p -- anchor paragraph • a - image • img - emphasis • em - bold • strong unordered and ordered list • ul,- ol - item • li -list break • br span - placeholders line • div,- definition list • dl dd - definition title, definition description • dt, February, 26, 2008 mac.wayne.edu 9
  10. 10. block vs inline February, 26, 2008 mac.wayne.edu 10
  11. 11. block vs inline February, 26, 2008 mac.wayne.edu 11
  12. 12. cascading style sheets • Separation of structure and presentation • Positioning on screen • Backgrounds and images • Fonts and readability adding style February, 26, 2008 mac.wayne.edu 12
  13. 13. css media • all - applied to all • handheld - mobile phone • print - when transfered to printer • screen - for color computer screens February, 26, 2008 mac.wayne.edu 13
  14. 14. css syntax • body { #000000; color: margin: 0px; } • #content {} • .alert {} • #content .alert {} • dl.news dt {} February, 26, 2008 mac.wayne.edu 14
  15. 15. some css properties February, 26, 2008 mac.wayne.edu 15
  16. 16. css positioning • Browser Support • IE6 & IE7 & FF3 • Firefox 2 • Safari 39 • Opera • Methods • Float Clear • Relative Positioning • Absolute Positioning February, 26, 2008 mac.wayne.edu 16
  17. 17. css box model February, 26, 2008 mac.wayne.edu 17
  18. 18. box model expanded February, 26, 2008 mac.wayne.edu 18
  19. 19. float clearing February, 26, 2008 mac.wayne.edu 19
  20. 20. overall document structure • <div id=”container”> • <div id=”header”>...</div> • <div id=”navigation”>...</div> • <div id=”content”>...</div> • <div id=”related-info”>...</div> • <div id=”footer”>...</div> • </div> February, 26, 2008 mac.wayne.edu 20
  21. 21. designing on a grid February, 26, 2008 mac.wayne.edu 21
  22. 22. images • Keep file size down • User background colors where possible • Combine images where possible • Always use alternate tags to describe February, 26, 2008 mac.wayne.edu 22
  23. 23. designing from the html out • Start from the HTML • Structure the content and DOM • Position elements for the screen • Add style and images • Format for Print and Mobile • Become comfortable with the constraints of the web February, 26, 2008 mac.wayne.edu 23
  24. 24. resources • Web Design from Scratch http://webdesignfromscratch.com/ • Semantic (X)HTML http://microformats.org/wiki/semantic • CSS Properties http://htmldog.com/reference/cssproperties/ • More to come February, 26, 2008 mac.wayne.edu 24

×