CSS Dropcap in Dreamweaver CS4
GoDaddy.com Hosting Plans Sale!
In this Dreamweaver Tutorial you can learn how to improve typography in dreamweaver by using css to capitalise a letter of a paragraph to make a dramatic dropcap effect. you can transform text and capitalize using a simple class to make the fancy dropcap effect.
CSS Dropcap Typography
A Drop cap is a large letter or initial which sits usually at the start of a paragraph and acts to pull the reader into the content of an article. Dropcaps are visually appealing components which can take a dull web page and give it a lift. A dropcap is also very easy to make and in this Dreamweaver typography tutorial you can learn how to style a css dropcap in no time at all.
The drop cap effect is obtained by floating the letter to the left and applying margins and padding.
The typography styling for a drop cap is made almost entirely in CSS. Once the styling for the CSS dropcap has been completed, simply adding a class span tag around the letter you wish to apply a drop cap to will turn that letter into a dropcap which you can use more than once on a page if you so wish. You could apply dropcaps to every paragraph in your web page and it wouldn’t look out of place.
A dropcap in Dreamweaver is easy to produce; the drop cap effect is obtained by floating the letter to the left and applying margins and padding as well as increasing the font size of the CSS dropcap. You can also change the font family declaration too which will really make the dropcap stand out.
The best way to apply a span tag to an element in your Dreamweaver typography webpage is to use the properties inspector to change the class of the letters you wish to add the dropcaps to. Highlight the letter in question, and look into the properties inspector just to the left of the bold and italic icons you will see the word ‘class’ with a dropdown menu beside it. Click on the dropdown menu and select the class that you have made for the CSS dropcap. It helps to name the span class for the drop cap, ‘.dropcap’ in your CSS style sheet.
If you prefer, you can read a written tutorial explaining how to implement CSS dropcaps with full code examples.
Related Tutorials:
Website Typography - Dreamweaver video Tutorial with free download
Pull Quotes in Dreamweaver - Dreamweaver Article Tutorial