Learning Adobe Dreamweaver Cs4 - Introduction

Guided Computer Tutorials

Learning Adobe DreamWeaver CS4 By Greg Bowden

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.

Learning Adobe DreamWeaver CS4 Module 1 Contents Chapter 1: Introduction to DreamWeaver CS4 Design Considerations.................................................................................... 1-1 Types of Graphics............................................................................................. 1-2 Backgrounds and Text..................................................................................... 1-2 Planning the Navigation.................................................................................. 1-2 The DreamWeaver Screen.............................................................................. 1-3 The Screen Views................................................................................... 1-4 The Insert Panel...................................................................................... 1-5 The Document Window........................................................................ 1-7 The Document Toolbar ........................................................................ 1-7 The Properties Inspector...................................................................... 1-9 The Status Bar....................................................................................... 1-11 The Panel Group................................................................................... 1-13 Creating a Site................................................................................................. 1-16 Creating a Root Folder........................................................................ 1-16 Entering the Site Settings.................................................................... 1-16 Adding a Page to the Site.................................................................... 1-20 Page Titles.............................................................................................. 1-21 DreamWeaver Assignment 1............................................................. 1-22

Chapter 2: Entering Text and Graphics Setting up the Home Page.............................................................................. 2-1 Entering the Text.............................................................................................. 2-2 Spell Checking the Text................................................................................... 2-3 Formatting the Text......................................................................................... 2-4 The Main Heading.................................................................................. 2-4 The Body Text......................................................................................... 2-7 Inserting an Image........................................................................................... 2-9 Selecting the Image................................................................................ 2-9 Creating an Images Folder.................................................................. 2-10 Adjusting the Size of an Image.................................................................... 2-13

© Guided Computer Tutorials, 2009

C-1

Learning Adobe DreamWeaver CS4 Wrapping Text Around Images................................................................... 2-15 Adding a Background.................................................................................... 2-17

Adding a Background Colour. ...........................................................2-17 Using an Image as a Background...................................................... 2-18 Adding a Horizontal Rule............................................................................. 2-20 Viewing the Page in a Browser..................................................................... 2-20 Live Preview.................................................................................................... 2-21 DreamWeaver Assignment 2............................................................. 2-23

Chapter 3: Using Tables Creating a Packages Page................................................................................ 3-1 Formatting the Text......................................................................................... 3-2 Adding a Horizontal Rule............................................................................... 3-4 Inserting the Table........................................................................................... 3-5 Adjusting the Table.......................................................................................... 3-7 Naming and Centring the Table.......................................................... 3-7 Adjusting the Row Height.................................................................... 3-8 Using Rulers and Grids.......................................................................... 3-9 Adjusting the Column Width............................................................ 3-11 Inserting Graphics into the Table............................................................... 3-12 Inserting an Image About Europe..................................................... 3-12 Inserting an Image About the USA.................................................. 3-14 Inserting an Image About South America...................................... 3-15 Inserting Text into the Table........................................................................ 3-16 Entering the Prices......................................................................................... 3-21 Adjusting the Text in the Table.................................................................... 3-22 Adding a Page Background.......................................................................... 3-24 Adding a Table Background......................................................................... 3-25 Further Table Adjustments........................................................................... 3-26 DreamWeaver Assignment 3............................................................. 3-28

C-2

© Guided Computer Tutorials, 2009

Contents Chapter 4: Creating Links Linking Text....................................................................................................... 4-1 Creating the Link Table......................................................................... 4-1 Formatting the Table.............................................................................. 4-3 Creating the Hyperlinks........................................................................ 4-3 Testing the Links.................................................................................... 4-5 Adjusting the Hyperlink Text Colour................................................. 4-6 Linking Images.................................................................................................. 4-7 Inserting the Images.............................................................................. 4-7 Linking the Images............................................................................... 4-10 Providing Links in the Packages Page.............................................. 4-11 DreamWeaver Assignment 4............................................................. 4-13

Chapter 5: Anchor Points and Hotspots Links Within a Page......................................................................................... 5-1 Loading the Prepared Page................................................................... 5-1 Setting the Anchor Points..................................................................... 5-2 Setting the Anchor Links...................................................................... 5-4 Testing the Anchor Links..................................................................... 5-5 Updating the Button Links............................................................................. 5-6 Hotspots............................................................................................................. 5-9 Loading the Map Files........................................................................... 5-9 Setting the Hotspot Links................................................................... 5-10 Testing the Links.................................................................................. 5-13 Updating the Button Links........................................................................... 5-14 Adding the Buttons to the Tours Page....................................................... 5-15 DreamWeaver Assignment 5............................................................. 5-16

