So now let's move on to styling this list of links. I will warn you, the first time you see this, this may be a little confusing, but after you have done this a few times, I think you will come to appreciate how using an Unordered List like this for links is actually a very elegant solution; and there are a gazillion; okay, so maybe a gazillion isn't really a word, but there are many, many, many ways that you can style an Unordered List to change the look of it for your links.
I am going to start with a relatively simple way to style this list. I will show you more complex one in a later lesson. I will tell you that if you search the Internet, you will find many, many, many different approaches to styling lists.
The basic idea, and I will use the Split Screen to show you what I mean, is that we are going to change the style for the ul tag; and if you are not familiar with HTML yet, the ul tag is what creates the Unordered List, ul, and the li tag is what creates the List Item, li. So if we change the tag style for those two tags, we can radically change the display of this collection of elements.
We also want to go ahead and make them links, so that we can change the link style to further change the way they look. So let me just set these as links. You can use the little Link box down here and you can Browse for a File, or if you know the name of a file, you can just type it in.
Here is another little trick that's kind of cool. If you want to link to the Paintings page from here, you can Point to File; just click on this little icon here and drag over to the Index page in Paintings, and that's where we want to link the Paintings page. Let me close up CSS for a moment so you can see this as I do this. Drag down my Files Panel. The next one is Cards, and I want to just get the text. It definitely wants that little li. Sometimes when you are working in Dreamweaver you have to be very careful about how you select things or you will get more or less than you intend.
So if I open up Cards, I want to link the word Cards actually to the note_cards page. and I want to link Prints to the prints page. Barry Lopez Books goes into the barry folder. By the way, as I am doing this, you may notice that I have a number of index pages throughout this site. That's a nice trick for creating a very simple web address.
Remember I said at the beginning that you should call your homepage index.html or default.html, and that that's because the server will deliver or serve the index page first to a browser. Well, after the homepage, as you get into subdirectories, like barry or cards, if you name the first page within that subsection index, then that's also a page that the server will serve first. What that means is that if you wanted somebody to go to the Cards section of Robin's site, you could simply tell somebody that all they have to type into a browser is robineschner.com/cards, and they wouldn't actually have to type in that index.html, because that's going to automatically be served when somebody gets to that address. So using the index naming structure within subdirectories just lets you create shortened addresses.
One more example, if you go to JanineWarner.com/books you will get to my bookstore without having to type in a long complicated address. It's just a nice trick when you want to be able to call attention to subsections of the site.
So if I keep linking here, Biography; let me stretch this out a little bit, let me see, bio is actually up here, they are in alphabetic order in this list. You can change the order by the way, by clicking on this little arrow up here. If you don't like the order that they are in on your screen, you can adjust that. Contact, and finally the Order page.
Okay. So we have all of our links linked. They are all styled as an Unordered List, and we are ready to create styles that will change the display of this list.
So let's go ahead and go back to Design, open our CSS Panel back up, and we are ready to create some new styles.
Transcription by:
Scribe4you Transcription Services