Viewers: in countries Watching now:
To preview the finished project, visit: http://codifydesign.com/chris/lynda/samples/course-0015
This course was created and produced by Chris Converse. We are honored to host his material in the lynda.com online training library.
Now to begin editing our HTML file, let's open this file up inside of Dreamweaver. Now if you have prefer to take this course in a more code-oriented tool, we're offering the same course in the training library using Aptana Studio instead of Dreamweaver. Now inside of Dreamweaver you might notice right away that this doesn't look anything like what we saw on the browser. If you're using Dreamweaver CS3 or later, there's a Live View up here. Clicking on Live View will actually have Dreamweaver use its internal WebKit rendering engine to show us what this will look like in a browser. When I come out of Live View however, I am looking at a view here that doesn't look exactly like what we're seeing in our browser.
So this gives us the ability to work with HTML5 and still have our layouts work back in browsers as old as IE7 and 8. Other things you will notice at the top, I have already hooked in the menu.css, a copy of jQuery, the jquery.dropmenu, and the menu.js, and in addition at the very top, Dreamweaver shows you the related files for the particular project we have open. So I can click on each one of these items here and see all of the related files. So now I went ahead and set all of this up because I wanted those to focus specifically on the menu.
So if we come down into the navigation area here, I have an HTML comment called menu goes here. So the first thing we're going to do is add an unordered list. So let's come down here and select that entire comment, let's delete it, and let's start by creating an unordered list. So we'll start with a ul tag, let's end that tag, let's open it up. Inside here, we're going to add list items, that's an li tag, let's end that. So there is the first one we're going to need four.
Let me copy that to the clipboard. I am going to paste three more of these. Let's come inside of the first one, let's add an anchor link, a href equals, we'll link that to a pound sign, which is a self link, let's end the anchor tag, let's copy that, let's paste that inside each of the LIs we pasted earlier. Let's get the cursor inside of the anchor link for the very first one. We're going to type Link 1, let's go into the second one, Link 2, put Link 3 in the third one, and Link 4 in the fourth one. Let's choose File > Save.
Find answers to the most frequently asked questions about Create Navigation Menus with jQuery and Dreamweaver .
Here are the FAQs that matched your search "" :
Sorry, there are no matches for your search "" —to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.