Dreamweaver Tutorial: Adding Text and Images

What you’ll learn in this Dreamweaver Tutorial:

  • Adding text and images

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

Dreamweaver Tutorial: Adding Text and Images

Text and images are the building blocks of most websites. In this Dreamweaver tutorial, you’ll learn how to add text and images to web pages to create an immersive and interactive experience for your visitors.

Starting up

Before starting, make sure that your tools and panels are consistent by resetting your workspace. See “Resetting the Dreamweaver workspace” in the Starting Up section of this book.

You will work with several files from the Dreamweaver CS6 Digital Classroom. These files are included with the book when you purchase it, either on a DVD with the printed book, or downloadable with the digital book. You can follow along using your own files if you haven’t purchased a copy of this book.

Before you begin, you need to create site settings that point to the dw03lessons folder. Go to Site > New Site, and name the site dw03lessons, or, for details on creating a site, refer to Lesson 2, “Setting Up a New Site.”

Typography and images on the Web

Dreamweaver CS6 offers some convenient features for placing images and formatting text. In this lesson, you’ll be working with a few pages within a site and adding some photos and text to a simple page for a fictional store.

Adding text using Dreamweaver

You should already have created a new site, using the dw03lessons folder as your root. In this section, you’ll be adding a headline and formatting the text on the events.html page.

1 f it’s not already open, launch Dreamweaver CS6.

2 Make sure your dw03lessons site is open in the Files panel. If not, open it now.

3 Double-click on the events.html file in your Files panel to open it in the Design view. Without any formatting, the text seems random and lacks purpose. First, you’ll add a headline to give the first paragraph some context.

4 Click to place your cursor in front of the word There’s in the first paragraph. Type OrganicUtopia Events and press Enter (Windows) or Return (Mac OS) to create a line break.

 

Typing the words OrganicUtopia Events and then putting them on their own line.

5 Click and drag to highlight the phrase you just typed. You will now format your text using the Property Inspector. Located at the bottom of the screen, the Property Inspector allows you to format your text using a combination of HTML and CSS. HTML stands for Hypertext Markup Language, and CSS stands for Cascading Styles Sheets. You will learn much more about the use of HTML and CSS in the next lesson; however, you will need to have a basic understanding of these two languages in order to use the Property Inspector to format your text.

6 Locate the Property Inspector at the bottom of your screen; there are two buttons immediately below the word “Properties.” If necessary, click on the HTML button to see your HTML formatting options. Choose Heading 1 from the Format drop-down menu. The text gets larger and becomes bold. By default, the style of any HTML text formatted as Heading 1 is generic: the color is black and the font-family is Times New Roman.

 

Use the Format drop-down menu in the Property Inspector to make the selected text a level-1 heading.

Although you are working in Dreamweaver’s Design view, you have actually changed the HTML code for this page. Page content such as text is wrapped in opening and closing tags, and everything between these two tags is formatted according to the rules of these tags. The text OrganicUtopia Events originally had an opening and closing tag defining it as a paragraph. The code looked like this:

<p>OrganicUtopia Events</p>

The first <p> is the opening tag for a paragraph, and the second </p> is the closing tag for a paragraph. A pair of opening and closing tags in HTML is called an element. So in the previous step, you changed the formatting of the text from a paragraph element to a Heading 1 element, and the HTML code changed to this:

<h1>OrganicUtopia Events</h1>

Headings are important structural elements in HTML. The largest heading is H1, and the subsequent headings become smaller with H2, H3, and so on. For the next step, you will format this text in order to change the font style of this heading to Arial; however, you will not be using HTML to accomplish this, but rather CSS.

7 Click anywhere inside the heading OrganicUtopia Events; you do not need to have it selected. In the Property Inspector, click on the CSS button to access the formatting options. Choose Verdana, Geneva, sans-serif from the Font drop-down menu.

 

The CSS section of the Property Inspector allows you to change the font.

The New CSS Rule dialog box appears.

8 From the Selector Type drop-down menu, choose Tag. In the Selector Name text field, the selector h1 has been chosen for you. Dreamweaver does this because you placed your cursor inside the text formatted as H1.

 

The New CSS Rule dialog box appears the first time you style text.

Press OK. Your heading is now styled in Verdana.

Dreamweaver allows you to format text in a way that is similar to desktop publishing and word processing applications, but there are important differences to keep in mind. When you chose the styling, Verdana, Geneva, and sans-serif, they were listed together as one option in the Font drop-down menu. When a web page is rendered in a browser, it uses the fonts installed on the user’s computer. Assigning multiple fonts allows you to control which font is used if the person viewing your page doesn’t have a specific font installed. In this case, if the user doesn’t have Verdana, Geneva displays instead. Sans-serif is included as the last option in case the user doesn’t have either Verdana or Geneva. A generic font family (either sans-serif or serif) is listed at the end of all the options in the Font drop-down menu.

You will now change the text color using the Property Inspector.

9 Highlight OrganicUtopia Events and click on the Text Color button to the right of the Size drop-down menu. When the Swatches panel appears, hover over the color swatches. At the top of the Swatches panel, a different hexadecimal color value appears for each color. When you locate the value labeled #9C3 (an olive green), click once to apply the color.

 

Click on the Text Color swatch and choose the #9C3 color from the swatches.

10 Choose File > Save. Keep this file open for the next part of this lesson.

Continue to the next Dreamweaver Tutorial: An introduction to styles >