Extracts >
Adding images to a page
Dreamweaver offers three basic methods of adding images to a web page. The standard method is to use the menu command Insert > Image or to click on the equivalent icon from the Insert Panel. However, Dreamweaver offers two convenient alternatives: firstly, the Files Panel and, secondly, the Assets panel.
Using Insert > Image
To add an image to an HTML page, position the cursor in the required location and choose Insert > Image. Dreamweaver displays the Select Image Source dialog.
Figure 6-2 Inserting an image using Insert > Image
Naturally, the most important thing you need to do is to navigate to the image and double-click to import it. However, there are a few other options which it might be useful to explain.
Select filename from
At the top of the Select Image Source dialog are two radio buttons labelled Select file name from. The options are File system and Data sources. Here you will want to select File system. (The Data sources option is used to create a dynamic image when working with data-driven websites using ASP, PHP or ColdFusion.)
Navigating to the Local Site Folder
To locate the image, you will use the normal file navigation provided by your operating system. In addition, Dreamweaver provides a Site root button which takes you straight back to the Local Site Folder. (The Server button located underneath the Site root button is only used when building data-driven websites.)
Relative to document or site root
Images and hyperlinks inserted into an HTML page are merely referenced and the reference can have one of two starting points: the document containing the image; or the site root. The normal choice here is relative to the document. (This topic is discussed in more detail on page 13.)
Importing images using the Files panel
Dreamweaver’s Files Panel offers a complete list of all the files and folders within the site—in a manner not dissimilar to Windows Explorer or the Macintosh Finder. If you know the name of the image you want to add to the page, you can simply drag it from the Files Panel directly onto your page.
Figure 6-3 Dragging an image onto a page from the Files panel
This is perhaps the fastest method of adding images to a page and is particularly useful when adding several images to a busy page. The only disadvantage of using this technique is that the Files panel does not provide a preview of the image being inserted.
Importing images using the Assets panel
The Assets panel is basically a internal database which provides a categorized and automatically generated list of assets available—not only in the current site, but also in other sites defined on your computer. The elements it keeps track of include images, colours and Flash movies. To work with image assets, simply activate the Assets panel (using the menu command Window > Assets) then click on the Image category. As you highlight each image, a thumbnail preview is displayed at the top of the Assets panel. To insert an image, either drag the image onto the page or highlight the image and click the Insert button.
Figure 6-4 Inserting an image from the Assets panel
...