© Guided Computer Tutorials 2009

C-3

Learning Adobe DreamWeaver CS4 Chapter 6: Site Assets and Library Items The Assets Panel............................................................................................... 6-1 Using the Assets Panel.................................................................................... 6-2 Loading the Prepared Page................................................................... 6-2 Applying Assets...................................................................................... 6-3 Adding a Background Image................................................................ 6-5 Inserting the World Image................................................................... 6-6 Using Library Items......................................................................................... 6-8 Creating an Update Message .............................................................. 6-8 Using the Library Item ....................................................................... 6-11 Editing the Library Item . ................................................................... 6-12 Creating a Navigation Library Item . ......................................................... 6-14 Placing the Links Table in the Library Items ................................ 6-14 Inserting the Library Item in Other Pages...................................... 6-16 Adding the Links Table to the Airlines Page................................... 6-18 Updating the Navigation Bar............................................................. 6-19 Looking at the Library Items........................................................................ 6-21 DreamWeaver Assignment 6............................................................. 6-22

Chapter 7: Absolute Position Elements Creating the Specials Page.............................................................................. 7-1 Creating a Title Element................................................................................. 7-1 Creating Some Image Tags............................................................................. 7-6 The First Image Tag................................................................................ 7-6 The Second Image Tag........................................................................... 7-8 The Third Image Tag.............................................................................. 7-9 Moving AP Element Tags............................................................................. 7-10 Placing a Table in an AP Element Tag........................................................ 7-11 Adding a Background to the Page............................................................... 7-15 Adjusting the AP Element Stacking Order............................................... 7-16 Converting AP Elements to Tables............................................................. 7-18 DreamWeaver Assignment 7............................................................. 7-21

C-4

© Guided Computer Tutorials, 2009

Contents Chapter 8: Using Templates Creating the Template..................................................................................... 8-1 Creating the Table.................................................................................. 8-2 Merging Cells.......................................................................................... 8-2 Saving the Page as a Template....................................................................... 8-4 Completing the Template............................................................................... 8-5 Adding a Logo......................................................................................... 8-5 Adding Navigation Buttons.................................................................. 8-7 Adjusting the Cell Heights.................................................................... 8-8 Setting Editable Regions in the Template.......................................... 8-9 Using the Template........................................................................................ 8-11 Applying the Template........................................................................ 8-11 Inserting the Content.......................................................................... 8-12 Adding E-Mail Links............................................................................ 8-13 Creating the Packages Page................................................................ 8-15 Creating the Airlines Page.................................................................. 8-16 Linking the Buttons....................................................................................... 8-18 Checking the Template Pages...................................................................... 8-20 Advantages of Templates.............................................................................. 8-20 Setting the Background....................................................................... 8-20 Adjusting the Content Region........................................................... 8-21 DreamWeaver Assignment 8............................................................. 8-23

Chapter 9: Creating Forms Starting the Page............................................................................................... 9-1 Inserting the Form Tag.................................................................................... 9-2 Entering the Text of the Form........................................................................ 9-2 Adding the Sub-Heading...................................................................... 9-2 Entering a Message................................................................................ 9-4 Adding a Horizontal Rule..................................................................... 9-6 Entering the Customer Details...................................................................... 9-6 Inserting the Table................................................................................. 9-6 Entering the Sub-headings................................................................... 9-7 Inserting Text Fields............................................................................. 9-10 Inserting a Pop-Up Menu Field......................................................... 9-13 Shading the Sub-Heading................................................................... 9-15 Previewing the Form............................................................................ 9-16 © Guided Computer Tutorials 2009

C-5

Learning Adobe DreamWeaver CS4 Entering the Travel Packages....................................................................... 9-17 Inserting the Table............................................................................... 9-17 Entering the Sub-Headings................................................................ 9-18 Inserting the Destination Fields........................................................ 9-19 Entering the From Fields..................................................................... 9-20 The Inserting the Duration Fields..................................................... 9-21 Splitting Cells........................................................................................ 9-23 Adjusting the Field Headings............................................................. 9-24 The Reply Section........................................................................................... 9-25 Inserting the Table............................................................................... 9-25 Inserting Check Box Fields................................................................. 9-26 The Submit and Reset Buttons.......................................................... 9-29 Formatting the Replay Heading......................................................... 9-30 Naming the Form........................................................................................... 9-32 Adding the Orders Page to the Template.................................................. 9-33 DreamWeaver Assignment 9............................................................. 9-35

