Chapter 13 Web Page Design Studio - PowerPoint PPT Presentation

chapter 13 web page design studio n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Chapter 13 Web Page Design Studio PowerPoint Presentation
Download Presentation
Chapter 13 Web Page Design Studio

play fullscreen
1 / 49
Chapter 13 Web Page Design Studio
236 Views
Download Presentation
tyrone-mayer
Download Presentation

Chapter 13 Web Page Design Studio

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Chapter 13Web Page Design Studio Principles of Web Design, 4th Edition

  2. Objectives • Apply the design, layout, and CSS skills you learned throughout this book by building a home page for a fictional Web site • Describe the design process and decisions a Web designer must make in a standards-based development process • Test your work in multiple browsers for consistency as you progress • Troubleshoot compatibility issues as they arise Principles of Web Design, 4th Edition

  3. The Initial Design Process Principles of Web Design, 4th Edition

  4. The Initial Design Process • The clients sketched out a basic idea for the site, shown in Figure 13-1 • They also submitted a Web site specification document to the graphic designer providing background information about the audience, content, and design of the Web site Principles of Web Design, 4th Edition

  5. Principles of Web Design, 4th Edition

  6. Principles of Web Design, 4th Edition

  7. Principles of Web Design, 4th Edition

  8. Principles of Web Design, 4th Edition

  9. Creating the Mock-up Web Page Principles of Web Design, 4th Edition

  10. Principles of Web Design, 4th Edition

  11. Principles of Web Design, 4th Edition

  12. Principles of Web Design, 4th Edition

  13. Building the Masthead • The masthead at the top of the DogWorld Web page contains the DogWorld banner graphic and a brown horizontal bar in two separate rows of the opening table Principles of Web Design, 4th Edition

  14. Principles of Web Design, 4th Edition

  15. Principles of Web Design, 4th Edition

  16. Building the Small Feature Boxes • The left column of the DogWorld Web page contains three small feature boxes that highlight the content of the monthly columns, as shown in Figure 13-10 • Each feature box contains a text reverse heading, a photo, and some copy Principles of Web Design, 4th Edition

  17. Principles of Web Design, 4th Edition

  18. Principles of Web Design, 4th Edition

  19. Principles of Web Design, 4th Edition

  20. Principles of Web Design, 4th Edition

  21. Adding Content to the Small Feature Box • Now that you have created the basic structure of the small feature box, you can add some text and an image to test the box for content presentation Principles of Web Design, 4th Edition

  22. Principles of Web Design, 4th Edition

  23. Principles of Web Design, 4th Edition

  24. Principles of Web Design, 4th Edition

  25. Completing the Left Column Layout • Now that you have created a single small feature box, you can copy it and add two more smfeature boxes to the left column Principles of Web Design, 4th Edition

  26. Principles of Web Design, 4th Edition

  27. Building the Feature Article Section • The middle column of the content table contains the feature story image, two sections of text separated by a dividing rule, a secondary image, and a text navigation bar, as shown in Figure 13-18 Principles of Web Design, 4th Edition

  28. Principles of Web Design, 4th Edition

  29. Principles of Web Design, 4th Edition

  30. Principles of Web Design, 4th Edition

  31. Principles of Web Design, 4th Edition

  32. Adding a Text Navigation Bar • The middle column of the content table contains a text navigation bar • This set of links is centered in the middle column Principles of Web Design, 4th Edition

  33. Principles of Web Design, 4th Edition

  34. Building the Search Section • The right column of the content table contains the search form, links section, and two images: the links dog tag and the “Next Month” feature graphic, as shown in Figure 13-23 Principles of Web Design, 4th Edition

  35. Principles of Web Design, 4th Edition

  36. Principles of Web Design, 4th Edition

  37. Adding the Search Form • Because this is a mock-up layout, you need to add only enough form code to simulate how the user form interface will appear Principles of Web Design, 4th Edition

  38. Principles of Web Design, 4th Edition

  39. Building the Links Section • The links section contains two images and some hypertext links contained within a brown border • You will add this content in the right column, directly beneath the search box Principles of Web Design, 4th Edition

  40. Principles of Web Design, 4th Edition

  41. Principles of Web Design, 4th Edition

  42. Controlling the Hypertext Link Styles • To complete the layout, the color and font of the hypertext links need to match the design of the site • You will also add a hover property to activate a background color when a user points a mouse to a hypertext link Principles of Web Design, 4th Edition

  43. Principles of Web Design, 4th Edition

  44. Completing the Web Page Design • You created a complete layout based on the graphic designer’s original design • Although you have been testing the page in different browsers during the development process, it is a good idea to test a final time to make sure the pages are displayed properly Principles of Web Design, 4th Edition

  45. Principles of Web Design, 4th Edition

  46. Principles of Web Design, 4th Edition

  47. Principles of Web Design, 4th Edition

  48. Summary • You can use CSS properties to create complex designs, such as the small feature boxes, without resorting to extra graphics • You can use CSS to control fonts, text alignment, color, and leading to gain complete control over your page typography Principles of Web Design, 4th Edition

  49. Summary (continued) • With CSS box model properties, you gain precise control over the white space within table columns and between different elements in a page design • Using simple tables to hold the page design together ensures that more users will see the Web page as you designed it for them Principles of Web Design, 4th Edition