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.

Colorful, patterned square tiles float into the sky.

ملاحظة:

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

  1. Make sure that Split View is open by clicking the Split button at the top-left of the Document window (see Figure 1).
Split button is selected to reveal the underlying code in part of the Document window.
Figure 1. Split View allows you to inspect the underlying code.

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

  2. 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).
HTML is selected under Insert panel
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.

  1. 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.
The <div> element is added with placeholder text and identified in Live View by the Element Display tab.
Figure 3. The <div> element is identified in Live View by the Element Display tab.

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

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

  3. 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.
When a class or ID is added to an element, Dreamweaver prompts the user to select a source, in page or new CSS file.
Figure 4. When adding a class or ID to an element, Dreamweaver asks where the style rule will be defined.

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

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

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

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

  5. 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.
Related files are listed beneath the tab that displays the filename.
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).

Related Files Toolbar provides access to the attached style sheet.
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.

  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:

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

  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).
Style sheet is located correctly in a folder titled “styles”.
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.
Placeholder text is converted to a top-level heading.
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 <h1> element—in other words, a top-level heading.

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

Placeholder text has been converted to an <h1> element.
Figure 9. The placeholder text has been converted to an <h1> element.

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

  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 <h1> tags should be exactly the same as you have just typed.

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

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

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

  6. 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.
The Position Asset Dialog helps insert the new element accurately.
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).
Paragraph is converted to a bullet point by clicking the Unordered List icon in the Property inspector.
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 <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.

  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.
Additional list items are added with the <li> tag.
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 ul in the Tag selector at the bottom of the Document window as shown in Figure 14.
The Tag selector displays where the current selection is in the HTML structure.
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).
Paste Special dialog box controls how text from external documents is pasted into Dreamweaver.
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.

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

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

  3. 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).
A heading is automatically formatted when pasted from Word.
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.
Element Display confirms that copyright notice was formatted as a paragraph.
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.
Text is highlighted and formatted as paragraph body type.
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.

Space appears at the end of a copyright notice pasted from Microsoft Word.
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 &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.

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

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

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

  5. 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.
Some Paste Special options are disabled when not pasting from 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 h2 from the format drop-down menu as shown in Figure 21. This converts the paragraph into a second-level heading.

 

Quick Property Inspector is used to format text elements.
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. 

 Adobe

احصل على مساعدة بشكل أسرع وأسهل

مستخدم جديد؟

Adobe MAX 2024

Adobe MAX
مؤتمر الإبداع

في الفترة من 14 إلى 16 أكتوبر في ميامي بيتش وعبر الإنترنت

Adobe MAX

مؤتمر الإبداع

في الفترة من 14 إلى 16 أكتوبر في ميامي بيتش وعبر الإنترنت

Adobe MAX 2024

Adobe MAX
مؤتمر الإبداع

في الفترة من 14 إلى 16 أكتوبر في ميامي بيتش وعبر الإنترنت

Adobe MAX

مؤتمر الإبداع

في الفترة من 14 إلى 16 أكتوبر في ميامي بيتش وعبر الإنترنت