Join Joseph Lowery for an in-depth discussion in this video Styling Spry accordion panels, part of Layouts with CSS in Dreamweaver.
When I first heard the term accordion panels I thought, what, they play music?…Sadly, my fantasy did not come true.…Instead accordion panels are a wonderful addition to the designer's layout…palette that can hold a great deal of content in a concentrated space.…Let me show you one example of highly stylized accordion panels.…That's on this page here in the Our Services area.…If you click on any of the titles each of the panels fly up with a little…animation and expose the content.…
When you hover over labels they change its background color and it becomes bold.…These particular accordion panels are based on Adobe's Spry framework and in…this video I'll show you how I styled them to fit perfectly in my site as an…example of how you can integrate accordion panels into yours.…So let me close out this index.htm and show you this index.htm and if you scroll…down a bit you'll notice that there are no accordion panels yet installed.…We're going to do that right away.…So if you place your cursor right after Our Services and then select h2 we're…
- Exploring HTML5 templates in Dreamweaver
- Understanding document flow
- Using floats properly
- Resetting CSS styles
- Creating a 1-, 2-, or 3-column layout
- Deciding on a fixed width versus variable width design
- Coding layouts for HTML5 and CSS 3
- Incorporating floated elements
- Applying the faux column technique
- Using Spry widgets
- Using Multiscreen Preview
- Modifying desktop layout for tablets
- Developing smart phone layouts
Skill Level Intermediate
Site Navigation with CSS in Dreamweaverwith Joseph Lowery3h 24m Intermediate
Typography with CSS in Dreamweaverwith Joseph Lowery2h 30m Intermediate
Dreamweaver CS5 Essential Trainingwith James Williamson15h 22m Beginner
1. Dreamweaver Example Layouts
2. Layout Concepts
3. Basic Layouts
4. Interior Layouts
5. Alternative Screen Layouts
- Mark as unwatched
- Mark all as unwatched
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.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.