Create basic page structure - Dreamweaver Tutorial

- [Narrator] In this chapter, we're going to look at building basic page structure and getting text into your pages. Creating a logical structure for page content is extremely important. This is the basic structure that I use for the home page of the Landon Hotel website. It consists mainly of HTML5 semantic elements: header, nav, article, section, and footer. I'm also using a div with the ID "hero" as a container for the image of the hotel facade and a heading. The two articles have classes: intro and maincontent. And the maincontent article has three section elements nested inside. Some web developers like to assign classes and IDs to every element on a page, but I prefer to use CSS descendant selectors to style nested elements. It's simply a matter of personal preference. The same basic structure is used for most of the pages in the site, but without the "hero" div. In one page, I doubled the number of sections nested inside the maincontent article. A couple of pages have a slightly different structure, but the same basic pattern of header, nav, and footer preserves the unity of design and structure. So let's return to Dreamweaver to see how to build the underlying structure of a page. The first thing I'm going to do is to dive into code view to give the page a meaningful title. So on line five replace "Untitled Document" with "Landon Hotel: Welcome." I could continue working in code view, but I think that using the insert panel in live view is probably the easiest way to build the skeleton structure for a page. I'm going to keep split view open so you can see the underlying code that's being generated, but the focus needs to be in live view. So make sure that you are in live view, and then click in the top half of the document window. Then select the insert panel, and make sure that HTML is selected in the menu at the top. The first structural element that I want to insert is a header. We need to go a little bit further down to the HTML5 structural elements and select "header," and that inserts a header element in live view together with some placeholder text to remind you what it's for. And if you look in code view, you can see that the header element and the placeholder text have been inserted between the opening and closing body tags. When inserting subsequent elements in live view, it's important to select the elements you want the next element to be alongside or nested inside. We've got only one element on the page so far. So make sure that's still selected in live view, and then in the insert panel, click "navigation." This time, Dreamweaver needs to know where you want the new element, so it displays the position assist dialog. This offers the option to insert it before, after, to wrap it round the current selection, or to nest it inside as the first child. We want it to go after, so click "after." That inserts the new nav element again with some placeholder text. Next comes the hero div. So with the nav element still selected, we need to click "div" in the insert panel. That's right at the very top. Click "div." Again, Dreamweaver needs to know where to go. It's to go after, so click "after" in the position assist dialog. And we need to assign an ID to this div. So with the div still selected, in the element display click that plus button to add a class or ID. Then in the field that opens, an ID begins with a hash or pound sign, and then we call it "hero." And press enter or return to commit that. Dreamweaver pops up this little panel asking us to select a source, and basically, this is to define a style rule for the "hero" ID. I don't want to do that at the moment, so just press escape to dismiss that without creating a style rule. Next comes an article. It's gonna go after the div, so we have the div still selected, and we find "article" down there. Click that. It goes after. In the element display, click the plus button. Add a class or ID. Classes begin with a dot or period, and we're going to call this "intro." Again, we don't want to have a style rule. So when you press enter or return you see that popup, just press escape to dismiss it. You can also build your page structure in design view. So let's switch to design view to see how it's different. So in the document tool bar, select "design." And because the article was selected in live view, it remains selected in design view. I want another article, so we need to find "article" again. Click that, and a different type of dialog box comes up. But this performs a similar role to the position assist dialog, but it's nowhere near as helpful. Because we've got something selected, the default is "wrap around selection." The other options are before tag, after start of tag. What that means is nest inside as the first child. Before end of tag will nest inside as the last child, and after tag. I want the new article to go after the currently selected one, so "after tag" seems like the logical option. So I'm going to select that. And this brings up a new dropdown menu, and it's selected "div id=hero." So if I accept this, it's going to put it immediately after the hero div, which is not what I want. But if I open this little dropdown, there's nothing else there to select. And the problem is that this dialog box in design view lists only IDs. It doesn't list classes. And when you think about it, it makes a lot of sense. Because you can have multiple instances of a class on a page, but an ID must be unique. So Dreamweaver would know where to put it after an ID, but it doesn't know which instance of a class you intend. The way that I would have to do this in design view is to move my cursor to the position where I want the new element to be. But I can't do that with this dialog box open, so I have to click "cancel." Now Dreamweaver is being rather naughty with me. It's actually put that new article in after the hero div. So I'm gonna press control or Command + Z to undo that. Then I'm gonna go back to live view. So let's quickly add our maincontent article. Find "article" here. It goes after. We need to give it that class .maincontent, all one word. Press enter or return and then escape to dismiss that. Next I want to nest a section inside the maincontent article. So I've got maincontent selected. Click "section" in the insert panel, and this time with the position assist dialog, select "nest." Now in live view, it looks as though that new section has been inserted before the second article. We need to look in code view to understand what's happened. So let's scroll down a little bit. And here's that section, and it's gone immediately before the placeholder text. So this section has been nested correctly, but dealing with placeholder text can be rather tricky. So I'm gonna undo that last operation using control or Command + Z. That removes the nested section, and it leaves the maincontent article selected. And if you look in code view, the whole tag has been selected. So just click anywhere inside the text in live view, and although the article is still selected in the top half of the document window, the cursor is now here inside the text of that placeholder text. On Windows, hold down the control and shift keys. On a Mac, hold down the command and shift keys, and press P. And that has converted that placeholder text into a paragraph, and that is nested inside the article. Now bear with me for a moment, because this might seem a rather odd way of doing it. But now that we've got a paragraph and that has been selected, we can add the next section. So we click "section," and instead of nesting this time, we make it after the paragraph. Now that might seem a rather roundabout way of nesting an element, but converting the placeholder text of the parent element to a paragraph makes it a lot easier to insert the new element correctly, and also to remove the placeholder text. All we need to do is to click anywhere inside the paragraph and then press delete. And that placeholder text for the paragraph is gone, and we've now got the section correctly nested inside our maincontent article. I need two more sections inside the maincontent article, but I'm going to use a different technique. I'm gonna switch to the dom panel, and I'm going to select "section" down there nested inside maincontent. Right click, and "duplicate" gives me a new section. Do that again. Very quickly got my three new sections, and they're all nested inside the article element. The final structural element is the footer, and we can also use the dom panel to insert new elements. The footer needs to go after the maincontent article. So select "article," maincontent there, and then click this plus icon to add an element. And we want to insert it after. By default, Dreamweaver suggests that it should be a div, but it's open, ready for editing. So just start typing "footer" in there. Code hints come up. We can select that using enter or return. And then press enter or return again to commit that, and that inserts a new footer element together with some placeholder text that tells you what it's for. And that has built the structure for our page. Now admittedly, this doesn't look at all inspiring. All we've got is a series of elements with placeholder text. But this is a solid foundation into which you can start adding content. The important thing to take away from this exercise is how to add new elements to a page in a logical order. In live view, using the position assist dialog in conjunction with the insert panel lets you insert new elements precisely before or after the currently selected element and where appropriate, to wrap around or nest inside. The dom panel gives you the same options, and it also makes it easy to duplicate elements. At the design stage, it's common to add new elements to a page as an afterthought. And if you use a purely visual editor to build your pages, those afterthoughts are usually inserted at the bottom of your HTML structure. The page might look nice, but the underlying content won't make any sense to search engines or assistive technology for the blind. With Dreamweaver CC 2017, elements are inserted exactly where you want to put them.