Join Chris Converse for an in-depth discussion in this video Adding the final design details, part of Create an Interactive Map with jQuery and Dreamweaver.
- View Offline
Now I want to make some design adjustments to the project, and this is going…to require some CSS3.…I want to add some rounded corners and a drop shadow onto the city photography,…and I want to add some rounded corners on the city_detail_container as well.…So let's move up to the interactive_ map.css file, and I want to scroll down…until we see city_detail.…Now inside of the city_detail CSS rule, let's get our cursor down here. After…the last attribute, I am going to hit a Return and start typing border-radius.…If you are using Dreamweaver CS5 or CS5.5, there is built-in support for CSS3 in…Code view for editing CSS.…
So when I start border-radius, I can see this code hinting come up and allowed…me to hit Return to select border-radius.…If you are using an earlier version than CS5, you can simply type "border-radius: 10px;."…Now CSS3 is not a finished specification yet, so we do need to add an…additional attribute for the Mozilla rendering engine, which powers Firefox and…the WebKit rendering engine which powers Live view inside of Dreamweaver, Safari, and Chrome.…
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