Learning Adobe DreamWeaver CS4 - Introduction

Guided Computer Tutorials

LearningAdobe

DreamWeaver CS4

By Greg Bowden

PUBLISHED BY

GUIDED COMPUTER TUTORIALSPO Box 311Belmont, 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.

© Guided Computer Tutorials, 2009 C-1

Learning Adobe DreamWeaver CS4

Module 1 Contents

Chapter 1: Introduction to DreamWeaver CS4Design Considerations ................................................................................... 1-1Types of Graphics ............................................................................................ 1-2Backgrounds and Text .................................................................................... 1-2Planning the Navigation ................................................................................. 1-2The DreamWeaver Screen ............................................................................. 1-3

The Screen Views................................................................................... 1-4The Insert Panel ..................................................................................... 1-5The Document Window ....................................................................... 1-7The Document Toolbar ....................................................................... 1-7The Properties Inspector ..................................................................... 1-9The Status Bar ...................................................................................... 1-11The Panel Group .................................................................................. 1-13

Creating a Site ................................................................................................ 1-16Creating a Root Folder ....................................................................... 1-16Entering the Site Settings ................................................................... 1-16Adding a Page to the Site ................................................................... 1-20Page Titles ............................................................................................. 1-21

DreamWeaver Assignment 1 ............................................................ 1-22

Chapter 2: Entering Text and GraphicsSetting up the Home Page ............................................................................. 2-1Entering the Text ............................................................................................. 2-2Spell Checking the Text .................................................................................. 2-3Formatting the Text ........................................................................................ 2-4

The Main Heading ................................................................................. 2-4The Body Text ........................................................................................ 2-7

Inserting an Image........................................................................................... 2-9Selecting the Image ............................................................................... 2-9Creating an Images Folder ................................................................. 2-10

Adjusting the Size of an Image ................................................................... 2-13

© Guided Computer Tutorials, 2009C-2


Wrapping Text Around Images .................................................................. 2-15Adding a Background ................................................................................... 2-17

Adding a Background Colour ............................................................2-17Using an Image as a Background...................................................... 2-18

Adding a Horizontal Rule ............................................................................ 2-20Viewing the Page in a Browser .................................................................... 2-20Live Preview ................................................................................................... 2-21DreamWeaver Assignment 2 ............................................................ 2-23

Chapter 3: Using TablesCreating a Packages Page ............................................................................... 3-1Formatting the Text ........................................................................................ 3-2Adding a Horizontal Rule .............................................................................. 3-4Inserting the Table .......................................................................................... 3-5Adjusting the Table ......................................................................................... 3-7

Naming and Centring the Table ......................................................... 3-7Adjusting the Row Height ................................................................... 3-8Using Rulers and Grids ......................................................................... 3-9Adjusting the Column Width ........................................................... 3-11

Inserting Graphics into the Table .............................................................. 3-12Inserting an Image About Europe .................................................... 3-12Inserting an Image About the USA ................................................. 3-14Inserting an Image About South America ..................................... 3-15

Inserting Text into the Table ....................................................................... 3-16Entering the Prices ........................................................................................ 3-21Adjusting the Text in the Table ................................................................... 3-22Adding a Page Background ......................................................................... 3-24Adding a Table Background ........................................................................ 3-25Further Table Adjustments .......................................................................... 3-26DreamWeaver Assignment 3 ............................................................ 3-28

© Guided Computer Tutorials 2009 C-3

Contents

Chapter 4: Creating LinksLinking Text ...................................................................................................... 4-1

Creating the Link Table ........................................................................ 4-1Formatting the Table ............................................................................. 4-3Creating the Hyperlinks ....................................................................... 4-3Testing the Links ................................................................................... 4-5Adjusting the Hyperlink Text Colour ................................................ 4-6

Linking Images ................................................................................................. 4-7Inserting the Images ............................................................................. 4-7Linking the Images .............................................................................. 4-10Providing Links in the Packages Page ............................................. 4-11


