Add structural elements and links

Introduction

Welcome to part 3 of this tutorial series on building a simple, responsive website with Dreamweaver 2015. In this part, you'll add HTML5 structural elements to the page in preparation for styling the various parts. You'll also add links to the second page and external websites. Then you'll add content to the second page, which is currently blank.

Note: Internet Explorer 8 and other old browsers don't understand HTML5 elements, so the finished project won't display correctly in them. The decision not to support older browsers has been taken to avoid making this tutorial more complicated than absolutely necessary. If you need to support older browsers, seek advice in the main Dreamweaver Support Forum.

Use the DOM panel to add structural elements

Although all of the text content has now been added to the home page and formatted, you need to add several more HTML tags to give the page a logical structure. These tags will act as containers for the various parts of the page, allowing you to style them independently.

Figure 1 shows how the page will be structured. The header and footer will always stretch the full width of the wrapper <div>. On large screen resolutions, most of the page's content will be displayed as two columns, but on smaller screens, the content in the right column will drop down below the one on the left.

You'll use the DOM panel to add this structure to the page. DOM stands for Document Object Model, which acts as a sort of roadmap for the browser to identify different parts of the page. If you're new to web development, or if you’ve never dived into the HTML code before, the DOM panel can seem overwhelming at first. But it's a very powerful tool for examining and controlling the structure of a web page.

1. With index.html open in the Document window, take a look at the DOM panel. By default, it occupies the lower half of the panel group on the right of the screen in the Design workspace. If necessary, click the DOM tab to bring it to the front. You can also open it by going to Window > DOM or with the keyboard shortcut Ctrl+/ (Windows) or Cmd+/ (Mac). It should look similar to Figure 2.

Some of the items in the DOM panel might be collapsed. You can expand them by clicking the disclosure triangle to the left of the element. Elements that are nested inside another are indented to the right. For example, the h1 element is nested inside the div with the ID wrapper, and the li elements are nested inside the ul element.

Elements that are nested inside another are called child elements or children. The outer element is referred to as the parent. Elements at the same level are called siblings. So the DOM panel can be regarded as displaying the structure of the page rather like a family tree. Continuing the family tree analogy, nested elements are referred to as descendants of outer elements, which in turn are sometimes called ancestors.

2. In the DOM panel, select the h1 element. Then hold down the Shift key to select the ul element as well. The selected elements should be highlighted in a bright blue. If the ul element is expanded, the li elements nested inside should also be highlighted in a lighter blue (see Figure 3). This indicates that the next step will affect the child li elements as well as the parent ul.

Note: The ability to select multiple elements in the DOM panel is new in Dreamweaver 2015.2. The instructions in this section won’t work with older versions of Dreamweaver.

3. Click the plus button to the left of ul, and select Wrap Tag, as shown in Figure 4.

4. A pair of editable fields open above the h1 element. The default tag suggested by Dreamweaver is div. Replace this by typing header in the field on the left. As soon as you start typing, code hints pop up. You can select header using your arrow keys or mouse.

Leave the editable field on the right blank. This is where you can specify an ID or class for the element. You don’t need one this time.

Press Enter/Return twice to confirm the edit. The selected elements are now nested inside a <header> element.

5. Select the ul element in the DOM panel, and click the plus button to the left. This time you have more options (see Figure 5) because only a single element (and its children) has been selected.

6. Select Wrap Tag, and type nav in the left field. Leave the right field empty.
   
   
7. Select the first p element immediately after the ul. You can confirm that you have selected the correct element by looking in Live View or Code View. The paragraph beginning "Bayside Beat keeps…" should be highlighted.
   
   
8. Click the plus button, and select Wrap Tag. Accept div as the suggested value in the left field, and type #hero in the right field. This wraps the paragraph in a <div> with the ID hero.

This time, Dreamweaver doesn’t automatically create a selector in the style sheet for the ID. The only time a selector is created automatically is when you use the Element Display to assign an ID or class to an element.

9. Using the same technique, wrap the first h2 element and the next three p elements in an HTML element by typing main in the left field.

Then wrap the next h2 element and the following two paragraphs in an element by typing aside in the left field.

10. Lastly, wrap the final paragraph in an element by typing footer in the left field.

When you have finished the DOM panel should look like Figure 6 (the contents of the ul have been collapsed).

11. Verify that your structure is correct by using the disclosure triangles to collapse the nested elements. The DOM panel should now look like Figure 7.

12. Save index.html.

The structure in the DOM panel now matches the outline shown in Figure 1 at the beginning of this section, but with one addition. There’s a <div> with the ID hero between the <header> and <main> elements. This will be used only on the first page to house a large hero image of the Golden Gate Bridge and a short paragraph of text.

Building the HTML structure like this might seem a long way from creating an attractive design, but it's essential to lay a solid foundation for styling a page. Making sure elements are nested correctly within parent elements allows you to style each part of the page as a coherent group.

The <header>, <nav>, <main>, <aside>, and <footer> elements don't have any inherent styles. They’re basically grouping elements, but the names describe the roles they play in the page.

