Introduction To Web

  • 977 views
Uploaded on

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

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

More in: Business , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
977
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
24
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

Transcript

  • 1. Introduction to the Web Nick DeNardis Wayne State University Office of Marketing and Communications February, 26, 2008 mac.wayne.edu 1
  • 2. the web is square February, 26, 2008 mac.wayne.edu 2
  • 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. an http request February, 26, 2008 mac.wayne.edu 4
  • 5. detailed page load February, 26, 2008 mac.wayne.edu 5
  • 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. document object model February, 26, 2008 mac.wayne.edu 7
  • 8. headers February, 26, 2008 mac.wayne.edu 8
  • 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. block vs inline February, 26, 2008 mac.wayne.edu 10
  • 11. block vs inline February, 26, 2008 mac.wayne.edu 11
  • 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. 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. css syntax • body { #000000; color: margin: 0px; } • #content {} • .alert {} • #content .alert {} • dl.news dt {} February, 26, 2008 mac.wayne.edu 14
  • 15. some css properties February, 26, 2008 mac.wayne.edu 15
  • 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. css box model February, 26, 2008 mac.wayne.edu 17
  • 18. box model expanded February, 26, 2008 mac.wayne.edu 18
  • 19. float clearing February, 26, 2008 mac.wayne.edu 19
  • 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. designing on a grid February, 26, 2008 mac.wayne.edu 21
  • 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. 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. 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