Chapter 5: Anchor Points and HotspotsLinks Within a Page ........................................................................................ 5-1

Loading the Prepared Page .................................................................. 5-1Setting the Anchor Points .................................................................... 5-2Setting the Anchor Links ..................................................................... 5-4Testing the Anchor Links..................................................................... 5-5

Updating the Button Links ............................................................................ 5-6Hotspots ............................................................................................................ 5-9

Loading the Map Files .......................................................................... 5-9Setting the Hotspot Links .................................................................. 5-10Testing the Links ................................................................................. 5-13

Updating the Button Links .......................................................................... 5-14Adding the Buttons to the Tours Page ...................................................... 5-15DreamWeaver Assignment 5 ............................................................ 5-16



Chapter 6: Site Assets and Library ItemsThe Assets Panel .............................................................................................. 6-1Using the Assets Panel ................................................................................... 6-2

Loading the Prepared Page .................................................................. 6-2Applying Assets ..................................................................................... 6-3Adding a Background Image ............................................................... 6-5Inserting the World Image .................................................................. 6-6

Using Library Items ........................................................................................ 6-8Creating an Update Message .............................................................. 6-8Using the Library Item ...................................................................... 6-11Editing the Library Item .................................................................... 6-12

Creating a Navigation Library Item .......................................................... 6-14Placing the Links Table in the Library Items ............................... 6-14Inserting the Library Item in Other Pages ..................................... 6-16Adding the Links Table to the Airlines Page .................................. 6-18Updating the Navigation Bar ............................................................ 6-19

Looking at the Library Items ....................................................................... 6-21DreamWeaver Assignment 6 ............................................................ 6-22

Chapter 7: Absolute Position ElementsCreating the Specials Page ............................................................................. 7-1Creating a Title Element ................................................................................ 7-1Creating Some Image Tags ............................................................................ 7-6

The First Image Tag ............................................................................... 7-6The Second Image Tag .......................................................................... 7-8The Third Image Tag ............................................................................. 7-9

Moving AP Element Tags ............................................................................ 7-10Placing a Table in an AP Element Tag ....................................................... 7-11Adding a Background to the Page .............................................................. 7-15Adjusting the AP Element Stacking Order .............................................. 7-16Converting AP Elements to Tables ............................................................ 7-18DreamWeaver Assignment 7 ............................................................ 7-21


Contents

Chapter 8: Using TemplatesCreating the Template .................................................................................... 8-1

Creating the Table ................................................................................. 8-2Merging Cells ......................................................................................... 8-2

Saving the Page as a Template ...................................................................... 8-4Completing the Template .............................................................................. 8-5

Adding a Logo ........................................................................................ 8-5Adding Navigation Buttons ................................................................. 8-7Adjusting the Cell Heights ................................................................... 8-8Setting Editable Regions in the Template ......................................... 8-9

Using the Template ....................................................................................... 8-11Applying the Template ....................................................................... 8-11Inserting the Content ......................................................................... 8-12Adding E-Mail Links ........................................................................... 8-13Creating the Packages Page ............................................................... 8-15Creating the Airlines Page ................................................................. 8-16

Linking the Buttons....................................................................................... 8-18Checking the Template Pages ..................................................................... 8-20Advantages of Templates ............................................................................. 8-20

Setting the Background ...................................................................... 8-20Adjusting the Content Region .......................................................... 8-21


Chapter 9: Creating FormsStarting the Page .............................................................................................. 9-1Inserting the Form Tag ................................................................................... 9-2Entering the Text of the Form ....................................................................... 9-2

Adding the Sub-Heading ..................................................................... 9-2Entering a Message ............................................................................... 9-4Adding a Horizontal Rule .................................................................... 9-6

