Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Adding text and images

From: Dreamweaver CS4 Getting Started

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

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.

Show transcript

This video is part of

Image for Dreamweaver CS4 Getting Started
Dreamweaver CS4 Getting Started

9 video lessons · 41978 viewers

James Williamson
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
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

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

Congratulations

You have completed Dreamweaver CS4 Getting Started.

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


OK
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?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

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:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com 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 lynda.com.

Sign up and receive emails about lynda.com 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.