Using Stylesheets To Design A Web Site In Dreamweaver Mx 2004

1. USING STYLESHEETS TO DESIGN A WEB
SITE IN DREAMWEAVER MX 2004
Introduction
This document assumes that you are familiar with the use of a computer keyboard and
mouse, have a working knowledge of Microsoft Windows and are familiar with using the
World Wide Web.
The files required to complete the exercises in these notes are available from WebCT
(vle.bbk.ac.uk), the college’s online learning environment. If you are following these
notes in a ITS workshop, you will have been subscribed to the necessary course. For
access for self-teaching, please contact ITS reception, room 151.
To purchase the software, see the CHEST Macromedia Educational Purchase Plan details,
by searching on dreamweaver at http://www.eduserv.org.uk/chest/
Contents
1 Linking to an External Style Sheet 3
2 Create a Style Sheet 7
3 Use a Style Sheet 11
4 Tables for Layout 14
5 CSS For Layout 18
About this Document
Will need to be typed or chosen from a menu
Words in bold
or window
Small capitals – e.g. ALT Indicate keys that you press
Press KEY1 + KEY2 Press both keys together
Press KEY1, KEY2 Press each key consecutively
Bulleted lists Are guidelines on how to perform a task
Show menu commands – in this case, choose the option
Choose Insert - Picture Picture from the Insert menu at the top of the screen

2. Aims & Objectives
The aim of this document is to introduce CSS for web page
formatting and the use of both tables and CSS for web page layout
When you have completed these exercises you should be able to:
• Link to, create and edit external style sheets
• Use tables for page layout
• Use CSS for page layout
• Use Dreamweaver provided style sheets
Pre-requisites
This document assumes that you are familiar with the use of a computer
keyboard and mouse, and Microsoft Windows-based products. All participants
should be familiar with the basic HTML structure of a web page.
You will need to have created a Dreamweaver web site, such as that produced in
the accompanying module quot;Creating Web Pages with Dreamweaver MX 2004quot;
Copyright
© Netskills, University of Newcastle
Copyright in the whole and every part of this
Courseware whether in the form of a written manual, document, software
program, service or otherwise belongs to the University of Newcastle upon
Tyne (quot;the Ownerquot;) and may not be used, sold, licensed, transferred, copied
or reproduced in whole or in part in any manner or form or in or on any
media to any person other than in accordance with the terms of the Owner's
Licence Agreement or otherwise without the prior written consent of the
Owner.
All use of this material is governed by the Owner's Standard Licence
Agreement together with the appropriate Schedule. The following are
available:
• A Standard Licence Schedule to cover all use including all for-profit use by
any type of organisation and all use by non-educational establishments
• An Educational Licence Schedule for not-for-profit internal use only by a
recognised educational establishment
The Netskills logo and this copyright notice must be included in any copy or
adaptation.
Netskills is a trademark of Netskills, University of Newcastle
Contact Information
Central Computing Services, Birkbeck, Malet Street WC1E 7HX
Email: ITS-helpdesk@bbk.ac.uk
Phone: UK 020 7631 6543
2

3. 1. Linking to an External Style Sheet
Objectives To learn how to link to an external style sheet.
Method You will use the CSS Styles panel.
Comments The W3C recommend use of style sheets for formatting. Style sheets may
be internal within a page but the greatest versatility is provided when
linking to an external style sheet.
1.1 Download files
• In your web browser go to the following
address:
http://vle.bbk.ac.uk/
• Click on the link Log in to WebCT; login to
WebCT using your ITS username and password
• Follow the link to the IT Skills module
• Click on Software Guides
• Click on Dreamweaver
• Click on Supporting Materials for ITS workshops
• Click on 9.78 – Using Stylesheets to Design…
• Download the three files listed by right-clicking each link in turn and from the
menu that appears selecting Save Target As (or Save Link As)
• Save each file to the folder yournamesite – created on your N: drive in
exercise one of document 9.75 – Creating Accessible Web Sites in Dreamweaver
MX 2004
xml.htm (you will already have these 2 files if you have
access.htm completed doc 9.75 and need not download)
style1.css (you will already have this file if you have completed doc
9.76)
1.2 • In the Files panel, double-click on access.htm to open it in the
Document window
Figure 1-1 Site files
© Netskills, University of Newcastle 3

