Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Covering diverse topics such as improving workflow and managing CSS styles, Dreamweaver CS3 Beyond the Basics is a hands-on course that teaches users how to move beyond standard, static websites. Instructor James Williamson explores how to increase productivity, interactivity, and accessibility with Dreamweaver. He also discusses how to extend the application's capabilities with XML and XSL. Exercise files accompany the tutorials.
Welcome back to our Accordion widget exercises. Now, other than adding or deleting panels, Dreamweaver doesn't give us a lot of options to control how our Accordion widget behaves. So in this exercise, we'll change our panel heights to reflect the actual content inside and change which panel displays by default. So just to review really quickly, we'll go ahead and preview this in the browser again, and I'll scroll down. Notice that the Image panel loads first, and then the Painting Information loads and A Note from the Artist loads. Well, they are all of the same height and we passed that in through cascading style sheets in the last exercise. So they are all exactly 250 pixels tall. Well, that's way too tall for the Painting Information. It's just about right for the Note from the Artist, but the image, not even close.
Now click in the image. Now, if we look at the Tag Selector, we see that our image is actually surrounded by a paragraph tag and that's causing a bit of an issue. We made the image tag a block level element, and then assigned some padding to it. Well, it's wrapped up in a paragraph tag which is actually throwing additional padding on it, and that's causing the image to slide way too far over to the right. So, using the Tag Selector, I am simply going to either right-click or on a Mac, Ctrl- click on the Paragraph tag, and I am just going to choose Remove Tag and that will remove that extra bit of padding and now our image is going to show up exactly the way we need it to.
So, there's a little bit of an error there. That when we test this, the text is hidden until somebody refreshes it. What this will do for us is it will make sure the image and the text is hidden first and to view it, somebody's going to click it, it will reset it, and they'll never see that problem. So we'll go ahead and save our file, test this in a browser. And as I scroll down, notice that A Note from the Artist is the first thing that opens up. If I click on the image, it expands to not only show the image but the text underneath it so it uses exactly the height it needs and then Painting Information animates into its place and uses just the height it needs. So, we can see that each of these panels has a variable height and that's a really neat effect.
Find answers to the most frequently asked questions about Dreamweaver CS3 Beyond the Basics.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.