Join Chris Converse for an in-depth discussion in this video Slicing and optimizing web graphics, part of Creating an Interactive Map with jQuery and Dreamweaver.
Now to begin our project, let's create a folder on the desktop.…We'll call this myInteractiveMap.…Let's open that folder up, and then inside we are going to create four…additional folders:…once called images, one called template, one called includes, and one called cities.…Next, let's take the template and cities folders and just drag those inside of images.…
Let's go over to the exercise files. Inside of this City Photography folder,…I'm going to select the very first city, scroll down, hold Shift, select all of the cities.…I am going to Option+Drag a copy of all these cities into the cities folder we…created on the desktop. Let's close that.…Let's go back to our exercise files. Close up City Photography.…Now inside of art templates we have those two Photoshop files: dots.psd and map.psd.…Let's start by double-clicking and opening up the map.psd file up in Photoshop.…
Now in this Photoshop file here we have everything separated on layers, if you…want to change any of the artwork or make your own modifications to it.…
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