4. Note Note that when you have more than one file open, you may move between them
by clicking on the appropriate link in the top left corner of the Document
window:
Figure 1-2 Tabs indicating open files
1.3 CSS Styles Panel
From the Design panel group, locate the CSS Styles panel:
Figure 1-3 CSS Styles panel
1.4 Attach Style Sheet
• From the bottom of the CSS Styles panel, click on the Attach Style Sheet
button:
• In the pop-up window, click on the Browse button and choose style1.css
• Click OK
• Ensure that Add as: Link is selected:
4

5. Figure 1-4 Attach External Style Sheet window
• Click OK
You should see your page take the formatting from the linked style sheet.
Preview your page in the browser and it should look as follows:
Figure 1-5 access.htm
1.5 Also notice that the CSS Styles panel displays details about the style sheet (you
may need to click the + to see it):
Figure 1-6 style1.css properties
© Netskills, University of Newcastle 5

6. 1.6 Delete CSS Link
• In the CSS Styles panel, select style1.css:
Figure 1-7 Selecting style1.css
• From the bottom of the panel, click on the Delete CSS Style button:
You have removed the link to the style sheet and should see your page revert to
its non-formatted state. The reference to the style sheet has also been removed
from the CSS Styles panel. However, the style sheet file itself has not been
deleted and should still be displayed in the File panel.
• Save access.htm
6

7. 2. Create a Style Sheet
Objectives
To learn how to create a style sheet using Dreamweaver MX 2004.
Method You will use the CSS Styles panel and also the CSS Styles Definition
window.
Comments Dreamweaver provides a tool for creating and editing styles. Style sheet
handling and rendering has improved further in Dreamweaver MX 2004.
2.1 CSS Styles Panel
• With access.htm open in the document window, open the CSS Styles
panel:
Figure 2-1 CSS Styles panel
• In the CSS Styles panel, click on the Attach Style Sheet button:
• In the pop-up window and in the box labelled File/URL type style2.css
Figure 2-2 Link External Style Sheet
• Click OK
• The style sheet, style2.css does not yet exist, so you will be prompted to
create it:
Figure 2-3 Prompt box
• Click Yes
You have linked your web page to a new style sheet, called style2.css. At
present style2.css is an empty document.
2.2 Ensure that the CSS Style panel looks as follows, with style2.css highlighted.
© Netskills, University of Newcastle 7

8. Figure 2-4 CSS Styles
• In the CSS Styles panel, click on the New CSS Style button:
• In the pop-up window, first ensure the radio button for Type: Tag
(redefines the look of a specific tag) is selected
• From the Tag drop-down menu select: body. Also ensure that Define in:
is style2.css.
Figure 2-5 New CSS Style
• Click OK
You will see the following:
Figure 2-6 CSS Style Definition
• In the CSS Style Definition window, with the Category: Type, use the
drop-down menu button to make the Font: Arial, Helvetica, sans serif
• Click Apply to see the effect of your changes
• Make the following style definitions, ensure that your units are as specified
as shown below:
Category Style Value
Type Size 1.1ems
Type Color Light Green
Background Background-color Black
Box Width 80%
8

9. Box Margin Left 5%
(You will need to clear the Same for
All checkbox first).
• Click OK
• You have set up a variety of style definitions, which are held in the external
style sheet style2.css
Acces
sibility
Fonts: Sans-serif fonts are best for reading on the screen
/Usabi Colours: If you specify colours, then you should specify both
lity text colour and background-colour.
Background These are best avoided since they are distracting and
images make it difficult to read any overlying text
Units All units should be relative. Use % for positioning and
em units for text
2.3 • Repeat 2.2. On this occasion, in the New CSS Styles window, select the tag:
h1. Set up some further style definitions for this tag.
2.4 Tag Inspector
• Open the Tag Inspector panel group and select the Relevant CSS Panel
• Ensure that the body tag is selected in the upper window
• Click on the show list view button, between the two panel windows
The panel should appear as shown below:
Show list
view button
Currently
Font color picker
defined CSS
properties
Figure 2-7 Relevant CSS Panel
The lower window of the panel displays a list of the styles that apply to the
currently selected page content.
• Use the color picker to change the text colour to pink. The changes to the
text formatting should be applied to your page
• Now increase the left margin of the page to 10%. Again, the change should be
applied to the page immediately
© Netskills, University of Newcastle 9

