- Getting Started with Dreamweaver CS5
- Part 1: Defining a Site
- Part 2: Creating an HTML Page
- Part 3: Adding and Formatting Text
- Part 4: Creating a Text Link
- Part 5: Previewing a Webpage in a Browser
- Part 6: Inserting an Image
- Conclusion
In this part of the tutorial series on Dreamweaver CS5, we'll learn how to insert an image in an HTML document.
Step 1
Create a new HTML document by choosing File > New. The New Document dialog window will come up. Select the Blank Page category and select HTML under the Page Type column. Under the Layout column, select <none>. For the DocType, choose HTML 4.01 Transitional.
Then click on Create.
Step 2
Save this document inside your learn-dw folder as insert-image.html
Step 3
When the new blank document comes up, type the words Here is a picture of some leaves in the Design view of your Document window and hit enter.
Step 4
To add an image, choose Insert > Image from the main menu.
Step 5
When the Select Image Source window comes up, navigate to the leaves.jpg file inside the images folder of your learn-dw folder, and select it. For the Relative to option, choose Document.
Then click the Choose button.
Step 6
The Image Tag Accessibility Attributes dialog box will come up after you click Choose. Type leaves in the Alternate text input field, and just leave the Long description field blank.
The alternate text allows you to specify a word or phrase that briefly describes the image. And if for some reason the image fails to load when someone visits the page, this alternate text will be displayed in place of it. The long description allows you to specify an address to a web page that has a more detailed description of the image. Choosing not to provide an alternate text or a long description for an image is fine.
Click OK. You should now see the image inserted in the document.
Step 7
Save your work and preview it in a browser.
In the next part, I'll share some final thoughts to conclude this tutorial series.
No comments:
Post a Comment