Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Adding background graphics

From: Dreamweaver CS3 Projects: Creating Custom Spry Widgets

Video: Adding background graphics

Our Spry widget styling is almost complete and in this last exercise before we star customizing our Spry widget, we're going to add the background graphics. If I scroll down a little bit, I can see that all of our content panels are looking pretty good, but we don't have any imagery in there and we'd like a larger version of the image itself. So instead of using an image tag, we're going to use a background graphic and I talked about that a little bit before, but I want to go into a little bit more detail now. So we could have certainly inserted an image and then use the float left or float right on the image to have the text float around it.

Adding background graphics

Our Spry widget styling is almost complete and in this last exercise before we star customizing our Spry widget, we're going to add the background graphics. If I scroll down a little bit, I can see that all of our content panels are looking pretty good, but we don't have any imagery in there and we'd like a larger version of the image itself. So instead of using an image tag, we're going to use a background graphic and I talked about that a little bit before, but I want to go into a little bit more detail now. So we could have certainly inserted an image and then use the float left or float right on the image to have the text float around it.

One the problems with Spry widgets that animate is that as they animate a lot of times the floated text or floated elements will not float until the animation is fully resolved. It's as if the browser takes a moment to resolve the animation first before it resolves the float. And so because of that, it can be can be sort of buggy with the way it animates. You can have text that breaks one way as it animates and then breaks in another way as it stops. So to prevent that I've removed any floats from my content panel that's going to animate. And to do that, we've applied margins of left margins to our h2 and to our paragraph that's pushing it to the right and allowing enough space for our background graphic to show up.

You may have remembered from our earlier structure that each of our panels has an ID. Panel zero, one, two and 3. That's what we're going to use to hook our styles into to give ourselves our background graphics. So I'm going to flip over to Code View again, and you can see that I've opened up the Chapter 9 details_start file. So again, if you're following along with me, go into the Chapter 9 folder and open up detail_start. I'll collapse my panels. And I'm going to go right back up to the code we were just working on, which is in the head of a document. And about on Line 27 is what we're going to start with.

So I'll insert another break on this and I'll insert another CSS comment and here I'll add a little bit of a divider line. I'm going to type in 'formatting for background graphics.' And you can call that anything you want. That would be fine. Just some mental note to yourself about what these styles to follow next are going to do. So I'll click Enter or Return to go down to the next line. And on Line 29, I'm going to type in #mainContent. So again we're being very specific about where this is located. It's found in the mainContent region and it's going to add to the specificity of the rule and then #panel0 because panel zero is an ID so we use # for that. I'm going to open my curly brace and I'll type in background.

The first thing I'll do is add a color so I'm going to type in #A8BAAA. And again us that's the green color we were talking about. Now I start typing in URL, this is one of features I love about code hinting in Dreamweaver. As I type in U, the code hinting comes up and says URL and if I hit Return or Enter, it allows me to browse for that image. So that is really neat. I'm going to go into the Chapter 9 directory and to my images and inside my images, I'll find a folder called details. So I'll go in details.

And in my details, I'll find the hoody_detail. Now you might notice that in this directory, I also have another version of this call blur and that's going to come into play later on when we customize our animation to give the appearance of blurring as it animates. So we'll say OK. And now it says url images/details/hoody_detail.jpg. We'll set a couple parameters for it. We'll do no-repeat and we'll give it a horizontal positioning of 10 pixels away from the edge and then a vertical positioning of 5 pixels.

Type in a semicolon and don't forget to close your curly brace. Each of these panels is only going to change in the name of the graphic that's being used and the panel number. So this a prime candidate for copying and pasting. So I'm going to highlight the whole line, copy it, and paste it below the line. I'll change the panel number from zero to one so remember to do that in the ID of the selector. And then I'll change the graphic name from hoody_detail, and that is going to become tshirt_detail. Go ahead and paste that line again.

And this will become panel2, and that's going to change from hoody_detail to bag_detail. So the no-repeat, the horizontal positioning, the background color, those all remain the same. And let's do our last one, which will be panel3, and that one is to change from hoody_detail to longt and there's one other really important little thing. That one is details.JPEG. So as you're creating your graphics you might want to do a better job of making sure they're all the same. So the first one should read hoody_detail, the second one should be tshirt_detail, then bag_detail followed by longt_details (plural) .jpg, so you should be good there.

So we'll go ahead and save this file, and if I preview this in my browser, and if I scroll down, now I can see the background graphics and as I animate, look at that. That is a fully functioning widget. Now most people would leave their Sliding Panels widget right there. They wouldn't really extend it past that, but that's the whole point of customizing Spry widgets. So in our last movie, we're going to do a little additional class styling to enhance its functionality and we're going to pass some additional parameters into the constructor function to change the rate of animation to go along with a change in styling that we're going to make as well.

Show transcript

This video is part of

Image for Dreamweaver CS3 Projects: Creating Custom Spry Widgets
 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Dreamweaver CS3 Projects: Creating Custom Spry Widgets.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.