Watching:

Adding a standard unordered (bulleted) list


show more Adding a standard unordered (bulleted) list provides you with in-depth training on Developer. Taught by Chris Converse as part of the Create Navigation Menus with jQuery and Dreamweaver show less
please wait ...

Adding a standard unordered (bulleted) list

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.

I can see all of the content, but I am not seeing the full HTML5 layout. Let's come over here to the Code View of this particular document. Now inside of here, one of the first things you might notice is this gray block down here. These are IE conditional rules. Now on line 11, we're bringing in the IE7 and 8 CSS file. This is where we're going to use the semitransparent PNG file, because IE7 and 8 don't support CSS3 transparency. And then on line 12 here, we have a link to the HTML5 Google Shiv. What this does is use JavaScript to take HTML5 elements, like header and article and footer, and render them in such a way that IE7 and 8 will understand them as regular HTML.

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.

Let's come up here in Dreamweaver, and let's go into Split View. So on the right-hand side, we can see the unordered list that we created showing up on the right-hand side here while we're looking at the code on the left-hand side. Most JavaScript in jQuery plug-ins that create dropdown menus work off of unordered lists and here we have our base unordered list. So this is going to constitute the very topmost navigation. In the next movie, we'll add some nested lists inside up here, which will be manipulated by the plug-in to become dropdown menus.

Adding a standard unordered (bulleted) list
Video duration: 3m 30s 25m 49s Intermediate

Viewers:

Adding a standard unordered (bulleted) list provides you with in-depth training on Developer. Taught by Chris Converse as part of the Create Navigation Menus with jQuery and Dreamweaver

Subjects:
Developer Web
Software:
Dreamweaver jQuery
Author:
please wait ...