Wiki Entries

---

Floating: A quick and easy way to wrap text around images - by Bill Bennett

In order to quickly float an image you can insert an inline style at the code level. All you need to do is to add the style attribute to the tag, it is also a good idea to add some margin spacing, as shown in figure 1.

Have no fear, you don't have to actually go into code view to make this happen. While in Dreamweaver's Design View, simply right-click on the image you want to float, and from the context menu that appears choose "Edit Tag <img>" (or select the image and press shift+F5 on your keyboard). A Tag Editor dialog box will open. In the left column of the dialog box click on Style Sheet/Accessibility, then type in your style information, e.g float:left;margin-right:5px in the Style: input box located in the right column of the dialog box. Click OK and your image will float to the left with your text wrapping around it to the right spaced 5 pixels away from the right-hand edge of the image - just like this text is wrapping around the image to the right (see figure 2).

Figure 1 illustrates each of the components that make up an inline CSS Rule. Each CSS rule is made up of 1 or more style declarations. It is important to note that style declarations are separated by semi-colons ";", e.g. declaration1; declaration2; declaration3; etc. Each style declaration consists of a property:value pair. In our example "float" is the property in declaration 1 and "left" is the value in declaration 1, notice that the property is separated from the value by a colon ":". For a complete listing of CSS 2.1 properties goto http://w3.org/TR/CSS21/propidx.html.

Reference: http://www.w3.org/TR/CSS21/syndata.html

CSS Zen Garden — by Bill Bennett

In order to help you understand the power of Cascading Style Sheets I am posting this link to the CSS Zen Garden for you to view. The idea behind this site is that all of the content you see on the screen is content marked-up in standard HTML notation. Click on the links that are initially on the right of the page (the links will move as you view different pages), what you will see is the exact same HTML page content, the only difference is a different style sheet is linked to it, a style sheet which was created by another Web designer. Some of the Web's most notable designers have created style sheets for this site. Enjoy!

How to Insert an Image as a Smart Object — by Bill Bennett

Dreamweaver CS4 and CS5 allow you to insert "Smart Objects" into a Web page. Smart objects are image objects that after being inserted into a Dreamweaver document, retain a link to the original file. This means that a Photoshop image can be imported into Dreamweaver using its native format - PSD, converted to a GIF, JPEG, or PNG file for use on the Web, but can still be edited as a PSD file when you want to make changes to the image in Photoshop. Once you've completed making changes to the image in Photoshop, Dreamweaver will automatically update the Web-based GIF, JPEG or PNG file. This way you can keep changes made to PSD files in Photoshop synchronized with the Web-based image that is linked to it. Pretty "Smart", right?

Form Validation: Preventing GIGO — by Bill Bennett

Once you've created your form and configured your server to accept the data from it, you're not done yet. In order to prevent what is known as "garbage in, garbage out" (GIGO), you need to setup form validation to help prevent users from submitting unusable data to your database.

In Dreamweaver you have two options for adding validation to forms, the built-in Dreamweaver JavaScript behavior Validate Form or by inserting one of the more sophisticated Spry Validation options.

In order to use Dreamweaver's built-in Validate Form behavior, open Behaviors from the Dreamweaver Window menu (not to be confused with Server Behaviors) (see figure 3). In the Dreamweaver Behavior panel click on the plus (+) symbol and choose Validate Form from the menu (see figure 4). Next, select the form object you want to add validation to from the list of fields in the Form Validation dialog box. Depending on the form object your select you will have several validation choices that you can apply including: required and the assign to restrict the type of data a form field will accept as input.

Where the Dreamweaver Validate Form behaviors require you to add your form objects into the form first, the Spry method lets you add the form object and the validation at the same time. To add a Spry form element to your form, first position your insertion point somewhere inside of the form and then open the Insert menu form the Dreamweaver Menu bar. From the Insert menu click on Spry and then choose which Spry form object you want to add to your form (see figure 5). Fill in the Tag Accessibility Attributes and click OK. In order to apply your form validation options to the selected Spry object use the Dreamweaver Properties panel (see figure 6).

On the Properties panel you can choose a validation Type to assign to your Spry form object, with choices like email, URL, credit card, zip code, etc. You can also choose a data Format, create an acceptable character Pattern, set the minimum and maximum numbers of characters that the field must contain, and identify when to apply the validation to the object - on Blur, Change, or Submit. One of the features that make the Spry Form Validation method superior to the built-in Dreamweaver Validate Form behaviors is that the Spry form objects have built in feedback that users will see if they enter data incorrectly.

Form validation will not completely resolve your form generated GIGO issues, but taking the time to add validation to your form fields will cut down on errors tremendously.