CIS 363 DeVry Week 2 iLab 2

• Locate the .footer class in the file. Replace the background property with the clipboard content that you copied
from the header class.
• Add a property at the bottom of the .footer class for font-size. Set the value to 85%.
• Add another property, this time for color. Click on the painter’s palette symbol in the pop-up suggestions to
get a color selector. Pick a bright shade of yellow.
• Add a new class with the following values: .smallFont {font-size: 85%; }.
• Save the CSS file.
• Return to the design view of the index page. Select the paragraph with the owner’s name and address in the
right column. Apply the new class to the paragraph using the property inspector.
• Save the file. You now have the base template for the rest of the site.
Step 7: Create and Test the Other Pages
Back to Top
• Collapse the CSS panel and expand the files panel.
• Save the index.html file as about.html. Dreamweaver will open this as a new file and focus on the new page.
• Select the image in the header, and use the property inspector to set the link to index.html.
• Save the file, then save the file as staff.html, contact.html, and rates.html.
• Each of the files is now open in the editor. Place a line in each file below the Heading Level 1 in the center
column that will identify the page.
• Save All.
• Test the file in the browser. Set the focus on the index page, and select the globe in the middle of the design
toolbar. Select a browser. When the page loads, click through the links in the navigation menu. When you reach the
rates page, click on the logo to return to the index.html page.
Step 8: Populate the Pages
Back to Top
• The data document is arranged by page. Change the Heading 1 for each page to an appropriate title for that
content, and use the content supplied for that page.
• Here is the formatting suggestion for each page.
o
o
o
Index—Use a paragraph.
About—Use paragraphs, with a bullet list for activities.
Staff—Use a bullet list, indented for each group.
o Contact—These are labels and values separated by colons, line breaks for phone, e-mail, and address. Place
the promotion statement in a paragraph at the bottom and style appropriately.
o
Rates—This is a three-column table. Age, hours, and rates are the column headers.
Step 9: Prep for Turn-In.
Back to Top
• Save all files. Locate the w2Lab folder in Windows Explorer and select it.
• Right-click and select Send To and choose compressed file.
• Rename the file Lastname_w2Lab.zip, where Lastname is your last name.
• Place this in the Dropbox for grading.