 |
 |
        |
|||
Creating a pull-quote with CSS in Dreamweaver 8(beginner to intermediate level) A pull-quote is a way of creating visual interest in your text "A pull-quote is a way of creating visual interest in your text" and highlighting major or interesting concepts in your text. Basically a pullquote is a small snippet of text duplicated, enlarged, and styled to attract attention. As people tend to skim rather than read when viewing information on the web, a pullquote helps to attract your viewer's attention and hopefully piques thier interest enough so they will read further. Pullquotes are particularly suited to pages with larges amount of unbroken text blocks and help break the monotony of areas on your pages that consist mostly of text. The simple pullquote example to the left combines top and bottom coloured borders, margins, a different typeface and type size to emphasize a selected section of text. As pullquotes typically are in addition to the inline text, the text was first copied and then the style was applied to create the pullquote. Dreamweaver 8 CSS Styles palette makes the creation of pullquotes easy. Step 1: Creating a CSS Rule
The final option on this dialog box is where you want the CSS rule to be written. If you want to use your pullquote on mulitple pages you should choose the external style sheet option, you can either select an existing style sheet from the pulldown or create a new CSS style sheet. If you want the style to affect the current webpage only choose "This document only". Step 2: Defining the Rule
When finished click OK. As we have to apply this class to a section of text before we can see it we can't preview the changes using the apply button. Step 3: Duplicating the Pullquote Text:Typically, the text of the pullquote is in addition to, rather than instead of, text included in your paragraph. The first step is to copy the text you want to make a pullquote by blocking the text and either choosing Edit>Copy or using the hot keys Ctrl (win) + C or Cmd (mac) + C and then pasting the text right after the existing text by placing the cursor where you want the new text to appear and clicking the left mouse button to set the insertion point and then choosing Edit > Paste or Ctrl (win) + V or Cmd (mac) + V. You can add quotation marks around the copied text if your desire to make it look like a "quote". Step 4: Applying the Style:
That's it - you have a pullquote! While we have been using Dreamweaver 8's easy to use CSS Styles palette it has been paddling like a duck to write the actual CSS. If you take a look under the hood by clicking on the Code button at the top-left edge of the document window you can see that .pullquote style we created looks something like this.
.pullquote {
© TrainStation - an Adobe Authorized Training Provider |
Home | About | Training | Calendar | Register | Tutorials | Freelance | Contact | F. A. Q | Become an ACE
The first thing we need to do is create a new CSS rule to contain the definition of our pullquote. Start by clicking on the new styles button on the CSS Styles palette.(If you don't see the CSS Styles Palette showing at the top right edge of your working space, choose Window > CSS Styles or F11 to display the palette). 
Once you have clicked on the New CSS Rule button the New CSS Rule dialog box will open and you will have a choice of Class, Tag or Advanced. As we want the pullquote to only affect a certain section of our text that we will specify, we want to select Class. A class is used when you want to apply the style only to selected portions of your page, not every instance of a certain tag, such as a paragraph <P> tag. Give the class a name such as .pullquote. All classes start with a period. If you forget the period Dreamweaver will put the period in for you. 
Once you click Ok on the new CSS Rule dialog box the New CSS Rule Definition dialog box will launch. 
Block the copied text you are going to make a pullquote and select the .pullquote style from the Style dropdown in the property inspector.