Learning Adobe DreamWeaver CS4

By Greg Bowden

Chapter 13

Laying out a CSS

Based Page

Guided Computer Tutorials

www.gct.com.au
PUBLISHED BY

GUIDED COMPUTER TUTORIALS

PO Box 311
Belmont, Victoria, 3216, Australia

www.gct.com.au

© Greg Bowden

This product is available in Single or Multi User versions.

Single-user versions are for single student or teacher use at any

particular time, just as a single text book would be used. If you intend
to use the notes with multiple students the single user version should
be upgraded to the multi-user version.

Multi-user versions allow the school or institution to print as many

copies as required, or to place the PDF files on the school network,
intranet and staff laptops. A certificate of authentication is provided
with multi-user versions. Bookmarks provide links to all headings and
sub-headings, and individual chapters are provided.

First published 2009

ISBN: 1 921217 74 X Module 1

1 921217 75 8 Module 2
PDF document on CD-ROM

Every effort has been made to ensure that images used in this
publication are free of copyright, but there may be instances where
this has not been possible. Guided Computer Tutorials would
welcome any information that would redress this situation.
 Chapter

13
Laying out a CSS Based Page
Style sheets can not only be used to record the text formatting of a page they can also be
used to store the layout information as well. Laying out pages using CSS styles involves
storing all the text format and layout information in a separate CSS STYLES SHEET file.
The advantages of doing this are:
• There is less code in the page so the page loads faster.
• The pages can be made to look the same on different sized screens.
Laying out pages using CSS styles is a little more involved than entering text and images
straight onto a page, but it has become the standard way of creating detailed web page
designs, so it is worth the initial effort.
To make the process easier a new site will be created. The pages will have the following
structure, without a table being used.

Company Banner

Main Navigation
Navigation
Secondary

Content

The page layout will be created in this chapter and content added to it in the next
chapter.

Starting a New Site

1 Load DreamWeaver or close the current documents.

2 Display the SITE menu and select NEW SITE.

© Guided Computer Tutorials 2009 13-1

Learning Adobe DreamWeaver CS4

3 Click on the BASIC tab and call the

site:
TravelWise2 <your intitials>
then click on NEXT.

4 Select NO to SERVER TECHNOLOGIES and click on NEXT.

5 Click on the folder icon next to the

‘Where do you want to store the
files?’ section.

6 Access your STORAGE folder and create a new folder called TRAVELWISE2, referring
to the following diagrams.

Windows Macintosh

13-2 © Guided Computer Tutorials 2009
 Laying Out a CSS Based Page 13

7 Select OPEN or CHOOSE followed

by SELECT (Windows) and the path
to the folder should be added to
the ‘Where do you want to store the
files?’ box.

8 Click on the NEXT button.

9 Select NONE for the REMOTE SERVER

connection and click on NEXT.

10 Click on DONE to create the site.

11 Start a new HTML page if you

do not have a blank page on the
screen.

© Guided Computer Tutorials 2009 13-3

Learning Adobe DreamWeaver CS4

Saving the Pages

Two pages need to be saved. The blank HTML page and the external CSS page that will
be used to store all the formatting and layout information.

1 Save the current untitled page in the TRAVELWISE2 folder as:

index or index.html

2 Display the FILE menu and select NEW to create a new page.

3 In the left column select BLANK PAGE

then select CSS in the PAGE TYPE
column.

4 Select CREATE to start the file.

5 Save the page in your TRAVELWISE2 folder as:

tw.css
referring to the following diagrams.

Windows Macintosh

13-4 © Guided Computer Tutorials 2009
 Laying Out a CSS Based Page 13

Attaching the CSS File to the Index Page

The CSS file now needs to be linked to the INDEX page so that all the formatting and
layout details will be sent to the CSS file.

1 Close the TW.CSS tab. The file does not need to be open to store data.
DreamWeaver will write the code to that file for you.
2 The INDEX page should be open.

3 Expand the CSS STYLES panel and

click on the ATTACH STYLE SHEET
button.

4 In the ATTACH EXTERNAL STYLE

SHEET dialogue box click on the
BROWSE button next to the FILE/URL
box.

5 Locate the TW.CSS file in your TRAVELWISE2 folder and select OK or CHOOSE,
referring to the following diagrams.

Windows Macintosh

© Guided Computer Tutorials 2009 13-5

Learning Adobe DreamWeaver CS4

6 The TW.CSS file should be added to

the FILE/URL box, ensure that LINK is
selected next to ADD AS and click on
OK.

7 Click on ALL in the CSS STYLES

panel and the TW.CSS file should
be present, and it is added to the
RELATED FILES BAR.

NOTE: The TW.CSS file will store all the formatting and layouts that
you do over the next few chapters.

Setting the DIV Tags

When laying out a page using CSS, regions of the page are labelled using DIVISION tags
(DIV tags for short). The page to be created will have three sections:

• Banner which will contain a logo for TravelWise.

• Navigation which will contain the top level navigation buttons.
• Columns which will contain a secondary navigation section and the main content
of the page.

DIV tags will be used to set each of these sections.

13-6 © Guided Computer Tutorials 2009