Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now

Adding text and images


Dreamweaver CS4 Getting Started

with James Williamson

Video: Adding text and images

Adding text and images provides you with in-depth training on Web. Taught by James Williamson as part of the Dreamweaver CS4 Getting Started
please wait ...
Watch the Online Video Course Dreamweaver CS4 Getting Started
Video Duration: 4m 58s42m 9s Beginner Sep 30, 2008

Viewers: in countries Watching now:

View Course Description

James Williamson provides a practical introduction to Adobe's do-it-all web design and development tool in Dreamweaver CS4 Getting Started. He shows how to generate standards-compliant XHTML and CSS, as well as rock-solid PHP, ColdFusion, ASP, AJAX, and more, using Dreamweaver's developer-friendly Code view and WYSIWYG Design view. From creating basic page layouts to embedding multimedia, James shares techniques for publishing a finished site quickly and efficiently. Example files accompany the course.

Topics include:
  • Defining and structuring new sites
  • Adding and styling text, images, video, Flash, and more
  • Previewing work in progress using multiple browsers
  • Integrating assets from other CS4 applications
  • Uploading and managing finished sites
James Williamson

Adding text and images

Regardless of whether you start out using one of Dreamweaver's starter pages or whether you are building your own design from scratch, you will need eventually to get your images and your text on the page. When adding text to your pages, you can type directly into Dreamweaver if you would like, but chances are the bulk of your copy is going to be written in another program, like Word. To help to speed the process of getting text in your pages, Dreamweaver supports multiple workflows. You can copy and paste text, open text files, or on the PC, you can import Word and Excel documents directly into Dreamweaver.

If you choose to import Word documents, you can keep the basic formatting structure or you can discard it and just import the text. So we are going to import some text on our page, and we will use that workflow of importing Word documents directly. Now, if you are on a Mac, unfortunately the Mac version of Dreamweaver doesn't support that workflow, so you would need to open up the Word document separately, copy and paste the text. You could also save the Word document as a text file; you could open the text file in Dreamweaver and then copy and paste the text directly inside Dreamweaver as well. So I have got some body copy here. I am going to highlight this body copy and delete it; sort of get it out of the way and create a blank space for this.

Looking over at my Files panel, I am going to open up the Source folder, and inside that, you see I have a Word document there that says intro_text.doc. Now there are a couple of different ways to get this on the page. One way would be to go to File > Import, and I can import the Word and Excel documents directly in that way. An easier way I think is to just grab the file and simply drag and drop it. So I am just going to grab it and drag it into the position that I want the text to appear. Now, when I do that, I see the Insert Document dialog box appear. Now, for those of you that are on the Mac, you can drag and drop a Word document onto the page,. What happens however is that you don't get this dialog box that comes up, and it automatically creates a link to the document.

So if you are wanting to give your users the capability of clicking on a link and then being able to download this Word document, that would be a great way to do that, a very fast and easy way to do that. But on the Mac, you don't get the option to insert the contents like you would on the PC. Once we choose to insert the contents, we have to choose how we want the contents to be inserted. Do we want just the text, do we want the text with basic structure, or do we want to bring in the styles related to that Word document as well? So I am going to just choose the text with structure plus basic formatting. That will retain any bold and italicized size text, but it won't bring any Word styles in that might conflict with my existing CSS.

So I am going to go ahead and click OK, and it brings the text in. Now, look how intelligent Dreamweaver is. If I click inside this bold text, I can see using the tags selector down here, that it's surrounded by a strong tag. If I click inside my italicized text, I see it is surrounded by an em tag. So instead of trying to modify the styles, what Dreamweaver has done for me is it has structured the XHTML correctly to achieve the results that we saw in the Word document. So that's a very smart workflow. Now, adding images to your page is just as easy, if not easier, than adding text. You can insert images from the menu, from the Insert panel, or by using the Assets panel. The Assets panel also allows us to preview and organize our images, so let's take a look at that.

I am going to click over on the Assets panel and I get to see a listing of all the images on my site. If I click on the images, I can see a preview of them and that's great because sometimes I will forget exactly what a graphic is and by clicking on it I can quickly and easily identify it. Well, right now we are seeing all the images on our site and since we have a small site, it doesn't take that long to look through them, but on larger sites, this could take a long time and it would be very easy to sort of get lost. So they have another feature in the Assets panel and that allows us to organize our images in a series of favorites. So I am going to take these two images, I am going to right-click them, and choose Add To Favorites.

Now, these are the only ones that I have added to Favorites so far so when I go over to my Favorites area by clicking on this radio button, they are the only ones I want here, but I could add other files to my Favorites. I could even create folders within the section, to create subdirectories of images. This only organizes them here in the Assets panel; you are not creating folders on your hard drive and you are not moving your images anywhere. Just a nice way of sort of filtering out the results. So let's say between these two images, let's just say I decided I want the surf1 on my site at the top of my sidebar. So I am going to select surf1. Now, I can drag and drop this the same way I did the Word document, or if you wanted to place it in a very precise location, and you have your cursor already there, you can click on the graphic, and then just click the Insert button down at the bottom of the Assets panel.

Now again, Dreamweaver controls the accessibility and says, "You need some Alt text for this," so I am just going to call this sidebar graphic, click OK, and my image is placed on the page. So Adobe has made adding assets to your page quick and easy. The integration between programs like Word and Dreamweaver means that you won't have to take any extra steps in getting external text into your documents. Features like the Assets panel make managing your images and adding images to your pages simple as well. By making it easy to get content on your pages, Dreamweaver allows you to spend more time focusing on planning on other aspects of your site, and that's a good thing.

There are currently no FAQs about Dreamweaver CS4 Getting Started.

Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.

Mark all as unwatched Cancel


You have completed Dreamweaver CS4 Getting Started.

Return to your organization's learning portal to continue training, or close this page.


Upgrade to View Courses Offline


With our new Desktop App, Annual Premium Members can download courses for Internet-free viewing.

Upgrade Now

After upgrading, download Desktop App Here.

Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Start your FREE 10-day trial

Begin learning software, business, and creative skills—anytime,
anywhere—with video instruction from recognized industry experts. provides
Unlimited access to over 4,000 courses—more than 100,000 video tutorials
Expert-led instruction
On-the-go learning. Watch from your computer, tablet, or mobile device. Switch back and forth as you choose.
Start Your FREE Trial Now

A trusted source for knowledge.


We provide training to more than 4 million people, and our members tell us that helps them stay ahead of software updates, pick up brand-new skills, switch careers, land promotions, and explore new hobbies. What can we help you do?

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from

Sign up and receive emails about and our online training library:

Here’s our privacy policy with more details about how we handle your information.

submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.