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

Inserting images

From: Dreamweaver CS3 Essential Training

Video: Inserting images

In this movie I am going to show you several ways for inserting images into your web pages. Now, as we've seen with many other tasks in {italic}Dreamweaver{plain} there are lots of ways to accomplish this. So, I'm going to start off by showing you my preferred method for inserting images, and then I'll show you some other ways, so you can figure out what technique works best for you. First, I need to get some images into our {italic}Dreamweaver{plain} site. Back in the previous chapter, I showed you how to add content to a site that's already been created, and we did so by using the Files panel to navigate to a folder full of images somewhere on our desk top, or else where on our computer, and copying and pasting those images into our site.

Inserting images

In this movie I am going to show you several ways for inserting images into your web pages. Now, as we've seen with many other tasks in {italic}Dreamweaver{plain} there are lots of ways to accomplish this. So, I'm going to start off by showing you my preferred method for inserting images, and then I'll show you some other ways, so you can figure out what technique works best for you. First, I need to get some images into our {italic}Dreamweaver{plain} site. Back in the previous chapter, I showed you how to add content to a site that's already been created, and we did so by using the Files panel to navigate to a folder full of images somewhere on our desk top, or else where on our computer, and copying and pasting those images into our site.

I also showed you how to drag an images directly from somewhere on your computer into an open web page. If you need a refresher on those methods, check out the movie on adding content to you site in the previous chapter. In this movie I'll show you another way to add content. I've copied the folder 04_document_basics to my desktop. If you access to the exercise files you can do the same and work along with me. Inside this folder is a folder called assets, and inside it we have folders called flash and images. Which in turn contain all the flash files and images that I've created for my site.

So, we have a flash file in here, and we have a bunch of images in here. The assets folder also contains this "styles.css" document, and that's just the cascading style sheet information we'll be using. Don't worry too much about that right now. We're going to be talking about CSS a little bit later. Also, in this main document basics folder, I have this file called draft.html, which is just the example file that we'll be using in this exercise. So, to use all of these assets, I need to move them into my local root folder. Instead of doing it in {italic}Dreamweaver{plain} this time, I'm simply going to select these two items, and drag them to my local root folder, which in this case is the teacloud_site_04 folder.

So, I'm just going to grab those and drag them into my folder. Now, the files are physically contained in my site folder, let's see is {italic}Dreamweaver{plain} noticed. Looking here, it looks like it did not, but that's okay. That's what this Refresh button up here is for. Clicking it is like giving {italic}Dreamweaver {plain}a smack to the head, making it re-scan your site folder for any changes it hasn't already noticed. So, when I click on that, sure enough there's my assets folder and there's the draft file that I dragged in. Let's take a look at some ways to add some images to our pages. I'm going to bring up the assets panel right here. If you don't see this on your screen you can go to Window, and choose Assets to bring that up.

The assets panel is kind of the catalogue for all the different files and bits of code that are used, or available for use in your site. Notice that it's divided into several categories here. We've got Images, Colors, Links or URLs, Flash, Shockwave, Movies, Scripts, Templates, and Library. So, clicking on each one of these things will show me the different items if I have them in my website. If I select Images, I should be able to see all the images that are currently stored in my local root folder.

I'm not seeing anything right now, so I'm going to click the Refresh button again, and now again I've gotten {italic}Dreamweaver{plain} to scan though my entire site, and bring up all images that are currently stored in my local root folder. Now, {italic}Dreamweaver {plain}automatically lists all images it finds. It doesn't matter weather there in a folder labeled, Assets, or Images or anything. As long as the images exist in my local root folder, they should appear here in the Assets panel. Let's go ahead and open up a page so we can add some images to it. Let's go back to Files and open up that draft.html document we dragged in. I'm going to make sure I'm in design view here. So this is just a skeleton of a page right now and we're going to add some images to it.

