Dreamweaver tutorial: Adding Text and Images in Dreamweaver

What you’ll learn in this Dreamweaver Tutorial:

  • Adding text

This tutorial provides you with a foundation for working with the Adobe Dreamweaver text and images. It is the third lesson in the Adobe Dreamweaver CC Digital Classroom book. For more Adobe Dreamweaver training options, visit AGI’s Dreamweaver Classes.

Adobe Dreamweaver Tutorial: Adding Text and Images in Dreamweaver

Text and images are the building blocks of most websites. In this lesson, 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 dw03lessons folder in this lesson. Make sure that you have loaded the dwlessons folder onto your hard drive. These are available online for ebook users or on the DVD that comes with the printed book . See “Loading lesson files” in the Starting up section of this book.

Before you begin, you need to create site settings that point to the dw03lessons folder from the included DVD that contains resources you need for this lesson. 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 CC 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

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 If it’s not already open, launch Dreamweaver CC.

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

3 Double-click 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.

Type the words OrganicUtopia Events and then put 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 HTML. HTML stands for Hypertext Markup Language. You will learn much more about the use of HTML in the next lesson; however, you will need to have a basic understanding of this language in order to use the Property Inspector to format your text.

6 Locate the Property Inspector at the bottom of your screen. When you are in Design View and working with text, you will see your HTML formatting options. Choose Heading 1 from the Format drop-down menu. The text increases in size 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 Helvetica; 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. You will find the CSS Designer panel on the bottom-right side of your screen. You will use this panel to create CSS styles to change the appearance of your h1 heading.

The CSS Designer panel, located in the top-right
corner of the workspace, is where you will create
and edit all of your CSS styles.

8 Click the Add CSS Source button in the Sources menu bar and select Define in Page from the menu. This will allow you to create a new rule for this page.

The Sources menu of the CSS Designer will
allow you to create or attach an external style
sheet or create an embedded one.

9 Click the Add Selector button in the Selectors menu to create a new CSS style for our h1 heading element. This will create a new text box in the Selectors list where you can add a new selector.

The Selectors menu of the CSS Designer allows you to define new selectors such as tags, classes or IDs.

10 Type h1 to create a selector for Heading 1 headers and press Enter (Windows) or Return (Mac OS).

The Properties menu of the CSS Designer panel allows you to specify individual CSS properties for your selectors.

11 Click the Add CSS Property button in the Properties pane to create a new CSS property to apply to our h1 heading. This will allow us to add properties to our h1 selector.

12 If necessary, clear the Show Set check box on the Navigation Bar in the Properties pane of the CSS Designer to show all the available CSS properties. Click the Text button in the Properties menu to only show the text-related properties.

13 Locate the font-family property and click default font to the right of font-family to view the font selection menu. Choose Gotham, Helvetica Neue, Helvetica, Arial, sans-serif from the list. Your heading is now styled in Helvetica.

The font-family property allows you to choose a font list from the font selection menu.

14 Click OK. Your heading is now styled in Helvetica.

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, Gotham, Helvetica Neue, Helvetica, Arial, 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 typically uses the fonts installed on the user’s computer. However Dreamweaver CC uses free web fonts made available through Creative Cloud and powered by TypeKit.

Using web fonts means that anyone viewing your web page will see the page using the fonts you intended. Dreamweaver still provides a font list in the event the user’s computer cannot access the web fonts. 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 Helvetica, Arial displays instead. Sans-serif is included as the last option in case the user doesn’t have either Helvetica or Arial. 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 CSS Designer Panel.

15 Locate the color property in the Properties pane of the CSS Designer panel and click the Set Color button to the right of the label color. 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 the Text Color swatch and choose the #9C3 color from the swatches.

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

Continue to the next Dreamweaver Tutorial: An Introduction to Styles in Dreamweaver >