Learning Adobe DreamWeaver CS4By Greg Bowden

Guided Computer Tutorialswww.gct.com.au

Inserting MediaChapter 18

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 18-1

Chapter

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

5 Save the page in your TRAVELWISE2 folder as:

London2 or London2.html

3 Select PAGES FROM TEMPLATE, select the TRAVELWISE2 site and click on the TW_TEMPLATE file.

4 Click on CREATE to start the page

© Guided Computer Tutorials 200918-2

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

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

3 Position the cursor at the line under the sub-heading.

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.

4 In the COMMON tools of the INSERT panel click on the IMAGES - IMAGE button.

© Guided Computer Tutorials 2009 18-3

18Inserting Media

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.

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.

9 Set the ALTERNATE TEXT to:

London Heading

and select OK.

© Guided Computer Tutorials 200918-4

Learning Adobe DreamWeaver CS4

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.

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.

© Guided Computer Tutorials 2009 18-5

18Inserting Media

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

4 In the LAYERS panel turn the DROP SHADOW effect off by clicking on its view symbol.

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.