You have already added an image to a web page - the banner image. Now we can add more images and from them links to larger images that will open in a new browser window. This will prove useful on the third and final page of our site, the links page, where links to external sites can also be made to open in a new window. This is preferable to having viewers move away from your site.
To download the three page images, just right click on each of the images on the left in turn, and choose 'Save image as' to save the image to your site folder.
Also download the large versions of the images
Click on each of the thumbnail images below
in turn and when it comes up in a new browser window, right click on the image and choose Save image as again, saving the file in your site folder.
Open your gallery.html page and click at the beginning of the sub head for St. Mark's Square.
Click on the insert image icon and find the file st_marks_small.jpg in your site folder. If you have not saved it in your site folder, when you do locate it, Dreamweaver will ask if you want to save the image in your site folder. You should click OK and then navigate to the site folder to save the image there.
Once you have inserted the picture your page should be similar to the one on the left with the image sitting proud of the sub heading's baseline.
To improve the layout with a picture added, click on the picture to select it, then in the Properties Panel, look for the Align section (outlined with a red rectangle in the screen shot and choose 'Left' from the drop down list.
To add some space round the image, type the figure 5 or 10 into the box next to 'H' in the section on the left of the Properties Panel (outlined with the red elipse).
To align the remainder of the text, you will probably need to add some blank lines beneath the piece of text.
Now add the other two pictures and format in the same way
You have downloaded larger versions of all three pictures here. They can be used to show more detail or print from and can be linked to the page and made to open in a new window.
To do this, select the St Mark's Square image in Dreamweaver and make a hyperlink to the larger version (st_marks_big.jpg) by clicking on the folder icon in the Link section of the Properties Panel (oultined by the red ractangle, left), and navigating to the file in the site folder. To have the image open in a new window, select '_blank' in the drop down list below the Link box called 'Target'.
Don't forget to save your page and test in your browser (F12). Then repeat with the large versions of the other two images.