Learning Asobe Dreamweaver Cs4 - Css Layouts

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

Laying out a CSS Based Page

13

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

Secondary Navigation

Main Navigation

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 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.

Macintosh

Windows

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

13-4

Macintosh

© 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.

Macintosh

Windows



© 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