› Dreamweaver tutorial: Adding an introduction section to your page in Dreamweaver

Dreamweaver tutorial: Adding an introduction section to your page in Dreamweaver

What you’ll learn in this Dreamweaver Tutorial:

  • Adding an introduction section
  • Adding images
  • Photoshop integration

This tutorial provides you with a foundation for working with Adobe Dreamweaver integration. It is the fifth lesson in the Adobe Dreamweaver CS5 Digital Classroom book. For more Adobe Dreamweaver training options, visit AGI’s Dreamweaver Classes.

Adobe Dreamweaver Tutorial: Adding an introduction section to your page in Dreamweaver

Now you can add additional sections to your page. The first section you’ll add is a box below the header where you’ll end up formatting an introductory paragraph to state the mission of the site, and grab the user’s attention.

1 Click on the Draw AP Div object and draw a box below your header. Don’t worry about the exact size of the box, but make the width smaller than the header and roughly the same height.

A good habit to get into is renaming your AP Divs immediately after they are created. You’ll do that now.

2 Click on the edge of the new div and in the CSS-P Element text field, type intro and press Enter (Windows) or Return (Mac OS).

3 Click inside the intro box and type the following text: Organic Utopia is a community owned and operated supermarket and marketplace. Anyone may shop in our stores but members enjoy special discounts and other benefits.

The #intro AP Div with added text

Now you’ll format the text in this box using techniques from the last lesson.

4 In the Property Inspector, click on the HTML button if necessary. Select the text you entered and choose Paragraph from the Format drop-down menu.

5 With the text still selected, click on the CSS button in the Property Inspector. Then click on the Font drop-down menu and choose the Georgia, Times New Roman, Times, serif family. The New CSS Rule definition dialog box will open. The Selector Type will be compound. The Selector Name is #container #intro p. Press the Less Specific button to set the selector to #intro p.

Press OK and the change is applied.

6 In the Property Inspector, click on the Text size drop-down menu and choose the keyword large.

Depending on how large you made your intro box, you may need to adjust the width and height of the box.

Set the paragraph text inside the intro box to Georgia and large.

7 Click on the edge of the intro box to activate it and then click on any of the anchor points on the box to adjust the width and height. We used a width of 655px and a height of 130px.

Pages

These tutorials are created by and the team of expert instructors at American Graphics Institute.