1. Chapter 13 Web 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