Create a responsive Bootstrap layout in Dreamweaver — Part 3

Style the <h2> inside the <article>

When creating your own site

  1. Click the main heading within the content editable region to help Dreamweaver determine what you wish to style.
  2. In the CSS Designer panel, under Sources, click your style sheet file.
  3. Under @Media, click GLOBAL.
  4. Next to Selectors, click the Add Selector button Add Selector button.
  5. In the selector name box, make sure the box reads article h2, and then press Enter.

    Note: Remember that different page divisions can have different heading hierarchies, so we should create a specific selector. Otherwise, because of inheritance, all Heading 2s, regardless of division, would look the same.
  6. Using good style decisions, use the CSS Designer panel to format the Heading 2 in the article area.

To style the <h2> inside the <article>

  1. Switch to Live view.
  2. On the lorem.html page, click within the content editable region.
  3. In the CSS Designer panel, click your style sheet, and then click GLOBAL.
  4. Click the Add Selector button Add Selector button, and then name the new selector article h2.
  5. In the CSS Designer panel, under Properties, click the Text button Text button.
  6. In the font-size box, type a percentage size for your main heading, such as 250%.
  7. If you want the headings to be bold, set the font-style to bolder or bold or to a number value above 600.
  8. In the Color box, type or select a color for your Heading 2. (In class, we used Adobe Color CC.)

    Note: If you want to use a color schemer other than Adobe Color CC, see the color pickers and color schemers links on my website for assistance.
  9. In the CSS Designer panel, under Properties, click the Border button Border button.
  10. Click the Bottom border button Bottom border button.
  11. In the width box, type 1px.
  12. In the style list, click a style.

    Note: Solid or Dotted are good options.
  13. In the color box, type or select a border color.

    Note: Good border color options include the color of your Heading 2, another color from your color scheme, or black.
  14. In the CSS Designer panel, under Properties, click the Layout button Layout button.
  15. Under padding, in the padding-bottom box, type a value to separate the border from the heading, such as 5px.
  16. On the File menu, click Save All.

    Note You may not see the bottom border in Design view. You may need to switch to Live view or preview the webpage in a web browser to see it.

Style the <h3> inside the <article>

When creating your own site

  1. Click inside any subheading within the Content editable region.
  2. In the CSS Designer panel, under Sources, click your style sheet file.
  3. Under @Media, click GLOBAL.
  4. Next to Selectors, click the Add Selector button Add Selector button.
  5. Make sure the selector name box reads article h3.
  6. Using good style decisions, format your Heading 3.

To style the <h3> inside the <section>

  1. On the lorem.html page, click inside the first subheading within the Content editable region.
  2. In the CSS Designer panel, click your style sheet, and then click GLOBAL.
  3. Click the Add Selector button Add Selector button, and then name the new selector article h3.
  4. In the CSS Designer panel, under Properties, click the Text button Text button.
  5. In the CSS Designer panel, under Properties, click the Layout button Layout button.
  6. If you want the subheading to be bold, set the font-style to bolder or bold or to a number value above 600.
  7. If you want more space to appear above the subheadings, set the margin-top to a larger value, such as 20px.
  8. If you want less space to appear between the subheadings and paragraph text, set the margin-bottom to a smaller value, such as 4px.

Style the <p> inside the <article>

When creating your own site

  1. Click inside any paragraph within the Content editable region.
  2. In the CSS Designer panel, under Sources, click your style sheet file.
  3. Under @Media, click GLOBAL.
  4. Next to Selectors, click the Add Selector button Add Selector button.
  5. Make sure the selector name box reads article p.
  6. Using good style decisions, format your your paragraphs for the main content area of your page and site..

To style the <p> inside the <article>

  1. On the lorem.html page, click inside a paragraph within the Content editable region.
  2. In the CSS Designer panel, click your style sheet, and then click GLOBAL.
  3. Click the Add Selector button Add Selector button, and then name the new selector article p.
  4. In the CSS Designer panel, under Properties, click the Layout button Layout button.
  5. In the CSS Designer panel, under Properties, click the Text button Text button.
  6. In line-height box, type a value for the spacing between lines the paragraph, such as 1.5em.

    Note: A value between 1.2em and 1.7em usually works well.
  7. On the File menu, click Save All.

If you're using sidebars in your site

  1. On the lorem.html page, click inside a paragraph within the Content editable region.
  2. In the CSS Designer panel, click your style sheet, and then click GLOBAL.
  3. Click the Add Selector button Add Selector button, and then name the new selector aside h2.
  4. In the CSS Designer panel, under Properties, click the Text button Text button.
  5. Set the font-size to any value you wish. To deemphasize the Heading 2s in the sidebars, you may want to set the Heading 2 to a smaller value than you used for the Heading 2 within the <article>.
  6. If you want smaller text in the sidebar, click the Add Selector button Add Selector button, and then name the new selector aside p. Change the font-size or font-family to suit your tastes.

Adjust the font size for body text

If you feel as though your body text is too small, you can adjust the overall size from the body rule in the CSS Designer. Your headings will also scale up if you make this adjustment, because they're based on a percentage of the body size.

Another option is changing the font size only in the article p rule, which won't affect your headings. But you will also need to include a rule for article ul li, article ol li that uses the same font size as the article p rule. Otherwise, any lists you use will have a smaller font size than the paragraphs.

Don't change the font size in both areas, though, or you could end up with very large body text.

To adjust the font size through the body rule

  1. In the CSS Designer, select your style sheet, click GLOBAL under @Media, and then click the body selector.
  2. In the CSS Designer panel, under Properties, click the Text button Text button.
  3. In the font-size box, type a value in pixels, such as 15px.

To adjust the font size through the article p rule

  1. In the CSS Designer, select your style sheet, click GLOBAL under @Media, and then click the article p selector.
  2. In the CSS Designer panel, under Properties, click the Text button Text button.
  3. In the font-size box, type a value in percentages, such as 105%.
  4. Click the Add Selector button Add Selector button, and then name the new selector article ul li, article ol li.
  5. In the font-size box, type the same value in percentages that you used for the article p rule, such as 105%.

Create footer content in the template

When creating your own site

  1. Open your template file.
  2. In the <footer> element, over the placeholder text, type your footer information.
  3. When prompted, apply the changes to all pages created from your template.

To create footer content in the template

  1. Open the template page in Design view.
  2. Select the placeholder text.
  3. On the Insert menu, point to HTML, point to Character, and then click Copyright.
  4. Press the spacebar, and then type the year of the copyright and the copyright holder.

    Note: If you complete work for a business, organization, etc., remember that the entity holds the copyright.
  5. Press Enter.
  6. Type Last updated followed by a space.
  7. On the Insert menu, point to HTML, and then click Date.
  8. Select an appropriate date format, with the default option usually being the best.
  9. Select the Update automatically on save check box.
  10. Press Enter.
  11. Type your email address, and then select it.
  12. On the Insert menu, point to HTML, and then click Email Link.
  13. In the Email Link dialog box, check the contents of the Email box to make sure your email address matches what you've typed, and then click OK.