Authentic voices. Remarkable stories. AOL On Originals showcase the passions that make the world a more interesting place.
The story of punk rock singer Laura Jane Grace of Against Me! who came out as a woman in 2012, and other members of the trans community whose experiences are woefully underrepresented and misunderstood in the media.
Documentary shorts conceived of and directed by famous actors. Jeff Garlin, Katie Holmes, Alia Shawkat, Judy Greer, and James Purefoy
Park Bench is a new kind of "talking show" straight from the mind of born and bred New Yorker and host, Steve Buscemi.
Digital influencer Justine Ezarik (iJustine) is back. After covering the world of wearable tech last season, iJustine is expanding her coverage this year by profiling the hottest tech trends across the country.
Enter the graceful but competitive world of ballet through the eyes of executive producer, Sarah Jessica Parker. This behind-the-scenes docudrama reveals what it takes to perform on the ultimate stage, the New York City Ballet. Catch NYCB on stage at Lincoln Center.
Nicole Richie brings her unfiltered sense of humor and unique perspective to life in a new series based on her irreverent twitter feed. The show follows the outspoken celebrity as she shares her perspective on style, parenting, relationships and her journey to adulthood.
Explore what it means to be human as we rush head first into the future through the eyes, creativity, and mind of Tiffany Shlain, acclaimed filmmaker and speaker, founder of The Webby Awards, mother, constant pusher of boundaries and one of Newsweek’s “women shaping the 21st Century.”
Gwyneth Paltrow and Tracy Anderson spend time with women who've overcome hardship, injury, and setbacks to triumph in the face of adversity.
Hank Azaria’s touching, humorous, and often enlightening journey from a man who is not even sure he wants to have kids, to a father going through the joys, trials and tribulations of being a dad.
ACTING DISRUPTIVE takes viewers inside the businesses and passion projects of Hollywood’s top celebrities.
Follow Scott Schuman, the Sartorialist, from the streets of NYC to the capitals of Europe on his quest to photograph and document the best in culture and fashion.
Go behind-the-scenes with racing's hottest, young talent, 17-year-old Dylan Kwasniewski, as he aspires to make it in the #1 motorsport in America – NASCAR
Learn about creating Styles to format Images in this Adobe Dreamweaver CS3 Essentials training video series.
Tags:adobe,adobe dreamweaver cs3,create,essentials,format,images,styles,total training
Grab video code:
Put your cursor at the end of that sentence and let's add a Return, and let's insert an image. You can select any image you want out of this site for this purpose, but I am going to choose something from the cards section, images, how about, arctic. This painting is called Arctic Dreams. So for my Alternate text I am going use the name of the painting, Robin is a spectacular artist, and I do appreciate her graciously letting me use this site in this series.
Now, you can create styles in CSS to format text, but you can also create styles to format images and other elements. So for example, if I wanted to create a border around this image that was a particular color, I could create a style that would allow me to do so. There are number of ways I could do that, but for now let's use this as a chance to create a new style. Again, clicking on that little icon at the bottom of the CSS Panel, the one that's got the plus sign on top of it. This time I am going to create a Class style, because a Class style can be applied to any element on the page. So if I want to apply this to an image, I will be able to do so.
Now, Class styles always start with a period or a dot; don't ask me why, but as we go along I will point out that some styles start with a period, some start with a pound sign, and some don't start with any special character. As you get used to that you will realize that helps you to distinguish between the different kinds of styles. So for now just trust me, Class styles start with a period.
You can call styles anything you want as long as you don't use spaces or special characters, although you can use hyphens and underscores. So I am going to call this .image-border. When I click OK, I will come to the same CSS Style Rule definition. No matter what type of selector you choose as you create your style, you will always come to the same CSS Rule definition dialog.
Now, I said I wanted to create a border around this image, so you might guess that there is a category called border, and that's probably where I want to make these settings. So if I want a border here, I can choose to have a dotted, dashed, or let's just make a solid border.
Notice that throughout this dialog you will find little boxes like this that enable you to specify the same option for all four settings at the same time. Leaving all of those set as Same for all, now I will choose a thin border, and let's just make it black.
When I click OK, nothing changes, because Class styles don't actually make any difference until they are applied to the element. So Dreamweaver and a browser at this point would have no way of knowing that I wanted my image border style to create an images around this image. I have to apply that style to this image.
So simply click to select the image, and now notice in the Properties dialog at the bottom of the screen, you have a Style option. If I click here, any available styles will appear on this list. I just created image-border, so its sitting here waiting for me. When I click to select it, you see my border appears around the image.
Now let's add a little more text to this page. Let's highlight this and let's format it to match the headline. Now, your commonsense might say, look, I have got two styles over here; I have got an h1 style, I have got an image-border style, so I should go to my Styles Menu, and wait a minute, there is no h1 style here, there is just my image-border style. Well, that's because image-border is a Class style and all you are ever really going to see here are Class styles. h1 is already an option in Dreamweaver, its an existing tag.
So to apply the h1 tag with the new styling, I just apply the h1 tag like I always would. Choose from here, h1, and notice, when Dreamweaver styles it, it follows my new style definition for h1. You could of course now make this an h2 or an h3 and then define a different style for the h2. Later in this series you will see how you can actually create more specific styles so that you can use the h1 tag to format multiple selections of text on your page and still have your headlines look different in different sections. But I don't want to get too advanced at this point. The goal here is to get you started down the path towards CSS, that you can use CSS to format text, to change the display of an image, and as you will see soon, you can use CSS to position elements on a page as well.
If you want to change a style after you have created and applied it, you can use the CSS Styles Panel. So for example, if I select my image-border style, and let's say I want to change the color of the border, I can double click on it, come back to the Border category, and this time let's select, I don't know, maybe red, just so you will see the effect. Again, I can click Apply and see that instantly. When I click OK, Dreamweaver will save that new style, and anytime I apply that style now, it will have a red border instead of a black one.
The other thing to keep in mind is there are still settings specific to the HTML tag. So if I click to select this image, you will see the properties for the image up here. You can set any properties like the Border color here, the same way you can set them up here, but you are always going to be better off these days by creating CSS styles.
By the way, while we are here, I see a little typo, let me make this Arctic Dreams. That's another nice thing to keep track of, it's so easy with Alt text, when you are just typing that in quickly as you insert an image, to make a mistake like that. So as you are double checking other elements of your image, always double check your Alt text as well.