Add and format text content

In the second part of this series, learn how to setup your web page to add and style text, add text
directly in Live View, and copy text from an existing document.

WHAT YOU'LL NEED

Get Libraries
 
Sample Creative Cloud Libraries to practice with

Get files
 
 Sample files to practice with (676 KB)

Note:
The downloads include the complete set of Creative Cloud Libraries and project files for this tutorial
series. You can continue to build on your starting file in Part 1, or navigate to the relevant folder to use
the starting file for each section.

Introduction
Welcome to the second part of this tutorial series on building a simple responsive website in
Dreamweaver CC 2015. In the first part, you defined a site and created two web pages. At the moment,
the pages only have a title. In this part, you'll add the text content to the site's home page, index.html.
You'll start by typing directly in Live View's Edit mode, and then copy and paste formatted text from
Microsoft Word. If you don’t have access to Word, you can paste the content from a rich text format file
and then make some minor adjustments.
If you come from a graphic design background, you might wonder why we're not starting with the visual
look of the page. It's certainly a good idea to have a design in mind, but search engines aren't interested
in your stunning design. What they're looking for is relevant text content with informative headings and
relevant links.

Create a container for the web page and add a style sheet
Before adding any text, it's a good idea to add a container for the whole page. This will enable you to
center the page content on large screen resolutions. At the same time, you'll link an external style sheet
to the page.
1. In the Bayside Responsive site, open index.html, the blank web page that you created in part 1.
If sights.html is still open, close it. For the moment, you'll concentrate on index.html, the site's home
page.
Note: It's common convention to use index.html for a site's home page. This is because most web
servers treat index.html or index.htm as the default page in a directory (folder). So this page is displayed
automatically if no filename is added at the end of the URL.
2. Make sure that Split View is open by clicking the Split button at the top-left of the Document
window (see Figure 1).

Figure 1. Split View allows you to inspect the underlying code.

3. Click anywhere in Live View to make sure the focus is in the body of the page.

4. Open the Insert panel by clicking its tab in the panel group on the right of the screen, and make
sure that HTML is selected from the drop-down menu at the top-left of the panel (see Figure 2).
 Figure 2. Select the HTML category of the Insert panel.

This contains options to insert the most commonly used HTML elements into a web page.
5. Click Div (the first item at the top). This inserts an HTML element and some placeholder text
between the tags in the underlying HTML. The placeholder text is displayed in Live View surrounded by a
light blue border. The blue border has a tab with the name of the HTML element (see Figure 3). This tab
is called the Element Display.

Figure 3. The <div> element is identified in Live View by the Element Display tab.
6. A <div> element is a generic container that can be styled using CSS. To identify it, we need to
give it an ID. Since this div will contain, or 'wrap', all of the page's contents, let's call it wrapper.

Click the plus button on the Element Display. This opens a field where you can add a class or an ID to the
element. Type #wrapper in the field, and press Tab or Enter/Return to confirm the change.
7. A pop-up panel appears alongside the Element Display prompting you to select a source for a
style rule for the ID you've just created. Open the drop-down menu, and select Create a new CSS file, as
shown in Figure 4.

Figure 4. When adding a class or ID to an element, Dreamweaver asks where the style rule will be
defined.

8. The Create a New CSS File dialog box opens. Click the Browse button on the right of the File/URL
field to open the Save Style Sheet File As dialog box.

9. Create a new folder called styles in the bayside site root, and enter the folder.

10. Type responsive.css in the File name field, and click Save. Then click OK to close the first dialog
box. If the pop-up in Figure 4 is still displayed, click away from it to close it.

11. Note that the opening <div> tag in Code View now has an id attribute like this:

<div id="wrapper">Content for New div Tag Goes Here</div>

The id attribute in the underlying HTML doesn't begin with a hash. Dreamweaver's visual interface uses
CSS syntax to distinguish between IDs and classes. In CSS, an ID selector begins with a hash, whereas a
class begins with a dot or period.

12. A new toolbar has appeared at the top of the Document window between the tab with the
filename and the Split button (see Figure 5). This is the Related Files toolbar, which lists all files attached
to the current web page.

