Chapter 13 Web Page Design Studio
-
Upload
tyrone-mayer -
Category
Documents
-
view
64 -
download
7
description
Transcript of Chapter 13 Web Page Design Studio
![Page 1: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/1.jpg)
Chapter 13
Web Page Design Studio
Principles of Web Design, 4th Edition
![Page 2: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/2.jpg)
Principles of Web Design, 4th Edition 13-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
![Page 3: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/3.jpg)
Principles of Web Design, 4th Edition 13-3
The Initial Design Process
![Page 4: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/4.jpg)
Principles of Web Design, 4th Edition 13-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
![Page 5: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/5.jpg)
Principles of Web Design, 4th Edition 13-5
![Page 6: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/6.jpg)
Principles of Web Design, 4th Edition 13-6
![Page 7: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/7.jpg)
Principles of Web Design, 4th Edition 13-7
![Page 8: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/8.jpg)
Principles of Web Design, 4th Edition 13-8
![Page 9: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/9.jpg)
Principles of Web Design, 4th Edition 13-9
Creating the Mock-up Web Page
![Page 10: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/10.jpg)
Principles of Web Design, 4th Edition 13-10
![Page 11: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/11.jpg)
Principles of Web Design, 4th Edition 13-11
![Page 12: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/12.jpg)
Principles of Web Design, 4th Edition 13-12
![Page 13: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/13.jpg)
Principles of Web Design, 4th Edition 13-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
![Page 14: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/14.jpg)
Principles of Web Design, 4th Edition 13-14
![Page 15: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/15.jpg)
Principles of Web Design, 4th Edition 13-15
![Page 16: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/16.jpg)
Principles of Web Design, 4th Edition 13-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
![Page 17: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/17.jpg)
Principles of Web Design, 4th Edition 13-17
![Page 18: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/18.jpg)
Principles of Web Design, 4th Edition 13-18
![Page 19: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/19.jpg)
Principles of Web Design, 4th Edition 13-19
![Page 20: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/20.jpg)
Principles of Web Design, 4th Edition 13-20
![Page 21: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/21.jpg)
Principles of Web Design, 4th Edition 13-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
![Page 22: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/22.jpg)
Principles of Web Design, 4th Edition 13-22
![Page 23: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/23.jpg)
Principles of Web Design, 4th Edition 13-23
![Page 24: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/24.jpg)
Principles of Web Design, 4th Edition 13-24
![Page 25: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/25.jpg)
Principles of Web Design, 4th Edition 13-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
![Page 26: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/26.jpg)
Principles of Web Design, 4th Edition 13-26
![Page 27: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/27.jpg)
Principles of Web Design, 4th Edition 13-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
![Page 28: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/28.jpg)
Principles of Web Design, 4th Edition 13-28
![Page 29: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/29.jpg)
Principles of Web Design, 4th Edition 13-29
![Page 30: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/30.jpg)
Principles of Web Design, 4th Edition 13-30
![Page 31: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/31.jpg)
Principles of Web Design, 4th Edition 13-31
![Page 32: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/32.jpg)
Principles of Web Design, 4th Edition 13-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
![Page 33: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/33.jpg)
Principles of Web Design, 4th Edition 13-33
![Page 34: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/34.jpg)
Principles of Web Design, 4th Edition 13-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
![Page 35: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/35.jpg)
Principles of Web Design, 4th Edition 13-35
![Page 36: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/36.jpg)
Principles of Web Design, 4th Edition 13-36
![Page 37: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/37.jpg)
Principles of Web Design, 4th Edition 13-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
![Page 38: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/38.jpg)
Principles of Web Design, 4th Edition 13-38
![Page 39: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/39.jpg)
Principles of Web Design, 4th Edition 13-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
![Page 40: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/40.jpg)
Principles of Web Design, 4th Edition 13-40
![Page 41: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/41.jpg)
Principles of Web Design, 4th Edition 13-41
![Page 42: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/42.jpg)
Principles of Web Design, 4th Edition 13-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
![Page 43: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/43.jpg)
Principles of Web Design, 4th Edition 13-43
![Page 44: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/44.jpg)
Principles of Web Design, 4th Edition 13-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
![Page 45: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/45.jpg)
Principles of Web Design, 4th Edition 13-45
![Page 46: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/46.jpg)
Principles of Web Design, 4th Edition 13-46
![Page 47: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/47.jpg)
Principles of Web Design, 4th Edition 13-47
![Page 48: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/48.jpg)
Principles of Web Design, 4th Edition 13-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
![Page 49: Chapter 13 Web Page Design Studio](https://reader036.fdocuments.us/reader036/viewer/2022062321/5681329c550346895d993b3a/html5/thumbnails/49.jpg)
Principles of Web Design, 4th Edition 13-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