1 / 16

Evolution of Web Design: From HTML to CSS

Explore the journey of web design evolution from HTML to CSS, covering layout changes, use of tools, current trends, and professional resources. Enhance your understanding of web design theory and practical application.

lonato
Download Presentation

Evolution of Web Design: From HTML to CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Louisa Lambregts, lambrel@algonquincollege.com Web Design Theory

  2. About Me Louisa Lambregts lambrel@algonquincollege.com

  3. What Am I Doing Here? 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. Course Topics 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

  5. Evolution of Web Design

  6. Evolution of Web Design In the beginning . . . There was html.

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

  8. Scary Examples http://www.corson.tv/main/buttugly.htm www.keepbanderabeautiful.org:80/climatechange.html

  9. Evolution of Web Design 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. CSS – Cascade Style Sheets What was CSS designed to do? How does it work?

  11. CSS – Cascade Style Sheets 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. Web Design Today Current Trends • Web 2.0 • Widgets, social media links • Mobile Devices • Use of CMS’s (Content Management Systems)

  13. Articles: Evolution of Web Design • The Evolution of Web Designhttp://designreviver.com/articles/the-evolution-of-web-design/ • The Evolution of Web Designhttp://sixrevisions.com/web_design/the-evolution-of-web-design/

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

  15. Web Designer Tools Other Tools • CMS PlatformsZoomla and Drupal • Firebug • Free Web SitesWeebly: http://www.weebly.comWix: http://www.wix.com • Free CSS Templates (inspiration only!)http://www.freecsstemplates.org/css-templates/

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

More Related