Graphics Programs Reference
In-Depth Information
Review Assignments
Practice the skills
you learned in
the tutorial.
There are no Data Files needed for the Review Assignments.
Cat wants you to create an alternate home page, using Dreamweaver's prebuilt CSS
pages to create a 2 column liquid, left sidebar, header and footer layout. You will use this
layout for the other pages of the antifest site. You will create the page, edit the existing
styles in the internal style sheet, and then move the styles from the internal style sheet to
the external style sheet. You'll attach the style sheet to the page, and then add new con-
tent, including the navigation system and an AP div that contains the logo text. After the
page structure is in place, you will duplicate the home page to create the other pages of
the site.
1. Open the
antifest
site you created in Tutorial 3, and then, in the Files panel, delete
the index.html page.
2. Use the New Document dialog box to create a blank page with the HTML page type
and the 2 column liquid, left sidebar, header and footer layout.
3. Save the page as
index.html
in the local root folder of the antifest site.
4. Use the CSS Styles panel to attach the antistyles.css external style sheet located in
the stylesheets folder in the local root folder of the antifest site. (
Hint
: Use the Attach
Style Sheet button.) The styles from the style sheet appear in the page; you cannot
see the main text because you set its style to white.
5. Switch to Code view, locate the internal style sheet at the top of the page, select the
body style and its content, press the Delete key to remove the style from the internal
style sheet. Locate the h1, h2, h3, h4, h5, h6, p style and delete it. Repeat for a:link,
a:visited, and a:hover, a:active, a:focus. You deleted these styles from within the
new index.html page because you have already defi ned these in the style sheet and
it is poor practice to have two sets of styles for one tag. You will also delete the fol-
lowing styles because you will not need them with your layout (and it is a good idea
to delete unused styles): .content ul, .content ol, ul.nav, ul.nav li, ul.nav a, ul.nav
a:visited, ul.nav a:hover, ul.nav a:active, ul.nav a:focus.
6. In the All Rules pane of the CSS Styles panel, in the style list, select .container style,
and then select the Edit Rule button. Change the Background color to #000, and the
Border to Style; solid, Width; to thin, and Color; #F0F. Click OK. Switch to Design
view. The container background area changes to black, and a pink border surrounds
the page area.
7. In the All Rules pane of the CSS Styles panel, in the style list, select the .header style,
and then, in the Properties pane, change the background color to #000. The content
area changes to black and the green text becomes visible.
8. In the All Rules pane of the CSS Styles panel, in the styles list, select the .sidebar1
style, and then click the Edit Rule button to open the CSS Rule defi nition for
.sidebar1 dialog box.
9. In the Background category, change the background color to #400040. In the Box
category, check the Same for all check box for Padding, then change the top margin
to 10 and check the Same for all check box. In the Border category, change the top
style to dotted, change the top width to thin, change the top color to #0F0, check all
the Same for all check boxes, if necessary, and then click the OK button. The new
style attributes are applied to the sidebar1 column.
10. In the All Rules pane of the CSS Styles panel, in the style list, select .content and Edit
the Rule. In the Box category, Change Padding to 0 and same for all, then change the
width to 74%. The placeholder text in the content div moves back up in the page.
11. In the All Rules pane of the CSS Styles panel, in the style list, select the .footer style,
and then, in the Properties pane, change the background color to #000. The footer
area changes to black and the placeholder footer text is visible.
Search WWH ::
Custom Search