Join Chris Converse for an in-depth discussion in this video Creating the main container, part of Create an Interactive Map with jQuery and Dreamweaver.
- View Offline
Now, the first thing we need to do in our HTML is create a map container.…This is going to be a div that's going to hold all the anchor tags and all the…form elements and city detail divs.…Now before we do that, or before we create any CSS, I want to refer back to a sketch.…So I always recommend creating a sketch for your projects.…This gives you the ability to sort of draw out where the items are going to be…placed, some the dimensions of the different items, and will inform us when we…create some of our CSS properties.…So now in this sketch we have an outermost container of 760 pixels wide by 325 tall.…We're also going to use anchor tags for the dots, and those are to be 20…pixels by 20 pixels.…
We're actually going to use that background graphic we created in Photoshop…called dots.png inside of there, and we're going to shift it up and down, using it as a sprite.…Over on the right-hand side we're going to have our little city photography at…75 pixels and then a 130-pixel- wide column of text next to those.…
Take a look at the finished web site here.
- Preparing web graphics
- Preparing the base container
- Manipulating links with CSS
- Adding a drop-down menu
- Downloading jQuery and adding interactivity to a project
- Creating city details
- Overriding click events of anchor tags with jQuery
- Enhancing the design with CSS3