Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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.
There are currently no FAQs about Create a Sliding Tabbed Panel with jQuery and Dreamweaver.
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.