Build a Dynamic Sliding Tabbed Panel in Dreamweaver
Creating the main panel and the tab containers
Now, to begin editing our HTML file, let's open up index.html up in Adobe Dreamweaver. Now, if you prefer to take this course in a more code-oriented tool, we're offering the same course in the lynda.com library using a text editor instead of Adobe Dreamweaver. Now inside of Dreamweaver, let's come over to the Code view of this particular document, and I want to point out some things that I've added into this file already. First is we have a link to the sliding_panels.css file. We also have a link into jQuery, a link into a sliding_panels.js file, and then down here we have links into a Google html5shiv, if the version of IE is less than 9. So here we're linking to the Google shiv.
This is going to ensure the fact that were using a document type here, which is for HTML5, that IE7 and 8 will be able to understand this. And we also have a link to a special IE CSS file so that we can redefine some of the CSS 3 properties that IE 7 and 8 don't support. And if you're using a more recent version of Dreamweaver, you'll see the related files up here actually match these items that we were just looking at. So the first thing we're going to do is create some content containers. So we're going to do this inside of Code view to make sure that the structure of the HTML is exactly what we need.
So I have a comment in here called Sliding Panels go here. You can take that comment and then delete it, and we're going to put in our main HTML content containers for the sliding panels. The first one is going to be a div tag. So I'll start a new tag, div. We'll set a class of SP on this item. Let's end the tag and let's end the element. This is going to be the main container for our sliding panels. Inside of here we're going to add another div. We're going to set a class of tabs on this.
End that tag and end that element. Let's put that on the next line, and let's add another div inside of the container div. This one is going to have a class of panel_container, and then end that element. Now, with our main HTML containers complete, we'll add some additional containers for our tabs.
Creating the main panel and the tab containers provides you with in-depth training on Developer. Taught by Chris Converse as part of the Create a Sliding Tabbed Panel with jQuery and Dreamweaver
Font Management Essential Training184,662 Views
Create a Tooltip with jQuery65,751 Views
Product Design Rendering with Rhino and V-Ray20,031 Views
Up and Running with Photoshop for Design291,610 Views
FreshBooks Essential Training16,578 Views
PHP with MySQL Essential Training4,283,533 Views