Create a responsive Bootstrap layout in Dreamweaver — Part 1

To start a website in Dreamweaver

  1. On your computer, create a new root folder that will contain your website files. (In class: Title this folder portfolio.)
  2. Create an images folder inside the website folder.
  3. Define your folder as a website in Dreamweaver.
  4. Export the site definition into the website folder. (In class: Export the definition into the portfolio folder.)

Remember these important concepts as you work in Dreamweaver:

To start a new style sheet

  1. On the File menu, click New.
  2. In the New Document dialog box, click New Document.
  3. Under Document Type, click CSS.
  4. Click Create.
  5. Delete any existing code from the new style sheet.
  6. On the File menu, click Save.
  7. Click the Site Root button to make sure you're storing the style sheet in the proper location.
  8. In the File name box, type an appropriate name for your style sheet.

    Note: You could use a general file name, such as styles.css, or a more specific file name based on your project, such as portfolio.css.
  9. Click Save.
  10. Close the style sheet tab.

To start a new template

  1. On the File menu, click New.
  2. In the New Document dialog box, click New Document.
  3. Under Document Type, click HTML.
  4. Under Framework, click the Bootstrap tab.
  5. On the Bootstrap tab, next to Bootstrap CSS, click Create new.
  6. Next to Attach CSS, click the Attach style sheet button, click Browse, navigate to and select the CSS file you created above, and then click OK.
  7. On the Bootstrap tab, next to Design, clear the Include a pre-built layout check box.
  8. Click Create.

New Document dialog box with proper settings 

To add Bootstrap structure to the template

  1. Make sure the template file is open, switch to Live view.
  2. In the visual media queries at the top of the screen, click the purple 768px entry.

    VMQ minimum 768px
  3. Click anywhere inside the page, and then make sure the body tag is selected in the tag selector.
  4. On the Insert menu, point to Bootstrap Components, and then click Container.
  5. Make sure the div.container tag is selected in the tag selector, and then on the Insert menu, point to Bootstrap Components, and then click Grid Row with column.
  6. In the Insert row with columns dialog box, click Nest, change the No. of columns to add to 1, and then click OK. (This row will become the header row.)

    Insert row with columns dialog box with a nested 1 column row
  7. Make sure the newly inserted div.row is selected in the tag selector, and then on the Insert menu, point to Bootstrap Components, and then click Grid Row with column.
  8. In the Insert row with columns dialog box, click After, change the No. of columns to add to 1, and then click OK. (This row will become the navigation row.)

    Insert row with columns dialog box with After and 1 column selected
  9. Make sure the newly inserted div.row is selected in the tag selector, and then on the Insert menu, point to Bootstrap Components, and then click Grid Row with column.
  10. In the Insert row with columns dialog box, click After, and then do one of the following:
  11. Make sure the newly inserted div.row is selected in the tag selector, and then on the Insert menu, point to Bootstrap Components, and then click Grid Row with column.
  12. In the Insert row with columns dialog box, click After, change the No. of columns to add to 1, and then click OK. (This row will become the footer row.)

To insert the HTML5 components into the Bootstrap framework

  1. Switch to Split or Code view.
  2. Locate the first row, which will probably be around line 21.
  3. Change the div to header so that the entire opening tag now reads <header class="row">.
  4. Change the closing </div> tag around line 23 to </header>.
  5. Locate the second row, which will probably be around line 24.
  6. Change the div to nav so that the entire opening tag now reads <nav class="row">.
  7. Change the closing </div> tag around line 26 to </nav>.
  8. Locate the third row, which will probably be around line 27.
  9. Change the div to article so that the entire opening tag now reads <article class="row">.
  10. Change the closing </div> tag around line 29 to </article>.
  11. Locate the fourth row, which will probably be around line 30.
  12. Change the div to footer so that the entire opening tag now reads <footer class="row">.
  13. Change the closing </div> tag around line 32 to </footer>.

    Code after inserting HTML5 elements
If you have created a two-column or three-column layout, your line numbers will differ for setting up the rows. You'll also have two or three additional items to account for inside the <article> element. Any <div class="col-sm-12"> nested inside the <article> element will need to be changed to a more specific element. For example, any sidebar would need to be changed to <aside class="col-sm-12"></aside>. The main content area would also need to be changed to <section class="col-sm-12"></section>. Next, you'll need to change the col-sm-12 classes to account for how many units of the two-column grid you want to use for each element. For example, if you have a two-column layout, you may want the <aside> to take up 3 or 4 units of the 12 and the section to take up the remaining 9 or 8 units, respectively. For a three-column layout, you may want each <aside> to take up 3 units and the section to take up the remaining 6 units. Notice that the units must always add to 12.

To set up the editable regions within the template

  1. Switch to Design view.
  2. In the first row, type Insert heading here.
  3. In the second row, type Insert navigation here.
  4. In the third row, type Insert main heading here, and then press Enter to create the first paragraph and to move the cursor to the second paragraph.
  5. In the new paragraph, type Insert content here.
  6. Click inside the line that reads Insert main heading here.
  7. In the Properties panel, in the Format list, click Heading 2.

    Note: The keyboard shortcut for a heading is Ctrl+the heading level (Windows) or Command+the heading level (Mac).
  8. Do one of the following:
  9. On the Insert menu, point to Template, and then click Editable Region.
  10. When the Dreamweaver will automatically convert the document to a template message appears, click OK.
  11. In the New Editable Region dialog box, select the default text in the Name box, type Content, and then click OK.

    Note: If you are using a two-column or three-column layout, select each aside tag from the tag selector, and then insert an editable region labeled Sidebar (for a two-column layout) or Sidebar1 and Sidebar2 (for a three-column layout).
  12. In the last row, type Insert footer here.
  13. In the Document Title box, type an appropriate title for your site.

    Note: For the in-class example, I'm using Michael Stowe Web Portfolio | Add title here.
  14. On the File menu, click Save.
  15. In the Save as box, type a name for your template (such as template), and then click Save.

To see your work so far in Design view

To see your work so far in Live view