Let's start by clicking our cursor in this top right table cell right here. So, the first step is to place your cursor where you want your image to appear, when I've just done that. Now, let's go back to the Assets panel and find our image. Make sure you have Site selected here and not Favorites. We haven't added any favorites or commonly used images yet, so if you have Favorites selected your not going to see anything in here. Notice that clicking on an image gives me a preview of it in this pane at the top here. So, just by clicking around I can brows through my images this way. But, in this case the image that I want is logo.png.

So, with it selected I'm going to click Insert, but before my images appears I'm presented with this Image Tag Accessibility Attributes window. Accessibility is a major concern for most web developers today. Accessibility refers to making your pages as accessible as possible, to people with vision disabilities as well as people viewing your web pages on smaller devices, like their phones or PDAs or they might even be using a regular web browser with images turned off. What this particular dialogue refers to is Alternate text. It's asking you for a text description of the image you are about to insert. That way people with disabilities who use special software that read the content of web pages to them out loud, will be able to know what this image is. Because these programs have no problem ready regular text, but if you have an image with no alternate text there's no way for the software to describe what that image is.

So, make you take the time to add good descriptive text for every image you add to your page. In this case the image is the teacloud logo, so that's just what I'll type here. Once I click on OK, there's my image on my page. So, it's that easy to add an image, just find the image you want in your Assets panel, and either drag it to your page or click Insert. Let's add a couple more. I'm going to click on the cell to the left site here, and let's find aboutus-out.gif, which is the image we want in this case.

I'm just going to drag that from my assets panel right into this pane. It's going to ask me for Alternate text and I'm just going to call this "about us". There's that image. I'll click to the right of that and let's find ourproducts-out.gif. We have different versions of these navigation buttons, and we'll talk more about this when we talk about making rollovers, but in this case I just want the out versions. So, our product out is selected. I'll click Insert, "our products," and there's another image.

So, you can see that it's pretty easy to add images from the Assets panel. It's the techniques I recommend that you use. Just so you have an idea or some of the other methods, you can also use the Insert images button in the Insert bar if you're in the Common area here, you can find insert Image, right there. In this case you need browse for the image that you want. So, I'm going to look inside my assets folder, inside Images, navigation and in this case I want abouttea-out.gif, click Choose, and we'll type our Alternate text, "about tea", and there's the image.

You can see that method take a little bit longer because you actually have to browse through your root folder to find the image there. Now, if you're in a situation where you don't have an image prepared yet, but you want to make sure that you remember to add it later, you can use what's called a Placeholder image. Up here in the Insert bar, under Image, we have Image Placeholder, and this allows me to give it a name. Let's say this is going to be eventually be the image for brewing tea, and we'll call this "brewingtea". We can give a Width and a Height. It doesn't really matter what dimensions you give it here because once you replace this image the image will be it regular dimensions.

So, in this case I'm just going to guess this will be a width of 125, and we'll give it a height of 50, so there's the image there. Later on, once I actually that image and I want to replace that Placeholder image, I can either just delete it and drag in the real image, or with that image selected, I can come down here to the source field and point to the actual image in my Files panel. I can't point to the image in my Assets panel but if I switch over to Files, open up assets, click inside images, navigation, let's open that up a little bit.

There's the abouttea file that we want, and we'll point at that, and there's the image that's been replaced there. That should actually be on the same line. I'm just going to make my window a little bit bigger here, here we go. So there are my four navigation images. Now, I really want to stress the importance of making sure the images you add to your site are stored in your local root folder and not outside it. You can drag an image from anywhere on your computer, but if they're not in your Site folder, you're probably going to end up with missing images when you go to publish your site.

That's another reason I recommend using the Assets panel as much as possible to add your images. If your image is not in your local root folder it won't show up in your Assets panel, and you'll know that something's wrong. So, there you have some ways of inserting images into your {italic}Dreamweaver {plain}pages. That wasn't even all of them. You can also choose Insert, Image or you can see there's keyboard command here. We have Command + Option + I on the Mac, or Ctrl + Alt + I on Windows. As we saw, we can drag images out of the Assets panel. You can even drag images right out of the Files panel if you want to.

