Simple Web Assignment

User Generated

nopq1234

Programming

Description

Work through the Fish Creek Animal Hospital Hands-On Practice Case Study on pages 125-127. You will need to use the files that you created in assignment 2. ( The two fishcreek files are attached) You can use any text editor such as Notepad to create these files.

Unformatted Attachment Preview

Website Case Study 125 3. Launch a text editor, and open the menu.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 menu.html page in a browser and you'll notice that the page content is now centered within the browser viewport as shown in Figure 3.30. Experiment with modifying the javajam.css file. Change the page background color, the font family, and so on. Test your pages in a browser. Isn't it amazing how a change in a single file can affect multiple files when external style sheets are used? X Figure 3.30 Javalam Coffee House Menu X New menu.html page с III Java Jam Coffee House Home Menu Music Jobs Coffee at JavaJam Just Java Regular house blend, decaffeinated coffee, or flavor of the day. Endless Cup $2.00 Cafe au Lait House blended coffee infused into a smooth, steamed milk. Single $2.00 Double $3.00 Iced Cappuccino Sweetened espresso blended with icy-cold milk and served in a chilled glass. Single $4.75 Double $5.75 Copyright © 2016 Javalam Coffee House yourhrename yourlastname.com 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 Ser- vices 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. 126 Chapter 3 Configuring Color and Text with CSS Fish Creek Animal Hospital X #003366 с IN 4. Con #6699ff no lo Fish Creek Animal Hospital #d5e3ff Save the shown in from the study. Home Services Ask the Vet Contact Full Service Facility Veterinarians and staff are on duty 24 hours a day, 7 days a week. Years of Experience Fish Creek Veterinarians have provided quality, dependable care for your beloved animals since 1984. Open Door Policy Our professionals welcome owners to stay with their pets during any medical procedure. Task 4: modify t area and ment to test you except Task 5: to confi 800-555-5555 1242 Grassy Lane Fish Creek, WI 55534 if neces 1. La Copyright © 2016 Fish Creek Animal Hospital youcanstname@youdastname.com wr set Figure 3.31 New Fish Creek index.html 2. La din bo pa 3. La di be th 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.lem). 6. Styles for the footer element selector with a small font size (.70em) and italic text. Fish 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. Figur Website Case Study 127 4. Configure the page footer area. Remove the and elements—they 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. Don't worry—you'll 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 ele- ment 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 you'll 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 you'll notice that the page content is now centered within the browser viewport as shown in Figure 3.32. х Fish Creek Animal Hospital Ser... * C Fish Creek Animal Hospital Home Services Ask the Vet Contact • Medical Services We offer state-of-the art equipment and technology. • Surgical Services 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 House Calls The elderly, physically challenged, and multiple pel households often find our in-home veterinary service helpful and convenient Emergencies At least one of our doctors is on call every day and night Cooxright 2016 Fish Creek eral sosial euismestname.com Figure 3.32 New services.html page
Purchase answer to see full attachment
User generated content is uploaded by users for the purposes of learning and should be used following Studypool's honor code & terms of service.

Explanation & Answer

Here are...


Anonymous
Really great stuff, couldn't ask for more.

Studypool
4.7
Trustpilot
4.5
Sitejabber
4.4

Related Tags