Chapter 10: Navigation Bars Setting the Navigation Bar Files.................................................................. 10-1 Adjusting the Template....................................................................... 10-1 Adjusting the Index Page.................................................................... 10-2 Creating the Sydney Page................................................................... 10-4 Creating the London Page.................................................................. 10-5 Creating the Cape Town Page............................................................ 10-6 Inserting the Navigation Bar........................................................................ 10-7 Inserting the New York Buttons........................................................ 10-8 Setting the Navigation Bar Direction.............................................10-10 Inserting the Sydney Buttons...........................................................10-11 Inserting the London Buttons..........................................................10-12 Inserting the Cape Town Buttons...................................................10-13 Updating the Template......................................................................10-13 Adjusting the Navigation Bar..................................................................... 10-14 Editing Navigation Bar Elements.............................................................. 10-15 DreamWeaver Assignment 10......................................................... 10-17

C-6

© Guided Computer Tutorials, 2009

Contents Chapter 11: Checking and Uploading Web Files Browser Checks.............................................................................................. 11-1 Other Reports................................................................................................. 11-3 The Link Checker........................................................................................... 11-5 Cloaking........................................................................................................... 11-6 Cloaking the Library Folder............................................................... 11-6 Cloaking File Types.............................................................................. 11-7 Uploading Files............................................................................................... 11-8 Adjusting the Site Settings.................................................................. 11-8 Uploading the Site Files.....................................................................11-11 Changing Some Files.........................................................................11-13 Synchronising Files............................................................................11-14 DreamWeaver Assignment 11......................................................... 11-16

DreamWeaver Project 1 Harrison Autos ............................................................................................P1-2 About Harrison Autos.........................................................................P1-2 Small Cars..............................................................................................P1-2 Family Cars............................................................................................P1-3 Sports Cars............................................................................................P1-3 Test Drive Booking Form....................................................................P1-3

© Guided Computer Tutorials 2009

C-7

Learning Adobe DreamWeaver CS4

Module 2 Contents Chapter 12: Cascading Style Sheets Cascading Style Sheets.................................................................................. 12-1 Internal Custom Styles.................................................................................. 12-1 Starting a Blank Page........................................................................... 12-1 Creating the Main Heading Style...................................................... 12-2 Creating the Body Text Style.............................................................. 12-4 Looking at the Code............................................................................. 12-5 The CSS Styles Panel............................................................................ 12-6 Editing Styles......................................................................................... 12-7 Looking at the Styles...................................................................................... 12-8 External CSS Styles........................................................................................ 12-8 Loading the Sample Page.................................................................... 12-8 Creating a CSS Style Sheet................................................................. 12-9 Creating a Second Style.....................................................................12-11 Applying the Styles.............................................................................12-12 Adding a New Style............................................................................12-13 Adjusting the Styles............................................................................12-15 Saving the CSS File.............................................................................12-16 Looking at the Travel Tips Code.....................................................12-16 Attaching Styles to Other Pages......................................................12-17 Placing Styles in Templates........................................................................ 12-18 Opening the Template.......................................................................12-19 Attaching the Styles.css File to the Template................................12-19 Opening a New Page..........................................................................12-20 DreamWeaver Assignment 12......................................................... 12-21

C-8

© Guided Computer Tutorials, 2009

Contents Chapter 13: Laying out a CSS Based Page Starting a New Site......................................................................................... 13-1 Saving the Pages.............................................................................................. 13-4 Attaching the CSS File to the Index Page.................................................. 13-5 Setting the DIV Tags...................................................................................... 13-6 Looking at the Code............................................................................. 13-7 Inserting the Banner DIV Tag............................................................ 13-7 The Navigation DIV Tag..................................................................... 13-9 The Columns DIV Tag.......................................................................13-10 Inserting the Nav2 Nested DIV Tag...............................................13-11 Inserting the Content Nested DIV Tag..........................................13-12 Setting the Nav2 and Content Styles........................................................ 13-13 The Nav2 Style.....................................................................................13-13 Setting the Content Style..................................................................13-16 DreamWeaver Assignment 13......................................................... 13-18

Chapter 14: Adding Content to CSS Pages Inserting the Company Logo....................................................................... 14-1 Opening the Page................................................................................. 14-1 Inserting the Image.............................................................................. 14-1 Checking the Image Dimensions...................................................... 14-4 Inserting the Navigation Content............................................................... 14-5 Inserting the Home Button................................................................ 14-5 Inserting the Packages Button........................................................... 14-6 Inserting the Other Buttons............................................................... 14-7 Inserting the Nav2 Content.......................................................................... 14-9 Entering the Text.................................................................................. 14-9 Adding Some Dummy Links............................................................14-10 Inserting the Content Text......................................................................... 14-11 Copying the Text................................................................................14-11 Pasting the Text..................................................................................14-11 DreamWeaver Assignment 14......................................................... 14-14

