Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Now, if you'd like to customize the graphics that we're going to be using in the background for the panels, you can come into the Exercise Files and in folder 3, you can open up panel_backgrounds.psd. Now in the last movie, we set the width of the panel to be 500 pixels. So what I have done here is brought out a guide that matches the 500 pixel mark, to sort of give me a sense of how wide my content needs to be. And there are a few ways you can set up background graphics. You can actually have the color be a gradient down to a solid color here and then set the same color for your background for the panel, so maybe you don't have to have your images quite as tall.
And the other thing you can do is you can actually set other graphics inside. So for example for the iPad course here, I have an iPad in the right inside here, and we're actually going to use padding to move or manipulate the panel content to make sure that the text doesn't overlap these background graphics. So in the Layers panel, I have the three individual items I'm using for this course, and of course you can put your own graphics in here and save these out. So when you have your desired artwork in the canvas area, we're going to come up to the File menu, choose Save for Web & Devices. We'll come up here and choose JPEG.
Next, you will hit Save. On the desktop, you are going to mySlidingPanels, going to the images directory and overwrite any of the individual graphics for ipad_ background, photo_background, or video_background. Or of course you can make your own file names and just modify the file names we're going to create in our CSS rules later on in the course. I'm going to cancel out of here since I want to keep these individual graphics. So once you have your new graphics in place or if you're going to use the graphics that were included in the exercise files, in the next movie we can start adding in some custom classes and then some CSS rules to make use of these graphics.
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.