Top Banner

Click here to load reader

Introduction To Web

Nov 16, 2014

ReportDownload

Business

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

  • 1. Introduction to the WebNick DeNardisWayne State UniversityOfce of Marketing and Communications February, 26, 2008 mac.wayne.edu1

2. the web is square February, 26, 2008 mac.wayne.edu2 3. ve main elements HTML (just text) CSS (just text) Images (compression is key) Javascript (for added functionality) Flash (cross platform interactivity)February, 26, 2008mac.wayne.edu 3 4. an http request February, 26, 2008 mac.wayne.edu4 5. detailed page load February, 26, 2008mac.wayne.edu 5 6. html tagTexta basic web pageFebruary, 26, 2008 mac.wayne.edu6 7. document object model February, 26, 2008 mac.wayne.edu7 8. headers February, 26, 2008 mac.wayne.edu8 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 - placeholdersline div,- denition list dl dd - denition title, denition description dt, February, 26, 2008mac.wayne.edu 9 10. block vs inline February, 26, 2008 mac.wayne.edu10 11. block vs inline February, 26, 2008 mac.wayne.edu11 12. cascading style sheets Separation of structure and presentation Positioning on screen Backgrounds and images Fonts and readabilityadding styleFebruary, 26, 2008mac.wayne.edu 12 13. css media all - applied to all handheld - mobile phone print - when transfered to printer screen - for color computer screensFebruary, 26, 2008 mac.wayne.edu13 14. css syntax body { #000000; color:margin: 0px;} #content {} .alert {} #content .alert {} dl.news dt {} February, 26, 2008 mac.wayne.edu14 15. some css properties February, 26, 2008 mac.wayne.edu15 16. css positioning Browser Support IE6 & IE7 & FF3 Firefox 2 Safari 39 Opera Methods Float Clear Relative Positioning Absolute Positioning February, 26, 2008mac.wayne.edu 16 17. css box model February, 26, 2008 mac.wayne.edu17 18. box model expanded February, 26, 2008mac.wayne.edu 18 19. oat clearing February, 26, 2008 mac.wayne.edu19 20. overall document structure

...
...
...
...
...

February, 26, 2008 mac.wayne.edu20 21. designing on a grid February, 26, 2008 mac.wayne.edu21 22. images Keep le size down User background colors where possible Combine images where possible Always use alternate tags to describeFebruary, 26, 2008 mac.wayne.edu22 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 constraintsof the web February, 26, 2008 mac.wayne.edu23 24. resources Web Design from Scratchhttp://webdesignfromscratch.com/ Semantic (X)HTMLhttp://microformats.org/wiki/semantic CSS Propertieshttp://htmldog.com/reference/cssproperties/ More to come February, 26, 2008 mac.wayne.edu24