10. • Save access.htm
Note The Relevant CSS Panel is a new feature in Dreamweaver MX 2004. It
allows style rules to be inspected and edited far more easily and quickly than
previously. Remember that changes to style rules will be reflected in all the
pages that link to that style sheet. Style properties can also be edited by clicking
the Edit Style Sheet button in the CSS Styles panel.
10

11. 3. Use a Style Sheet
Objectives To use pre-built style sheets supplied with Dreamweaver.
Method You will apply a Dreamweaver style sheet to one of your pages.
Comments Dreamweaver MX 2004 provides a number of style sheets.
3.1 Use the CSS Styles panel to remove any linked style sheets from the web page
access.htm. [Hint: If unsure, consult Task 1.6].
3.2 New Document
• From the main menu, select File – New
• Ensure that the New Document window is open with the General tab
selected. Select:
Category: CSS Style Sheets and
CSS Style Sheets: Full Design: Accessible
This is shown below:
Figure 3-1 New Document window
• Click Create
You will see a style sheet displayed in the Document window. Direct editing
of the style sheet is possible
Figure 3-2 The Document window
The CSS Styles panel will display the details of the style sheet:
© Netskills, University of Newcastle 11

12. Figure 3-3 CSS Styles
3.3 • From the main menu, select File – Save As and save the file as
dreamstyles.css
3.4 • In the Document window return to access.htm
• Use the CSS Styles panel to link access.htm to dreamstyles.css. [Hint:
If unsure, consult Task 1.4]
• Preview your page in the browser and it should look as below:
Figure 3-4 access.htm
3.5 • In the CSS Styles panel, scroll down the list of styles and select the class:
footer
Figure 3-5 CSS Styles
3.6 Using a class
• In the Document window, scroll to the bottom of the page and select
the line of text:
© Netskills, University of Newcastle Last Updated: 18 July
2003
• In the CSS Styles panel, with the class: footer selected, right click and from
the context menu that appears select Apply:
12

13. Figure 3-6 Using a class in a style sheet
You should see the footer text in your web page take on the styles defined in
the class footer.
Note You can also apply a class style by selecting the relevant class in the CSS Styles
panel then selecting the appropriate property from the Style menu in the
Property Inspector, as shown:
Classes Up to now, style sheets have been used for defining style for existing HTML tags
throughout whole web pages. This is limited, since you may want the first
paragraph to have a distinct appearance, or every other heading. Classes allow
for this flexibility. Classes are groups of styles given a unique name and then
applied to one or more HTML tag. In Dreamweaver, they may be created using
the CSS Styles panel, clicking the New CSS Style button and selecting
Selector Type: Class (can apply to any tag)
3.7 • In the Document window select the first paragraph of text, which begins:
An increasing awareness of accessibility issues suggests that..
• Use the CSS Styles panel to assign a new class to the text. Remember that
from the main menu you can select Edit – Undo Apply to undo your last
change
• Save access.htm
© Netskills, University of Newcastle 13

14. 4. Tables for Layout
Objectives To learn how to use tables for layout.
Method You will create a layout table and add some content.
Comments In web pages, tables are more commonly used for layout than for data.
The W3C recommend CSS as preferable to tables for layout. However
due to older browsers not fully supporting CSS, many designers still
choose tables.
4.1 • From the main menu, select File – New
• Ensure that the New Document window is open on the General tab.
Select:
Category: Basic Page and
Basic Page: HTML
Also ensure that Make Document XHTML Compliant is selected:
Figure 4-1 New Document
• Click Create
• From the main menu, select File – Save As and save your new page as
tablelayout.htm
4.2 Layout mode
• From the Insert Bar menu select Layout:
Figure 4-2 Insert bar
• Use the Table button to add a table with 1 row and 3 columns, taking
up 100% of the page width, with border thickness set to 0 and a cell padding
of 5. Leave the accessibility options blank. (These apply to data tables).
Figure 4-3 Accessibility Options for Tables
14