Figure 5. Related files are listed beneath the tab that displays the filename.
 Click responsive.css in the Related Files toolbar. The Code View part of the Document window now
displays the code in the style sheet that you have just created. Lines 2–3 contain an empty style rule for
the wrapper ID (see Figure 6).

Figure 6. The Related Files toolbar provides access to the attached style sheet.

Notice that the selector in the style sheet begins with a hash, indicating that it will style an element with
the same ID. You'll add the style definitions for the wrapper <div> in part 4 of this tutorial series, when
you begin styling the site.
13. Click Source Code in the Related Files toolbar to return to the HTML in index.html.

14. Check the code in the section on line 6. It links the style sheet to the current page like this:

<link href="styles/responsive.css" rel="stylesheet" type="text/css">

15. Both filenames have an asterisk next to them, indicating they have unsaved changes. Select File
> Save All Related Files.

16. Open the Files panel, and expand the styles folder to make sure that the style sheet
responsive.css has been created in the correct location (see Figure 7).
 Figure 7. Make sure the style sheet has been created in the correct location.

This isn't the only way to attach a style sheet to a web page. Later in this tutorial series, you'll learn how
to do it using the CSS Designer, Dreamweaver's main panel for styling web pages. 

Add text content directly in Live View

Dreamweaver's Live View uses the Chrome Embedded Framework, so it's effectively a browser running
in the Document window. It's also an editable surface, where you can add new content or rearrange
existing content. As you'll see later, you can drag and drop text and images in Live View, but it's not a
visual layout tool where you can resize and position elements by dragging their borders. Layout and
positioning are all controlled by CSS.
The page will look rather bland until you start adding styles in part 4, but let's add some real text
content by typing directly in Live View.
1. Make sure that Source Code is selected in the Related Files toolbar, and click anywhere inside
the placeholder text in Live View. You should be able to see the insertion point (a vertical line)
somewhere inside the text in Code View.

2. In the Property inspector, activate the Format drop-down menu, and select Heading 1 (see

Figure 8). If you can't see the Format menu, make sure the HTML button at the top left of the Property
inspector is selected.
 Figure 8. Convert the placeholder text to a top-level heading.

3. In Live View, the placeholder text is now in large, bold type, and the Element Display indicates
that it's an <h1> element—in other words, a top-level heading.

In the underlying code, Dreamweaver has wrapped the placeholder text in a pair of <h1> tags nested
inside the wrapper <div> (see Figure 9).
 Figure 9. The placeholder text has been converted to an <h1> element.

4. With the <h1> heading still selected, double-click anywhere inside the text in Live View to enter
Edit mode. The blue border is replaced by an orange one, and Code View is grayed out.

5. Select all the placeholder text, and type Bayside Beat. Click away from the orange border to exit
Edit mode. In Code View, the text between the <h1> tags should be exactly the same as you have just
typed.

If you're not careful when replacing all the placeholder text in Edit mode, Dreamweaver might
add &nbsp;immediately after the opening HTML tag or just before the closing tag. This is an HTML
character entity for a non-breaking space. Dreamweaver adds it because it needs some content
between opening and closing tags. If you see &nbsp;, go into Code View, and remove it manually.
Leaving the character entity for a non-breaking space in the underlying code can cause problems for
layout. This is why it's a good idea to keep an eye on what's happening in the underlying markup, even if
you don't want to type the code yourself.
6. Next, you'll add a list of bullet points that will later be converted into a navigation menu. In
HTML, bullet points are called an unordered list and are wrapped in a pair of <ul> tags. To create an
unordered list in Live View, you need to start with a paragraph.

