Understanding the web design and development


Published on

Understanding the Web Design and Development

Published in: Education, Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Understanding the web design and development

  1. 1. Understanding the Web Design and Development<br />G.H.D. Chinthaka Sanjeewa<br />Web Master / Multimedia Specialist<br />Ministry of Higher Education<br />Principles of Web Design<br />Chinthaka@NODES<br />
  2. 2. Principles of Web Design, Third Edition<br />2<br />Objectives<br />Describe the current state of HTML<br />Describe browser compatibility issues<br />Consider connection speed differences<br />Code for multiple screen resolutions<br />Address operating system issues<br />Chinthaka@NODES<br />
  3. 3. Principles of Web Design, Third Edition<br />3<br />Cascading Style Sheets (CSS) is a powerful display language for HTML<br />CSS lets you state style rules in an external style sheet that is linked to every page on a Web site<br />CSS lets you easily control the display characteristics of your Web site<br />Newer browsers offer more complete CSS support<br />The Need for Style Sheets<br />Chinthaka@NODES<br />
  4. 4. Principles of Web Design, Third Edition<br />4<br />Variables in the Web Design Environment<br />Browser compatibility<br />Connection speed<br />Screen resolution<br />Operating system<br />Chinthaka@NODES<br />
  5. 5. Principles of Web Design, Third Edition<br />5<br />Testing for Download Times<br />Test your site at different connection speeds<br />Test your site as if you were a user visiting for the first time. This is when users experience the greatest download times.<br />Clear your cache of the files and images that the browser has stored<br />Chinthaka@NODES<br />
  6. 6. Principles of Web Design, Third Edition<br />6<br />Coding for Multiple Screen Resolutions<br />A computer monitor’s screen resolution is the horizontal and vertical width and height of the computer screen in pixels<br />The two most common screen resolutions (traditionally expressed as width x height) are 800 x 600 and 1024 x 768<br />Chinthaka@NODES<br />
  7. 7. Principles of Web Design, Third Edition<br />7<br />Operating System Issues<br />Monitors and display software<br />Browser versions<br />Font choices<br />Chinthaka@NODES<br />
  8. 8. Web Site Design Principles<br />Principles of Web Design<br />Chinthaka@NODES<br />
  9. 9. 9<br />Objectives<br />Design for the computer medium<br />Design for the user<br />Design for the screen<br />Chinthaka@NODES<br />
  10. 10. 10<br />Design for the Computer Medium<br />Craft the look and feel<br />Make your design portable<br />Design for low bandwidth<br />Plan for clear presentation and easy access to your information<br />Chinthaka@NODES<br />
  11. 11. 11<br />Design for Low Bandwidth<br />Plan your pages so that they are accessible at a variety of connection speeds <br />If your pages download slowly because they contain large, detailed graphics or complicated animations, your users will leave before they ever see your content<br />Chinthaka@NODES<br />
  12. 12. 12<br />Create a site Design<br />Plan the site themes and structures<br />Create smooth transitions<br />Use active white space<br />Chinthaka@NODES<br />
  13. 13. 13<br />Design for the User<br />Keep your design efforts centered solely around your user<br />Design for interaction<br />Design for location<br />Guide the user’s eye<br />Chinthaka@NODES<br />
  14. 14. Planning the Site<br />Principles of Web Design<br />Chinthaka@NODES<br />
  15. 15. 15<br />Objectives<br />Create a site specification <br />Identify the content<br />Analyze your audience<br />Build a Web site development team<br />Create a site storyboard<br />Chinthaka@NODES<br />
  16. 16. 16<br />Analyze Your Audience<br />Produce an audience definition:<br />What is it that users want when they come to your site? <br />How can you attract them and entice them to return for repeat visits? <br />What type of computer and connection speed does your typical visitor have? <br />Chinthaka@NODES<br />
  17. 17. 17<br />Create a Site Storyboard<br />Plan your site by creating a flowchart that shows the structure and logic behind the content presentation and navigation choices<br />This preliminary step is one of the most important that you take in planning your site<br />Chinthaka@NODES<br />
  18. 18. 18<br />Summary<br />Start with pencil and paper.<br />Write a site specification document. You’ll find it invaluable as a reference while building your site.<br />Chinthaka@NODES<br />
  19. 19. 19<br />Summary<br />Plan for successful implementation of your site by creating portable file naming conventions. <br />Use a pencil and paper to diagram your site. Even if the design changes, you’ll save a lot of time and effort by visually detailing the structure of your content.<br />Chinthaka@NODES<br />
  20. 20. Planning Site Navigation<br />Principles of Web Design<br />Chinthaka@NODES<br />
  21. 21. 21<br />Objectives<br />Create usable navigation<br />Build text-based navigation<br />Link with a text navigation bar<br />Use graphics for navigation and linking<br />Chinthaka@NODES<br />
  22. 22. 22<br />Chinthaka@NODES<br />
  23. 23. 23<br />Chinthaka@NODES<br />
  24. 24. Creating Page Templates<br />Principles of Web Design<br />Chinthaka@NODES<br />
  25. 25. 25<br />Objectives<br />Understand table basics<br />Format tables<br />Follow table pointers to create well-designed tables<br />Create a page template<br />Evaluate examples of page templates<br />Chinthaka@NODES<br />
  26. 26. 26<br />Summary<br />Test your work! Table settings, especially cell widths and heights, can vary based on the user’s browser.<br />Chinthaka@NODES<br />
  27. 27. Introducing Cascading Style Sheets<br />Principles of Web Design<br />Chinthaka@NODES<br />
  28. 28. 28<br />Objectives<br />Understand CSS style rules<br />Build a basic style sheet<br />Understand the cascade<br />Use basic selection techniques<br />Use advanced selection techniques<br />Chinthaka@NODES<br />
  29. 29. Graphics and Color<br />Principles of Web Design<br />Chinthaka@NODES<br />
  30. 30. 30<br />Objectives<br />Understand graphics file formats<br />Choose a graphics tool<br />Use the <img> element<br />Control image properties with CSS<br />Understand computer color basics<br />Control color properties with CSS<br />Work with images and color<br />Control background images with CSS<br />Chinthaka@NODES<br />
  31. 31. 31<br />Understanding Graphic Files Formats<br />You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format, SVG, is not yet in common use.<br />These formats all compress images to create smaller files. Knowing which file format to use for which type of image is important.<br />If you choose the wrong file type, your image won’t compress or display properly<br />Chinthaka@NODES<br />
  32. 32. 32<br />Chinthaka@NODES<br />
  33. 33. Working with Forms<br />Principles of Web Design<br />Chinthaka@NODES<br />
  34. 34. 34<br />Objectives<br />Understand how forms work<br />Understand form syntax<br />Create input objects<br />Build forms within tables<br />Build and test a sample form<br />Chinthaka@NODES<br />
  35. 35. 35<br />Understanding How Forms Work<br />Forms let you build interactive Web pages that collect information from a user and process it on the Web server<br />The HTML form is the interface for the user to enter data<br />Chinthaka@NODES<br />
  36. 36. Publishing and Maintaining Your Web Site<br />Principles of Web Design<br />Chinthaka@NODES<br />
  37. 37. 37<br />Objectives<br />Publish your Web site<br />Test your Web site<br />Refine and update your content<br />Attract notice to your Web site<br />Chinthaka@NODES<br />