46
3. It should look like this in the code:
<link href="../assets/css/print.css" rel="stylesheet" type="text/css"
media="print"
/>
Note the new media specification:
media="print".
This tells the browser to invoke
the rules of this style sheet when the page is printed. In any other context, the rules from
the print style sheet are ignored. This style sheet is an example of “media-specific CSS.
Other types of media include screen (computer screens), projection, handheld, aural, and
braille.
You can test this new style sheet by previewing the page in either Internet Explorer or
Firefox (F12 or Ctrl+F12) and choosing Print Preview. Note the absence of the
navigation links and the width of the content div, which now spans the full page.
Return to Dreamweaver and open the print.css file. Notice the selectors it contains and
how they were modified from their original forms. These rules supersede those
established in earlier style sheets, but they take effect only when the page is printed.
Attach 3-D menus
1. Continue adding the following style sheets, making sure to add the new attributes
indicated in bold:
<link href="../assets/css/navigation_3-D_vertical.css" rel="alternate
stylesheet
" type="text/css" media="screen" title="3-D Vertical Menu"
/>
<link href="../assets/css/navigation_3-D_horiz.css" rel="alternate
stylesheet
" type="text/css" title="3-D Horizontal Menu"
/>
Save changes and test page
1. You will see an “Update Template Files” dialog box.
Click “Update” to apply changes to the pages of the
website.
2. Close the template.
3. Open the page “index.html.”
4. Press Ctrl+F12 to preview the document in Firefox. (As
noted above, this step works only in Firefox, not
Internet Explorer.)
5. In the Firefox browser, choose View > Page Style, and
select one of the new alternate style sheets to see the
effect of applying different styling rules on the same HTML code.
6. Check the Page Preview as well.
Note: Traditionally, this rollover effect would have required JavaScript. We have achieved
the same effect using only cascading style sheets!
Creating Accessible Web Pages with Dreamweaver
Page 25 of 41
Developed with funding from the U.S. Department of Education, Office of Postsecondary Education (Grant # P333A050015).
56
The horizontal menu style sheet contains many of the same selectors (#content, #navigation,
etc.) that appeared in the default.css and navigation.css style sheets. By repeating these
selectors and redefining their properties, we have effectively overruled their previous
settings.
Tip: Rules contained in the most recent style sheet supersede those that came before. This is
how styles can be customized for both on-screen display and for printing, to name just a few
of the media-specific options.
We will take advantage of the cascade again in the following exercises.
Two types of layouts: “Fixed-width” and “liquid”
Let’s take a look at the following examples.
“Fixed-width” designs:
•
The CSU home page (http://welcome.colostate.edu/
)
•
Dept. of Food Science and Human Nutrition (www.fshn.cahs.colostate.edu/
)
•
NPR (www.npr.org/
)
•
CNN (www.cnn.com/
)
•
Barnes & Noble (http://www.barnesandnoble.com/
)
“Liquid” (or elastic) layouts
•
Wikipedia (http://en.wikipedia.org/wiki/Census_Act_1800
)
•
CSU Occupational Therapy (www.ot.cahs.colostate.edu/
)
•
Amazon.com (www.amazon.com/
)
•
Center for Applied Special Technology (www.cast.org/
)
Note: Website designs generally fall into one of these two categories. Fixed-width designs tend
to emphasize designer control over the appearance of the page. Liquid layouts emphasize user
control of the viewing experience. A few websites do both.
Create a “fixed” layout
Add “wrapper”
1. Open the template “design.dwt,” if it is
not already open
2. Select the
<body>
tag on the Tag
Inspector bar
3. Insert new div using the following:
Insert: Wrap around selection
ID: wrapper
Creating Accessible Web Pages with Dreamweaver
Page 26 of 41
Developed with funding from the U.S. Department of Education, Office of Postsecondary Education (Grant # P333A050015).
46
Link to style sheet “fixed_width.css”
1. Click on the Attach Style Sheet button in the CSS panel, then browse for the file
“fixed_width.css.”
2. Select “screen” from the Media menu to indicate when this style sheet should be invoked
by the browser (i.e., when displayed on screen).
3. Click OK. (You should see a change in the appearance of your page!)
4. Switch to Code view and modify the link as follows:
<link href="../assets/css/fixed_width.css" rel="stylesheet"
type="text/css" media="screen" title="Fixed-Width"
/>
5. Switch back to Design view
Save and test
1. Save template and update linked pages
2. Test pages in Firefox; be sure to resize window and notice the background gradient that
sweeps a dark green at the top to a light gray-green at the bottom. Notice also the static
width of the main content area of the page, despite any changes in window size.
The new fixed-width style sheet contains rules for only two selectors, the HTML body element
and the ID wrapper:
body {
background: url(../images/background.gif) #BFCAC1 repeat-x;
margin: 0;
padding: 0;
}
#wrapper {
background: #FFFFFF;
border: 1px solid #000000;
margin: 0 auto;
padding: 0 2% 2%;
width: 700px;
}
Tip: How was such a dramatic change achieved with so little code? First, remember that we
wrapped the contents of our page in a new div called “wrapper.” This div has a fixed width of
700 pixels. It also has left and right margins set to “auto,” which effectively centers the div
element on the page. The wrapper div has a one-pixel black border and a 2% padding space
between the border and the contents within. Finally, it has a white background to “cover over”
the green background of the body element beneath it.
The body selector, which originally appeared in the default style sheet, has reappeared in this
style sheet in order to redefine its appearance. This rule changes the background color to
#BFCAC1
(the light green seen at the bottom of the page) and adds a background image (the dark-
to-light green gradient), which repeats as many times as needed to fill the canvas from left to
right. Finally, because we want the body color and image to be flush with both left and right
sides of the canvas, we have reset the margins and padding to zero.
Creating Accessible Web Pages with Dreamweaver
Page 27 of 41
Developed with funding from the U.S. Department of Education, Office of Postsecondary Education (Grant # P333A050015).
49
Create a “liquid” layout
Just for fun, let’s add a alternate style sheet that converts the new fixed-width layout to a “liquid”
design.
1. In the File Inspector panel, locate the folder of style sheets (assets/css/)
2. Right-click on the file named “fixed_width.css” and choose Edit > Duplicate (Ctrl+D)
from the pop-up menu.
3. Rename the duplicate file “liquid.css”
4. Locate selector
#wrapper
5.
Change the “width” value as follows:
width: 80%;
6.
Add a “min-width” property as follows:
min-width: 543px;
7. When complete, the rule should look like this:
#wrapper {
background: #FFFFFF;
border: 1px solid #000000;
margin: 0 auto;
min-width: 543px;
padding: 0 2% 2%;
width: 80%;
}
8. Link to this new style sheet, “liquid.css”
9. Switch to Code view and modify the new link as follows:
<link href="../assets/css/liquid.css" rel="alternate stylesheet
"
type="text/css" media="screen" title="Liquid Layout"
/>
10. Locate and delete the links to the following style sheets:
a. navigation_vertical.css
b. navigation_horiz.css
c. navigation_3-D_vertical.css
The template should now contain only the following css links (although they may appear
in a different order:
<link href="../assets/css/default.css" rel="stylesheet" type="text/css"
media="screen" />
<link href="../assets/css/print.css" rel="stylesheet" type="text/css"
media="print" />
<link href="../assets/css/navigation_3-D_horiz.css" rel="stylesheet"
type="text/css" media="screen" />
<link href="../assets/css/fixed_width.css" rel="stylesheet"
type="text/css" media="screen" title="Fixed-Width"/>
<link href="../assets/css/liquid.css" rel="alternate stylesheet"
type="text/css" media="screen" title="Liquid Layout" />
Creating Accessible Web Pages with Dreamweaver
Page 28 of 41
Developed with funding from the U.S. Department of Education, Office of Postsecondary Education (Grant # P333A050015).
48
Creating Accessible Web Pages with Dreamweaver
Page 29 of 41
Developed with funding from the U.S. Department of Education, Office of Postsecondary Education (Grant # P333A050015).
11. Switch back to Design view
12. Preview the page in Firefox and select the Liquid Layout style sheet.
(View > Page Style > Liquid Layout).
Create a 3-column layout
So far our page design has featured only a single column of content. While this
may suffice for some needs, it will doubtless be too simplistic for others. A multi-column layou
is often required to display a larger array of content on a page. Fortunately, such a layout, at least
in principle, is not difficult to create
t
.
Familiarization exercise
1. Using handout provided, circle and label the primary divisions of content on the page,
including the following:
a. header
b. navigation
c. column1
d. column2
e. message box
f. column 3
g. footer
Create a new template based on our previous work
1. Open the template “design.dwt”
2. Choose File > Save as Template…
3. Give it the name “3_column”
Alter the markup (the structure) of the new template
1. Make sure you are in either Design or Split View
2. Click in the main content text area
3. Locate the
<div#content>
tag in the Tag Inspector
4. Rename the
<div>
element
a. Right-click on the
<div#content>
tag and select Quick Tag Editor… from the
menu
b. Type “column1” (no spaces) and press Enter
Add new div elements, one for each column
1. Column 2 (contains main content)
a. Insert: After tag <div id="column1">
b. ID: “column2”
2. Column 3 (contains important links)
a. Insert: After tag <div id="column2">
b. ID: “column3”
41
Insert the “messagebox” div that will contain special announcements
1. Insert: After start of tag <div id="column2">
2. ID: “messagebox”
Disable style rendering in Dreamweaver
1. Notice how the text in column1 is covered by the navigation menu. This is because the
styling rules that governed the placement and appearance of the div “content” no longer
apply now that it has been renamed “column1.”
2. View > Style Rendering > Display Styles. (This is the equivalent of disabling style
rendering in Firefox. It helps us see the basic structure of the content.)
Get new text for page
1. Open Word file “3-column content.doc”
2. Select and copy the text (the portion with the gray background) for div element
“column1”
3. Return to Dreamweaver and select the existing text for column1.
a. Insert the cursor in the div “content” and choose Edit > Select All (Ctrl+A).
4. Choose Edit > Paste (Ctrl+V) to replace the text
5. Repeat for each of the four divs on the page.
Note that the div “messagebox” is within the div “column2.” This means that when
selecting the contents of div “column2,” the “Select All” technique will select both divs.
Instead of “Select All,” simply triple-click on the text “Content for id "column2" Goes
Here.”
Apply markup to the text
1. Select the first line of each division and set to Heading 1.
Add photos to the section “Department in the News!”
1. Insert the cursor in front of the first word of paragraph one (the text begins “Lorem
ipsum…”). Be careful not to select the border of the div!
2. Choose Insert > Image and select the file david_thumbnail.jpg
3. For alternate text, enter “David Greene”
4. Repeat for paragraph two, using the photo “Jodie_thumbnail.jpg.” For alt text, enter
“Jodie Hanzlik”
5. Repeat for the next two paragraphs, using the remaining images in any order. The
alternative text for each is as follows:
a. cathy_thumbnail = Cathy Schelly
b. patty_thumbnail = Patty Stutz-Tanenbaum
Apply a style rule (called a “custom class”) to each image
1. Select the first photo, then choose “photo_left” from the Class menu in the Properties
Inspector
2. Select the next photo and choose “photo_right”
Creating Accessible Web Pages with Dreamweaver
Page 30 of 41
Developed with funding from the U.S. Department of Education, Office of Postsecondary Education (Grant # P333A050015).
Documents you may be interested
Documents you may be interested