For instance, I have this landing.png file that I know is going to go in this box, so I can just drag that right out of my files panel, drop it in there. I'll just call this "teacloud image", click on OK. That's yet another way to drag an image on there. Incidentally, if you decide that you need to change the alternate text, if you select the image you'll see that down here in the property inspector we have an Alt field here. So, if I wanted to be more specific than this just being teacloud image, I can maybe change this to "welcome to teacloud", so you can change your text at anytime.

There are lots of different ways to add images to your web pages. Do you need to know all these methods for adding images? Absolutely not. Just experiment with them and pick the method that works best for you. Alright, I'm going to go ahead and save this file, and we'll keep it open for the next movie in which we'll talk about adding text to our web pages.

Show transcript

This video is part of

Image for Dreamweaver CS3 Essential Training
Dreamweaver CS3 Essential Training

129 video lessons · 86999 viewers

Garrick Chow
Author

 
Expand all | Collapse all
  1. 1m 12s
    1. Welcome
      1m 12s
  2. 21m 0s
    1. HTML vs. XHTML
      3m 4s
    2. What is CSS?
      3m 48s
    3. What is XML?
      2m 11s
    4. What is DHTML?
      1m 9s
    5. What is JavaScript?
      1m 23s
    6. File naming conventions
      3m 22s
    7. What is an index page?
      6m 3s
  3. 46m 18s
    1. Setting up your workspace
      2m 39s
    2. The Welcome screen
      4m 11s
    3. Windows and Mac differences
      3m 18s
    4. The Insert bar
      4m 38s
    5. The Property Inspector
      1m 50s
    6. The Document toolbar
      6m 6s
    7. The Document window
      9m 11s
    8. Panels and panel groups
      6m 58s
    9. Saving workspace layouts
      2m 22s
    10. Defining a default browser
      5m 5s
  4. 24m 59s
    1. Defining a site
      9m 5s
    2. File and folder management
      3m 11s
    3. Understanding path structure
      3m 17s
    4. Adding content to a site
      6m 6s
    5. Creating a site map
      3m 20s
  5. 38m 39s
    1. Creating a new blank site
      6m 0s
    2. Creating and saving a new document
      7m 54s
    3. About DOCTYPE
      3m 59s
    4. Inserting images
      9m 26s
    5. Inserting text
      3m 35s
    6. Aligning text and images
      4m 9s
    7. Inserting meta tags
      3m 36s
  6. 45m 58s
    1. Link basics
      6m 4s
    2. Linking with Point to File
      5m 18s
    3. External links
      4m 15s
    4. Creating email links
      5m 49s
    5. Named anchors
      7m 37s
    6. Linking to a file
      7m 35s
    7. Image maps
      9m 20s
  7. 1h 8m
    1. About CSS
      4m 52s
    2. Anatomy of a style sheet
      4m 10s
    3. CSS and page properties
      10m 11s
    4. Moving an internal style sheet to an external style sheet
      6m 46s
    5. The CSS Styles panel
      3m 48s
    6. CSS selectors
      2m 37s
    7. Type selectors
      12m 13s
    8. ID selectors
      10m 21s
    9. Class selectors
      5m 42s
    10. Creating rollovers with pseudo-class selectors
      7m 22s
  8. 42m 54s
    1. CSS vs. the Font tag
      2m 42s
    2. Formatting text with the Property Inspector
      8m 41s
    3. What measurement should I use?
      3m 15s
    4. Managing white space with margins, padding, and line height
      8m 34s
    5. Using font lists
      5m 45s
    6. Aligning text
      2m 47s
    7. Creating lists
      5m 8s
    8. Creating Flash text
      6m 2s
  9. 43m 19s
    1. About tables
      1m 28s
    2. Tables in Code view
      2m 36s
    3. Creating and adding content to tables
      7m 40s
    4. Changing table borders with XHTML
      5m 46s
    5. Coloring tables with XHTML and CSS
      6m 41s
    6. Aligning table content
      6m 39s
    7. Sorting tables
      3m 6s
    8. Setting table widths
      4m 48s
    9. Creating rounded-corner tables
      4m 35s
  10. 28m 22s
    1. Dreamweaver's layout tools
      3m 8s
    2. Tracing images
      4m 58s
    3. Adding AP div tags
      7m 29s
    4. Working with Layout Tables
      6m 55s
    5. Adjusting table widths and nesting tables
      5m 52s
  11. 16m 19s
    1. What is a device?
      3m 14s
    2. Attaching a printer-friendly style sheet
      3m 5s
    3. Styling for print
      7m 41s
    4. Adobe Device Central
      2m 19s
  12. 29m 54s
    1. Rollover rules
      3m 31s
    2. Creating simple rollovers
      5m 36s
    3. Creating disjointed rollovers
      7m 12s
    4. Creating navigation bars with multiple states
      9m 21s
    5. Creating Flash buttons
      4m 14s
  13. 26m 32s
    1. Viewing the code
      6m 9s
    2. Editing in Code view
      3m 0s
    3. The Code toolbar
      5m 11s
    4. Working with Code Collapse
      4m 27s
    5. The Quick Tag Editor
      2m 20s
    6. Working with snippets
      5m 25s
  14. 32m 45s
    1. About forms
      3m 23s
    2. Adding text fields
      9m 52s
    3. Adding checkboxes and radio buttons
      5m 37s
    4. Adding lists and menus
      6m 5s
    5. Submitting form results
      3m 23s
    6. Styling form elements with CSS
      4m 25s
  15. 23m 17s
    1. Opening a new browser window
      9m 38s
    2. Creating a popup message
      2m 50s
    3. Validating text fields
      2m 42s
    4. Getting more behaviors
      7m 2s
    5. Removing extensions
      1m 5s
  16. 14m 58s
    1. External image editor preferences
      3m 18s
    2. Built-in image editing tools
      3m 11s
    3. Roundtrip editing from Dreamweaver to Fireworks or Photoshop
      4m 39s
    4. Copying and pasting
      3m 50s
  17. 34m 16s
    1. Templates in action
      5m 12s
    2. Creating a new template
      6m 36s
    3. Applying templates
      3m 36s
    4. Modifying a template
      1m 40s
    5. Adding repeating regions
      3m 28s
    6. Working with repeating regions
      3m 13s
    7. Adding optional regions
      3m 34s
    8. Creating a library item
      3m 48s
    9. Modifying a library item
      3m 9s
  18. 13m 2s
    1. Using the History panel
      4m 24s
    2. Saving History steps as commands
      3m 25s
    3. Using Find and Replace
      5m 13s
  19. 14m 44s
    1. W3C accessibility guidelines
      4m 6s
    2. Accessibility preferences
      1m 29s
    3. Inserting accessible images
      3m 2s
    4. Inserting accessible tables
      2m 53s
    5. Inserting accessible form objects
      3m 14s
  20. 26m 17s
    1. About media objects
      2m 6s
    2. Linking to audio and video files
      5m 56s
    3. Embedding audio and video files
      7m 7s
    4. Setting parameters
      4m 27s
    5. Inserting Flash content
      2m 37s
    6. Inserting Flash video
      4m 4s
  21. 28m 47s
    1. Getting site reports
      3m 35s
    2. Checking links sitewide
      3m 30s
    3. Signing up with Tripod
      6m 36s
    4. Entering remote info
      4m 13s
    5. Publishing your site
      5m 41s
    6. Updating and publishing pages
      5m 12s
  22. 44s
    1. Goodbye
      44s

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 CS3 Essential Training.

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.