What you'll need
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.
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.
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.
- 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.
- Make sure that Split View is open by clicking the Split button at the top-left of the Document window (see Figure 1).
- Click anywhere in Live View to make sure the focus is in the body of the page.
- 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).
- 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.
This contains options to insert the most commonly used HTML elements into a web page.
<div>element is a generic container that can be styled using CSS. To identify it, we need to give it an ID. Since this
divwill contain, or 'wrap', all of the page's contents, let's call it
- 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.
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.
- 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.
- Create a new folder called styles in the bayside site root, and enter the folder.
- 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.
- 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>
idattribute 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.
- 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.
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).
- Click Source Code in the Related Files toolbar to return to the HTML in index.html.
- 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">
- Both filenames have an asterisk next to them, indicating they have unsaved changes. Select File > Save All Related Files.
- 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).
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.
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.
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.
- 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.
- 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.
- 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).
- 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.
- 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.
- 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.
- 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.
If you're not careful when replacing all the placeholder text in Edit mode, Dreamweaver might add
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
, 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.
<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).
- Dreamweaver inserts the new paragraph with some placeholder text immediately after the main heading.
- 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).
- 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
- 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.
- Still in Edit mode, press Enter/Return, and type Sights.
- Do the same another three times to add Dining, Events, and Lodging to the list of bullet points.
- Click away from the orange border to exit Edit mode. Your page should now look like Figure 13.
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, download the free Word Viewer for Windows. There isn't an equivalent for Mac OS X, but 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.
- In the Files panel, expand the content folder, and double-click index.docx to open the file in Microsoft Word.
- Select all the text to the end of the copyright notice, and copy it to your clipboard.
- 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
ulin the Tag selector at the bottom of the Document window as shown in Figure 14.
- 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).
- 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.
- 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
- 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).
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.
- 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.
The heading was styled in Word as Heading 2, so Dreamweaver automatically applied the equivalent HTML tag.
- 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.
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.
- 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
’. 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.
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.
- 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.
- 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.
- 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.
- 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.
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.
- When pasting from rich text format, Dreamweaver doesn't recognize headings. So click anywhere in the paragraph that reads "Riding the Cable Cars."
- Click the hamburger icon on the left of the Element Display to bring up the Quick Property Inspector, and select
h2from the format drop-down menu as shown in Figure 21. This converts the paragraph into a second-level heading.
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.
- Repeat the previous step with the second heading Cable Car Tips.
- 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. You'll do that in Part 3: Add structural elements and links.