15. • Click OK
Acces The accessibility options that you are prompted for are for data tables. When
sibility you are creating layout tables, leave the options blank. Instead remember that
devices such as screen readers will read your tables row-by-row and from left to
right. Ensure that your content makes sense when read in this linearised
manner.
4.3 Copy and Paste text
• In the top left corner of the Document window, click on the link to
display the page access.htm:
Figure 4-4 Changing document displayed
• In access.htm, highlight all the text from the beginning of the document,
including the main heading, until just before the horizontal rule:
Figure 4-5 Highlight text in access.htm
• From the main menu, select Edit – Copy
• In the Document window, display tablelayout.htm. Click in the middle
table cell. From the main menu, select Edit – Paste
• The text from access.htm has been copied into the middle cell of the table
in tablelayout.htm.
4.4 Expanded Table Mode
• On the Insert bar (Layout) click on the Expanded mode button:
The Expanded Table
Mode button
Figure 4-6 Viewing tables in expanded mode
Viewing tables in Expanded Mode temporarily adds cell padding and spacing
to all tables in a document and increases the tables’ borders to make editing
easier. This enables you to select items in tables or precisely place the insertion
© Netskills, University of Newcastle 15

16. point.
Note Once you make your selection or place the insertion point, you should return to
the Standard mode of Design view to make your edits. Some visual operations,
such as resizing, will not give expected results in Expanded Tables Mode.
4.5 Repeat task 4.3 , this time copying the contents of xml.htm into the right table
cell of tablelayout.htm. [Remember you can open files by double clicking on
their name, listed in the Files panel].
4.6 Add a Link
• With the Document window displaying tablelayout.htm, click in the
left table cell. Type the text:
Netskills
TONIC
Use the Property inspector to make the text, Netskills, link to
http://www.netskills.ac.uk
and TONIC link to
http://www.bbk.ac.uk/ITS/courses/
Preview your page in the browser and it should look as follows with the text in
each column vertically centred:
Figure 4-7 tablelayout.htm
16

17. 4.7 Vertical Alignment
• Return to Dreamweaver
• Select each table column in turn
• Use the Property inspector to make the vertical alignment of each table
cell Top:
Figure 4-8 The Property inspector
4.8 Save tablelayout.htm
Preview your page in the browser and it should look as follows:
Figure 4-9 tablelayout.htm
© Netskills, University of Newcastle 17

18. 5. CSS For Layout
Objectives
To learn how to create and apply style sheets to control the layout of a
web page.
Method You will use style sheets to create classes that will determine the
positioning of different elements of a web page.
Comments Although not very widely used yet, CSS is the W3C recommended
method for creating web page layouts. CSS handling has improved in
Dreamweaver MX 2004.
5.1 • Open access.htm in the Document window and remove any linked
style sheets
5.2 Link a style sheet
• Use the CSS Styles panel to link access.htm to a new style sheet called
layout.css (see 2.1).
Figure 5-1 CSS Styles panel showing layout.css
5.3 Create New CSS Style
• With layout.css selected in the CSS Styles panel, click on the New CSS
Style button:
• In the New CSS Style window, ensure that Selector Type:Class (can
apply to any tag) and Define In: layout.css are both selected
• In the Name: box, type leftcol.
Figure 5-2 Creating a new class
• Click OK
The CSS Style Definition panel will open:
18

19. Figure 5-3 CSS Style Definition
5.4 • Make the following style definitions, ensuring that the units are as specified:
Category Style
Background: Background-color: Light blue
Box: Width: 40%
Positioning: Type: absolute
Positioning: Placement Top: 44%
Positioning: Placement Left: 5%
• In the CSS Style Definition window, click OK to save your styles in
layout.css
You have created a new class called leftcol. Your page, won't yet display any of
the classes defined in leftcol since you have not yet associated the class with any
of your HTML tags.
Note Classes are independent styles that can be applied either to specific elements of a
web page, or as is the case in this exercise, declared generically and applied to
groups of elements.
5.5 • Create a second class called rightcol and save it in layout.css. Make the
following style definitions:
Category Style
Background: Background-color: Light pink
Box: Width: 40%
Positioning: Type: absolute
Positioning: Placement Left: 50%
Positioning: Placement Top: 44%
© Netskills, University of Newcastle 19

