Learning Adobe Dreamweaver Cs4 - Inserting Media
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View Learning Adobe Dreamweaver Cs4 - Inserting Media as PDF for free.
More details
- Words: 801
- Pages: 7
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
18-2
Access the CHAPTER 18 folder of the DWcs4 SUPPORT FILES and insert the HEADING file.
© 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:
8
The FILE tab at the top left of the IMAGE PREVIEW dialogue box can be used to adjust the size of an image.
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
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
18-2
Access the CHAPTER 18 folder of the DWcs4 SUPPORT FILES and insert the HEADING file.
© 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:
8
The FILE tab at the top left of the IMAGE PREVIEW dialogue box can be used to adjust the size of an image.
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
Related Documents
Learning Adobe Dreamweaver Cs4 - Introduction
May 2020 11
Learning Adobe Dreamweaver Cs4 - Templates
May 2020 9
Learning Adobe Dreamweaver Cs4 - Anchor Points
May 2020 20
Learning Adobe Dreamweaver Cs4 - Css Styles
May 2020 6
Learning Adobe Flash Cs4 - Masks
May 2020 10More Documents from "Guided Computer Tutorials"
Gct Product Catalogue
May 2020 24
Learning Microsoft Access 2007 - Forms
May 2020 18
Learning Microsoft Word 2007 - Tabs
May 2020 24
Learning Adobe Dreamweaver Cs4 - Anchor Points
May 2020 20
