Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

An Overview of CSS in Dreamweaver MX 2004 – Adding Content to the Page

Adding Content to the Page

To give you an idea of what we have, add some content to this page.

  1. Type: This is the way text will appear without additional styling. Click Enter/Return to move to the next paragraph.
  2. In the Property inspector, choose Heading 1 from the Format pop-up menu, then type: This is the way Heading 1 will look. Click Enter/Return to move to the next paragraph.
  3. In the Property inspector, choose Heading 2 from the Format pop-up menu, then type: This is the way Heading 2 will look. Click Enter/Return to move to the next paragraph.
  4. In the Property inspector, choose Heading 3 from the Format pop-up menu, then type: This is the way Heading 3 will look. Click Enter/Return to move to the next paragraph.
  5. Choose Insert > Table, and specify the following settings:
    • Rows: 2
    • Columns: 3
    • Table width: 100 percent
    • Border thickness: 1
    • Cell padding: 2
    • Header: click the third image, which shows the header at the top
  6. Click OK. A table of that size appears. In the table cells, enter the following information:
    • Column 1, row 1: Table heading 1
    • Column 2, row 1: Table heading 2
    • Column 3, row 1: Table heading 3
    • Column 1, row 2: Table content cell 1
    • Column 2, row 2: Table content cell 2
    • Column 3, row 2: Table content cell 3
    • Below the table, type: This is how a link will look. Highlight the word link and type in your favorite URL into the Link text box in the Property inspector. Note that the link appears blue in the Dreamweaver Design view. This is how it will appear in the browser as well since we did not specify a color for the link setting in the Page Properties dialog box. We specified a color for the rollover link and visited link, however.
  7. To see the other link settings, preview in browser by choosing File > Preview in Browser. If there are no browsers listed, click the Edit Browser List command and browse to locate at least one browser that Dreamweaver can use for previewing. By the way, not all browsers will show the rollover link (Internet Explorer 5 and above does).
  8. In the browser, click the link to go to the URL you specified. As you hover over the link, some browsers will display the brighter color and remove the underline.
  9. Use the browser’s back button to go back to the sampler page. The link text will now display the lighter color to indicate that you have already visited that link.
  10. Close the browser.

So far, everything we have done has involved defining styles for HTML tags. This means that the structure of the body content itself is not affected by the styling choices. But perhaps you want additional flexibility.

Comments