Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Editing the Layout
Next, you’ll start to edit the layout, but a bit of what’s going on is in order. In a fluid grid layout, Dreamweaver starts with two divs to create the initial content. There is a main div with a style called “gridContainer” applied. All of your fluid grid layout objects should be within that enclosing div. There is also a div that contains the text you clicked in with a style called “#div1” applied. This div can be your header or used for something else if you like.
Inserting a <header> Tag
We are going to delete the “#div1” div, and insert an HTML5 <header> tag, instead.
- With the mobile view showing, click in the text at the top of the page. You should see some interface elements appear around the edges of the box that you will use on your fluid elements (see Figure 9).
- With the cursor in the text, click the trash can icon (see Figure 9) to delete the element. The containing div will collapse, but the cursor should still be in it.
- In the Insert panel (Window > Insert), choose the Structure category from the menu at the top. Click the “Header” option to insert a <header> tag in the containing div. In the Insert Header dialog box, add a class name like “header.” Make sure that the Insert As Fluid Element option is selected, and click OK.
- Click the Tablet Size icon and then the Desktop Size icon in the lower-right corner of the Document window to see that the new header shows in all three views. Make sure to click the Desktop View icon last.
)
Figure 9 Delete a fluid element
)
Figure 10 Insert the <header> element
While you’re adding your layout elements and content, you can really be in any view. Some prefer to design from mobile first and work their way into the other devices—it’s up to you. Also, when you insert fluid elements, the sizing (width) is automatically set at percent. By default, the elements are 100%, but as you resize them, as you’ll soon do, the percent can change. This is one major reason why the content “responds” to the viewport size.
Adding Navigation
Next, you’ll add a <nav> tag to the page, and then insert page navigation.
- Click the Design view button in the upper-left corner of the Document window to hide the code if it’s showing.
- Insert the cursor just to the right of the header you inserted, but within the containing div. See Figure 11.
- In the Insert panel, click the Navigation option to insert a <nav> tag beneath the <header> tag (see Figure 12). In the Insert Navigation dialog box name the class something like nav, make sure that the Insert As Fluid Element option is selected, and click OK.
- Select all of the text in the nav div and delete it. With the cursor in the nav area, click the Unordered List option in the Insert panel (see Figure 13). In the Insert Unordered List dialog box, change the class name to nav_list or something similar and make sure that the Insert As Fluid Element option is selected. Click OK.
- Click in the unordered list area in Design view, and then click the List Item option in the Insert panel (see Figure 14). Change the class name to list_item or something similar, make sure that the Insert As Fluid Element option is selected, and click OK.
- The <li> tag with classes applied should show in the code now. Next, you’ll add three more list items to the list by duplicating the original list item.
- Click the Mobile Size button just so that you can see the entire design in the mobile-sized window.
- With the cursor in the list item in Design view, click the Duplicate LI.list_item button (shown in Figure 15) to create a copy. Click the same button when the new list item appears, until you have four list items.
- Select the text in each list item, and add text like “contact us,” etc. that will eventually become the site navigation (see Figure 16).
- Click in the bottom list item in Design mode (mine says “my blog”), shown in Figure 17. Click the arrow above the list item to reorder the list items (swap the list items).
)
Figure 11 Insert the cursor
)
Figure 12 Insert the <nav> element
)
Figure 13 Insert an unordered list
The code view will open to show you the <ul> tag that was inserted.
)
Figure 14 Insert a list item
)
Figure 15 Duplicate the list item
)
Figure 16 Change the text in the list
)
Figure 17 Swap the list items
You can reorder just about any of the fluid elements, unless they are nested in such a way that it can’t happen.