Using Stylesheets To Design A Web Site In Dreamweaver Mx 2004
USING STYLESHEETS TO DESIGN A WEB
SITE IN DREAMWEAVER MX 2004
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/
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
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
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
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
• In the pop-up window, click on the Browse button and choose style1.css
• Click OK
• Ensure that Add as: Link is selected:
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
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:
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%
• 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.
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
4.1 • From the main menu, select File – New
• Ensure that the New Document window is open on the General tab.
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
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
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:
Use the Property inspector to make the text, Netskills, link to
and TONIC link to
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
5. CSS For Layout
To learn how to create and apply style sheets to control the layout of a
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
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
• 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:
5.6 • Create a third new class called container and save it in layout.css. Make
the following style definitions:
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
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>
• Save access.htm
Acces Not all browsers support CSS. Using absolute positioning, it is possible to
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
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