Lab
Exercise 4
Topic 4: Creating and Applying Cascading Style Sheets
Prerequisites:
1. Save the
attach Exercise4 folder on your desktop.
Unzip the folder
2.
In Dreamweaver, create a Manage Site.
Point the Site to your Exercise4 folder.
See
step-by-step demo instructions in the Topic 2 lecture presentation (slides 5-8)
in defining a Web site
NOTE: To achieve a consistent look and
feel for your LMC Brentwood Burger Web site, follow the formatting
guidelines below for your Web pages:
|
Page Area |
CSS Selector |
Font Face |
Font Size |
Font Color |
Font Style |
Alignment |
Page Background |
|
Company Name |
H1 |
Cabria
(default) |
40 |
#FFFF00 |
Bold |
Center |
|
|
Page Title |
H2 |
Cabria
(default) |
30 |
#FFFF00 |
Bold |
Center |
|
|
Text Content |
Body |
Cabria
(default) |
18 |
#FFFFFF |
|
Left-Justified |
#B61B1D |
|
Text Emphasis |
Class Style |
Cabria
(default) |
20 |
#FFFF00 |
Bold |
Center |
|
|
Page Footer |
H5 |
Cabria
(default) |
12 |
#FFFFFF |
|
Center |
|
|
Page Background |
ID Style |
Cabria
(default) |
|
#000033 |
|
|
|
A.
Requirements for directons.html
1. Create an external style
sheet called "mystyle.css". Follow the step-by-step demo
instructions in the Topic 4 lecture presentation (slides 18- 24)
2. Open the directions.html from
the File Panel
3. Attach the external
style sheet you created in step #1 "mystyle.css" to the
directions.html. Follow the step-by-step demo
instructions in the Topic 4 lecture presentation (slides 26- 28)
4. Create a Tag Style Rule
for the <body> tag to external style
sheet. Follow the step-by-step
demo instructions in the Topic 4 lecture presentation (slides 28- 36)
5. Create a Tag Style Rule
for the <h1> tag to the external style
sheet. Then apply the heading 1
formatting to the text element- company name.
Follow the step-by-step demo instructions in the Topic 4 lecture
presentation (slides 37- 41)
6. Create a Tag Style Rule
for the <h2> tag to the external style
sheet. Then apply the heading 2
formatting to the text element- page title.
Follow the step-by-step demo instructions in the Topic 4
lecture presentation (slides 42- 46)
7. Create a Tag Style Rule
for the <h5> tag to the external style
sheet. Then apply the heading 5
formatting to the text element- page footer.
Follow the step-by-step demo instructions in the Topic 4
lecture presentation (slides 47- 53)
8. Create a Tag Style Rule
for the <a> tag to the external style
sheet. Follow the step-by-step demo instructions in the Topic 4
lecture presentation (slides 52- 54)
9. Create a Class Style
Rule called .emphasis to the external style sheet.
Then apply the Class Style Rule to the text elements. Follow the step-by-step demo instructions in
the Topic 4 lecture presentation (slides 57- 67)
10. Create an ID Style Rule called #center-page to the external style sheet.
Then apply the ID Rule to a DIV tag layer.
Follow the step-by-step demo instructions in the Topic 4
lecture presentation (slides 67- 75)
11. Edit the #center-page ID
style rule and the body
tag style rule. Follow the step-by-step demo
instructions in the Topic 4 lecture presentation (slides 76- 77)
12. Save the directions.html and
mystyle.css. From the File Menu, select Save All.
13. Preview your Web page. See attached sample output of directions.html
page.
B.
Requirements for the hours.html
1. Open the hours.html from the Files Panel
2. Attach the external
style sheet - "mystyle.css" to the hours.html pages. Follow the step-by-step demo
instructions in the Topic 4 lecture presentation (slides 26- 28)
3. From the Main Menu, select File and Save
All. Close the hours.html and re-open
the page from the File Panel.
4. Apply the class style
".emphasis" to text elements –
Monday- Sunday hours. Follow the step-by-step demo
instructions in the Topic 4 lecture presentation (slides 57- 67).
5. Apply the #center-page
ID style rule to the inserted DIV layer. Follow the step-by-step demo instructions in the Topic 4
lecture presentation (slides 73- 75)
6. Save your hours.html. Preview your Web
pages. See attached sample output of index.html page.
C.
Requirements for the index.html.
1. Open the index.html from the Files Panel
2. Attach an External
Style Sheet: Attach the external style sheet - "mystyle.css" to the index.html
pages. Follow the step-by-step demo instructions in the Topic 4
lecture presentation (slides 26- 28)
3. From the Main Menu, select File and Save
All. Close the index.html and re-open
the page from the File Panel.
4. Apply the #center-page
ID style rule to the inserted DIV layer. Follow the step-by-step demo instructions in the Topic 4
lecture presentation (slides 73- 75)
5. Save your hours.html. Preview your Web pages. See attached sample output of index.html page.
D. Test Page
1. Preview your Web pages in the Browser. Verify all the style rules have been created and applied to your Web pages. See attached sample output of mystyle.css.
2. Save your hours.html, directions.html,
index.html and mystyle.css document. From the File Menu,
select File and then Save All.
Submit:
1. Submit a screenshot images of the Web pages displaying in your Browser on the Canvas Exercise 4 drop box.
2. Zip up your folder and submit in the Canvas Exercise 4 drop box.
The folder should contain the index.html, directions.html,
hours.html, mystyle.css and images folder. Your images folder should
contain the burger1.png .
|
Chapter Topics |
Points |
|
1.
Customize an HTML Tag |
3 |
|
2.
Create a Class Style |
3 |
|
3.
Apply a Class Style |
3 |
|
4.
Edit a Style |
3 |
|
5. Create
Styles with Page Properties |
3 |
|
6.
Create an External Style Sheet |
4 |
|
7.
Move Styles to an External Style Sheet |
4 |
|
8.
Attach an External Style Sheet |
4 |
|
9.
Edit an External Style Sheet |
3 |
|
Total |
30 |