Web development and design foundation with HTML5 10th Edition: Fish Creek Animal Clinic Chapter 6
Posted: Sun Jul 03, 2022 12:01 pm
Web development and design foundation with HTML5 10th Edition:Fish Creek Animal Clinic Chapter 6
Fish Creek Animal Clinic See Chapter 2 for an introduction to the Fish Creek Animal Clinic case study. Figure 2.36 shows a site map for Fish Creek. In this case study, you will implement a redesign with a new two-column CSS page layout. Figure 6.58 displays a wireframe for a two- column page layout with wrapper, header, navigation, main content, and footer areas. Chapter 6: Summary Figure 6.58 Wireframe for a two-column page layout for the Fish Creek website wrapper header nav main footer
Chapter 6: Summary You will modify the external style sheet and the Home, Services, and Ask the Vet pages. Use the Chapter 4 Fish Creek website as a starting point for this case study. You have five tasks in this case study: 1. Create a new folder for this Fish Creek case study. 2. Modify the style rules in the fishcreek.css file to configure a two-column page layout, as shown in Figure 6.58. 3. Modify the Home page to implement the two-column page layout, as shown in Figure 6.59. 4. Modify the Services page (Figure 6.60) to be consistent with the Home page. 5. Modify the Ask the Vet page (Figure 6.61) to be consistent with the Home page. Hands-On Practice Case Task 1: The Website Folder. Create a folder called fishcreek6. Copy all of the files from your Chapter 4 fishcreek4 folder into the fishcreek6 folder. Copy all the files from the chapter6/starters/fishcreek folder. You will modify the fishcreek.css file and each web page file (index.html, services.html, and askvet.html) to implement the two-column page layout, as shown in Figure 6.58. See the new Fish Creek home page, as shown in Figure 6.59.
Figure 6.59 The new Fish Creek two-column home page (index.html) Fish Creek Animal Clinic Home Services Ask the Vet Contact Chapter 6: Summary X + Fish Creek Animal Clinic Professional, Compassionate Care for Your Pet The caring doctors and staff at Fish Creek Animal Clinic understand the special bond you share with your cherished pet. Years of Experience Open Door Policy Fish Creek Veterinarians have provided personalized and compassionate care since 1984. We welcome owners to stay with their pets during any medical procedure. Fish Creek Animal Clinic 800-555-5555 12456 Grassy Lane Fish Creek, WI 55534 Always Available Our professionals are on duty 24 hours a day, 7 days a week. 0 X Copyright © 2020 Fish Creek Animal Clinic [email protected] = Task 2: Configure the CSS. Open fishcreek.css in a text editor. Edit the style rules as follows:
Chapter 6: Summary 7. Configure the navigation anchor tags to display no underline. 8. Configure the link, :visited, and :hover pseudo-classes for the navigation hyperlinks. Use the following text colors: #000066 (unvisited hyperlinks), #5280C5 (visited hyperlinks), and #3262A3 (hyperlinks with :hover). For example, nav a:link { color: #000066; } 9. Configure the right column area. Add style declarations for the main element selector to configure an area with a 180 pixel left margin, a white background color, and a 1 pixel solid medium blue (#AEC3E3) border. Set overflow to auto (prevents display issues for floated elements within the main element). Set display to block (prevents an Internet Explorer display issue). 10. Remove the footer nav descendant selector and style declarations. 11. Configure the footer area. Remove the style declaration for bottom padding. Add style declarations to set 1em of padding and a 180px left margin. 12. Configure styles for a class named address. Set the clear property to left. 13. Configure styles for a class named float right. Set float to right, 1em left padding, and 1em right padding.
Chapter 6: Summary padding, and 1em right padding. 14. Configure a section element selector. Code style declarations that set left float, 30% width, 1em right margin, 1em bottom margin, 0 padding, #EAEAEA background color, and minimum height set to 200px. 15. Configure headings within the section element. Add a new style rule for the section h3 descendant selector that sets .25em padding, 0 top margin, 0 bottom margin, 110% font size, and #AEC3E3 background color. 16. Configure paragraphs within the section element. Add a new style rule for the section p descendant selector that sets top padding to 0, left padding to .25em, right padding to .25em, and bottom padding to .25em. 17. Configure hyperlinks in the header area. Use descendant selectors to configure hyperlinks within the header element with no underline, light (#FOFOFO) text color for the link and :visited pseudo-classes, and light blue (#AEC3E3) text color for the hover pseudo-class. Save the fishcreek.css file. Task 3: Modify the Home Page. Open index.html in a text editor and modify the code as follows: 1. Configure the "Fish Creek Animal Clinic" text in the header area to be a hyperlink to the Home page (index.html).
Chapter 6: Summary 2. Rework the navigation area. Remove any characters that may be present. Replace the fish image links with text links. Then, code an unordered list to organize the navigation hyperlinks. Each hyperlink should be contained within <li> tags. 3. Assign the div that contains the address to a class named address. 4. Remove the nav element and navigation hyperlinks from the footer area. 5. Observe Figure 6.59 and note that information is formatted in three columns. Remove the tags that configure the description list from the page. Notice the text content is a series of brief headings and sentences. Configure each heading within an h3 element. Configure each sentence within a paragraph element. Code a section element to contain each heading and paragraph pair. Save the index.html file. It should look similar to the web page shown in Figure 6.59. Remember that validating your HTML and CSS can help you find syntax errors. Test and correct this page before you continue. Task 4: Modify the Services Page. Open services.html in a text editor. 1. Configure the header area, navigation area, navigation hyperlinks, and footer area in the same manner as the home page. 2. Observe Figure 6.60 and note that the page content is no longer displayed in an
2. Observe Figure 6.60 and note that the page content is no longer displayed in an unordered list. Remove the tags that configure the unordered list from the page. Also remove the span and line break tags. Notice the text content is a series of brief headings and sentences. Configure each heading within an h3 element. Configure each sentence within a paragraph element. Code a section element to contain each h3 and paragraph pair. Save your new services.html page and test it in a browser. Use the CSS and HTML validators to help you find syntax errors. Figure 6.60 Fish Creek services.html Chapter 6: Summary Fish Creek Animal Clinic Services x + Home Services the Vet Contact Fish Creek Animal Clinic Professional Services Medical Services Our facility has state-of- the-art equipment and technology. Surgical Services We offer a full range of surgical procedures including orthopedics and emergency surgeries. Dental Care A dental exam can determine whether your pet needs preventive dental care such as scaling and polishing. O X E
Figure 6.60 Fish Creek services.html Fish Creek Animal Clinic Services X + Home Services Ask the Vet Contact Chapter 6: Summary Fish Creek Animal Clinic Professional Services Medical Services Our facility has state-of- the-art equipment and technology. House Calls The elderly, physically challenged, and multiple pet households often find our in-home veterinary service helpful and convenient. Surgical Services We offer a full range of surgical procedures including orthopedics and emergency surgeries. Emergencies You can reach us at any time. At least one of our doctors is on call every day and night. Dental Care A dental exam can determine whether your pet needs preventive dental care such as scaling and polishing. Copyright ©2020 Fish Creek Animal Clinic [email protected] Task 5: Modify the Ask the Vet Page. Open askvet.html in a text editor. X M
1. Configure the header area, navigation area, navigation hyperlinks, and footer area in the same manner as the home page. 2. View Figure 6.61 and notice that there is a new dog photo on the page. Add an img tag above the h2 tag to display dog.gif. Configure the height, width, and alt attributes. Assign this element to a class called float right. Figure 6.61 Fish Creek askvet.html page Chapter 6: Summary Ask the Vet at Fish Creek Animal Cl X + Home Services Ask the Vet Contact Fish Creek Animal Clinic Ask the Vet Contact us if you have a question that you would like answered here. Our dog, Sparky, likes to eat whatever the kids are snacking on. Is it OK for the dog to eat chocolate? Chocolate is toxic to dogs. Please do not feed your dog chocolate. Try playing a game with your children - when you feed them people treats, they can feed Sparky dog treats. Copyright © 2020 Fish Creek Animal Clinic [email protected] X E
- Web Development And Design Foundation With Html5 10th Edition Fish Creek Animal Clinic Chapter 6 1 (139.15 KiB) Viewed 19 times
Chapter 6: Summary You will modify the external style sheet and the Home, Services, and Ask the Vet pages. Use the Chapter 4 Fish Creek website as a starting point for this case study. You have five tasks in this case study: 1. Create a new folder for this Fish Creek case study. 2. Modify the style rules in the fishcreek.css file to configure a two-column page layout, as shown in Figure 6.58. 3. Modify the Home page to implement the two-column page layout, as shown in Figure 6.59. 4. Modify the Services page (Figure 6.60) to be consistent with the Home page. 5. Modify the Ask the Vet page (Figure 6.61) to be consistent with the Home page. Hands-On Practice Case Task 1: The Website Folder. Create a folder called fishcreek6. Copy all of the files from your Chapter 4 fishcreek4 folder into the fishcreek6 folder. Copy all the files from the chapter6/starters/fishcreek folder. You will modify the fishcreek.css file and each web page file (index.html, services.html, and askvet.html) to implement the two-column page layout, as shown in Figure 6.58. See the new Fish Creek home page, as shown in Figure 6.59.
Figure 6.59 The new Fish Creek two-column home page (index.html) Fish Creek Animal Clinic Home Services Ask the Vet Contact Chapter 6: Summary X + Fish Creek Animal Clinic Professional, Compassionate Care for Your Pet The caring doctors and staff at Fish Creek Animal Clinic understand the special bond you share with your cherished pet. Years of Experience Open Door Policy Fish Creek Veterinarians have provided personalized and compassionate care since 1984. We welcome owners to stay with their pets during any medical procedure. Fish Creek Animal Clinic 800-555-5555 12456 Grassy Lane Fish Creek, WI 55534 Always Available Our professionals are on duty 24 hours a day, 7 days a week. 0 X Copyright © 2020 Fish Creek Animal Clinic [email protected] = Task 2: Configure the CSS. Open fishcreek.css in a text editor. Edit the style rules as follows:
Chapter 6: Summary 7. Configure the navigation anchor tags to display no underline. 8. Configure the link, :visited, and :hover pseudo-classes for the navigation hyperlinks. Use the following text colors: #000066 (unvisited hyperlinks), #5280C5 (visited hyperlinks), and #3262A3 (hyperlinks with :hover). For example, nav a:link { color: #000066; } 9. Configure the right column area. Add style declarations for the main element selector to configure an area with a 180 pixel left margin, a white background color, and a 1 pixel solid medium blue (#AEC3E3) border. Set overflow to auto (prevents display issues for floated elements within the main element). Set display to block (prevents an Internet Explorer display issue). 10. Remove the footer nav descendant selector and style declarations. 11. Configure the footer area. Remove the style declaration for bottom padding. Add style declarations to set 1em of padding and a 180px left margin. 12. Configure styles for a class named address. Set the clear property to left. 13. Configure styles for a class named float right. Set float to right, 1em left padding, and 1em right padding.
Chapter 6: Summary padding, and 1em right padding. 14. Configure a section element selector. Code style declarations that set left float, 30% width, 1em right margin, 1em bottom margin, 0 padding, #EAEAEA background color, and minimum height set to 200px. 15. Configure headings within the section element. Add a new style rule for the section h3 descendant selector that sets .25em padding, 0 top margin, 0 bottom margin, 110% font size, and #AEC3E3 background color. 16. Configure paragraphs within the section element. Add a new style rule for the section p descendant selector that sets top padding to 0, left padding to .25em, right padding to .25em, and bottom padding to .25em. 17. Configure hyperlinks in the header area. Use descendant selectors to configure hyperlinks within the header element with no underline, light (#FOFOFO) text color for the link and :visited pseudo-classes, and light blue (#AEC3E3) text color for the hover pseudo-class. Save the fishcreek.css file. Task 3: Modify the Home Page. Open index.html in a text editor and modify the code as follows: 1. Configure the "Fish Creek Animal Clinic" text in the header area to be a hyperlink to the Home page (index.html).
Chapter 6: Summary 2. Rework the navigation area. Remove any characters that may be present. Replace the fish image links with text links. Then, code an unordered list to organize the navigation hyperlinks. Each hyperlink should be contained within <li> tags. 3. Assign the div that contains the address to a class named address. 4. Remove the nav element and navigation hyperlinks from the footer area. 5. Observe Figure 6.59 and note that information is formatted in three columns. Remove the tags that configure the description list from the page. Notice the text content is a series of brief headings and sentences. Configure each heading within an h3 element. Configure each sentence within a paragraph element. Code a section element to contain each heading and paragraph pair. Save the index.html file. It should look similar to the web page shown in Figure 6.59. Remember that validating your HTML and CSS can help you find syntax errors. Test and correct this page before you continue. Task 4: Modify the Services Page. Open services.html in a text editor. 1. Configure the header area, navigation area, navigation hyperlinks, and footer area in the same manner as the home page. 2. Observe Figure 6.60 and note that the page content is no longer displayed in an
2. Observe Figure 6.60 and note that the page content is no longer displayed in an unordered list. Remove the tags that configure the unordered list from the page. Also remove the span and line break tags. Notice the text content is a series of brief headings and sentences. Configure each heading within an h3 element. Configure each sentence within a paragraph element. Code a section element to contain each h3 and paragraph pair. Save your new services.html page and test it in a browser. Use the CSS and HTML validators to help you find syntax errors. Figure 6.60 Fish Creek services.html Chapter 6: Summary Fish Creek Animal Clinic Services x + Home Services the Vet Contact Fish Creek Animal Clinic Professional Services Medical Services Our facility has state-of- the-art equipment and technology. Surgical Services We offer a full range of surgical procedures including orthopedics and emergency surgeries. Dental Care A dental exam can determine whether your pet needs preventive dental care such as scaling and polishing. O X E
Figure 6.60 Fish Creek services.html Fish Creek Animal Clinic Services X + Home Services Ask the Vet Contact Chapter 6: Summary Fish Creek Animal Clinic Professional Services Medical Services Our facility has state-of- the-art equipment and technology. House Calls The elderly, physically challenged, and multiple pet households often find our in-home veterinary service helpful and convenient. Surgical Services We offer a full range of surgical procedures including orthopedics and emergency surgeries. Emergencies You can reach us at any time. At least one of our doctors is on call every day and night. Dental Care A dental exam can determine whether your pet needs preventive dental care such as scaling and polishing. Copyright ©2020 Fish Creek Animal Clinic [email protected] Task 5: Modify the Ask the Vet Page. Open askvet.html in a text editor. X M
1. Configure the header area, navigation area, navigation hyperlinks, and footer area in the same manner as the home page. 2. View Figure 6.61 and notice that there is a new dog photo on the page. Add an img tag above the h2 tag to display dog.gif. Configure the height, width, and alt attributes. Assign this element to a class called float right. Figure 6.61 Fish Creek askvet.html page Chapter 6: Summary Ask the Vet at Fish Creek Animal Cl X + Home Services Ask the Vet Contact Fish Creek Animal Clinic Ask the Vet Contact us if you have a question that you would like answered here. Our dog, Sparky, likes to eat whatever the kids are snacking on. Is it OK for the dog to eat chocolate? Chocolate is toxic to dogs. Please do not feed your dog chocolate. Try playing a game with your children - when you feed them people treats, they can feed Sparky dog treats. Copyright © 2020 Fish Creek Animal Clinic [email protected] X E