Entering the Customer Details ..................................................................... 9-6Inserting the Table ................................................................................ 9-6Entering the Sub-headings .................................................................. 9-7Inserting Text Fields ............................................................................ 9-10Inserting a Pop-Up Menu Field ........................................................ 9-13Shading the Sub-Heading .................................................................. 9-15Previewing the Form ........................................................................... 9-16



Entering the Travel Packages ...................................................................... 9-17Inserting the Table .............................................................................. 9-17Entering the Sub-Headings ............................................................... 9-18Inserting the Destination Fields ....................................................... 9-19Entering the From Fields .................................................................... 9-20The Inserting the Duration Fields .................................................... 9-21Splitting Cells ....................................................................................... 9-23Adjusting the Field Headings ............................................................ 9-24

The Reply Section .......................................................................................... 9-25Inserting the Table .............................................................................. 9-25Inserting Check Box Fields ................................................................ 9-26The Submit and Reset Buttons.......................................................... 9-29Formatting the Replay Heading ........................................................ 9-30

Naming the Form .......................................................................................... 9-32Adding the Orders Page to the Template ................................................. 9-33DreamWeaver Assignment 9 ............................................................ 9-35

Chapter 10: Navigation BarsSetting the Navigation Bar Files ................................................................. 10-1

Adjusting the Template ...................................................................... 10-1Adjusting the Index Page ................................................................... 10-2Creating the Sydney Page .................................................................. 10-4Creating the London Page ................................................................. 10-5Creating the Cape Town Page ........................................................... 10-6

Inserting the Navigation Bar ....................................................................... 10-7Inserting the New York Buttons ....................................................... 10-8Setting the Navigation Bar Direction ............................................10-10Inserting the Sydney Buttons ..........................................................10-11Inserting the London Buttons .........................................................10-12Inserting the Cape Town Buttons ..................................................10-13Updating the Template .....................................................................10-13

Adjusting the Navigation Bar .................................................................... 10-14Editing Navigation Bar Elements ............................................................. 10-15DreamWeaver Assignment 10 ........................................................ 10-17


Contents

Chapter 11: Checking and Uploading Web FilesBrowser Checks ............................................................................................. 11-1Other Reports ................................................................................................ 11-3The Link Checker .......................................................................................... 11-5Cloaking .......................................................................................................... 11-6

Cloaking the Library Folder .............................................................. 11-6Cloaking File Types ............................................................................. 11-7

Uploading Files .............................................................................................. 11-8Adjusting the Site Settings ................................................................. 11-8Uploading the Site Files ....................................................................11-11Changing Some Files ........................................................................11-13Synchronising Files ...........................................................................11-14

DreamWeaver Assignment 11 ........................................................ 11-16

DreamWeaver Project 1Harrison Autos ...........................................................................................P1-2

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



Module 2 Contents

Chapter 12: Cascading Style SheetsCascading Style Sheets ................................................................................. 12-1Internal Custom Styles ................................................................................. 12-1

Starting a Blank Page .......................................................................... 12-1Creating the Main Heading Style ..................................................... 12-2Creating the Body Text Style ............................................................. 12-4Looking at the Code ............................................................................ 12-5The CSS Styles Panel ........................................................................... 12-6Editing Styles ........................................................................................ 12-7

Looking at the Styles ..................................................................................... 12-8External CSS Styles ....................................................................................... 12-8

Loading the Sample Page ................................................................... 12-8Creating a CSS Style Sheet ................................................................ 12-9Creating a Second Style ....................................................................12-11Applying the Styles ............................................................................12-12Adding a New Style ...........................................................................12-13Adjusting the Styles ...........................................................................12-15Saving the CSS File ............................................................................12-16Looking at the Travel Tips Code ....................................................12-16Attaching Styles to Other Pages .....................................................12-17

Placing Styles in Templates ....................................................................... 12-18Opening the Template ......................................................................12-19Attaching the Styles.css File to the Template ...............................12-19Opening a New Page .........................................................................12-20



Contents

