Join Chris Converse for an in-depth discussion in this video Setting up and designing the outer container, part of Creating an HTML5 Video Gallery with jQuery and Dreamweaver.
Now before we start creating some of the CSS rules, I want to refer back to a sketch that we created for this particular project. So I always recommend creating a sketch. This gives us the ability to sort of figure out what the user experience is going to be and give us a chance to add some of the measurements in place so that we know what we are creating inside of our CSS. So in the introduction video, we looked at the fact that the outermost container of this is going to be fluid or liquid, meaning it can actually be stretched to be whatever width the browser is or the device you are looking at the gallery on. But inside of the container, we do want to have few measurements in place.
I want to set the top and bottom padding to 25 pixels, meaning nothing inside of the container can get within 25 pixels of the edges. The right-hand side we are going to leave at zero because we are going to set margins on the thumbnails, but the left-hand side I want to set a padding of 115 pixels. That way we have enough room in the left hand side to have that vertical tiling filmstrip graphic we created earlier in Photoshop. Now the other measurements we are going to be creating are going to be thumbnails. They are going to be 200 pixels wide by a 115 pixels tall and inside of the anchor tags for the thumbnails we are going to have a div to hold the caption and an image tag to hold the Play button graphic.
Now let's define the properties of this. First let's come down to the box model properties. For Padding let's uncheck Same for all, and let's add in those paddings we were looking at in the sketch. It's 25 on the top, 0 on the right, 25 on the bottom, 115 on the left. Let's move over to the border settings. Let's keep Same for all for Style, Width, and Color. I'm going to choose a solid, 2 pixel and for color, I am going to type #444. That's going to give us that sort of dark gray color.
And lastly, let's come down to Background. For the Background-color let's use the eyedropper and choose black. Background-image we'll choose Browse. Let's choose filmstrip_tile.png inside of the images directory. Click Choose. For the repeat we are going to set repeat on the Y axis. We are going to set 0 position for the X and 0 position for the Y. Now at this point we will choose OK. Now we can see in the background some of the design is starting to take place, the black background.
We can see the filmstrip tile graphic happening over here. The next rule we want to create is that clear_both. That's going to set the clear for all of those thumbnails we are going to be creating. Let's create a new rule, new class,.clear_both. Let's come down to Box properties here and we are simply going to come and set both for the clear property for this and then choose OK. Now that we have all of the CSS in place for the outermost container, in the next movie we are going to start by creating the CSS rules for the thumbnails.
- Preparing the graphics
- Adding and linking thumbnail buttons
- Designing the layout
- Including video information in the thumbnail links
- Styling the thumbnails with CSS rules
- Creating a DIV container to hold the video player code
- Setting up click events for the thumbnails
- Incorporating the FancyBox lightbox plug-in