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 <img> tag, it is also a good idea to add some margin spacing, as shown in this example:
<img src="picture.jpg" alt="this is a picture" style="float:left; margin-right:5px" />
Have no fear, you don't have to actually go into code view to make this happen. While in 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 left.
Each CSS rule is made up of 1 or more style declarations. It is important to note that syle 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 ":". The image below illustrates each of the components that make up an inline CSS Rule. For a complete listing of CSS 2.1 properties goto http://w3.org/TR/CSS21/propidx.html.
CSS Zen Garden
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
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
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 order to use Dreamweaver's built-in Validate Form behavior, open Behaviors from the Dreamweaver Window menu (not to be confused with Server Behaviors). In the Dreamweaver Behavior panel click on the plus (+) symbol and choose Validate Form from the menu. 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 inclding: 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. 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.
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.