© Guided Computer Tutorials 2009

C-9

Learning Adobe DreamWeaver CS4 Chapter 15: Formatting CSS Pages Setting Tag Styles............................................................................................ 15-1 The Body Tag......................................................................................... 15-1 Changing Some Text............................................................................ 15-3 Creating the H1 Style........................................................................... 15-4 Defining Class Styles...................................................................................... 15-5 Defining ID CSS Styles.................................................................................. 15-6 The Banner DIV Tag............................................................................ 15-7 The Navigation DIV Tag..................................................................... 15-8 The Columns DIV Tag......................................................................... 15-9 Formatting Link Text.........................................................................15-10 Editing Styles................................................................................................. 15-13 The Nav2 Region.................................................................................15-13 The Link Text.......................................................................................15-14 The Content Style...............................................................................15-15 Changing a Style Property................................................................15-15 Saving the Page as a Template................................................................... 15-16 Saving as a Template..........................................................................15-16 Setting the Editable Region..............................................................15-18 Using the Template............................................................................15-19 Editing the Template.................................................................................... 15-21 Understanding the CSS files....................................................................... 15-22 DreamWeaver Assignment 15......................................................... 15-24

Chapter 16: Using Behaviours The Behaviours Panel.................................................................................... 16-1 Popup Messages.............................................................................................. 16-2 Setting up a Page.................................................................................. 16-2 Popup Dialogue Boxes......................................................................... 16-4 Status Bar Messages............................................................................. 16-5 Deleting a Behaviour..................................................................................... 16-8 Displaying an Enlarged Image..................................................................... 16-8 Creating a New Page............................................................................ 16-8 Adding the Behaviour.......................................................................... 16-9

C-10

© Guided Computer Tutorials, 2009

Contents Validating Forms........................................................................................... 16-11 Creating the Orders Page..................................................................16-11 Setting the Validation Behaviour....................................................16-13 Setting Required Fields.....................................................................16-13 Setting an eMail Field........................................................................16-15 Validating Numbers...........................................................................16-17 Effect Behaviours.......................................................................................... 16-19 Browser Versions.......................................................................................... 16-21 DreamWeaver Assignment 16......................................................... 16-23

Chapter 17: Editing and Importing Tools Starting the Page............................................................................................. 17-1 Editing Images................................................................................................. 17-2 Cropping an Image............................................................................... 17-3 The Resample Tool............................................................................... 17-4 Brightness and Contrast...................................................................... 17-5 The Sharpen Tool................................................................................. 17-6 Importing Microsoft Word Documents.................................................... 17-6 Opening the Prepared Word Document......................................... 17-7 Copying the Microsoft Word Text.................................................... 17-7 Pasting the Text into DreamWeaver................................................. 17-7 Moving the Image................................................................................ 17-9 Adding a Word Table to the Page................................................................ 17-9 Copying the Table................................................................................. 17-9 Pasting the Table into DreamWeaver.............................................17-10 Adjusting the Table............................................................................17-11 DreamWeaver Assignment 17......................................................... 17-12

© Guided Computer Tutorials 2009

C-11

Learning Adobe DreamWeaver CS4 Chapter 18: Inserting Media Creating a Page............................................................................................... 18-1 Inserting Smart Photoshop Objects........................................................... 18-2 Inserting the Object............................................................................. 18-2 Adjusting the Image............................................................................. 18-4 Editing Images....................................................................................... 18-7 Flash Animations............................................................................................ 18-9 Inserting the Animation...................................................................... 18-9 Playing the Animation.......................................................................18-10 Resizing the Animation.....................................................................18-11 Flash Video.................................................................................................... 18-12 Importing the Video..........................................................................18-12 Setting the Skin...................................................................................18-13 The Final Settings...............................................................................18-14 Previewing the Video.........................................................................18-14 DreamWeaver Assignment 18......................................................... 18-16