20. 5.6 • Create a third new class called container and save it in layout.css. Make
the following style definitions:
Category Style
Positioning: Type: relative
Positioning: Placement Top: 0%
Positioning: Placement Left: 0%
Note that your CSS Styles panel should display the new classes:
Figure 5-4 CSS Styles panel
• From the main menu select File – Save All
20

21. 5.7 In the document window, examine access.htm in Design View. After the
introductory paragraph, note that there two sections with headers: The
Content and Requirements.
• Select all the text in the section headed The Content, as shown below:
Figure 6-5 Selecting text for the first content block
• With the Insert Bar displaying the Layout category, click on the Insert Div
Tag button .
• In the Insert Div Tag window, select class: leftcol. Leave the other options as
they are.
Figure 6-6 Selecting Insert Div Tag options
• Click OK
You should see some changes to access.htm :
Figure 6-7 Results of applying leftcol class
5.8 • Repeat the above procedure, this time for the section with the heading:
Requirements (include the footer, which ends “July 2003”), but use
the class .rightcol. You should see the second content block displayed in
the document window.
© Netskills, University of Newcastle 21

22. Note <div> is a block level HTML tag, meaning that it adds a carriage return either
side when it is used. It contains no inherent style and is commonly used to group
together a section of a web page for the purposes of employing styles.
5.9 Preview access.htm in your browser.
Your page should look as follows:
Figure 5-8 access.htm
• From the top-right corner of your browser, click on the Restore Down
button: and reduce the size of your browser window
You will find that the blocks of text that are absolutely positioned will run over
the top of other text:
Figure 5-9 access.htm in small browser window
Note Absolute positioning removes content from the flow of the page, meaning that
content either side of it would read contiguously. Absolute positioning is relative
to either the top-left corner of the browser window or, if it is nested within a
relatively positioned element, then relative to the position of the nesting element.
In our example, the absolute positioning of each class is relative to the top-left
corner of the browser window. However, since the individual placement units
within each class are relative (for accessibility), the absolutely positioned content
can appear over other content.
5.10 • In the Document window, change to Code View and add the div tags as
shown in bold below, so that they enclose the existing div tags:
...<p>This workshop is aimed at anyone who produces web pages
and wishes to understand and explore the principles and
practice of producing accessible content. </p>
<div>
22

23. <div class=”leftcol”>
<h2>The Content</h2>
<p>The workshop comprises presentations, demonstrations and
hands-on sessions with opportunities for questions and discussion.
Participants each ...
...<hr />
<p>&copy;
<a href=quot;http://www.netskills.ac.uk/quot;>Netskills</a>, University of
Newcastle Last Updated: 18 July 2003 </p>
</div>
</div>
</body>
</html>
5.11 • In the Document window, return to Design View and click anywhere in
the content of the new <div> block
• In the bottom bar of the Document window click on the outermost
<div> (shown below) so that the two existing <div> blocks are highlighted:
Figure 5-10 Nesting tags
• Use the Insert Div Tag button on the Insert Bar to apply the class
container to this content block. [Hint: If unsure, consult Task 5.7].
• Preview access.htm in the browser. Your page should look as follows:
Figure 5-11 Results of applying class: container
The gap between the positioned and non-positioned content is because the
absolutely positioned classes have a value of top: 44%, appropriate when relative
to the top of the browser window, but inappropriate to the relatively positioned
containing element.
5.12 • Using the Edit Styles button in the CSS Styles panel, edit the classes leftcol
and rightcol to reduce the amount of white space
• Preview access.htm in your browser
• Adjust the browser display window and see the effect of containing your
absolutely positioned elements in a relatively positioned element
© Netskills, University of Newcastle 23

24. • Save access.htm
Acces Not all browsers support CSS. Using absolute positioning, it is possible to
sibility
present content on a graphical browser in a completely different order to that in
the HTML. Always ensure that your content makes sense when read without
CSS.
It is easy to turn off CSS in Netscape 4. From the main menu, select Edit –
Preferences – Advanced and de-select Enable style sheets.
Document 9.78 24
Version 2 August 2007