RA8 Grading Rubric - CIS

Grading Rubric
NP HTML, CSS, and Dynamic HTML
Tutorial 8, Review Assignment
Class:
Professor:
Notes:
Description Pts Your
Score
• dubcektxt.htm/dfeffectstxt.css were opened as text
2
• your name/the date were entered as comments
• Files were saved as dubcek.htm/dfeffects.css
• dubcek.htm is linked to dfeffects.css using a media query for only 5
screen devices that are at least 501 px wide
• A media query is added to the link element for dflayout.css, matching
that style sheet to only screen devices that are at least 501 px wide
A conditional comment is created for IE8 and earlier
5
• Links to dflayout.css/dfeffects.css are created
• For each style sheet, screen is specified as the media device
In dfeffects.css, nav list of links to family members has the id familyLinks 5
• Appearance of this nav list is formatted by adding an inset box shadow
black in color, opacity 0.6
• The inset shadow is placed within the right edge of the element with a
horizontal offset 10 px, vertical offset 0 px, blurring effect 15 px
Box shadows are added to the images in the familyLinks list
5
• Shadows are made black, 0.6 opacity
• Shadows are offset 10 px horizontally/vertically, blur 15 px
If users hover over an image in the familyLinks list, the image rotates 5° 3
counter-clockwise, opacity is set to 1.0
• A horizontal gradient that moves left to right is applied to the article 5
element, starting with color (151, 151, 151), ending in (231, 231, 231)
• Browser extensions are included for all major browsers
Two text shadows are added to the h1 heading
7
• 1st shadow is black, a horizontal/vertical offset of 1 px and a 0-px blur
• 2nd shadow has color (30, 57, 0), opacity 0.8
• Offset is 5 px in the horizontal/vertical directions, 10-px blur
A border image is added to the family image within the article element 5
• paper.png is used, slice value of 70 px, tiled along the sides
• Width of border is set to 10 px
• dfprinttxt.css is opened as text
2
• your name/the date are entered as comments

• File is saved as dfprint.css
After the initial style comments, an @page rule is inserted to set the size of 3
the printed page to 8.5 in by 11 in, portrait orientation, margin 0.5 in
At the bottom of the file, a style rule is inserted for the article element to 2
avoid page breaks within the element and add a page break after the element
A style rule is added for list items in the familyLinks nav list to avoid page 3
breaks within/after each item
For the last list item in the familyLinks nav list, a style rule is inserted to 2
avoid adding a page break
In dubcek.htm, a link to dfprint.css is added, using print as media device 3
• dfmobiletxt.css is opened
2
• your name/the date are entered as comments
• File is saved as dfmobile.css
• At the bottom of the file, an @media rule with a media query is 13
inserted to match a screen device in portrait orientation
• Within @media, a style rule is created for list items within the
familyLinks nav list to
a) Display list items as blocks
b) Set width to 40%
c) Set top/bottom margins to 5 px, left/right margins to 5%
d) Float list items on the left
• An @media rule is created for screen devices in landscape orientation 12
• Within @media, a style rule is created for list items belonging to the
parentList class to
a) Display items as blocks
b) Set width to 45%
c) Set top/bottom margins to 5 px, left/right margins to 2%
d) Float the items on the left
In the @media rule for landscape orientation, a style rule is added for list 10
items belonging to the childList class to
a) Display items as blocks
b) Set width to 16%
c) Set top/bottom margins to 5 px, left/right margins to 0.2%
d) Float the items on the left
In dubcek.htm, in the head section of the file, a meta element is inserted to 3
set the viewport of the file to match the device width
A link is added to dfmobile.css, loading the style sheet only for screen 3
elements that are less than or equal to 500 px in width
TOTAL POSSIBLE POINTS: 100 0
YOUR SCORE: ______