Chapter 19: Creating Menus and Tabbed Panels Popup Menus.................................................................................................. 19-1 Saving the Prepared Pages.................................................................. 19-1 Adjusting the Template....................................................................... 19-2 Inserting the Popup Menu.................................................................. 19-3 Adjusting the Menu Buttons.............................................................. 19-3 Adjusting the Popup Menu................................................................ 19-5 Adjusting the Third Tier Menu.......................................................... 19-6 Saving the Template............................................................................. 19-6 Previewing the Page............................................................................. 19-7 Formatting the Menu........................................................................... 19-8 Tabbed Panels............................................................................................... 19-10 Inserting the Tabbed Panel...............................................................19-10 The London Tab..................................................................................19-10 The Paris Tab.......................................................................................19-12 Previewing the Page...........................................................................19-13 Adjusting the Tabbed Panels............................................................19-14 DreamWeaver Assignment 19......................................................... 19-15

C-12

© Guided Computer Tutorials, 2009

Contents Chapter 20: Commands and Snippets Creating Commands...................................................................................... 20-1 Creating a Table Command......................................................................... 20-1 Inserting the Table............................................................................... 20-1 Formatting the Table............................................................................ 20-2 Saving the Table Command............................................................... 20-4 Using the Table Command................................................................. 20-5 Clearing the History Panel........................................................................... 20-7 Formatting Image Sizes................................................................................. 20-7 Setting the Image Size......................................................................... 20-7 Creating the Image Size Command.................................................. 20-8 Applying the Command...................................................................... 20-9 Managing Commands................................................................................. 20-10 Using Snippets.............................................................................................. 20-10 Preset Snippets....................................................................................20-10 Creating Your Own Snippets...........................................................20-12 Using the Snippet...............................................................................20-15 Adding Images to Snippets...............................................................20-15 DreamWeaver Assignment 20......................................................... 20-18

DreamWeaver Project 2 Stewarts Real Estate . ..................................................................................P2-2 About Stewarts Real Estate................................................................P2-2 Current Property List..........................................................................P2-3 New Releases.........................................................................................P2-3 Inspection Form...................................................................................P2-4

© Guided Computer Tutorials 2009

C-13

Learning Adobe DreamWeaver CS4

C-14

© Guided Computer Tutorials, 2009

Chapter

Introduction to DreamWeaver CS4

1

The internet (or world wide web) is basically a series of server computers connected by a backbone of cables or satellite links. When you create a web site you post the site to one of the server computers so that others connected to the internet can access it. Many popular programs have web page creation facilities built into them. For example, you can produce web pages using Microsoft Word, Adobe InDesign, Quark Express, FileMaker Pro, Microsoft PowerPoint, etc. However, when professional web pages are required a program specifically developed for web page creation provides better results. Some specific web page authoring programs are Adobe DreamWeaver and Microsoft Expression. Adobe DreamWeaver CS4 is a program that allows internet sites to be created. It is basically a word processor with specific tools to make sites easier to develop and maintain.

Design Considerations When creating an internet site there are some design considerations that should be kept in the back of your mind. These include: •

Modems can be slow so the opening of an internet site may not be immediate on some people’s computers. You should always be thinking about the affect any page item will have on how fast that page will open on the internet.

•

Home pages (or Title Pages - the first page that is opened) should not have too many graphics which slow down the opening of the page or distract the user.

•

There are 216 colours that are shared by the Windows and Macintosh operating systems so you should try to stick to just those colours.

•

Don’t use uncommon fonts as the viewer of your site may not have those fonts installed in their system. The most common fonts are TIMES, TIMES NEW ROMAN, ARIAL and HELVETICA.

•

Try to break the site up into separate linked pages rather than one page that scrolls.



© Guided Computer Tutorials 2009

1-1

Learning Adobe DreamWeaver CS4

Types of Graphics There are two main types of graphics used in web pages: •

GIF (Graphic Interchange Format) which is limited to 216 colours. It is mainly used for clipart.

•

JPEG (Joint Photographic Enhancement Group) which is mainly used for photographs. It is a higher resolution format, but the graphic information is compressed.

Backgrounds and Text Always try to ensure that text in your web page is easy to read. If you use a dark background set the text to a light colour. If you use a light background set the text to a dark colour.

Planning the Navigation When creating an internet site it is important to plan the site carefully. In particular, you should plan how the viewer will navigate from page to page. Some things that you should do are: •

Work out how the home page can load quickly.

•

Work out where you want the user to be able to go from the home page. Draw a STRUCTURE DIAGRAM, for example:

About Us Home Page

Products News & Reviews

•

1-2

Search Catalogue Ordering

Decide how the navigation links will be provided. Will both text and graphics be provided to allow the user to move from page to page?

© Guided Computer Tutorials 2009

Introduction to DreamWeaver CS4

1

The DreamWeaver Screen 1

Load DREAMWEAVER cs4 and you will receive the following WELCOME screen. Its sections have been labelled:

Open Documents

Create new files

Training videos

Training Tips

Help files



2 Click on HTML under the CREATE NEW column to start a blank page.

3



The DREAMWEAVER work page will open. Look at the labelled sections of the diagram at the top of the next page and refer to the diagram until you are fully familiar with the different screen sections.

© Guided Computer Tutorials 2009

1-3

Learning Adobe DreamWeaver CS4

Document Toolbar

Menu Bar

Document Window or Work Page

Status Bar

NOTE:

Application Bar

Panel Group

Properties Inspector

There may be other panels on your screen depending on who has used the program before you.

A The Screen Views DreamWeaver provides a range of different screen views to suit the type of project you are doing. The default setting is DESIGNER view.

1 Click on the arrow next to the VIEW box in the APPLICATIONS BAR and select CLASSIC.

1-4

© Guided Computer Tutorials 2009

Introduction to DreamWeaver CS4 2

1

The screen adjusts to the previous version of DreamWeaver (CS3), which may suit people who are used to using that version of DreamWeaver.

3 Click on the arrow next to the VIEW box in the APPLICATIONS BAR again and select DESIGNER to return to the DEFAULT DreamWeaver screen.

NOTE:

If you make changes to your screen, you can always quickly return to the default DreamWeaver screen by selecting the DESIGNER option in the APPLICATION BAR.

B The Insert Panel The INSERT panel is part of the PANEL GROUP at the right of the screen. It has all the common DreamWeaver tools in a variety of categories.

1 Click on the arrow next to COMMON in the INSERT panel and the categories are displayed. Select the LAYOUT category.



© Guided Computer Tutorials 2009

1-5

Learning Adobe DreamWeaver CS4

2 The LAYOUT tools are displayed. You can scroll down the panel to see more of them.

3 Look at some of the other categories if you wish then return the INSERT panel to the COMMON category.

4 Double click on the INSERT tab and the INSERT panel is collapsed providing more room for the other panels in the PANEL GROUP.

5 Double click on the INSERT tab again and the INSERT panel is expanded.

1-6

© Guided Computer Tutorials 2009

Introduction to DreamWeaver CS4

1

C The Document Window The DOCUMENT WINDOW or WORK PAGE is the large white area of the screen. It is where you insert your text and images. Type in two sentences so that the text is on two lines. Don’t press the <enter> or key at any stage.

NOTE:

The DOCUMENT WINDOW acts as a word processor with text wrapping to the next line if it won’t fit on the first line.

D The Document Toolbar The DOCUMENT TOOLBAR is just above the DOCUMENT WINDOW. The buttons in that tool bar allow you to view the HTML (HyperText Markup Language) code that the program generates as you develop a page, add a title to the page, view the page in a browser, use the view options, etc.

1 Move the pointer over the tools in the DOCUMENT TOOLBAR and their labels should be displayed.



© Guided Computer Tutorials 2009

1-7

Learning Adobe DreamWeaver CS4

Code View

2 Click on the SPLIT button and the DOCUMENT WINDOW should be divided into two sections.

Design View

NOTE: i The top section, called CODE VIEW, shows the HTML code for the sentences that you entered. The lower section, called DESIGN VIEW, is the normal view which displays text and objects as you enter them.

ii On the Windows system the HTML commands are displayed within <>. On the Macintosh system the HTML commands are displayed in dark blue.



iii Before programs like DreamWeaver were developed internet sites had to be completely developed by entering HTML commands.

3 In the CODE VIEW section click at the end of the second sentence you entered. It is the black text.

4 Enter another sentence.

1-8

© Guided Computer Tutorials 2009

Introduction to DreamWeaver CS4

1

5 If the text isn’t displayed in the DESIGN VIEW pane, click in the pane and the sentence will be updated in that section.

NOTE: i If you want your screen to be entirely in CODE VIEW click on the SHOW CODE VIEW button in the DOCUMENT TOOLBAR.

ii It is good practice to regularly look at the code being generated by DreamWeaver so that you develop an understanding of HTML.

6 Click on the DESIGN button in the DOCUMENT TOOLBAR to return the screen to its normal setting.

E The Properties Inspector The PROPERTIES INSPECTOR is the panel at the bottom of the screen. It allows you to format text and objects that you add to the DOCUMENT WINDOW. It adjusts to show the formats of which ever object you have selected.



1 At the moment the PROPERTIES INSPECTOR should be showing the formats for text. You can change fonts, font sizes, alignments, text colour, etc. © Guided Computer Tutorials 2009

