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