1. Click Source Code in the Related Files toolbar to return to the HTML in index.html.
2. Check the code in the section on line 6. It links the style sheet to the current page like this:
3. Both filenames have an asterisk next to them, indicating they have unsaved changes. Select File > Save All Related Files.
4. 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.

1. In Live View, the placeholder text is now in large, bold type, and the Element Display indicates that it's an

   element—in other words, a top-level heading.

In the underlying code, Dreamweaver has wrapped the placeholder text in a pair of

tags nested inside the wrapper

(see Figure 9).

Figure 9. The placeholder text has been converted to an

element.

1. With the

   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.

2. 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

   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 `div`4 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 `div`4, 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.

3. 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 `div`6 tags. To create an unordered list in Live View, you need to start with a paragraph.

With the

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).

4. 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.

1. Dreamweaver inserts the new paragraph with some placeholder text immediately after the main heading.
2. 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.

1. 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 `div`8 (list item) element is selected. In the underlying HTML, the single `div`8 element is nested inside a pair of `div`6 tags.

Figure 12. The paragraph has been converted to a single-item unordered list.

1. 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.
2. Still in Edit mode, press Enter/Return, and type Sights.
3. Do the same another three times to add Dining, Events, and Lodging to the list of bullet points.
4. 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.

1. 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 `wrapper`1 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.

1. 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.

1. 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.

1. 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 `wrapper`2 element (paragraph). In Code View, the text is wrapped in a pair of `wrapper`2 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.

2. Select the first heading Ride the Cable Cars by clicking anywhere in the text. The Element display shows it's an `wrapper`4 element (second-level heading), and in the underlying code, the text is wrapped in `wrapper`4 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.

1. 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.

1. 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.

1. 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 `wrapper`6. 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.

1. When pasting from rich text format, Dreamweaver doesn't recognize headings. So click anywhere in the paragraph that reads "Riding the Cable Cars."
2. Click the hamburger icon on the left of the Element Display to bring up the Quick Property Inspector, and select `wrapper`7 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.

1. Repeat the previous step with the second heading Cable Car Tips.
2. 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.

Đọc tiếp