Join Joseph Lowery for an in-depth discussion in this video Setting up Spry tabbed panels, part of Layouts with CSS in Dreamweaver.
Tabbed panels provide designers with a great way to group content that is…extremely intuitive to use.…Like the other Spry layout widgets, Tabbed panels can be highly customized.…Let me show you what I mean.…On the page that we are looking at here, which is tours.htm, you can see a…series of tour descriptions one after another, there's four in here, but we…could have many more, and while that's all well and good, it does take up a lot…of screen real-estate.…Perhaps, a better approach would be to group them all in a Tabbed panel and I…have the final version of what we're going to be doing during this video to show you here.…
So here we have the Tabbed panels.…When we hover over any of the unselected ones, we get a different color and a…slightly different color when you are just hovering over the selected one.…But as you can see, it's the same content, and it groups it really, really well…into one concise space.…So let's get started on bringing in our Spry Tabs, and customizing them…with this web site.…
- 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
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.