Join Chris Converse for an in-depth discussion in this video Creating the main panel and the tab containers, part of Creating a Sliding Tabbed Panel with jQuery and Dreamweaver.
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 tab containers
- Adding content to the containers
- Adding CSS styles to the text and tabs
- Adding the jQuery $(document).ready() function
- Assigning click events to the tabs
- Setting an autostart on page load
- Creating custom graphics for the panels
- Assigning custom classes to the HTML elements