Learning Adobe DreamWeaver CS4

By Greg Bowden

Chapter 18

Inserting Media

Guided Computer Tutorials

www.gct.com.au
PUBLISHED BY

GUIDED COMPUTER TUTORIALS

PO Box 311
Belmont, Victoria, 3216, Australia

www.gct.com.au

© Greg Bowden

This product is available in Single or Multi User versions.

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

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

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

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

First published 2009

ISBN: 1 921217 74 X Module 1

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

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

18
Inserting Media
DreamWeaver allows you to directly import media created in range of other programs
such as Adobe Photoshop, Flash and FireWorks. Photoshop documents can now be
imported directly into DreamWeaver, compressed and then modified and updated
directly from within DreamWeaver. Flash animations and Flash videos can also be
imported into DreamWeaver pages.

Creating a Page
A simple page based on the TravelWise2 template will be created for the London office of
TravelWise. Some Photoshop and Flash media will be inserted into the page.
1 Load DreamWeaver or close the current file and set the FILES panel to your
TRAVELWISE2 site.
2 Display the FILE menu and select NEW.

3 Select PAGES FROM TEMPLATE, select

the TRAVELWISE2 site and click on the
TW_TEMPLATE file.

4 Click on CREATE to start the page

5 Save the page in your TRAVELWISE2 folder as:

London2 or London2.html

© Guided Computer Tutorials 2009 18-1

Learning Adobe DreamWeaver CS4

Inserting Smart Photoshop Objects

When you insert an image saved as a Photoshop document (PSD), DreamWeaver will
automatically compress the file and link it to Photoshop so that it updated at any time.

A Inserting the Object

1 Highlight the CONTENT label in the

CONTENT region and enter:
Welcome to TravelWise <enter>

2 Highlight the text and set it to the

SUB_HEAD style.

3 Position the cursor at the line under

the sub-heading.

4 In the COMMON tools of the INSERT

panel click on the IMAGES - IMAGE
button.

5 Access the CHAPTER 18 folder of the DWcs4 SUPPORT FILES and insert the
HEADING file.

18-2 © Guided Computer Tutorials 2009
 Inserting Media 18

6 The IMAGE PREVIEW dialogue box is

opened which allows you to adjust
the compression settings for the file.

7 Leave the default settings as a JPEG

file with 80% quality and click on OK.

NOTE: The FILE tab at the top left of the IMAGE PREVIEW dialogue
box can be used to adjust the size of an image.

8 Save the image in the IMAGES folder of your TRAVELWISE2 site.

9 Set the ALTERNATE TEXT to:

London Heading
and select OK.

© Guided Computer Tutorials 2009 18-3

Learning Adobe DreamWeaver CS4

10 The image will be inserted at

the cursor position and a SMART
OBJECT MARKER added next to it.

11 Click to the right of the heading

and click on the CENTRE button in
the CSS section of the PROPERTIES
INSPECTOR to centre the text.

NOTE: i The SMART OBJECT MARKER has green arrows to indicate that
the image is the same as the original Photoshop document.
ii Both the first line of text and the image will be centred.

B Adjusting the Image

If you have access to Adobe Photoshop CS4, you can make changes to the original
Photoshop image and those changes will be automatically updated to the file saved in
your TravelWise site. If you don’t have access to Photoshop, skip to page 18-9.

1 Load Adobe Photoshop CS4.

2 Display the FILE menu and select OPEN.
3 Access the CHAPTER 18 folder of the DWcs4 SUPPORT FILES and open the
HEADING file.

18-4 © Guided Computer Tutorials 2009
 Inserting Media 18

4 In the LAYERS panel turn the DROP

SHADOW effect off by clicking on its
view symbol.

5 Press CTRL+S or COMMAND+S to save the document and return to DreamWeaver.

6 The SMART OBJECT MARKER has

changed to include a red arrow
to indicate that the original file is
different to the file in DreamWeaver.

7 Move the pointer over the marker

and a message tells you that the
original file has been modified.

© Guided Computer Tutorials 2009 18-5