Subject: Web and Mobile Development(please Chegg team help me with this project as asked in the question)

(Web Development and Design Foundations With HTML 5 - 8th Edition page 125)

Fish Creek Animal Hospital See Chapter 2 for an introduction to the Fish Creek Animal Hospital Case Study. Figure 2.34 shows a site map for the Fish Creek website. The Home page and Services page were created in Chapter 2. You will develop a new version that uses an external style sheet to configure text and color. Figure 2.35 depicts the wireframe page layout. You have the following tasks: 1. Create a new folder for this Fish Creek case study. 2. Create an external style sheet named fishcreek.css that configures the color and text for the Fish Creek website. 3. Modify the Home page to utilize an external style sheet to configure colors and fonts. The new Home page and color swatches are shown in Figure 3.31. 4. Modify the Services page to be consistent with the new Home page. 5. Configure centered page layout.

Figure 3.31 New Fish Creek index.html Hands-On Practice Case Study Task 1: Create a folder on your hard drive or portable storage device called fishcreekcss. Copy all the files from your Chapter 2 fishcreek folder into the fishcreekcss folder. Task 2: The External Style Sheet. You will use a text editor to create an external style sheet named fishcreek.css. Code the CSS to configure the following: 1. Global styles for the document (use the body element selector) with background color #6699FF; text color #D5E3FF; and Verdana, Arial, or any sans-serif font. 2. Styles for the header element selector that configure background color #6699FF, text color #003366, and serif font. 3. Styles for the h1 element selector that configure 200% line height. 4. Styles for the nav element selector that display text in bold. 5. Styles for a class named category with bold font, background color #6699FF, text color #003366, and larger font size (1.1em). 6. Styles for the footer element selector with a small font size (.70em) and italic text. Save the file as fishcreek.css in the fishcreekcss folder. Check your syntax with the CSS validator (http://jigsaw.w3.org/css-validator). Correct and retest if necessary. Task 3: The Home Page. Launch a text editor, and open the index.html file. You will modify this file to apply styles from the fishcreek.css external style sheet as follows: 1. Add a element to associate the web page with the fishcreek.css external style sheet file. 2. Configure the navigation area. Remove the element from the navigation area, because the CSS will configure the bold font style. 3. Configure each

element to apply the category class. Hint

. Remove the tags, because the CSS will configure the bold font style. 4. Configure the page footer area. Remove the and elementsthey are no longer needed since CSS is now used to configure the text. Save the index.html file, and test in a browser. Your page should look similar to the one shown in Figure 3.31 except that your page content will be left-aligned instead of indented from the margins. Dont worryyoull configure your page layout in Task 5 of this case study. Task 4: The Services Page. Launch a text editor, and open the services.html file. You will modify this file in a similar manner: Add the element, configure the navigation area and page footer areas, configure the category classes (Hint: Use the element to contain the name of each service offered), and remove the strong tags.) Save and test your new services.html page. It should look similar to the one shown in Figure 3.32 except for the alignment. Task 5: Center Page Layout with CSS. Modify fishcreek.css, index.html, and services.html to configure page content that is centered with 80% width. Refer to Hands-On Practice 3.9 if necessary. 1. Launch a text editor, and open the fishcreek.css file. Add a style rule for an id named wrapper with width set to 80%, margin-right set to auto, and margin-left set to auto. 2. Launch a text editor, and open the index.html file. Add the HTML code to configure a div element assigned to the id wrapper that wraps, or contains, the code within the body section. Save and test your index.html page in a browser and youll notice that the page content is now centered within the browser viewport as shown in Figure 3.31. 3. Launch a text editor, and open the services.html file. Add the HTML code to configure a div element assigned to the id wrapper that wraps, or contains, the code within the body section. Save and test your services.html page in a browser and youll notice that the page content is now centered within the browser viewport as shown in Figure 3.32.

Fish Creek Animal Hospital x #003366 #6699ff Fish Creek Animal Hospital Home Services Ask the Vet Contact Full Service Facility Years of Experience Open Door Policy #d5e3ff Veterinarians and staff are on duty 24 hours a day, 7 days a week Fish Creek Veterinarians have provided quality dependable care for your beloved animals since 1984 Our professionals welcome owners to stay with their pets during any medical procedure 800-555-5555 1242 Grassy Lane Fish Creek, WI 55534 Copyright 2016 Fish Creek Animal Hospital Fish Creek Animal Hospital x #003366 #6699ff Fish Creek Animal Hospital Home Services Ask the Vet Contact Full Service Facility Years of Experience Open Door Policy #d5e3ff Veterinarians and staff are on duty 24 hours a day, 7 days a week Fish Creek Veterinarians have provided quality dependable care for your beloved animals since 1984 Our professionals welcome owners to stay with their pets during any medical procedure 800-555-5555 1242 Grassy Lane Fish Creek, WI 55534 Copyright 2016 Fish Creek Animal Hospital