1-9

Learning Adobe DreamWeaver CS4

2 Position the cursor at the end of the last sentence.

3 Click on the HORIZONTAL RULE button in the COMMON tools of the INSERT panel.

4 A horizontal line should be added below the last sentence, click on it.

5 The PROPERTIES INSPECTOR changes to show the formats for the line. For example, you can change the line’s alignment, width and height or turn its shading off.

1-10

© Guided Computer Tutorials 2009

Introduction to DreamWeaver CS4

1

F The Status Bar The STATUS BAR is at the base of the DOCUMENT WINDOW just above the PROPERTIES INSPECTOR. As you add objects to the DOCUMENT WINDOW the STATUS BAR displays information about the objects and the size of the page. The following diagram labels the sections of the STATUS BAR. Tag Selector

Selection and Set Magnification tools

Window Size menu

Document Size and Estimated Download Time

1 The TAG SELECTOR shows a hierarchy of tags (commands) surrounding the current selection. So any HTML commands used near the horizontal rule (

---

) will be displayed. In this case just the tag is displayed.

2 Click on the tag and the whole contents of the DOCUMENT WINDOW will be selected. It is a quick way of selecting the entire contents of a page.



© Guided Computer Tutorials 2009

1-11

Learning Adobe DreamWeaver CS4

3 Click on the

---

tag (for HORIZONTAL RULE) and just the horizontal line should be selected.

4 Click on the SET MAGNIFICATION box and the different zoom settings are displayed.

NOTE:



1-12

i The WINDOW SIZE POPUP MENU (next to magnification)

allows you to adjust the size of the DOCUMENT WINDOW.

ii The DOCUMENT SIZE AND ESTIMATED DOWNLOAD TIME gives you an idea of how large your page is. As a general rule always keep pages under 8 seconds download time.

© Guided Computer Tutorials 2009

Introduction to DreamWeaver CS4

1

G The Panel Group At the right of the screen is the PANEL GROUP. It contains individual panels that can be expanded, collapsed, added to, or removed from, the panel group. The panels are ‘docked’ into position so that the screen does not become too congested. 1 Double click on the CSS STYLES panel tab and the panel should be expanded.

2

Further options within a panel are displayed in a menu which is accessed from a button at the top right of the panel. 3 Click on the CSS STYLES’ OPTIONS MENU button and options (or shortcuts) for that panel will be displayed.

4

Double click on the CSS STYLES panel tab again to collapse the panel.





© Guided Computer Tutorials 2009

1-13

Learning Adobe DreamWeaver CS4

5 Click on the double arrows at the top right of the PANEL GROUP and the whole panel group is collapsed to icons.

NOTE:

Collapsing the PANEL GROUP can provide a larger document window to work on your page design.

6 Drag the CSS STYLES panel onto the document window to remove it from the panel group.

7 The CSS STYLES panel becomes a floating panel.

NOTE:

1-14

You could click on the CSS STYLES panel’s CLOSE BOX (x) if you wanted to the remove the panel from the screen.

© Guided Computer Tutorials 2009

Introduction to DreamWeaver CS4

1

8 To dock the panel back into the PANEL GROUP simply drag it by its label back to just under the INSERT panel.

NOTE: i You will use a number of panels from the PANEL GROUP as you progress through these chapters. For example, there is a panel that manages all the assets of a web site, another that stores all the steps you do, etc.

ii Panels that are not in the PANEL GROUP can be added to the screen from the WINDOW menu.

9 Click on the arrow next to the VIEW box in the APPLICATION BAR and select DESIGNER to return the screen to the default setting.



© Guided Computer Tutorials 2009

1-15

Learning Adobe DreamWeaver CS4

Creating a Site One of the main attributes of DreamWeaver is its ability to manage all the resources that you use within your web site. This includes all the graphics, links, tables, layers, etc. In order for the program to keep track of everything you use, a SITE must be created. Basically, this tells DreamWeaver the location of the root (or parent) folder and the location of all the files that are stored within that root folder. Over the next few chapters you will develop a web site for a company called TravelWise which is an online travel agency. In order to do this, a root folder needs to be created in your STORAGE folder and DreamWeaver told how to navigate to that folder.

A Creating a Root Folder 1 Click in the CLOSE BOX (x) of the UNTITLED page tab and select NO to the SAVE CHANGES warning.

2

Open your STORAGE folder outside DreamWeaver and create a NEW FOLDER called TRAVELWISE.

3

You could create other folders within this root folder now, however, we will add them as we need them.

