Friends

Saturday, October 1, 2011

Formatting Headings in Dreamweaver CS4

Next we will need to format the headings and subheadings within the content. To do this, go back into the Dreamweaver document window and select the heading text.
Apply the Heading 1 tag to it by selecting Format > Paragraph format > Heading 1.
Formatting Headings in Dreamweaver CS4
Similarly for the subheadings, select the subheading text and apply the Heading 2 tag to it [Format > Paragraph format > Heading 2].
Formatting Headings in Dreamweaver CS4

Styling our Headings and Subheadings

Now let us style the Heading 1 and Heading 2 tags to match the look we created in our layout.
To do this we will need to create a new style rule for the tags H1 and H2 in our styles.css file.
We can do this from the ‘Properties’ Panel as well by clicking on the “Edit Rule” button.
Formatting Headings in Dreamweaver CS4
In the ‘New CSS Rule’ Screen that opens up select the follwing:
  • Selector Type: Tag
  • Selector Name: h1
  • Rule Definition: styles.css
  • Click OK
Formatting Headings in Dreamweaver CS4
In the CSS Rule Definition for h1 screen give the following properties:
  • Type > Font-size: 18 px
  • Type > Color: Formatting Headings in Dreamweaver CS4#D6130A
  • Click OK
Formatting Headings in Dreamweaver CS4
Similarly define the style for the H2 tag. You page will not look like this:
Formatting Headings in Dreamweaver CS4

0 comments:

Post a Comment

#
### ###