Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,800 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
- 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
Skill Level Intermediate
Now to style the remaining two panels I have all of those CSS rules in a code snippet. So in Dreamweaver, let's come out of Live view or come out of Preview in Browser. Let's come up to the File menu, choose Open. From the Exercise Files, let's go into folder 2 and open up B-panel-styles.css. So inside here, I have a whole bunch of CSS rules that target the ipad course panel and the photo course panel. So let's come in here and copy all of these rules.
Let's move over to sliding_panels.css, let's scroll down to the bottom of the document, and let's paste in all of these remaining rules. Let's come back to index.html. Let's choose File > Save All and again, either Preview in Browser or you can use Live View. Now you'll see that each one of these items has custom design for both the selected tab, the background graphics, the actual style and placement of the content, and the links down at the bottom. So here's Photography, here's Video, and here is the iPad course.
Sign up for a Premium Membership to download courses for Internet-free viewing.
Watch offline with your iOS, Android, or desktop app.Start Your Free Trial
After signing up, download the course here or from the iOS/Android App.