Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design

  • Print
  • + Share This
Like this article? We recommend Editing the Layout

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.

  1. 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).
  2. 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.
  3. Figure 9 Delete a fluid element

  4. 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.
  5. Figure 10 Insert the <header> element

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

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.

  1. Click the Design view button in the upper-left corner of the Document window to hide the code if it’s showing.
  2. Insert the cursor just to the right of the header you inserted, but within the containing div. See Figure 11.
  3. Figure 11 Insert the cursor

  4. 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.
  5. Figure 12 Insert the <nav> element

  6. 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.
  7. Figure 13 Insert an unordered list

    The code view will open to show you the <ul> tag that was inserted.

  8. 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.
  9. Figure 14 Insert a list item

  10. 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.
  11. Click the Mobile Size button just so that you can see the entire design in the mobile-sized window.
  12. 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.
  13. Figure 15 Duplicate the list item

  14. Select the text in each list item, and add text like “contact us,” etc. that will eventually become the site navigation (see Figure 16).
  15. Figure 16 Change the text in the list

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

  • + Share This
  • 🔖 Save To Your Account