Create a responsive Bootstrap layout in Dreamweaver — Part 6

Organize styles

At this point, it's not a bad idea to make sure all the styles in the CSS panel appear in a workable order. Technically, only links must follow a certain sequence, but it's much easier to locate and keep control over styles if they appear in roughly the same order as they appear in the HTML.

To organize styles

  1. Open the CSS Designer panel.
  2. Under Sources, make sure your style sheet is selected.
  3. Under @Media, make sure GLOBAL is selected.
  4. Drag and drop any style to its proper location. Arrange the items so they appear in the order listed below:

Create the page header

To add the header text

  1. Open the template.dwt file in Design view.
  2. In the <header>, select the text that reads Header content goes here.
  3. With the placeholder text selected, type a name for your website.

    Note: If you're creating a portfolio, type your name.
  4. Click within the website name.
  5. In the Properties panel, in the Format list, click Heading 1.
  6. If you'd like to add an identifier (e.g., Web Portfolio), title (e.g., Technical Writer), motto or small description under the heading, click after the heading, and then press Enter.
  7. On the new line, type the desired text, and leave it formatted as a paragraph.
  8. On the File menu, click Save All.
  9. When you're prompted to update template files, click Update, and then click Close.

To set the header background

  1. In the CSS Designer panel, under Sources, click your style sheet file.
  2. Under @Media, click GLOBAL.
  3. Under Selectors, click the body selector to position the next selector under it.
  4. Next to Selectors, click the Add Selector button Add Selector button.
  5. Make sure the selector name box reads header.
  6. In the CSS Designer panel, under Properties, click the Background button Background button.
  7. In Background category, consider doing one of the following:

To style the header h1

  1. Make sure the template.dwt file is still open, and then switch to Live view.
  2. In the CSS Designer panel, under Sources, click your style sheet file.
  3. Under @Media, click GLOBAL.
  4. Under Selectors, click the header rule.
  5. Under Selectors, click the Add Selector button Add Selector button.
  6. Make sure the Selector Name box reads header h1.
  7. In the CSS Designer panel, under Properties, click the Text button Text button.
  8. (Optional) In the font-family list, choose a different font, if desired. You won't need an entire font stack as long as you don't mind the font reverting to the font stack for the body in case the font for header h1 doesn't load.
  9. (Optional) In the font-size box, type an appropriate size for the website name.
  10. In the color box, type or select a color for the website name that contrasts well against the background color or image.

    Note Remember that white is #fff and black is #000.

To style the header p

  1. In the header, click anywhere within the paragraph text.
  2. Click anywhere within the header text formatted as a Paragraph.
  3. In the CSS Designer panel, under Sources, click your style sheet file.
  4. Under @Media, click GLOBAL.
  5. Under Selectors, click the header rule.
  6. Under Selectors, click the Add Selector button Add Selector button.
  7. Make sure the Selector Name box reads header p.
  8. In the CSS Designer panel, under Properties, click the Text button Text button.
  9. Make any desired adjustments to the font-family, font-size, font-weight, and color.

To position the header text

  1. In the CSS Designer panel, under Selectors, click the header h1 rule.
  2. In the CSS Designer panel, under Properties, click the Layout button Layout button.
  3. Under margin, in the margin-top box and in the margin-bottom box, type 0px. If you need more spacing between the heading and paragraph, increase the size of the bottom margin until it looks right to you.
  4. On the File menu, click Save All.
  5. When you're prompted to update template files, click Update, and then click Close.
  6. Open your lorem.html page, and then preview it in a web browser.

Remove the border and border radius between the header and navigation

  1. In the CSS Designer panel, under Selectors, click the nav.row nav.navbar-default rule.
  2. In the CSS Designer panel, under Properties, click the Border button Border button.
  3. In the border box, type 0.
  4. In the border-radius box, type 0.