Chapter 13: Laying out a CSS Based PageStarting a New Site ........................................................................................ 13-1Saving the Pages ............................................................................................. 13-4Attaching the CSS File to the Index Page ................................................. 13-5Setting the DIV Tags ..................................................................................... 13-6

Looking at the Code ............................................................................ 13-7Inserting the Banner DIV Tag ........................................................... 13-7The Navigation DIV Tag .................................................................... 13-9The Columns DIV Tag ......................................................................13-10Inserting the Nav2 Nested DIV Tag ..............................................13-11Inserting the Content Nested DIV Tag .........................................13-12

Setting the Nav2 and Content Styles ....................................................... 13-13The Nav2 Style ....................................................................................13-13Setting the Content Style .................................................................13-16


Chapter 14: Adding Content to CSS PagesInserting the Company Logo ...................................................................... 14-1

Opening the Page ................................................................................ 14-1Inserting the Image ............................................................................. 14-1Checking the Image Dimensions ..................................................... 14-4

Inserting the Navigation Content .............................................................. 14-5Inserting the Home Button ............................................................... 14-5Inserting the Packages Button .......................................................... 14-6Inserting the Other Buttons .............................................................. 14-7

Inserting the Nav2 Content ......................................................................... 14-9Entering the Text ................................................................................. 14-9Adding Some Dummy Links ...........................................................14-10

Inserting the Content Text ........................................................................ 14-11Copying the Text ...............................................................................14-11Pasting the Text..................................................................................14-11




Chapter 15: Formatting CSS PagesSetting Tag Styles ........................................................................................... 15-1

The Body Tag ........................................................................................ 15-1Changing Some Text ........................................................................... 15-3Creating the H1 Style .......................................................................... 15-4

Defining Class Styles ..................................................................................... 15-5Defining ID CSS Styles ................................................................................. 15-6

The Banner DIV Tag ........................................................................... 15-7The Navigation DIV Tag .................................................................... 15-8The Columns DIV Tag ........................................................................ 15-9Formatting Link Text ........................................................................15-10

Editing Styles ................................................................................................ 15-13The Nav2 Region ................................................................................15-13The Link Text ......................................................................................15-14The Content Style ..............................................................................15-15Changing a Style Property ...............................................................15-15

Saving the Page as a Template .................................................................. 15-16Saving as a Template .........................................................................15-16Setting the Editable Region .............................................................15-18Using the Template ...........................................................................15-19

Editing the Template ................................................................................... 15-21Understanding the CSS files ...................................................................... 15-22DreamWeaver Assignment 15 ........................................................ 15-24

Chapter 16: Using BehavioursThe Behaviours Panel ................................................................................... 16-1Popup Messages ............................................................................................. 16-2

Setting up a Page.................................................................................. 16-2Popup Dialogue Boxes ........................................................................ 16-4Status Bar Messages ............................................................................ 16-5

Deleting a Behaviour..................................................................................... 16-8Displaying an Enlarged Image .................................................................... 16-8

Creating a New Page ........................................................................... 16-8Adding the Behaviour ......................................................................... 16-9


Contents

Validating Forms .......................................................................................... 16-11Creating the Orders Page .................................................................16-11Setting the Validation Behaviour....................................................16-13Setting Required Fields.....................................................................16-13Setting an eMail Field .......................................................................16-15Validating Numbers ..........................................................................16-17

Effect Behaviours ......................................................................................... 16-19Browser Versions ......................................................................................... 16-21DreamWeaver Assignment 16 ........................................................ 16-23

Chapter 17: Editing and Importing ToolsStarting the Page ............................................................................................ 17-1Editing Images ................................................................................................ 17-2

Cropping an Image .............................................................................. 17-3The Resample Tool .............................................................................. 17-4Brightness and Contrast ..................................................................... 17-5The Sharpen Tool ................................................................................ 17-6