With the <h1> heading still selected in Live View, open the Insert panel, and select Paragraph from the
HTML category (it's the third item from the top).
7. The Position Assist Dialog (see Figure 10) appears, asking where you want the new element to
go. The paragraph needs to go after the heading, so click After.
 Figure 10. The Position Assist Dialog helps you insert the new element accurately.

8. Dreamweaver inserts the new paragraph with some placeholder text immediately after the main
heading.

9. With the paragraph still selected in Live View, convert it to a bullet point by clicking the
Unordered List icon in the Property inspector (see Figure 11).

Figure 11. Convert list to bullet points.

10. Check that your page looks like Figure 12. In Live View, the placeholder text is preceded by a
bullet point, and the Element Display indicates that an <li> (list item) element is selected. In the
underlying HTML, the single <li> element is nested inside a pair of <ul> tags.

Figure 12. The paragraph has been converted to a single-item unordered list.
11. With the list item still selected in Live View, double-click anywhere inside the placeholder text to
enter Edit mode. Select all the placeholder text, and replace it with Home.

12. Still in Edit mode, press Enter/Return, and type Sights.

13. Do the same another three times to add Dining, Events, and Lodging to the list of bullet points.

14. Click away from the orange border to exit Edit mode. Your page should now look like Figure 13.

Figure 13. The unordered list will be converted later into the navigation menu.

15. Save index.html.

Copy and paste text from Microsoft Word
Dreamweaver is a web development environment, not a word processor. Typing a large amount of text
directly into Live View can be rather tedious. However, Dreamweaver can convert a Microsoft Word
document into correct HTML, preserving headings, paragraphs, bullet points, and numbered lists, as well
as bold and italic type.
The technique you're about to use is not the same as using Microsoft Word to save a document as
HTML. Word adds a lot of proprietary code to the HTML it generates, but Dreamweaver strips out all
unnecessary code when you copy and paste from Word, leaving you with clean HTML.
 If you don't have a copy of Microsoft Word, the sample files also contain the text content in rich text
format (RTF). Instructions on how to use the RTF file follow after this section. Don't try to use Open
Office or Libre Office instead of Word. Pasting from OpenDocument Format adds unnecessary code
that's difficult to clean up.
1. In the Files panel, expand the content folder, and double-click index.docx to open the file in
Microsoft Word.

2. Select all the text to the end of the copyright notice, and copy it to your clipboard.

3. Return to Dreamweaver, and make sure the unordered list (not just one of the list items) is
selected in Live View. You can select the entire element by clicking anywhere inside the list, and then
clicking ul in the Tag selector at the bottom of the Document window as shown in Figure 14.

Figure 14. The Tag selector displays where the current selection is in the HTML structure.

4. Select Edit > Paste Special, or use the keyboard shortcut Ctrl+Shift+V (Windows) or Cmd+Shift+V
(Mac). This brings up the Paste Special dialog box (see Figure 15).
 Figure 15. Paste Special controls what Dreamweaver pastes from external documents.

5. Select the third radio button Text with structure plus basic formatting (bold, italic), and make
sure the check box labeled Clean up Word paragraph spacing is selected. Then click OK.

Dreamweaver pastes the text after the selected element (the unordered list), and formats the
paragraphs and headings with the correct HTML tags.
Note: Never be tempted to select the fourth radio button for full formatting, even if you want to use the
same colors and fonts. This copies a large amount of proprietary Microsoft code into your HTML page
that makes it extremely difficult to style your page with CSS.
6. Select the first paragraph (it begins with "Bayside Beat keeps you…") by clicking anywhere in the
text in Live View. The Element Display indicates that it's a <p> element (paragraph). In Code View, the
text is wrapped in a pair of <p> tags.

If the pasted text doesn't have an Element Display and there are no tags in the underlying code, it
means that the focus was in Code View when you pasted the content from the Word document. Undo
the paste operation by pressing Ctrl+Z (Windows) or Cmd+Z (Mac). Then select the unordered list in Live
View before pasting.
7. Select the first heading Ride the Cable Cars by clicking anywhere in the text. The Element display
shows it's an <h2> element (second-level heading), and in the underlying code, the text is wrapped
in <h2> tags (see Figure 16).
 Figure 16. The heading has been automatically formatted when pasted from Word.

The heading was styled in Word as Heading 2, so Dreamweaver automatically applied the equivalent
HTML tag.
8. Click anywhere in the text of the copyright notice. It should be the last paragraph in the page,
and it should have an Element Display that indicates it's a paragraph, as shown in Figure 17.

Figure 17. The Element Display confirms that the copyright notice has been formatted as a paragraph.

9. If there's no Element Display, you need to adjust the formatting by selecting the text of the
copyright notice in Code View. Then select Paragraph from the Format drop-down menu in the Property
inspector as shown in Figure 18.

Figure 18. You might need to format the final line of text as a paragraph.

The reason this sometimes happens is because Dreamweaver relies on the line break at the end of
paragraphs, headings and other text elements in Word to determine what type of HTML tag to use.
When selecting text in a Word document, always select right to the end of the line. There's usually a
small space after the last piece of text, as shown in Figure 19.
 Figure 19. Capture the space at the end of text when copying from Microsoft Word.

10. Save index.html.

I think you'll agree that's much quicker than typing all the text directly into Live View. Dreamweaver
remembers the settings in the Paste Special dialog box, so in future you can paste directly into Live View
using the normal keyboard shortcuts of Ctrl+V (Windows) and Cmd+V (Mac). Before pasting into Live
View, make sure you select the element that goes immediately before the new content.
If you look closely at the underlying HTML in Code View, you'll notice several instances of &rsquo;. The
text in the Word document uses smart (curly) quotes, which Dreamweaver has converted into the HTML
character entity for a right single quote.
Even if you pasted the content in from Microsoft Word, you'll find it useful to read the next section
because it explains how you can use the Element Display of a text element to alter its format.

Use the Quick Property Inspector to format text elements

If you don't have Microsoft Word or Word Viewer, you'll need to copy and paste the text content from a
rich text format file, and then format the headings because all the text will be formatted as paragraphs.
1. In the Files panel, expand the content folder, and right-click index.rtf. Select Open With >
Browse from the context menu, and select a suitable text editor, such as TextEdit.

The file contains the same content as in index.docx, but there's an extra blank line after each paragraph
and heading. This is necessary for Dreamweaver to format the text correctly as paragraphs.
2. Select all the text from the beginning of the file down to and including the line following the
copyright notice. Copy the selected text to your clipboard.

3. Return to Dreamweaver, and make sure the unordered list is selected in Live View. Refer to step
3 and Figure 14 in the previous section if you're not sure how to do this.

4. Select Edit > Paste Special, or use the keyboard shortcut Ctrl+Shift+V (Windows) or Cmd+Shift+V
(Mac). This opens the Paste Special dialog box. As Figure 20 shows, the last two radio buttons and the
second check box are disabled because you're not pasting from Microsoft Word.
 Figure 20. Some options are disabled when not pasting from Microsoft Word.

Make sure the second radio button Text with structure (paragraphs, lists, tables, etc.) is selected. Also
uncheck the check box labeled "Retain line breaks." Then click OK for Dreamweaver to paste all the text
formatted as paragraphs.
5. When pasting from rich text format, Dreamweaver doesn't recognize headings. So click
anywhere in the paragraph that reads "Riding the Cable Cars."

6. Click the hamburger icon on the left of the Element Display to bring up the Quick Property
Inspector, and select h2 from the format drop-down menu as shown in Figure 21. This converts the
paragraph into a second-level heading.
 

Figure 21. You can format text elements in Live View using the Quick Property Inspector.

7. Repeat the previous step with the second heading Cable Car Tips.

8. Select the copyright notice at the foot of the page to verify that it has been formatted as a
paragraph. If necessary, adjust the formatting as described in step 9 of the previous section.
Copying and pasting text content from a rich text format file is fairly straightforward. The important
points to remember are:
 There should be two blank lines between each paragraph or heading.
 Copy the blank line after the final paragraph.

 Always use Edit > Paste Special or Ctrl+Shift+V (Windows) or Cmd+Shift+V (Mac) and uncheck
the Retain line breaks check box. Even though Dreamweaver remembers your settings, using Ctrl+V or
Cmd+V to paste from rich text format results in extra line breaks being added in the underlying HTML.

 Access the Quick Property Inspector by clicking the hamburger icon on the Element Display to
convert paragraphs to HTML headings.
The home page of the Bayside Beat now has all its text content, but it looks very bland. If you load the
page in a browser, the paragraphs span the full width of the viewport. You'll be able to control that with
CSS, but you also need to add other HTML structural elements to divide the page up into logical groups
for styling. 
 
Back to:  Project overview and site setup |  Next: Add structural elements and links