AGI: Dynamic Learning Dreamweaver CS3

108

Dynamic Learning Dreamweaver CS3
Page 7

The structure of an HTML document

QuarkXPress 6.5 and 7 have a number of built-in web tools. To learn more, click here to read X-Ray Magazine v3n4: Web Forms Part One (PDF download).

Although you use many HTML tags to format text, certain tags are devoted to establishing structures, such as lists, tables or, most importantly, the HTML documents themselves. The HTML tag is the most fundamental tag. It is used to specify the beginning and end of HTML in a document:

QuarkXPress 6.5 and 7 have a number of built-in web tools. To learn more, click here to read X-Ray Magazine v3n5: Web Forms Part Two (PDF download).

Inside the main HTML tags are two tags that define the key areas of your web page: the head and the body. The head of your page contains items that are not visible to your user, but are important nonetheless, such as search engine keywords, page descriptions, and links to outside scripts or style sheets. You create the head of the document inside the HTML tags using the <head> tag:

<html>

</html>

The body of your page is where all of the visible elements of your page are contained. Here is where you'll place and format text, images, and other media. You define the body of the page using the <body> tag:

<html>

<body>

My text and pictures go here...

</body>

</html>

Whenever you create a new HTML document in Dreamweaver, this framework is created automatically before you add anything to the page. Any visual elements you add to the page will be added, using the appropriate HTML code inside the <body> tags.

Placing images in HTML

You use some tags in HTML to place items, such as pictures or media files, inside a web page. The IMG tag is the most common example; its job is to place and format an image on the page. To place an image and see the resulting code, follow these steps:

Choose File > Open. When the Open dialog box appears, navigate to the dw01lessons folder. (If you have not done so already, click here to download the resource files for this lesson.) Select the Images.html file and press Open to edit the file.

Click the Split button in the Document toolbar so you're viewing both the layout and the code for your page. In the Design view portion of the Split view, click below the line of text to place your cursor underneath it. This is where you'll place a new image.

AGI: Dynamic Learning Dreamweaver CS3 Figure 26

Enter the Split view before you insert the image onto your page.

From the Common tab on the Insert bar at the top of the page, press the Image button and choose Image. When the Select Image Source dialog box appears, select the file named gears.jpg, located under images within the dw01lessons folder.

AGI: Dynamic Learning Dreamweaver CS3 Figure 27

Choose Insert Image from the Common tab on the Insert bar.

Press OK (Windows) or Choose (Mac OS); when the Image Tag Accessibility Attributes dialog box appears, enter the words Gears Image in the Alternate text field and press OK to place the image.

AGI: Dynamic Learning Dreamweaver CS3 Figure 28

Attach alternate text to your image.

The Image Tag Accessibility Attributes dialog box appears when you add images to provide additional information for users with special needs (such as the visually impaired). You should always provide each image with alternative text, but you can disable this panel by choosing Edit > Preferences (Windows) or Dreamweaver > Preferences (Mac OS). In the Accessibility category, uncheck the Images option.

The code shows that the HTML <img> tag has been used to place the image. Click once on the image in the Document window to select it. The Property inspector at the bottom of the page displays and sets the properties for the image.

In the Border box of the Property inspector, type 3 to set a three-pixel border around the image, then press Enter (Windows) or Return (Mac OS). The <img> tag now contains the border attribute, which is set to a value of 3, just the way you typed it in the Property inspector.

As you change or add options to a selected image, Dreamweaver changes code behind the scenes.

Choose File > Save to save your work, then choose File > Close.

Note that in HTML, images and media are not embedded, but placed. This means that the tags point to files in their exact locations relative to the page. The tags count on those files always being where they're supposed to be in order to display them. This is why HTML pages are typically very lightweight in terms of file size.

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Download the PDF

Bookletizer for QuarkXPress 8

Cacidi Barcodes for InDesign CS3 and InDesign CS4

ThePowerXChange XTensions, Plug-ins, and other Stuff.