Importing Microsoft Word Documents ................................................... 17-6Opening the Prepared Word Document ........................................ 17-7Copying the Microsoft Word Text ................................................... 17-7Pasting the Text into DreamWeaver ................................................ 17-7Moving the Image................................................................................ 17-9

Adding a Word Table to the Page ............................................................... 17-9Copying the Table ................................................................................ 17-9Pasting the Table into DreamWeaver ............................................17-10Adjusting the Table ...........................................................................17-11




Chapter 18: Inserting MediaCreating a Page .............................................................................................. 18-1Inserting Smart Photoshop Objects .......................................................... 18-2

Inserting the Object ............................................................................ 18-2Adjusting the Image ............................................................................ 18-4Editing Images ...................................................................................... 18-7

Flash Animations ........................................................................................... 18-9Inserting the Animation ..................................................................... 18-9Playing the Animation ......................................................................18-10Resizing the Animation ....................................................................18-11

Flash Video ................................................................................................... 18-12Importing the Video .........................................................................18-12Setting the Skin ..................................................................................18-13The Final Settings ..............................................................................18-14Previewing the Video ........................................................................18-14


Chapter 19: Creating Menus and Tabbed PanelsPopup Menus ................................................................................................. 19-1

Saving the Prepared Pages ................................................................. 19-1Adjusting the Template ...................................................................... 19-2Inserting the Popup Menu ................................................................. 19-3Adjusting the Menu Buttons ............................................................. 19-3Adjusting the Popup Menu ............................................................... 19-5Adjusting the Third Tier Menu ......................................................... 19-6Saving the Template ............................................................................ 19-6Previewing the Page ............................................................................ 19-7Formatting the Menu .......................................................................... 19-8

Tabbed Panels .............................................................................................. 19-10Inserting the Tabbed Panel ..............................................................19-10The London Tab .................................................................................19-10The Paris Tab ......................................................................................19-12Previewing the Page ..........................................................................19-13Adjusting the Tabbed Panels ...........................................................19-14



Contents

Chapter 20: Commands and SnippetsCreating Commands ..................................................................................... 20-1Creating a Table Command ........................................................................ 20-1

Inserting the Table .............................................................................. 20-1Formatting the Table ........................................................................... 20-2Saving the Table Command .............................................................. 20-4Using the Table Command ................................................................ 20-5

Clearing the History Panel .......................................................................... 20-7Formatting Image Sizes ................................................................................ 20-7

Setting the Image Size ........................................................................ 20-7Creating the Image Size Command ................................................. 20-8Applying the Command ..................................................................... 20-9

Managing Commands ................................................................................ 20-10Using Snippets ............................................................................................. 20-10

Preset Snippets ...................................................................................20-10Creating Your Own Snippets ..........................................................20-12Using the Snippet ..............................................................................20-15Adding Images to Snippets ..............................................................20-15


DreamWeaver Project 2Stewarts Real Estate ...................................................................................P2-2

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

© Guided Computer Tutorials 2009 1-1

Chapter

1Introduction to DreamWeaver CS4

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:

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

• Homepages(orTitlePages-thefirstpagethatisopened)shouldnothavetoomany graphics which slow down the opening of the page or distract the user.

• Thereare216coloursthataresharedbytheWindowsandMacintoshoperatingsystems so you should try to stick to just those colours.

• Don’tuseuncommonfontsastheviewerofyoursitemaynothavethosefontsinstalled in their system. The most common fonts are TIMES, TIMES NEW ROMAN, ARIAL and HELVETICA.

• Trytobreakthesiteupintoseparatelinkedpagesratherthanonepagethatscrolls.

© Guided Computer Tutorials 20091-2


Types of Graphics

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

• GIF(GraphicInterchangeFormat)whichislimitedto216colours.Itismainlyusedfor clipart.

• JPEG(JointPhotographicEnhancementGroup)whichismainlyusedforphotographs. 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:

• Workouthowthehomepagecanloadquickly.

• Workoutwhereyouwanttheusertobeabletogofromthehomepage.DrawaSTRUCTUREDIAGRAM,forexample:

• Decidehowthenavigationlinkswillbeprovided.Willbothtextandgraphicsbeprovided to allow the user to move from page to page?

Home Page Catalogue

News & Reviews

Search

Products

About Us

Ordering



The DreamWeaver Screen

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

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.

Create new filesOpen Documents Training videos

Training TipsHelp files

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



NOTE: 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 aredoing.ThedefaultsettingisDESIGNERview.

Document Toolbar Menu Bar Application Bar

Document Window or Work Page

Properties Inspector

PanelGroup

Status Bar

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



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

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

TheINSERTpanelispartofthePANELGROUPattherightofthescreen.Ithasallthecommon DreamWeaver tools in a variety of categories.

3 Click on the arrow next to the VIEW box in the APPLICATIONS BAR again andselectDESIGNERtoreturntotheDEFAULT DreamWeaver screen.

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



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

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



C The Document Window

TheDOCUMENTWINDOWorWORKPAGEisthelargewhiteareaofthescreen.Itiswhere you insert your text and images.

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.

Type in two sentences so that the text is on two lines. Don’t press the <enter> or <return> key at any stage.

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



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.

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

Design View

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.



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.

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.

5 If the text isn’t displayed in the DESIGNVIEWpane,clickinthepaneand the sentence will be updated in that section.

6 ClickontheDESIGNbuttonintheDOCUMENT TOOLBAR to return the screen to its normal setting.

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



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.



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 SelectorWindow Size menu

Document Size and Estimated Download Time

1 TheTAGSELECTORshowsahierarchy of tags (commands) surrounding the current selection. So any HTML commands used near the horizontal rule (<hr>) will be displayed. In this case just the <body> tag is displayed.

2 Click on the <body> 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.

Selection and Set Magnification tools



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

3 Click on the <hr> tag (for HORIZONTAL RULE) and just the horizontal line should be selected.

4 ClickontheSETMAGNIFICATIONbox and the different zoom settings are displayed.



G The Panel Group

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

2 Further options within a panel are displayed in a menu which is accessed from a button at the top right of the panel.

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

1 Double click on the CSS STYLES panel tab and the panel should be expanded.

3 Click on the CSS STYLES’ OPTIONS MENU button and options (or shortcuts) for that panel will be displayed.



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

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

6 DragtheCSSSTYLESpanelontothe document window to remove it from the panel group.

7 The CSS STYLES panel becomes a floating panel.

5 Click on the double arrows at the toprightofthePANELGROUPandthe whole panel group is collapsed to icons.



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.

8 To dock the panel back into the PANELGROUPsimplydragitbyitslabel back to just under the INSERT panel.

9 Click on the arrow next to the VIEW box in the APPLICATION BAR and selectDESIGNERtoreturnthescreento the default setting.



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

A Creating a Root Folder

2 OpenyourSTORAGEfolderoutsideDreamWeaverandcreateaNEWFOLDERcalledTRAVELWISE.

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.

1 Click in the CLOSE BOX (x) of the UNTITLED page tab and select NO to theSAVECHANGESwarning.

2 Create a NEW HTML document.



3 Display the SITE menu and select NEW SITE.

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

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.

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

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

TravelWise ab

6 EnteraURLforthesiteifyouwish,for example:

www.travelwise.com.au

and click on the NEXT button



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

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.

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



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

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.

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.



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.

ii Avoid using mathematical symbols in file names.

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



D Page Titles

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

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.

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

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 tothepagenameinthePAGETAB.This tells you that the page is not fully saved.



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

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

3 StartanewBASICHTMLPAGE.

4 Givethepageatitlethensavethepage.

5 Add an Under Construction message.

6 Askyourteachertocheckyourcompletedpageandsite.

Learning Adobe DreamWeaver CS4 - Introduction

Documents

Transcript of Learning Adobe DreamWeaver CS4 - Introduction