Floats in Dreamweaver
● This tutorial introduces the concept of floating.
● Insert images in Dreamweaver and float them using inline CSS.
✓ Image Size in Photoshop✓ inline tags✓ CSS ✓ float
Other People's Work:
Here are examples of work inspired by this tutorial.
Now you have 2 images floated left and right and you can type descriptions next to them with your text floating around them.
This is called float. The only problem with floating is that you must clear the float to make your content fit properly.
Often times the float interferes with your presentation.
The answer is to clear the float. Copy and paste this code just before the last closing div tag.
Step #1: Find an Image and Open it in Photoshop ~
✗ If you've already got an image embedded on your page, use that - skip to Step #5 …
✗ Otherwise, collect some images your artist created and open them in Photoshop - at least 2 for starters …
Step #2: Set the Resolution ~
✗ Go to: Image > Image Size and set the resolution to 72 for each image.
✗ Remember - 72 is the highest resolution a computer screen can show.
Step #3: Image Size ~
✗ Lower the width on the images to approximately 300 pixels.
✗ If necessary, Crop the images to get them to fit.
✗ You may have to crop your images to save the only best parts …
✗ Just do your best to get your images small without sacrificing too much quality.
Step #4: Save for Web ~
✗ Lastly, go to: File > Save for Web and save your images as .jpg
✗ Lower the quality until the size is below 100 kilobytes, on average.
✗ Backgrounds for websites should be as small as possible. They must be downloaded every time your viewers open your pages so it's important to keep it as small as possible so they load quickly.
✗ Save the images in the ROOT FOLDER OF THIS PROJECT!
Step #5: Open Dreamweaver ~
✓ Open your page in Dreamweaver – or any page with a picture …
✓ … click inside your #content area or wherever you want your image …
✓ … and go to: Insert > Image … and locate the image you saved in your root folder.
✓ Then type a short description of the image …
Step #6: In-Line CSS ~
✓ Find the code in Split view …
✓ … and type a space before the closing /> tag, type s t y and watch for the code hints to pop up …
✓ … so it looks like this:
Step #7: Float ~
✓ Click between the parentheses and type the letter f to bring up the code hints again select float …
✓ … select left or right depending on which side of the div you want your image.
Step #8: So What?
✓ Now you can type text next to the image and it will "float" next to it:
Step #9: Float right ~
✓ Again, go to: Insert > Image, find your other image and insert it into your content div.
✓ This time, set the float style to the other side …
✓ You can have two floated images on either side of your text.
Step #10: Padding ~
✓ Your text probably touches your images - and That's Bad!
✓ Add a semi-colon after
✓ … and add padding: to your left floated image …
✓ … and set it to 10 or 15 px.
Step #11: Clear the float ~
✓ The only problem with floats is they mess with your layout! Save your work and Preview …
✓ Does it do this?
✓ You must CLEAR the FLOAT to make everything fit again. Copy this code and paste it after your last floated element.
<div style="clear: both;"> </div>
Last Step: Save and Upload your site ~
✓ Upload your site with the work you completed, attach the link to your site where the work is located …
✓… and continue to the next tutorial: 174_img_padding_Dw.htm
Other Resources: http://www.quirksmode.org/css/clearing.html