Similar presentations

2 ObjectivesApply the design, layout, and CSS skills you learned throughout this book by building a home page for a fictional Web siteDescribe the design process and decisions a Web designer must make in a standards-based development processTest your work in multiple browsers for consistency as you progressTroubleshoot compatibility issues as they arisePrinciples of Web Design, 4th Edition

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

13 Building the MastheadThe 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 tablePrinciples of Web Design, 4th Edition

16 Building the Small Feature BoxesThe 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-10Each feature box contains a text reverse heading, a photo, and some copyPrinciples of Web Design, 4th Edition

21 Adding Content to the Small Feature BoxNow 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 presentationPrinciples of Web Design, 4th Edition

27 Building the Feature Article SectionThe 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-18Principles of Web Design, 4th Edition

34 Building the Search SectionThe 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-23Principles of Web Design, 4th Edition

39 Building the Links SectionThe links section contains two images and some hypertext links contained within a brown borderYou will add this content in the right column, directly beneath the search boxPrinciples of Web Design, 4th Edition

42 Controlling the Hypertext Link StylesTo complete the layout, the color and font of the hypertext links need to match the design of the siteYou will also add a hover property to activate a background color when a user points a mouse to a hypertext linkPrinciples of Web Design, 4th Edition

44 Completing the Web Page DesignYou created a complete layout based on the graphic designer’s original designAlthough 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 properlyPrinciples of Web Design, 4th Edition

48 SummaryYou can use CSS properties to create complex designs, such as the small feature boxes, without resorting to extra graphicsYou can use CSS to control fonts, text alignment, color, and leading to gain complete control over your page typographyPrinciples 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 designUsing simple tables to hold the page design together ensures that more users will see the Web page as you designed it for themPrinciples of Web Design, 4th Edition