Placing Images on the Page - Dreamweaver CS5

• Dreamweaver CS5 & CS5.5

Explore different techniques in Dreamweaver CS5 for adding images and artwork to your website. Use the Insert menu or the Common category of the Insert panel to select and insert an image, or drag and drop images from the Files or Assets panels.

Method 1: Using the Insert Menu

The following method offers more options than the others, allowing you to browse and filter images in a file system or database. It also shows how the browser will resolve to the image URL.

1. Click on the page to indicate where the image is to be inserted.
2. Click the Insert menu.
3. Select Image.

The Select Image Source dialogue box will then appear.

Method 2: Using the Insert Panel

This method is similar to using the Insert menu but easier to access as this panel can be accessed directly from within the workflow.

1. Click on the page to indicate where the image is to go on the page.
2. Go to the Insert Panel.
3. Select the Common tab.
4. Locate the Image icon.
5. Click on the drop-down arrow directly beside the image icon.
6. Select Image. The Image Source menu will then open.
7. Select if the image file will be from the File System or Datasource (data sources pull from databases).
8. Locate the file image, and click on the image to select it.
9. Click OK.

After this, the Image Tag Accessibility Attributes menu will open.

Method 3: Using the Files Panel

This method allows images to be directly applied to the page with minimal P { margin-bottom: 0.08in; }A:link {
 customization options. 

1. Click on the page to indicate where the image is to be placed.
2. Go to the Files Panel.
3. Locate the file Image
4. Click on the image to select it
5. Drag and drop the image from the panel to the desired location on the page.

After this, the Image Tag Accessibility Attributes menu will then appear.

Method 4: Using the Assets Panel

This method also allows for the image to be directly applied to the page with minimal customization options.

1. Click on the page to indicate where the image is to be placed.
2. Go to the Assets Panel.
3. Locate and click on the image file.
4. Click on the Insert button in the lower-left corner of the panel. After this, the Image Tag Accessibility Attributes menu will open.
5. In the pop-up menu, you can apply the following to a newly inserted image:
   • Designated Alternative Text
   • Long Description
6. Click OK to have the text or description applied to the image.

Getting Started Tutorials

• What is Dreamweaver CS5?
• 1. Defining a New Site
• 2. Creating New Documents
• 3. Adding Structure to Text
• 4. Managing Assets
• 5. Placing Images on the Page
• 6. Creating Links
• 7. Understanding Style Sheets (CSS)
• 8. Controlling CSS from the Property Inspector
• 9. Using Live View and CSS Inspect

Dreamweaver is a popular program for creating websites and applications from Adobe. It supports HTML5, CSS3, PHP, FTP, jQuery, and more, and works with Hostgator web hosting.

You can learn more about Dreamweaver by visiting Adobe's website or the Dreamweaver Tutorials learning portal.