Opening a Web Page
Once you have created and saved a Web page or copied a Web page to a Web site, you often need to retrieve it from a disk. Opening an existing Web page in Dreamweaver is much the same as opening an existing document in most other software applications; that is, you use the File menu and Open command or Open Recent command, or you can click the Open button on the Standard toolbar. If, however, the page is part of a Web site created with Dreamweaver, you also can open the file from the Files panel. After opening the page, you can modify text, images, tables, and any other elements.
Q&A
What if the Invisible Q Elements command is already checked?
Do not complete Step 5 — the Invisible Elements command already is selected. Click the Document window to close the View menu.
Should I notice a change in the
Document window after displaying the visual aids?
No. No visible changes are displayed in the Document window.
To Open a Web Page from a Local Web Site
The following step illustrates how to open a Web page from a local site in the Files panel.
1
• Double-click index.htm in the Files panel to open the index page.
• If the Standard toolbar is not displayed, click View on the Application bar, point to Toolbars, and then click Standard to display the Standard toolbar (Figure 2-25).
Figure 2-25
Inserting an Image into a Web Page
Inserting images into your Web page is easy and quick with Dreamweaver — you drag and drop the image from the Files panel or the Assets panel. Image placement, however, can be more complex. When you view the Web page in a browser, the image might be displayed differently than in the Document window. If the images are not displayed correctly, you can select and modify the placement of the images in the Document window by dragging the invisible element marker to move the image.
To Insert an Image into the Index Page
In the following steps, you add an image of a map of Montana to the index.htm Web page.
1
• If necessary, scroll to the top of the page.
• Click the Assets panel tab to display the Assets panel. Verify that the Images icon is selected.
• Click montana_map .gif in the Assets panel to select the image file (Figure 2-26).
Figure 2-26
2
• Drag montana_map from the Assets panel to the left of the first bulleted line. The Image Tag Accessibility Attributes dialog box is displayed (Figure 2-27).
Figure 2-27
3
• Type Montana map in the Alternate text text box to provide alternate text for the montana_map image (Figure 2-28).
Figure 2-28
4
• Click the OK button in the Image Tag Accessibility Attributes dialog box to display the selected image in the Document window and to view the attribute changes in the Property inspector (Figure 2-29).
Figure 2-29
Property Inspector Image Tools
In addition to the visual aid feature, you can use the Property inspector to help with image placement and to add other attributes. When you select an image within the Document window, the Property inspector displays properties specific to that image. The Property inspector is divided into two sections. Clicking the expander arrow in the lower-right corner of the Property inspector expands or collapses the Property inspector. When it is collapsed, it shows only the more commonly used properties for the selected element. The expanded Property inspector shows more advanced options. The Property inspector for images contains several image-related features in the upper and lower sections.
The following section describes the image-related features of the Property inspector (Figure 2-30).
Figure 2-30
Align Set the alignment of an image in relation to other elements in the same paragraph, table, or line with the Align button. This property option is discussed in more detail later in this topic.
Alt Use Alt to specify alternate text for the image. For visually impaired users who use speech synthesizers with text-only browsers, the text is spoken aloud.
Border The Border is the width, in pixels, of the image’s border. The default is no border.
Edit The Edit section contains the following editing option tools: (a) Edit opens the computer’s default image editor, such as Adobe Fireworks or Photoshop; the Edit icon matches the icon of the default image editor on your computer; (b) Edit Image Settings opens the Image Preview dialog box, which contains options to remove colors, add smoothing to the edges, modify colors, and other image formatting choices; (c) update from original; (d) crop (reduce the area of the image); (e) resample (add or subtract pixels from a resized JPEG or GIF image file to match the appearance of the original image as closely as possible); (f) modify the brightness and contrast of pixels in an image; and (g) sharpen (adjust the focus of an image by increasing the contrast of edges found within the image).
ID Specifies the image name that is contained in the source code.
Link The Link box allows you to make the selected image a hyperlink to a specified URL or Web page. To create a relative link, you can click the Point to File or Browse for File icons to the right of the Link box to browse to a page in your Web site, or you can drag a file from the Files panel into the Link box. For an external link, you can type the URL directly into the Link box or use copy and paste.
Map and Hotspot Tools Use the Map box and the Hotspot tools to label and create an image map.
Original The path to an image file stored outside of the current Web site.
Reset Size If you change an image size, the Reset Size tool is displayed next to the W and H text boxes after an image size has been changed. Use this tool to reset the W and H values to the original size of the image.
Src The path to an image file stored in the current Web site.
Target Use Target to specify the frame or window in which the linked page should load. This option is not available when the image is linked to another file.
V Space and H Space Use V Space and H Space to add space, in pixels, along the sides of the image. V Space adds space along the top and bottom of an image. H Space adds space along the left and right of an image.
W and H The W and H boxes indicate the width and height of the image, in pixels. Dreamweaver automatically displays the dimensions when an image is inserted into a page. You can specify the image size in the following units: pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), and combinations, such as 2in+5mm. Dreamweaver converts the values to pixels in the source code.
Aligning the Image and Adjusting the Image Size
After you insert the image into the Web page and then select it, the Property inspector displays features specific to the image. As discussed earlier, alignment is one of these features. Alignment determines where on the page the image is displayed and if and how text wraps around the image.
You also can adjust the image size easily through the W and H text boxes in the Property inspector or by dragging the handles surrounding the image. Additionally, when you insert an image into a Web page that contains text, by default, the text around the image aligns to the right and bottom of the image. The image alignment options on the Align button pop-up menu in the Property inspector let you set the alignment for the image in relation to other page content. Dreamweaver provides 10 alignment options for images. Table 2-3 describes these image alignment options.
Table 2-3 Image Alignment Options
|
Alignment Option |
Description |
|
Default |
Aligns the image with the baseline of the text in most browser default settings |
|
Baseline |
Aligns the image with the baseline of the text regardless of the browser setting |
|
Top |
Aligns the image with the top of the item; an item can be text or another object |
|
Middle |
Aligns the image with the baseline of the text or object at the vertical middle of the image |
|
Bottom |
Aligns the image with the baseline of the text or the bottom of another image regardless of the browser setting |
|
TextTop |
Aligns the image with the top of the tallest character in a line of text |
|
Absolute Middle |
Aligns the image with the middle of the current line of text |
|
Absolute Bottom |
Aligns the image with the bottom of the current line of text or another object |
|
Left |
Aligns the image at the left margin |
|
Right |
Aligns the image at the right margin |
To Align an Image
The following steps show how to align the Montana map image to the right and wrap text to the left of the image. To have a better overview of how the page will be displayed in a browser, you start by collapsing the panel groups.
1
• Click the panel groups Collapse to Icons arrow to collapse the panel groups.
• If necessary, click the montana_map image in the Document window to select the image.
• Click the Align button in the Property inspector to display the alignment options.
• Point to Right on the pop-up menu to highlight the Right command (Figure 2-31).
Q&A
A What are the most Q widely used Align options?
The most widely used options are Left and Right.
Figure 2-31
2
• Click Right to move the selected image to the right side of the Document window and to display the element marker (Figure 2-32).
Figure 2-32
