Join Chris Converse for an in-depth discussion in this video Adding CSS properties for headings, part of Create an Interactive Photo Gallery with jQuery and Dreamweaver.
- View Offline
Now we're going to add the headings to our gallery.…Let's start in the top-left here, inside of the div gallery_credit.…So up here, we're going to type our name, select some of the characters,…come down to Format.…Let's assign this to be an h1 tag.…In the upper-right, inside of gallery_type, I'm going to type Photography.…Select a few characters here.…Let's assign this to be an H2.…
With these in place, let's come over to our CSS panel.…Let's create a new rule.…The first one is going to be a tag, assigned to the h1. Click OK.…First thing I want to do, come under the Box properties, set 0 for Padding and 0 for Margin.…Let's come under Block properties, set Letter-spacing of 2 pixels. Come under Type.…Let's set the Font to 1.75 ems.…This will make this 75% larger than the base font.…
Color, we'll select white;…Font-weight, normal; and then we'll click Apply. That looks right.…Let's click OK.…Let's come over to our CSS Rules.…Let's create one more.…Another tag defining the h2 properties. In here, Box model, first 0 for all…
Download a copy of the finished web site here.
- Preparing gallery photos using Adobe Bridge
- Adding and linking thumbnail images
- Creating the layout in HTML and CSS
- Downloading and adding jQuery to the project
- Creating preview images from anchor links
- Implementing the preload functionality
- Building a customized lightbox with the Fancybox plug-in
- Styling the zoom and contact links