Understanding the Web Design and Development

1. Understanding the Web Design and Development G.H.D. Chinthaka Sanjeewa Web Master / Multimedia Specialist Ministry of Higher Education Principles of Web Design Chinthaka@NODES

2. Principles of Web Design, Third Edition 2 Objectives Describe the current state of HTML Describe browser compatibility issues Consider connection speed differences Code for multiple screen resolutions Address operating system issues Chinthaka@NODES

3. Principles of Web Design, Third Edition 3 Cascading Style Sheets (CSS) is a powerful display language for HTML CSS lets you state style rules in an external style sheet that is linked to every page on a Web site CSS lets you easily control the display characteristics of your Web site Newer browsers offer more complete CSS support The Need for Style Sheets Chinthaka@NODES

4. Principles of Web Design, Third Edition 4 Variables in the Web Design Environment Browser compatibility Connection speed Screen resolution Operating system Chinthaka@NODES

5. Principles of Web Design, Third Edition 5 Testing for Download Times Test your site at different connection speeds Test your site as if you were a user visiting for the first time. This is when users experience the greatest download times. Clear your cache of the files and images that the browser has stored Chinthaka@NODES

6. Principles of Web Design, Third Edition 6 Coding for Multiple Screen Resolutions A computer monitor’s screen resolution is the horizontal and vertical width and height of the computer screen in pixels The two most common screen resolutions (traditionally expressed as width x height) are 800 x 600 and 1024 x 768 Chinthaka@NODES

7. Principles of Web Design, Third Edition 7 Operating System Issues Monitors and display software Browser versions Font choices Chinthaka@NODES

8. Web Site Design Principles Principles of Web Design Chinthaka@NODES

9. 9 Objectives Design for the computer medium Design for the user Design for the screen Chinthaka@NODES

10. 10 Design for the Computer Medium Craft the look and feel Make your design portable Design for low bandwidth Plan for clear presentation and easy access to your information Chinthaka@NODES

11. 11 Design for Low Bandwidth Plan your pages so that they are accessible at a variety of connection speeds If your pages download slowly because they contain large, detailed graphics or complicated animations, your users will leave before they ever see your content Chinthaka@NODES

12. 12 Create a site Design Plan the site themes and structures Create smooth transitions Use active white space Chinthaka@NODES

13. 13 Design for the User Keep your design efforts centered solely around your user Design for interaction Design for location Guide the user’s eye Chinthaka@NODES

14. Planning the Site Principles of Web Design Chinthaka@NODES

15. 15 Objectives Create a site specification Identify the content Analyze your audience Build a Web site development team Create a site storyboard Chinthaka@NODES

16. 16 Analyze Your Audience Produce an audience definition: What is it that users want when they come to your site? How can you attract them and entice them to return for repeat visits? What type of computer and connection speed does your typical visitor have? Chinthaka@NODES

17. 17 Create a Site Storyboard Plan your site by creating a flowchart that shows the structure and logic behind the content presentation and navigation choices This preliminary step is one of the most important that you take in planning your site Chinthaka@NODES

18. 18 Summary Start with pencil and paper. Write a site specification document. You’ll find it invaluable as a reference while building your site. Chinthaka@NODES

19. 19 Summary Plan for successful implementation of your site by creating portable file naming conventions. 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. Chinthaka@NODES

20. Planning Site Navigation Principles of Web Design Chinthaka@NODES

21. 21 Objectives Create usable navigation Build text-based navigation Link with a text navigation bar Use graphics for navigation and linking Chinthaka@NODES

22. 22 Chinthaka@NODES

23. 23 Chinthaka@NODES

24. Creating Page Templates Principles of Web Design Chinthaka@NODES

25. 25 Objectives Understand table basics Format tables Follow table pointers to create well-designed tables Create a page template Evaluate examples of page templates Chinthaka@NODES

26. 26 Summary Test your work! Table settings, especially cell widths and heights, can vary based on the user’s browser. Chinthaka@NODES

27. Introducing Cascading Style Sheets Principles of Web Design Chinthaka@NODES

28. 28 Objectives Understand CSS style rules Build a basic style sheet Understand the cascade Use basic selection techniques Use advanced selection techniques Chinthaka@NODES

29. Graphics and Color Principles of Web Design Chinthaka@NODES

30. 30 Objectives Understand graphics file formats Choose a graphics tool Use the <img> element Control image properties with CSS Understand computer color basics Control color properties with CSS Work with images and color Control background images with CSS Chinthaka@NODES

31. 31 Understanding Graphic Files Formats 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. These formats all compress images to create smaller files. Knowing which file format to use for which type of image is important. If you choose the wrong file type, your image won’t compress or display properly Chinthaka@NODES

32. 32 Chinthaka@NODES

33. Working with Forms Principles of Web Design Chinthaka@NODES

34. 34 Objectives Understand how forms work Understand form syntax Create input objects Build forms within tables Build and test a sample form Chinthaka@NODES

35. 35 Understanding How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The HTML form is the interface for the user to enter data Chinthaka@NODES

36. Publishing and Maintaining Your Web Site Principles of Web Design Chinthaka@NODES

37. 37 Objectives Publish your Web site Test your Web site Refine and update your content Attract notice to your Web site Chinthaka@NODES