Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,974 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
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
Skill Level Intermediate
Before we add additional city_detail information into the HTML of our file, I want to go through and isolate all of our CSS rules. So let's come over to the interactive_map.css file. A lot of times when you are going to create an interactive component that goes into somebody else's web site, you want to isolate all of your CSS rules, which means we want to have every rule start with the name of our outermost container. So in here I am going to select .map_container at the very top of the CSS rule, copy this to the clipboard, and inside of this CSS I want to paste .map_container and space before each one of the different rules.
This means that these rules will only take effect if they're inside of our .map_container. One before .form_continent. I am going to add this before each one of the different classes. Basically this is turning every one of these rules into a compound CSS rule.
Now that we have .map_container in front of each one of these items, let's come back to the index.html file. Let's click on the photo and let's switch over to Code view. Now inside of Code view all of the city detail information that we just dialed they are showing up here inside of the city_detail, so we have our img and our class, our h2, h3, and paragraph tag. Every time we click on one of the dots we are going to want to take all of this HTML and change it, based on the individual dots that we've selected.
So in order to do that, we are going to need to bring in city_detail information. So let's go to the File menu. Let's choose Open. From the Desktop, exercise files. Let's go into Code Snippets, and let's grab the file city_details.html and click Open. So what I have done here is set up a whole bunch of divs that have all of the city information for all of the dots on the map. These follow exactly the same code structure that we were just looking at. There is one difference here. Inside of each one of these items I have added an id to each one of the city_detail divs, and I've set the id name to match the city attribute we set inside of each anchor tag.
So each anchor tag says city=sydney or city=london. I am setting the id of this item to match that same name. I've also put all of these inside of a parent div called city_detail_container. So at this point, let's choose Command+A, or Ctrl+A, to select all of the content. Let's come down here to Edit and choose Copy. Let's go back to our HTML. After the ending div for the .map_ container, before the body tag, let's hit Command+V, or Ctrl+V, to paste all of that content, in and then let's switch back out to Design view.
Now in Design view we can see all of the photos, all of the h2, h3s, and paragraphs tags for the descriptions, and notice that all of the Float properties and the Styling properties are now taking effect. Since we isolated the CSS rules to only be affected up there inside of this area, inside of .map_container, all of this content will flow out here. So we can actually come in here and use Dreamweaver's WYSIWYG environment to come in here and make text changes. Now when somebody comes to this page, I don't want them to see all of this content.