Join Chris Converse for an in-depth discussion in this video Creating and linking HTML and CSS files, part of Creating an Interactive Map with jQuery.
Now that we have our folder structure created and all of our graphical assets saved out from Photoshop, let's move over to Aptana Studio. Now if you prefer to take the same course using a more visual tool we are offering the same course in Adobe Dreamweaver and you can find that course in the lynda.com library as well. Now inside of Aptana Studio let's come up to the File menu choose New > Web Project. Let's give this a name. I'll name this Interactive Map. Uncheck Use default location.
Let's choose Browse. From the Desktop let's choose myInteractiveMap. Click Open. This warning here is Aptana's way of letting us know that there are files already existing in that folder. Let's choose Finish and then we'll see those folders and files showing up over on the left-hand side here. Now that we have our project created let's come up to the File menu, let's choose New From Template > HTML, and let's choose XHTML - 1.0 Transitional. That way our file will work all the way back in IE 7 and 8 as well.
After Aptana creates this HTML file let's choose File > Save As. Let's choose Interactive Map, which is our project location. We'll name this index.html and click OK. Next, let's go to the File menu New From Template > CSS > CSS Template. Let's choose File > Save As. In the Save As dialog box make sure you select the Interactive Map project. Next, I'm going to open up the Interactive Map project, then go into the includes directory.
We'll call this map.css, then choose OK. So now we've an HTML and CSS file created. Let's come back to the index.html file. Let's get our cursor after the title tag in the heading area of the HTML file. Let's hit a Return. I am going to start typing a link tag. We want to link this CSS file into this HTML file. The code hinting is going to come up inside of Aptana, so I can just hit Return. Next, we're going to type rel for relationship. Hit Return. I'm going to hold Ctrl+Spacebar to bring up the context menu. We're going to stylesheet, space, type is text/css, another attribute, href=, quotes, and I come down and select includes.
Then Aptana is going to see that there is only one in there called map.css and it's going to populate that for us. Let's choose File > Save. So now at this point we've created our project. We have an HTML file and a CSS file. In the next movie we'll create the HTML markup and the CSS to create our outermost map container.
Take a look at the finished web site here.
- Preparing web graphics
- Creating the main 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