HTML and CSS Reference
In-Depth Information
20. Set the media of the
swlayout.css
and
sweffects.css
style sheet files to the screen
device. Set the media of the
swprint.css
style sheet file to the print device.
21. Save your changes to the file, and then open it in your Web browser. Print the page
or preview the printed version in your browser. Verify that: a) the article describ-
ing Messier objects appears on the first page; b) each subsequent page contains the
image and description of a single Messier object; c) the SkyWeb logo appears at the
top of each page as a page header; and d) the
url
of each of the two hypertext links
appears in parentheses after the link text.
22. Submit your completed files to your instructor.
Case Problem 4
Test your
knowledge of
CSS3, print, and
mobile styles by
designing the
home listings for
an online realty
Web site.
Data files needed for this case Problem: brlogo.png, img01.jpg - img09.jpg, listing.txt,
modernizr-1.5.js
Browyer Realty
Linda Browyer is the owner of Browyer Realty, a real estate company
operating in Owatonna, Minnesota. She's asked you to help create a style design for the
pages on her site that describe residential listings. Linda has already written up sample
content for a listing and collected images of the property. She needs you to create the
HTML file and write up the style sheets.
Complete the following:
1. Use your text editor to create an HTML file named
browyer.htm
that will contain the
document describing the property. Also, create a style sheet file named
brbase.css
that will contain basic styles that will be used by all devices,
breffects.css
that will
contain special visual effects,
brlayout.css
that will contain the page layout design
for desktop screen devices,
brprint.css
for print styles, and
brmobile.css
for mobile
devices. Add the appropriate comments and documentation to each file.
2. Create the content of the
browyer.htm
file using the contents of the
listing.txt
text
file as a guide.
3. Design the page layout of your document in the
brlayout.css
file
4. Add CSS3 visual effects to your document using the
breffects.css
style sheet. The
effects are left to you to choose, but they should include examples of the following:
• a linear or radial gradient, written using the CSS3
linear-gradient()
or
radial-gradient()
function
• a text shadow using the CSS3
text-shadow
property
• drop shadows using the CSS3
box-shadow
property and either the IE
DropShadow
or
Shadow
filter
• a rotated object using the CSS3
rotate
property
• semi-transparent objects using the opacity style and the IE
Alpha
filter
5. Linda wants users to be able to view a nice printout of her sample listing. Place the
print styles in the
brprint.css
file. Include an example of the
@page
rule and several
examples of styles that either place or suppress page breaks.
6. Linda also wants potential clients to be able to view the sample listings in a
format appropriate for mobile devices. Create the styles for mobile devices in the
brmobile.css
file. Your style sheet should include different rules depending on
whether a device is in portrait or landscape orientation.
7. Link your Web document to your style sheets. Include the appropriate media queries
to match each style sheet with the correct device and device width. Include a
meta
element to set the width of the viewport.