Create links

Links—or to give them their correct name, hyperlinks—are what makes web pages so powerful. You can link to different parts of the same website or to completely different sites. In this section, you'll convert the list of bullet points into internal links, as well as add some external links to the main text content.

1. Select the first bullet point (Home), and double-click the text to enter Edit mode.
   
   
2. When you select text in Edit mode, three small icons appear at the top-left of the text. With the whole word selected, click the link icon to reveal a field where you can enter the link (see Figure 8).

3. Although you can type the value of the link directly into the field, when creating internal links it’s a good idea to click the folder icon on the right to open the Select File dialog box.
   
   

Select index.html in the bayside site root (use the Site Root button, if you’re not sure), and click OK (Windows) or Open (Mac). Then click away from the orange border to exit Edit mode. Home is now blue and underlined, indicating that it's a link.

It might seem like overkill to use the Select File dialog box rather than typing in the filename directly, but it ensures that the path to the target file is correctly spelled and formatted.

4. Repeat the previous step with the next bullet point (Sights), and link to sights.html.
   
   
5. There aren’t any pages for the remaining three bullet points. Type # in the link field to create dummy links.
   
   
6. Double-click the first paragraph after "Riding the Cable Cars," and select Fisherman’s Wharf. This will link to an external website, so you need to enter the full URL in the link field. Add the following value: http://www.fishermanswharf.org/.
   
   
7. Create external links in the first paragraph after "Cable Car Tips" for Muni Passport and BART subway system. You can find the URLs in index.docx and index.rtf in the content folder of the sample files.

A common mistake when linking to an external site is to omit http:// or https:// at the beginning of the URL. If you do so, the browser treats it as an internal link, and tries to look for the page within your own site. The most reliable way to create an external link is to copy the URL from a browser address bar and paste it into the link field in Dreamweaver.

Use the DOM panel to copy and add elements to a second page

Now that all the text content and links have been added to the first page, it's time to get to work on the second page. The DOM panel makes light work of copying common elements and building the page's structure.

1. Save index.html if you haven't already done so, and then hold down the Ctrl key (Windows) or Cmd key (Mac) and select the header and footer elements in the DOM panel. The elements nested inside the header and footer will be automatically selected, but make sure no other elements are.
   
   
2. Right-click one of the selected elements, and choose Copy from the context menu (see Figure 9).

3. Open sights.html in the Document window by double-clicking its name in the Files panel.
   
   
4. With sights.html as the active document, select body in the DOM panel, right-click, and select Paste as Child (see Figure 10). This nests the copied elements inside the second page's tag.

5. Select both the header and footer elements (but not the body), click the plus button, and select Wrap Tag. This wraps the selected elements in a div, and leaves both fields in the DOM panel open for editing.



Click inside the right field, type #wrapper, and press Enter/Return to commit the edit.

6. Select header, click the plus button, and select Insert After. In the left field, replace div with main, and press Enter/Return twice to commit the change.
   
   
7. Select the main element that you have just inserted, click the plus button, and select Insert After. Change the name of the element to aside.

The HTML structure for the second page is now complete.

Add the main text content to the empty elements

With the HTML structure in place, you're ready to add the main text content to the second page. The <main> and <aside> elements contain placeholder text. To ensure that content from an external file is pasted in the correct place, you first need to format the placeholder text.

1. In Live View, click anywhere in the placeholder text of the element, then select Paragraph from the Format menu in the Property inspector (see Figure 13).

2. Open sights.docx from the content folder (use sights.rtf if you don’t have access to Microsoft Word, and copy the first heading and the following six paragraphs to your clipboard.
   
   
3. Return to Dreamweaver. Make sure the paragraph that you formatted in step 1 is still selected. The Element Display should read p, not main (see Figure 14).

This step is necessary because content pasted from an external file is added after the current selection at the same level of the HTML hierarchy.

With the paragraph selected in Live View paste the text copied from the external document (use Paste Special, if you’re pasting from rich text format, and use the Quick Property Inspector to convert the first paragraph to an heading.

4. After the new content has been added, select the paragraph of placeholder text and delete it.
   
   
5. Using the same technique, copy and paste the remaining text from sights.docx or sights.rtf (from "Tourist Information" to "on a Segway") into the element.If you're using the rich text format file, format "Tourist Information" and "Sightseeing Tours" as headings.
   
   
6. Save sights.html.

Formatting the placeholder text and then deleting it is necessary because Dreamweaver pastes content from an external file as siblings of the selected element. If you don't, all of the pasted headings and paragraphs will follow or rather than being nested inside. Dreamweaver displays the Position Assist Dialog only when using the Insert panel or menu.

Add links to the second page

To complete the content of sights.html, you need to create some links within the text. Link to various external sites using the URLs provided in sights.docx and sights.rtf. If you need any guidance, take a look at the version of sights.html in the part3 folder of the sample files.

Congratulations if you've survived this far. You've now got two fully functioning pages of a website. They don't look very attractive, but that will start to change.