HTML & CSS Project #4
Part 1 Scrapbook
Objective: Students will learn how to work with CSS selectors, create styles for lists, create and apply class styles, create link rollover effects, and create a drop cap using a pseudo-element.
Students will help create a web page for Kathy Pridham’s online scrapbooking company. Use this Scrapbooks Power Point to create the web page.
Download the files in the Scrapbook file to your computer, extract all files and move the Scrapbook folder to My Documents.
Assignment: Create the 4-Scrapbooking web page.
Part 2 Samples
Objective: Students will use CSS to position elements, adjust the display, and create a print CSS for a web page.
Download the files in the 4A-Samples to your computer, extract all files and move the files to your Scrapbook folder.
Assignment: Follow the directions in the Samples PowerPoint.
Add your scrapbook folder to your Google Drive and link it to the Google Classroom assignment.
When you have completed the Samples assignment take the CSS Quiz 1
Posted in Daily activity and assignments |
Data Files needed for the Review Assignments: camhome.htm, child1.jpg-
child3.jpg, childtxt.htm, conlogo.jpg, constyles.css, contest1.png-contest3.
png, contesttxt.htm, fl ower1.jpg-fl ower3.jpg, fl owertxt.htm, modernizr-1.5.js,
photogloss.htm, scenic1.jpg-scenic3.jpg, scenictxt.htm, thirdstip.jpg, thumb1.jpg-
Gerry has been working on the CAMshots Web site for a while. During that time, the site
has grown in popularity with amateur photographers. Now he wants to host a monthly
photo contest to highlight the work of his colleagues. Each month Gerry will pick the
three best photos from different photo categories. He's asked for your help in creating the
collection of Web pages highlighting the winning entries. Gerry has already created four
pages. The fi rst page contains information about the photo contest; the remaining three
pages contain the winning entries for child photos, scenic photos, and fl ower photos.
Although Gerry has already entered much of the page content, he needs you to work on
creating the links between and within each page. Figure 2-49 shows a preview of the
photo contest's home page.
CAMshots Contest Winners page