Join Chris Converse for an in-depth discussion in this video Create, nest, and class DIV tags, part of Create an Interactive Photo Gallery with jQuery and Dreamweaver.
- View Offline
So in Dreamweaver's HTML file, let's come over to Code view.…Now inside of the Code view inside of the body tag, I'm going to hit a few Returns.…And as I was mentioning in the last movie, when we start typing inside of code…view here, Dreamweaver is going to sort of help us code this, and it's even going…to access the CSS rules that we've created.…So let's start by creating our very first div.…I'm going to type the beginning bracket, div, and hit space and type cl for class.…Notice how this pop-up window is coming up and giving me access to everything…that is available, either in HTML or in the CSS that's hooked in.…
So I am going to hit Return to type class, and then I see a dynamic listing of…all of the classes I've created in my CSS document.…I can use my arrow key down and come down to page_container. Hit Return.…I'm going to hit an ending bracket to close the tag.…I'm going to start a new tag hit a forward slash and Dreamweaver will automatically close…that div tag for me.…Now, I'm going to arrow back and get my cursor in between the beginning and…
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