Creating Typography Templates - Exercise

Contact Us or call 1-877-932-8228
Creating Typography Templates - Exercise

Creating Typography Templates

Duration: 15 to 25 minutes.

In this exercise, you will create a set of templates to use on websites (Dreamweaver CSS).

If you do not have Adobe Dreamweaver installed, please feel free to use your favorite text editor and browser to alter the HTML code. Dreamweaver is not required, it simply makes the edits a bit faster.

  1. Using Dreamweaver, open build-an-efficient-style-guide/Exercises/amendments.html.
  2. Using the Properties panels and the CSS STYLES panel, create styles to handle all of the text.

Solution:

  1. Using Dreamweaver, open build-an-efficient-style-guide/Exercises/amendments.html.
  2. Select "Amendment I" and use the Properties panel to set a CSS rule.Properties Panel
    1. In the Properties panel, click on CSS and then click Edit Rule.CSS and Edit Rule in the Properties Panel
    2. Choose Tag (redefines an HTML element) from the Selector Type drop-down. Click OK. New CSS Rule Box
    3. Choose the formatting options you want all of the <h1> tags to use. Click OK.CSS Rule Definition for h1 Box
    4. The <h1> tags now have a uniform look.h1 Tags with Uniform Look
    5. Repeat steps to create a <p> tag.New CSS Rule Box
    6. We will need to use a class style to create a note area at the top. Create a new rule.CSS Styles New Rule
    7. Name the rule ".note".Selector Name Field in New CSS Rule Box
    8. Set the type options and the border options as well to create a line around the text. Click OK.CSS Rule Definition for .note Box
    9. Select the note text and use the HTML properties to set the Class to note.Selected Note and HTML in the Properties Panel
    10. Save and close the file.