View comments | RSS feed

Apply the rule

  1. With the index.html page open in the Document window, click the word Cuisine so that the insertion point is somewhere in the word.



  2. In the tag selector, click the rightmost <a> tag.

    This action selects all of the text for the specified <a> tag, or link.



  3. In the Property inspector (Window > Properties), select navigation from the Style pop-up menu.

    In the Document window, the appearance of the Cuisine text changes entirely. The text is now formatted as a navigation bar button, according to the properties of the .navigation rule that you defined in the previous section.



  4. Repeat step 1 through 3 for each of the individual links in the navigation bar.

    You must assign a navigation class style to each <a> tag or link, so it's important that you use the tag selector to select each link individually, and then assign the class styles one at a time.



    If you're having trouble formatting the link text, make sure that a space (not a return) is between each linked word or words. Also make sure that the space between two links is not itself linked. If it is, carefully select the linked space, clear the Link text box in the Property inspector, and press Enter (Windows) or Return (Macintosh).

  5. When you've finished formatting all of the words for the navigation bar, save the page, and then preview your work in a browser (File > Preview in Browser).

    You can click on the links to make sure they work.

Comments


charles40 said on Sep 24, 2005 at 9:55 PM :
How will the CSS for the NAVIGATION will be set if we want to insert it as a header, that is at the top and not on the left side of the layout. Can't find how to do it.

Thanks,
Charles
jonmichael said on Sep 27, 2005 at 12:24 PM :
This is a question best handled by our support team. You can contact them at:

http://www.macromedia.com/support/dreamweaver/

You can also contact the Dreamweaver community using the Dreamweaver forums at:

http://www.macromedia.com/support/dreamweaver/ts/documents/dream_newsgrp.htm
No screen name said on Oct 1, 2005 at 3:22 PM :
? Why is the navigation style not available in my style pop-up menu in the Properties window? I can select the objects and put them in bold style. But cannot find the navigation style in the menu.

navigation was available in the CSS window tough
k3mcc said on Nov 13, 2005 at 12:01 PM :
Everytime I preview in the browser window it kicks me out of the tutorial, and on dial-up that means I lose minimum 30 bloody minutes trying to piece my way back (nav arrows don't work until page is loaded...). Any way you can get the preview to open up in a 2nd browser??? Enjoying the terrific tutorial otherwise : ^ )
chucknado said on Nov 14, 2005 at 11:47 AM :
Sure. In Dreamweaver, select Edit > Preferences > Preview in Browser, and then select a different browser. Click the Help button if you need more help with this dialog box.
No screen name said on Dec 30, 2005 at 6:00 PM :
Another way is to first open up a new browser window and keep it open (minimized in the task bar). Then when you F12 it will use the latest browser window you opened rather than the one you want to keep. Keeping an extra browser window open SHOULD work for you.
paul54 said on Jan 21, 2006 at 9:58 AM :
In 'preferences' options menu you can select 'preview using temporary file'
No screen name said on Jan 23, 2006 at 6:26 PM :
I completed the "css" section of the tutorial for the navigation bar for the cafe townsend site, and for some reason, the links are underlined in the working page, and when I view them in a browser, they show up purple (not white) and underlined. All of the properties in the navigation css seem in accordance with the tutorial. Any insight?
paul54 said on Jan 24, 2006 at 5:38 AM :
I have to make a correction. This worked with Firefox but not with MS Explorer browser.
No screen name said on Feb 19, 2006 at 2:21 PM :
My navigation words appear in FFFFFF color just fine in index.html. When I view in browser, the words are blue -- btw, the links work just fine. Thanks.
tamaraken said on Apr 1, 2006 at 7:16 PM :
In the PROPERTIES, on the STYLE drop box, it only has the words "Rename" and "Attach Style Sheet". The word "Bold" did not appear when the tutorial told me it would and also the word "Naviagaion" did not show up, though I did do the CSS portion of the tutorial. I am positive I did it correct. Why is it not showing up?
Thank you.
jonmichael said on Apr 3, 2006 at 10:16 AM :
Make sure you have the style sheet attached to the page. You do this in the section called "Attach a style sheet."
lorem ipsum, jr. said on Apr 18, 2006 at 6:57 PM :
I have the padding for the .navigation rule set to 8, I have saved cafe_townsend.css, and it's attached to index.html, yet the <a> tags are vertically crammed together and start off from the left edge of the cell--not nicely spaced out as in your tutorial's results. Plus, each linked is underlined, also contrary to your example.
No screen name said on May 17, 2006 at 8:21 AM :
Hello,

I have a similar problem tamaraken. When I go to the styles box I only see "None" and "bold" as the two available defined styles. I made sure that the style sheet is attached but I still cannot see the "navigation" style. I believe that I did it correctly as I can see in the text file of the styles sheet that the "navigation" code is written in there.
Auchenharvie said on Nov 30, 2006 at 1:13 PM :
I read with interest the comment made by 'no screen name' about the links remaining underlined. I too had the same problem until I realised that I had ignored the 'text-decoration' property of '.navigation' instead of having to set it to 'none'. It was great to see the links automatically changing as I added the new property in the CSS style panel.
Great tutorial!
joshuapfarina said on Feb 26, 2007 at 12:55 PM :
The padding property is very finnicky about the way you enter settings.
Megan Mack said on Sep 4, 2007 at 12:26 PM :
This looks great in the Dreamweaver file but when I preview it in Safari, the
links don't carry over, I get generic underlined blue text. Is this just my
browser?
No screen name said on Mar 14, 2008 at 11:30 AM :
I am having the same problem a few mentioned above about getting generic underlined blue text when previewed on the web. Is there any solution for this?

 

RSS feed | Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/dreamweaver/8/using/gs_06_12.htm