Cheat Sheet

Dreamweaver CS6 For Dummies

From Dreamweaver CS6 For Dummies by Janine Warner

If you're new to web design or have been creating HTML pages for years, Adobe Dreamweaver CS6 is the ideal tool for building your website. In version CS6, you find a new welcome screen and support for the latest in Cascading Style Sheets (CSS3) and HTML5. Dreamweaver is a popular program among professional web designers, as well as people who want to build sites for their hobbies, clubs, families, and small businesses.

The Adobe Dreamweaver CS6 Welcome Screen

Dreamweaver's easy-to-use graphical interface and powerful list of features makes it a popular choice among professional web designers, as well as hobbyists. With each new version, Dreamweaver CS6 offers new features, but you'll still find the familiar welcome screen to help you get started.

image0.jpg

Dreamweaver CS6: Adding Text Shadows with CSS3

In Dreamweaver CS6, you can enhance your designs and give your pages greater depth by adding text shadows with CSS3 rules, the latest in web technology. Adding text shadows makes your words easier to read, especially if your design has a complex background or if your background and text colors lack contrast.

[Credit: Paul Gual, istockphoto.com]
Credit: Paul Gual, istockphoto.com

Dreamweaver CS6 includes support for CSS3 text shadows when you use the Properties pane in the CSS Styles panel. You can create class or ID styles with text shadows, and you can add text shadows to existing HTML elements by defining a tag style, such as the heading 1 style used in the image.

The CSS3 code that creates that text shadow is

h1 {text-shadow: 2px 2px 3px #000;}

The numbers in the code specify that the text shadow should extend 2 pixels to the right and 2 pixels below the text with a 3-pixel blur. In addition, the shadow is created with the color black, specified by the abbreviated hexadecimal color code #000.

When creating rules for text shadows you can specify up to four values:

  • Horizontal and vertical: The first two number values are required and specify the horizontal and vertical offsets — the distance the drop shadow extends below the text (horizontal) and to the right of the text (vertical).

  • Blur radius: The third value specifies the amount of blur in the shadow. If you don't include blur radius, the default is 0, which makes the shadow appear as a solid color.

  • Color: The fourth value specifies the color of the shadow and can be defined using a hexadecimal color code or an RGBa color code.

You can add a text shadow using the Property pane at the bottom of the CSS Styles panel, as shown in the image. To do so, follow these steps:

  1. Click the Add Property link in the left side of the CSS Styles Property pane.

  2. Enter the CSS3 style rule name, text-shadow, or select the style rule from the drop-down list.

    After the name appears in the left side, a small arrow appears on the right.

  3. Click to select the arrow to the right of text-shadow.

    A box appears.

  4. Enter the X and Y offsets, blur radius, and color.

Websites and Resources for Web Designers

Experienced web designers — whether they use Adobe Dreamweaver or other web design software — often refer to online resources to keep up with their skills and add special features to their websites. This list makes it easy for you to find some websites and online resources that can help you with your web design projects.

blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.