- You are here:
- WebsiteTips Home
- Articles, Tutorials, Tips
- HomeSite Tutorials, Tips
- Drag-and-Drop Images
Macromedia HomeSite HTML Editor Tips
Drag-and-Drop Images
by Shirley E. Kaiser, M.A.
Copyright © 2001-2013, Shirley E. Kaiser, M.A., SKDesigns. All rights reserved. Published at websitetips.com with permission.
Note that even though this tutorial was written with HomeSite 4.5.2 in mind that it also applies to HomeSite 5.x versions and to earlier versions.
HomeSite makes adding images to a Web page a very simple process with its drag-and-drop feature. If you're already familiar with HomeSite or other programs with drag-and-drop features, use the Quick Tip. The Detailed Instructions are designed for those new to HomeSite, drag-and-drop features, or both.
On this page:
Also within this HomeSite Tips series:
Quick Tip
Using the image shown to the right in Example 1.1, abc.gif, this short tutorial will review how to use HomeSite's convenient drag-and-drop feature.
By dragging the file name from the Resource window into your HTML document, HomeSite will automatically add the following image information for you, as shown in Example 1.2 below:
Example 1.1: abc.gif
Example 1.2
As you can see above, HomeSite adds the location of the image in relation to your document, the height and width information, a default of no border, and the ALT attribute ready for your input.
You can add the text to the ALT attribute within the document window, or you can right click within the <IMG SRC> markup to display the Image Tag Editor pop-up window and complete the text fields, as described in the Detailed Instructions below.
TIP:
Note that HomeSite has also added the quotes. So often these quotes are left out, but the quotes are important, as they are needed for voice readers and other accessibility issues and for integrating with XHTML. As of this article's publication, XHTML 1.0 is the current language recommended by W3C.
Detailed Instructions
HomeSite's drag-and-drop feature works in a similar way to other programs with this feature. The following few steps will outline how to use HomeSite's drag-and-drop feature for adding images to your HTML document.
- In HomeSite's Resource window to the left of your screen, open the folder where your images are located. For our example, we'll open the images folder. HomeSite then provides a listing of the content of that folder. Locate your image, which in this case is abc.gif.
- Click once on the image name with your mouse to highlight it, as shown in Example 1.3 below.
Example 1.3 (Click on image for full size version.) - Still holding your left mouse button down, drag the file name into your HTML document where you'd like it to be placed, using the blinking cursor as a guide for placement, as shown in Example 1.4 below.
Example 1.4 - As soon as the blinking cursor is where you'd like to place your image, let go of the mouse button. The image information will then be added automatically to the HTML document, as shown in Example 1.5.
Example 1.5
- The next step is to add the text information to the
ALTattribute. There are two ways to add the text to theALTattribute. You can type the text directly within your HTML document, or you can use the Image Tag Editor pop-up window to fill in the needed information.
To use the Image Tag Editor pop-up window, position the cursor within the <IMG SRC> code and right click with your mouse, which will pop up a drop-down menu as shown in Example 1.6 below. Click onEdit Tag.
Example 1.6 Pop-up Drop-down menu The Image Tag Editor pop-up box will then appear, as shown in Example 1.7 below. (Click on image to see entire pop-up box.)
Example 1.7 Image Tag Editor TIP:
Note that although you can add
hspace(horizontal space) andvspace(vertical space) information, too, to further adjust the placement of your image as needed, it's better to use CSS, preferably an external style sheet to adjust image placements. Often images will use the same whitespace around them anyway, but you can always stipulate a CSS class rule for those with different needs.For example, within content areas, I might float images to the right and stipulate a 5px margin, so I'll use a CSS class for those. I'd do something similar for images floated to the left. Images for logos might have different needs again. It's also quite simple and efficient with CSS. See WebsiteTips.com's Web Site Resources: CSS for helpful resources.
- When you have completed the text fields with the information you wish to add, click
OK. - You can review the browser window results within HomeSite by clicking on the
Browsetab just above your document window.
TIP:
The drag-and-drop images feature explained above is just one of many HomeSite helpful drag-and-drop features. Other drag-and-drop capabilities are for hyperlinks and snippets.
Speaking of snippets, if you haven't used HomeSite's snippets feature yet, you're in for a real treat! You can save code, text, or markup to use again as a 'snippet' and use the drag-and-drop capability to add it to your document. The code can be text, images, JavaScript, CSS, HTML, or DHTML, for example.
You can download a fully functional trial version of HomeSite through Macromedia's Web site.
Disclaimer: WebsiteTips.com and owner/editor Shirley Kaiser have no monetary affiliation with Macromedia or HomeSite.
