Fish Creek Animal Hospital (Website Design)
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 color 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 cantered page layout.
Hands-On Practice Case Study
Task 1:
Create a folder on your hard drive or portable storage device called fish creekcss.
Copy all the files from your Chapter 2 fish creek folder into the fish creekcss 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 navy 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 fish creekcss 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
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 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 cantered 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 cantered 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 centred within the browser viewport as shown in Figure
Please validate your file before you give the correct answer. Thanks.