- Bring On the Art!
- Get Your Files Here
- Define the Chapter 4 Website
- Image File Formats for the Web
- Project 4.1 Prototyping and Designing with Background Images
- Project 4.2 Inserting and Editing Images
- Project 4.3 Floating Images into Position
- Project 4.4 Creating Structured Layouts with Images
- Project 4.5 Styling the Header Area
- Challenge! Create Your Own Design with Photoshop
- Conclusion
This chapter is from the book
This chapter is from the book
This chapter is from the book
Project 4.3 Floating Images into Position
ACA Objective 1.5
ACA Objective 2.3
ACA Objective 2.4
ACA Objective 4.1
ACA Objective 4.3
VIDEO 4.7
Floating Images into Position
VIDEO 4.8
Accessible Images
You have inserted the images for the home page into your prototype page, but they still don’t look like the design comp. The two images are currently resting on the baseline of the paragraph that contains them. But you can nudge them to the location you want using the CSS float property.
In this project, you’ll float the two images into place. You’ll also learn some of the principles of floating images, learn how to set the clear property so that your floats behave themselves, and use some Dreamweaver tools that make this type of work go more quickly.
Create and Apply a CSS Class Selector
By default, images that are inserted into a web page rest on the baseline of the element on which they’ve been placed. When images are inserted into a paragraph, the image will set along this invisible line along the same line of text that is adjacent to them. The CSS float property is used to disengage the image from the baseline and allow the text to flow around the image.
Open prototype.html in Dreamweaver. Make sure the two final versions of the cartoon characters—Ray and Ronni—that you inserted in the last project are positioned where you want them on the page.
Open the CSS Designer panel. Click the + at the top of the Selectors section, as you see in Figure 4.24. Dreamweaver will create a new blank Selector field where you can name the selector.
Figure 4.24 Adding a class selector in the CSS Designer panel and assigning properties
Name the new selector .float-right and press Enter/Return to accept the name.
In the Layout Properties category, click the float-right property button.
You have now created and named a new class selector that can be used over and over again within the document.
It’s a good idea to apply a bit of padding to an image so that text doesn’t jam up against the side of the image, making the text harder to read.
Click the symbol in the middle of the padding properties section. Set a padding value of 5 px in one location. Dreamweaver will duplicate the setting to the other three sides all at once—slick!
Now you can assign the .float-right property to one of your images.
Select the ronni-edited.png image on the web page.
From the Class dropdown menu in the Property inspector (Figure 4.25), select .float-right.
Figure 4.25 Applying a float selector to an image
The image floats to the right of its container, and the text flows around the image. You can drag the image into different areas of the page, but the image will always float to the right of its container no matter where you drop it.
)
)
Duplicate and Apply a CSS Class Selector
You still need a class selector to float an image to the left, but Dreamweaver has a nice way to make this process quick and easy. You can duplicate the existing selector, modify the name, and change the values for the new selector.
Right-click the .float-right selector (in the CSS Designer panel). Select Duplicate from the context menu. Dreamweaver makes a copy of the selector, and your cursor will be positioned inside the name of the new rule.
Change the name of the new selector to .float-left and press Enter/Return to accept the new name.
In the Properties section of the panel, change the float setting to left.
Use the Classes setting in the Property inspector to apply the .float-left class to the Ray the Werewolf image. The image floats to the left side of the content container.
Modify CSS Float Properties and Apply Clear Values
The design is looking good, but the image of Ronni floated to the right is smashed up against the right border of the container. You could have an issue with overlapping images when you begin floating more images into place. In the next steps, you’ll adjust the padding on the .float-right class and set the clear properties that will prevent the floated images from overlapping other elements that have been floated.
In the CSS Designer, select the .float-right selector.
In the Properties panel, click the center of the Padding section to unlock the settings, and change the right padding setting to 15 px, as in Figure 4.26.
Figure 4.26 Modifying the .float-right class selector and setting the clear value
The other settings will remain the same as you change this one value. Setting the clear values for each float class is just as easy.
With the .float-right selector still selected, click the both value for the clear setting.
Select the .float-left selector, and repeat the process of setting the clear value to both.
With both float classes properly set to clear: both, the next image you float will position correctly without any overlap.
)
Add Alternative Text to Images
For web pages to be accessible to individuals with vision and other disabilities, web page images must always include alternative text. Most US government agencies require web pages to meet accessibility standards (it is also the law in other countries, such as Australia, and in the European Union). It’s also just a good practice to follow because the description will display in the event the image doesn’t display for some reason. Assistive devices, such as screen readers, will read the alt text to an individual who might not be able to see the image clearly. It’s also helpful when your site is indexed by search engines. If the image adds meaning to the web page, include descriptive alternative text. For example, instead of using “my photo” as alternative text, use “photo of me sitting at the beach watching the waves.” One gains a much greater understanding of the image contents from the latter text than from the former. Adding alt text is usually handled in the Property inspector.
Select the image of Ray.
In the Alt field in the Property inspector (Figure 4.27), type Ray the Werewolf in his relaxed pose. Click anywhere on the page to accept the value.
Figure 4.27 The Alt text field and Title field in the Property inspector
In the Title field of the Property Inspector, type Ray the Werewolf. Click anywhere on the page to accept this value.
Select the image of Ronni.
In the Alt field, type Ronni the Vampire in her relaxed pose. Click outside the field to accept the value.
In the Title field of the Property inspector, type Ronnie the Vampire. Click outside the field to accept the value.
)
See how easy it is to make your pages more accessible?
This project introduced you to the concept of floating images—the process by which a CSS rule is applied to an image so that text can flow around the image. You now know how to use Dreamweaver to create a new class selector, how to assign the properties and values you want to the selector, and even how to duplicate a selector to make the design process go a little faster. You’ve also learned about how to assign alt text and titles to images so that your work meets accessibility standards. Another nice piece of work!