1. Louisa Lambregts, lambrel@algonquincollege.com

2. Louisa Lambregts lambrel@algonquincollege.com

3. Group Discussion After completing this course, what do you hope to be able to do? Also, do you have web design experience? ? In your group of 3, share answers to the above question.

4. 1) Evolution of “the web site” ▪ Changing Anatomy of a Web Site 2) Aspects of a Web Design Project 3) Roles 4) Tools of the Trade 5) The Web Design Process: ▪ Concept ▪ Design ▪ Implement ▪ (Evaluate) 6) Managing Your Web Projects

6. In the beginning... There was html.

7. Layout was dominated by Text formatting Layout via tables Frames Javascript: Roll-over buttons Animations Splash page Flash

8. http://www.corson.tv/main/buttugly.htm www.keepbanderabeautiful.org:80/climatecha nge.html

9. And then came CSS and Flash. www.algonquincollege.com/col Example of a site that uses: 1) Dreamweaver Templates and Contribute for site management and publishing 2) Formatted with mostly CSS 3) Uses javascript for the menu and the slideshow www.gold-art.com/ Example of a site that uses: 1) Flash as an introductory page 2) Also, still uses tables for layout

10. What was CSS designed to do? How does it work?

11. Format separated from content  Different style sheets for different outputs  Can change look and feel of site by linking to a different style sheet Flexibility of layout

12. Current Trends  Web 2.0  Widgets, social media links  Mobile Devices  Use of CMS’s (Content Management Systems)

13.  The Evolution of Web Design http://designreviver.com/articles/the-evolution-of-web-design/http://designreviver.com/articles/the-evolution-of-web-design/  The Evolution of Web Design http://sixrevisions.com/web_design/the-evolution-of-web-design/ http://sixrevisions.com/web_design/the-evolution-of-web-design/

14. Professional Tools  Adobe Dreamweaver  Fireworks (Photoshop)  Contribute  Flash Available at the computer store – Educational Pricing

15. Other Tools  CMS Platforms Zoomla and Drupal  Firebug  Free Web Sites Weebly: http://www.weebly.com Wix: http://www.wix.comhttp://www.weebly.comhttp://www.wix.com  Free CSS Templates (inspiration only!) http://www.freecsstemplates.org/css-templates/http://www.freecsstemplates.org/css-templates/

16. w3schools Try the interactive tutorials related to HTML http://www.w3schools.com/ Get a Head Start on the Technical Basics

17. Consider... 1) What is the site’s purpose 2) Who the target audience is Looking on Google for information about H1N1 Centre for Disease Control – US FightFlu.ca – Canada www.h1n1ontario.com/