Maintaining Trinity websites

Basic Editing - Working with images in Dreamweaver

dreamweaver header

What is this page about

This page gives information and instructions to insert, edit and work with images using Dreamweaver on a Trinity website.

 

Who will find this information useful.

Staff and postgraduates with webauthor accounts, and associated editing permissions.

 

Requirements

 

Before you begin

  1. Identify if your site is an older site type, with left hand menu, or a newer site type based on templates with a top menu.
    Some tips on how to identify older and newer site types can be found on our frequently asked questions page. If you are not sure, ask your designated departmental web administrator.

  2. Identify if you are using Dreamweaver CS or Dreamweaver CC.
    Instructions on how to identify your Dreamweaver version can be found on our frequently asked questions page.
  3.  

Adding the image to your webpage.

Step 1: Adding the new image file to your local website files

Locate the image file you wish to use, you may be emailed the image, have downloaded it from the internet, or given it on removable media like a CD or memory key.  No matter how you receive the image you will need to copy the image into your images folder within your local website files. 

  • You many need to rename the image file as it is recomended the filename should be all lower case and contain no spaces. For example the image ‘Moon Phases.jpg’ should be renamed ‘moon_phases.jpg’

This folder is often located in the ‘assets’ folder and called ‘img’.

  • On larger sites you should create subfolders within the img folder, referencing the names of the site’s top-level folders, this will make it easier to find the correct image later on.

The steps below will guide you through this.

  1. Open Windows Explorer (Start -> Windows Explorer)

  2. Folder icon
  3. Locate the image file you wish to use.
    • In this example we will use the image ‘moon_phases’ and we find it in the ‘Pictures’ folder in ‘This PC’

  4. Locate image on PC

  5. Right click on the image and select ‘copy’

  6. Navigate to the Dreamweaver website data folder on your pc, Go to the ‘assets’ folder and to the ‘img’ folder within that.
    • In this example the Astronomy Website data is saved in My Documents -> Dreamweaver Site Data

  7. Right click within the files in img folder and click paste.

    Add image to folder

  8. Open Dreamweaver and expand the images folder by clicking on the plus button/arrow head beside it to confirm the image is there.

  9. view file in folder

Step 2: Adding the image to the webserver

Add file to websever

Once you have the file in the local webfolder, you can now upload it to the webserver so that it can be viewed on the internet.

  1. Highlight the file in the local folder list

  2. In this example the the file is moon_phases.jpg

  3. Click the connect button to connect your pc to the webserver.

  4. Click the up arrow button to "put" the file on the webserver.

  5. Allow the file activity to complete

  6. The file is now on the webserver and can be placed in your webpage

 

 

You can verify that the file is on the webserver by comparing the file list on the remote and local folders. Expand folder view

  1. Click on the "expand button" on the right of the folder list.

  2. This brings up the remote file list (on left) and local file list (on right).

  3. Open the 'assets' folder and the 'img' folder on both and you can compare the files within each.

  4. Click on the "expand button" on the right of the folder list to close the folder list to its usual location.

Step 3: Adding the image to your webpage.

Now you have located the image in your local Dreamweaver files, and uploaded it to the webserver, you can place it on the page.

 

Insert image bar
  1. Download the webpage you wish to add the image file to.

  2. Place the cursor on the desired location on page.
Image folder
  1. From the top menu select Insert -> Image

    by default this will open in your local assets/img folder,
  1. Select the image you require,
  1. Click OK

     


 

Alternate Text

One of the Trinity web design requirements is that every image must have an Alt attribute. This Alt attribute is what will display in the web browser if the image cannot be found and is also what text-to-speech software or text-only software will use to represent the image for accessibility.

  • If you are using Dreamweaver CS, when confirming that you wish to insert an image you will be asked to supply alternate text. For the moon_phases.jpg image you would type in ‘Moon Phases’ in the Alternate text box, and click OK

Alt text box CS

  • If you are using Dreamweaver CC, when your image is placed on the page, click on it to bring up the Properties bar at the bottom of the screen. In the Alt box on the right enter the alternative text for the image.

Alt text box CC

Step 4: Saving the webpage and previewing the image.

Now your image has been uploaded to the webserver and inserted into the page, you can view it to see if you are happy with it.

  1. Save your page changes. File -> Save

  2. Upload your saved page to the webserver.

  3. Open a webbrowser and enter the URL for the page.

  4. Note if you have recently viewed the page you may need to clear your cache to view the most recent version.

  5. If you are happy with the image, its size and position, then close the page in Dreamweaver and exit the program.

 

Resizing & Editing Images.

Resizing & Resampling images.

Photoshop is the best tool for resizing images, however if you do not have access to this you can use Microsoft Paint or Dreamweaver to resize an image. Below are the steps to use Dreamweaver to adjust the size of an image on the website.

Something to keep in mind, images can be made smaller and retain clarity and sharpness. However it is not possible to make an image bigger than the dimensions of the original file and retain the clarity and sharpness necessary.

Before you begin, make a copy of the original image file and store it somewhere on your computer for backup should you need it.

If you are using Dreamweaver CC

  1. Click on the image and using the mouse, drag the black markers to resize the image as you require.
  2. In the Properties bar at the bottom of the screen, click on the Resample button resample in the Edit area,
    this resamples the image to ensure clarity and reduce download size.

  • You can also use the H & W areas in the Properties bar to resize the image.
    • Click on the image, using the H & W boxes in the Properties bar, enter a specific value for ‘px’(pixels).
    • Setting the W automatically sets the H to ensure the ratio of the image is kept.
    • If you wish to reduce the image to a percentage of its original size, change the unit of H & W to ‘%’

image size editor

If you are using Dreamweaver CS

  1. Click on the image and hold the shift key, using the mouse, drag the black markers to resize the image as you require.
  2. Right-click on the image after resizing it and choose Optimize, this resamples the image to ensure clarity and reduce download size.

  • You can also use the %: setting under the File tab to resize the image to a percentage of its original size. 
  • Or you can set a specific width (W) or height (H).
    Setting the W automatically sets the H to ensure the ratio of the image is kept.

Setting an Image Editor

If you have Adobe Photoshop installed on your computer Dreamweaver will automatically set Photoshop to be your default image editor.
However if you do not have it installed you may wish to set another image editor program to be your default. This will allow you to edit images within Dreamweaver easily.

Adding Microsoft Paint as an Image Editor

  1. From the top menu bar in Dreamweaver click Edit and then Preferences from the drop down menu.

  2. Select ‘File Types/Editors’ and then ‘.jpg .jpe.jpng’ and click on the ‘+’ symbol as shown below.

Image edit preferences

  1. From the subsequent dialogue box navigate to the MS paint programme. This is typically found in C:\Windows\System32 and you can type this directly into the filepath box as shown below.

  2. Scroll to the ‘mspaint’ file and click ‘Open’

External editor navigator

  1. Click ‘Apply’, this closes the preference window.

You can repeat the process for .png files if desired.

Editing images.

Once you have installed Photoshop, or set another application as your Image Editor (see steps above) you are ready to edit images. Simply add the image to your webpage as shown in the steps at the top of the page.

  1. From the Properties bar you can click on the Edit icon

  2. This will open the image in MS Paint, where you can resize, rotate, add text or graphics to the image as you wish.

  3. Save your changes in MS Paint and they are automatically imported to your webpage.

  4. Click on the image file in the local folder list, to the right, and upload it to the webserver.

 

Related pages