Blockquotes in Dreamweaver

    ●   Every good website has pithy quotes!

Learn About:

Make an inset box, put some text in it and insert a quotation.

•   This tutorial is part of the Art Genre Project.

Other People's Work:

Here are examples of work inspired by this tutorial.

Every child is an artist, the problem is staying an artist when you grow up.
- Pablo Picasso


Step #1: Open your Project in Dreamweaver ~

Create a new CSS Rule …


… make it a class …

… and call it blockquote.

blockquote class tag

Dreamweaver thinks it knows better than you, just hit OK …

standard tag

… and OK again, and a new screen pops up - just hit OK for now …

just hit ok for now

Step #2: Open your new style~

Double-Click to open your styles sheet …

open your styles sheet

Scroll down and find the blockquote class you just made …

styles blockquote

Step #3: Add the Code ~

Copy this code …

     width: 300px;
     font: 18px/20px italic Times, serif;
     padding: 8px;
     background-color: #faebbc;
     border-top: 1px solid #e1cc89;
     border-bottom: 1px solid #e1cc89;
     border-radius: 10px;
     margin: 5px;
     background-image: url(openquote.gif);
     background-position: top left;
     background-repeat: no-repeat;
     text-indent: 23px; 
.blockquote span {
    display: block;
    text-align: right;

… and paste it between the .blockquote brackets { }


Step #4: Find a Quote ~

Go online and find a quote - from your subject, about your genre, any related quote that fits your project and copy it …

copy quote from web page

Step #5: Open your Website ~

Open a page of your website and find a place to put the quote, and don't forget the artist name.

Highlight your text and select the class you created in the Properties menu.

blockquote class select

Step #6: Give it a Break!

Find the name of the person you quoted and highlight it …

… then hit split to view the code (if necessary) …


… (this is an easy way to locate code quickly) …

locate code easily

… and add a <br/> tag after the quote, but in front of the name.

Step #7: Span Class ~

Laslty, add <span> </span> tags on either side of the author's name.

Step #8: Save your Page ~

Save your page, open it in a browser, and see what it looks like …

Step #9: Modify the Colors ~

Change the background colors of the blockquote if necessary by opening your style sheet …


Step #9: Quotation marks ~

Lastly, create a quotation mark image to accent your blockquote. Open Photoshop and create a new document …

Set your document size to 25px with a transparent background …

25 pixels

Using the Text Tool …

text tool

… type some quotation marks.


You may need to adjust the text size to fit your canvas.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

You also want to try different fonts …

Step #10: Save the Quotation marks ~

Lastly, go to: File > Save for Web and save your images as .gif


Save the file as openquote.gif

open quote

Save your image in the ROOT FOLDER OF THIS PROJECT!

Step #11: Save and View your Work … ~

Hit small to view your work.


Last Step: Save and Upload your site ~

If you have a web server, save your pages, upload them and attach the link.


Other Resources: http://css-tricks.com/examples/Blockquotes/