B Entering the Site Settings DreamWeaver will guide you through the settings it requires to set up a site for the TravelWise company. 1

Expand or reload DreamWeaver.

2 Create a NEW HTML document.

1-16

© Guided Computer Tutorials 2009

Introduction to DreamWeaver CS4 3

1

Display the SITE menu and select NEW SITE.

4 Click on the BASIC tab at the top of the SITE DEFINITION dialogue box.

NOTE:

Internet service provider settings will not be entered at this stage, just the basic site information will be established.

5 Name the site TravelWise followed by your initials. For example: TravelWise ab

6 Enter a URL for the site if you wish, for example: www.travelwise.com.au and click on the NEXT button

NOTE:



By adding your initials to the site name you will be able to identify your site from other students that may be using the same computer at a different time.

© Guided Computer Tutorials 2009

1-17

Learning Adobe DreamWeaver CS4

7 Select NO at this stage to the question about working with the server technologies, then click on the NEXT button.

8 For how you will be working with files, the most common way is to adjust files on your computer then upload them to the service provider’s server (hard drive) when ready, so select the first option. 9 You need to tell the program where your root folder is located. Click on the FOLDER ICON and navigate to your TRAVELWISE folder.

10 On the Windows system open the folder and click on SELECT. On the Macintosh system click once on the folder and select CHOOSE.

11 The path to the folder should be added to the settings. Click on NEXT.

1-18

© Guided Computer Tutorials 2009

Introduction to DreamWeaver CS4

1

12 You will be asked how to connect to your remote server. This is where you would enter your internet service provider settings.

13 Set the drop down box to NONE at this stage and click on the NEXT button.

14 You will be provided with a summary of the settings that you entered. Click on the DONE button.

NOTE:



You can always go back and update the settings at a later date by selecting MANAGE SITES from the SITE menu and then selecting EDIT.

© Guided Computer Tutorials 2009

1-19

Learning Adobe DreamWeaver CS4

15 The site and folder should be displayed in the FILES panel within the PANEL GROUP.

C Adding a Page to the Site You are now ready to start building the site. The first thing you should do when starting a page is save it in the root folder of the site. In this case that folder is your TravelWise folder. You can add folders within the root folder if you prefer to have a separate folder for pages. To see how to add pages to the site a CONTACT US page will be saved. 1

If you don’t have a blank page on the screen, create a new HTML document.

2

Display the FILE menu and select SAVE AS.

3

The program should automatically access your TRAVELWISE folder. If it doesn’t, navigate to your folder.

4

Enter the FILE NAME for the page:



Contact

(on Windows systems)



Contact.html

(on Macintosh systems)

NOTE: i It is good practice with HTML to not use spaces in file names. If you want to use more than one word in a file name, link the words with _. For example: Contact_us.

1-20

ii Avoid using mathematical symbols in file names.

© Guided Computer Tutorials 2009

Introduction to DreamWeaver CS4

1

5 Click on SAVE to save the page and it should be added to your FILES panel.

D Page Titles Pages should always be given a title which is then displayed in the browser when users open the page.

1 Highlight the text in the TITLE box of the DOCUMENT TOOLBAR and enter: Contact TravelWise 2 Click in the DOCUMENT WINDOW and add the text message: This page is under construction.

3 Notice that there is an asterisk next to the page name in the PAGE TAB. This tells you that the page is not fully saved.

4

Save the page by pressing CTRL+S or COMMAND+S and the asterisk disappears.

NOTE:



You can use the top left box of the FILES panel to swap the screen to a different site. This allows you to be develop two or more sites at the same time. © Guided Computer Tutorials 2009

1-21

Learning Adobe DreamWeaver CS4

DreamWeaver Assignment 1 You have two options at this stage. Either do the Assignments at the end of each chapter to build your own web site, or leave the Assignments and do your own Projects at the end of Chapters 11 and 20. Check with your teacher as to which approach you need to take. If you are developing a site at the end of each chapter you need to choose a topic for your web site. It could be for a sports or social club you are a member of, about a famous person or group, or an information page about a topic you are interested in. The way these instructions will operate is that each chapter will introduce new concepts for the TRAVELWISE site and the Assignment at the end of the chapter will ask you to use the skills you have learned to create similar pages in your own site. 1

In your STORAGE folder create a folder for your site.

2

Load DreamWeaver and use NEW SITE from the SITE menu to insert the settings for the site.

3

Start a new BASIC HTML PAGE.

4

Give the page a title then save the page.

5

Add an Under Construction message.

6

Ask your teacher to check your completed page and site.

1-22

© Guided Computer Tutorials 2009