Chapter 4. Links
The humble hyperlink may not raise eyebrows anymore, but the notion that you can navigate a whole sea of information, jumping from one island of content to another with a simple mouse click, is a powerful phenomenon. Interested in a particular band? Go to Google, type in the band’s name, click to go to its website, click to see its upcoming gigs, click to go to the venue’s website, and then click to buy tickets.
Although embedding links is a basic task in building web pages, and even though Dreamweaver—for the most part—shields you from the complexities of doing so, links can be tricky to understand. The first section of this chapter gives you an overview of links and explains the technical distinctions between different types of links. The rest of the chapter, with sections on formatting the appearance of your links and creating navigation menus, will help turn you into a link-crafting maestro.
Note
If you already understand links, or if you’re eager to start using them, jump to the tutorial in Tutorial: Adding Links to Pages.
Understanding Links
Links are snippets of HTML that give web browsers directions to get from one web page to another. What makes links powerful is that the distance covered by those directions doesn’t matter. A link can lead to another page on the same site just as easily as it can lead to a page on a web server halfway around the globe. Behind the scenes, a simple HTML tag called the anchor tag (<a>) makes each and every link work. Links come in three flavors: absolute, document-relative, and root-relative. See Link Types in Action for examples of each.
Absolute Links
When people want to mail you a letter, they ask for your address. Suppose it’s 123 Main St., Smithville, NY 12001, USA. No matter where in the country your friends are, if they write 123 Main St., Smithville, NY 12001, USA on an envelope and mail it, their letters will get to you. That’s because your address is unique.
Similarly, every web page has a unique address, called a URL (most people pronounce it “you-are-el”), or Uniform Resource Locator. If you open a web browser and type http://www.cafesoylentgreen.com/events/iron_chef.html into the address bar, the browser opens the iron chef event page for Cafe Soylent Green.
This URL is an absolute link—it’s the complete, unique address for a single web page. Absolute links always begin with http://, and they always lead to the same destination page, no matter what page you put that link on—an absolute link in a web page can call up another page within the same site or a page on an entirely different site. You’ll use absolute links any time you link to a web page outside of your own site—they’re the only way to link to a page on a different site. But when you want to call up a page within your site, there’s another way to write a link, described next.
The bottom line: Use absolute links when you want to link to a page on another website.
Document-Relative Links
Suppose you, the resident of 123 Main Street, drop in on a couple who just moved into a house directly across the street. After letting them know about all the great restaurants nearby, you tell them about a party you’re having at your place.
When they ask you where you live, you could say, “I live at 123 Main St., Smithville, NY 12001, USA,” but your neighbors would probably think you needed psychiatric help. Instead, you’d say something like, “Just walk across the street, and there you are.” Of course, you can’t use these instructions as your mailing address, nor would they make sense for a neighbor who lived seven houses down. Those directions only help the neighbors directly across the street get from their house to yours.
To link from one web page to another in the same website, you use a similar shorthand, called a document-relative link. In essence, a document-relative link—like the directions you gave your neighbors—tells a browser where to find a page relative to your current location, in this case, relative to the current web page. If two pages are in the same folder, for instance, the path is as simple as the code version of “Go to that page over there”—in its entirety, the link is no more than the target filename—index.html, for example. You can leave off all that http://www.your_site.com/ business, because you’re already on that site and within that folder.
Document-relative links can be finicky, however, because they’re completely dependent on the location of the page containing the link. If you move that page to another part of your site—putting it in a different folder, for example—the link won’t work. It’s as though your neighbors moved across town—they can’t walk across the street to get to your house any longer. This vulnerability makes web designers reluctant to use document-relative links, even though they’re ideal for linking from one page to another in the same site.
Fortunately, Dreamweaver makes working with document-relative links so easy you may forget what all the fuss is about. In Dreamweaver, whenever you save a page that has a document-relative link to a folder different from the page’s original folder—a maneuver that would normally shatter all the links on a page—Dreamweaver quietly rewrites the links before it saves the file so that the links still work. Even better, using the program’s site-management tools, you can reorganize your site with impunity, moving files and folders without harming the delicate connections between your site’s files. (You’ll learn about Dreamweaver’s site-management features in Part V of this book.)
Root-Relative Links
Root-relative links, also called site root-relative links, tell browsers how to get from one page to another within the same site, just as document-relative links do. But in this case, the link describes the path relative to the site’s root folder—the folder that contains your site’s home page and all your other pages, folders, and files. (For a detailed description of the root folder and the structure of a website, see Chapter 18.)
Here’s how a root-relative link works: Imagine you work in a big office building. You need to get to a coworker’s office in the same building, so you call her for directions. She may not know the precise directions from your office to hers, but she can tell you how to get from the building’s entrance to her office. Since you both know where the building’s front door is, these directions work well. In fact, she can give everyone in the building the same directions and they’ll be able to find her office, too (they all know where the entrance is). Think of the office building as your site, and its front door as the root of your site. Root-relative links always begin with a slash (/). This slash is a stand-in character for the root folder—the front door—of your site. A root-relative link always leads to the same page, no matter where the link is on your website.
If you use Dreamweaver for all your web page development, you probably won’t need root-relative links. Using document-relative links, Dreamweaver does a great job of mapping (and, if necessary, remapping) the connections to all the pages and files on your site, with very little effort on your end. Still, on rare occasions, you may find it necessary to create root-relative links. For example, suppose your client asks you to create a new page for an existing site. She gives you text, some graphics, and a list of the other pages on the site that this page needs to link to. The problem is, your client doesn’t know where on the site the new page needs to go, and her webmaster won’t return your calls.
Fortunately, you can use root-relative links to solve this dilemma. Since root-relative links work no matter where the page is on your site, you could create the page and then let the client put it anywhere in her site, and the links will still work.
There’s one major drawback to root-relative links: They don’t work when you test them on your own computer. If you click a root-relative link in a web page that’s sitting on your computer’s hard drive, the link either doesn’t work or it produces only a “File not found” error. That’s because you haven’t defined a root directory on your local machine, so the link doesn’t have a route to follow. Root-relative links work only when a website resides on a web server, because you defined a root folder when you set up the site.
Note
There’s one exception to the “root-relative links don’t preview correctly” problem. Dreamweaver lets you preview a web page two ways: with a temporary file or without one. The temporary-file option has a couple of advantages: You can preview a page without having to save it first, and you can preview on your local computer any root-relative links on the page.
To turn this feature on, go to Edit→Preferences (Dreamweaver→Preferences), click the “Preview in Browser” category, and then turn on the Preview Using Temporary File checkbox. Behind the scenes, Dreamweaver rewrites root-relative links as document-relative links whenever it creates a temporary file. If you see files in your site with weird names like TMP2zlc3mvs10.htm, those are the temporary files Dreamweaver creates. Feel free to delete them.
One solution to the root-relative links problem is to install a web server on your computer and put your site files inside it (see Setting Up a Dynamic Website). That’s the approach you’ll take when you build dynamic sites, discussed in Chapter 24.
Unless you have a specific reason to use root-relative links (like your IT department tells you to), avoid their pitfalls by sticking to document-relative links. But keep this discussion in mind—later in the book, you’ll see that, behind the scenes, Dreamweaver’s site-management features use root-relative paths to track your site’s files.
Note
You can run into trouble with root-relative links if the site you’re working on is located in a folder inside a web server’s root folder. For example, say your buddy gives you space on his web server at www.my_buddy.com. He says you can put your site in a folder called my_friend, so your URL is http://www.my_buddy.com/my_friend/. In this case, your web pages don’t sit at the root of the site—they’re in a folder inside the root. So a root-relative link to your home page would be /my_friend/index.html. Dreamweaver can handle a situation like this, but only if you provide the correct URL for your site—http://www.my_buddy.com/my_friend/—when you set it up (see Figure 4-1).
Link Types in Action
Figure 4-2 shows you the structure of a fictitious website, NationalExasperator.com, on a hard drive: folders filled with HTML documents and graphics. Here’s a closer look at some links you might find on the site’s pages and how they might work.
Linking from the home page to the Contact Us page (contact.html)
Most websites use the filename index.html or index.htm for the home page. You can link from this page to the contact.html page—identified by the number 1 in Figure 4-2—using any of the three link types discussed above and these addresses:
Absolute link address: http://www.nationalexasperator.com/contact.html. What it means: Go to the website at http://www.nationalexasperator.com and download the page contact.html.
Document-relative link address: contact.html. What it means: Look in the folder the current page is in and download contact.html.
Root-relative link address: /contact.html. What it means: Go to the top-level folder of the current site and then download contact.html.
Tip
If you can write an absolute URL, you can easily write a root-relative URL. Simply strip off the http:// and the web server name. In the example above, erasing the http://www.nationalexasperator.com in the absolute address leaves /contact.html—the root-relative path.
Linking from the Horoscopes page to the Pisces page
Imagine you build a web page that you want to link to a page in a subfolder of your site. Here’s how you’d use each of the three link types to do that, as identified by the number 2 in Figure 4-2. (In this example, the subfolder is called 2005.)
Absolute link address: http://www.nationalexasperator.com/horoscopes/2005/pisces.html. What it means: Go to the website http://www.nationalexasperator.com, look in the Horoscopes folder, look in the folder 2005, and then download the page pisces.html.
Document-relative link address: 2005/pisces.html. What it means: From the current page, look in the folder 2005 and then download the page pisces.html.
Root-relative link address: /horoscopes/2005/pisces.html. What it means: Go to the top-level folder of this site, go to the Horoscopes folder, look in the folder 2005, and then download the page pisces.html.
Linking from the Scorpio page to the Horoscopes page
Now suppose you build a web page and store it in a deeply nested folder. You want to link that page to a document outside that folder, like link 3 in Figure 4-2:
Absolute link address: http://www.nationalexasperator.com/horoscopes/horoscopes.html. What it means: Go to the website at http://www.nationalexasperator.com, look in the Horoscopes folder, and then download the page horoscopes.html.
Document-relative link address: ../horoscopes.html. What it means: Go up one level—outside the current folder—and then download the page horoscopes.html. In website addresses, a forward slash (/) represents a folder or directory. The two dots (..) mean “Go up one level” into the parent folder of the current folder. If you needed to link to a page that’s up two levels—for example, to link from scorpio.html to the About Us page (about.html)—you’d use ../ twice, like this: ../../about.html.
Root-relative link address: /horoscopes/horoscopes.html. What it means: Go to the top-level folder of this site, look in the Horoscopes folder, and then download the page horoscopes.html.
In short, use absolute URLs to link to pages outside your site folder, use document-relative links to link to pages within your site, and, unless you know what you’re doing (or your IT department tells you to), avoid using root-relative links altogether.
Adding Links to a Page
If all this talk of links gets you confused, don’t worry. Links are confusing, making them one of the best reasons to use Dreamweaver. If you can navigate to a document on your own computer or anywhere on the Web, you can create a link to it in Dreamweaver.
Browsing for a File
To create a link from one page to another on your local website, use the Properties panel’s “Browse for File” button (
; see Figure 4-3) or its keyboard shortcut, Ctrl+L (⌘-L).
You browse for a file in Dreamweaver using the same type of dialog box you use to open or save a file, making “Browse for File” the easiest way to add a link. (To link to a page on another website, you need to type the web address into the Link box in the Properties panel. Turn to Figure 4-6 for instructions.)
Here’s how to add a link to a page:
In the document window, select the text or image you want to make into a link.
For text links, you can select a single word, a sentence, or an entire paragraph. When you add a link to text, the selected words appear blue and underlined (depending on your visitors’ web browser settings), like billions of links before them.
You can turn a picture into a link, too—a great way to add attractive graphics-based navigation buttons. Your visitors will see the “pointing finger” icon when they point to a linked picture.
Note
When you add a link to an image, Internet Explorer 8 and earlier versions draw a blue border around the image, just as linked text has a blue underline. Fortunately, with some simple CSS, you can create a style for the <img> tag that gets rid of the blue outline (see Creating Styles if you’re unsure about creating styles). Under the Border category of the CSS Rule Definition window, set the border style to “none” (see Adding Borders for more on CSS borders).
In the Properties panel, click
(a.k.a. the “Browse for File” button), or choose Modify→Make Link, or press Ctrl+L (⌘-L).Whichever command you use, the Select File dialog box opens (see Figure 4-4 for Windows, Figure 4-5 for Macs).
Navigate to and select the target file, that is, the file you want the link to open.
When you use the “Browse for File” technique, you can only specify a page that’s part of your website—you can’t “browse” to an external web page, in other words—the file needs to reside in your local root folder (see the box in Up to Speed: Terms Worth Knowing) or in a folder therein. Why? Remember that, to a website, the root folder is like the edges of the known universe—nothing exists outside it. If you try to link to a file outside the root folder—like to a file on your desktop—Dreamweaver tells you it’s a problem and offers to copy the file to your root folder for you. Accept the offer.
Note
If you double-click the name of a file in the Select File dialog box, Dreamweaver both selects the file and closes the Select File dialog box.
Figure 4-4. In Windows, use the Select File dialog box to identify a link’s target page. When you set up a site, you can tell Dreamweaver whether to use document- or root-relative links (Root-Relative Links). Later, if you need to temporarily switch to a different type of link (to a root-relative link if you set up your site for document-relative links, for example), use the “Relative to” drop-down menu (circled).Make sure you select the correct type of link—document- or root-relative—from the “Relative to” drop-down menu.
As noted earlier, document-relative links are usually your best choice. Root-relative links don’t work when you preview your site on your own computer. (They do, however, work once you move the pages to your web server.)
Note
You can skip step 4 by universally setting the type of link your sites should use in the Site Setup window (see Figure 4-1 for details).
Figure 4-5. Every file in a website has to be somewhere inside a local root folder (see the box in Up to Speed: Terms Worth Knowing). This master folder holds all your site’s files, including subfolders that hold yet other files. Because the root is so central to site management, Dreamweaver includes a Site Root button (circled) in every window that requires selecting or saving a file. (This example shows a Mac window; on Windows PCs, the button is near the lower-right corner, as shown in Figure 4-4.) Click this button to jump straight to your site’s root folder so you know exactly where you are on your hard drive, making it easy to navigate to the file you need.Click OK (Choose) to apply the link.
The text or image you made into a link in step 3 now opens another web page. If you haven’t yet saved the target web page in your site, Dreamweaver doesn’t know how to write the document-relative link to it, so it uses an interim solution: it assigns the link a temporary path until you save the page—see the box in Frequently Asked Question: The Mysterious Triple Slashes for details.
After you apply a link, the link text appears underlined and colored in Design view (using the color defined by the Page Properties window, shown in Figure 1-24). Press F12 (Option-F12 on Macs) to preview the page in your browser, where you can click the link to test it.
Using the “Point to File” Tool
You can also create links by dragging an icon from the Properties panel to the Files panel (see Figure 4-6) to a file in the Files panel. If your site involves a lot of links, learning to use the “Point to File” tool will save you time and energy.
To use the “Point to File” tool effectively, position your document window and Files panel side by side. Keep in mind, you must always select the text or image in the document window before you create a link.
In the document window, select the text or image you want to turn into a link.
Make sure you open both the Properties panel (Window→Properties) and the Files panel (Window→Files). (Before using the Files window, you need to create a local site, as described in Figure 1-13.)
Drag the “Point to File” icon (
) from the Properties panel to a web page in the Files window.Or Shift-drag the selected text or image in the document window to any web page in the Files panel, bypassing the Properties panel altogether (this method works only in Design view, however).
Figure 4-6. In the document window, select the text you want to turn into a link (circled). To link to another page, drag the “Point to File” icon (the radar image in the Properties panel) to a web page in the Files panel (right). In this example, Dreamweaver creates a link to the web page iron_chef.html. You could create the same link by Shift-dragging the selected text to the iron_chef.html page in the Files panel. The text doesn’t actually move, Dreamweaver just creates a link to the target page.Tip
You can also link to a file in the Files panel by dragging the file into the Link box in the Properties panel. If you haven’t selected any text when you drag the file, Dreamweaver automatically adds the filename as text. For example, if you drag mysong.mp3 from the Files panel, that filename appears on the page.
Once you’re pointing to the target web page in the Files panel, release the mouse button.
The selected text or image in your web page now links to the file you just pointed to.
Note
Bizarre Bug Alert: If you use two monitors as you build web pages, with your main monitor (the one with the Start menu for Windows, or the one where a program’s menu bar appears on Macs) on the right, and the second monitor on the left, the “Point to File” icon may not work. Then again, it might! Strange, but truly infuriating.
Typing or Pasting a Web Address
If you need to link to a page on another website, or if you feel comfortable working with document-relative links, you can simply type the target page’s URL into the
Link box in the Properties panel. Note that this technique—and the hyperlink object tool discussed next—are the only ways to add links to pages outside your website.
In the document window, select the text or image you want to make into a link.
In the Properties panel’s Link box (Figure 4-3), type the URL (the path) to the file.
If the link leads to another website, type an absolute URL—that is, a complete web address, starting with http://.
Tip
An easier approach is to go to the destination web page using your browser and then copy the complete URL—including the http:// part—from the browser’s address bar and then paste it into the Link box.
To link to a page on your own site, type a document-relative link (see Absolute Links for some examples). Letting Dreamweaver write the correct path using the point-to-file or browsing technique described above is a good way to avoid typos. But typing the path name can come in handy when, say, you want to create a link to a page you haven’t yet created, but whose eventual URL you know.
Press Enter (Return) to apply the link.
While you don’t necessarily have to hit Enter (Return)—sometimes you can just click elsewhere on the page and keep working—Dreamweaver has been known to forget the link and not apply it. This is true for most text boxes in the Properties panel. So if you type information directly into a box in the Properties panel (to create a link, add a title, and so on), get into the habit of hitting the Enter (Return) key to make sure your change sticks.
Note
If you add an absolute link to a website without specifying a web page, add a final forward slash (/) to the end of the address. For example, to link to Yahoo, type http://www.yahoo.com/. The final slash tells the web server that you’re requesting the default page (the home page) at Yahoo.com.
Although leaving out the slash works, too (http://www.yahoo.com), the server has to do a little extra work to figure out which page to send back, resulting in a slight and unnecessary delay.
Also include the final slash when you link to the default page inside a folder on a site, like this: http://www.oreilly.com/missingmanuals/. That saves the browser from first requesting a file named missingmanuals and then requesting the default page inside the folder missingmanuals.
Using the Hyperlink Object
Dreamweaver gives you yet another way to add links. The Hyperlink object in the Common category of the Insert panel (Figure 4-7) lets you insert a link and set several options. Its only real benefit over the methods described above is that it lets you add text and a link in one step, instead of adding text to a page, selecting it, and then specifying a link address. Unfortunately, this tool works only with text (not graphics), and some of the optional properties don’t work in all browsers.
Here’s how you add a hyperlink.
Click the spot on a web page where you want to insert the hyperlink, or select the text or image you want to turn into a hyperlink.
Choose Insert→Hyperlink, or click the chain icon on the Insert→Common toolbar.
The Hyperlink dialog box opens (see Figure 4-8).
Figure 4-8. As an alternative to this dialog box, you can apply all the settings you see here, except the “Access key” and “Tab index” properties (see steps 7 and 8 below), to text or images using the Properties panel. Also, keep in mind one somewhat special case: If you want to add an access key and tab index to an existing link without using Insert→Hyperlink, go into Code view (as described in Chapter 7) and hand-edit the HTML.In the Text box, type the label for your link (that is, the text of the link).
Whatever you type here is what your guests will see on the page, and what they’ll click to follow the link. If you select existing text, Dreamweaver automatically displays that text in the Text box.
Click
and navigate to the page you want to link to.Alternatively, type a URL in the Link box.
Set the target window for the link.
If you want the linked page to open in the current window—as most linked pages do—don’t select anything. To make the page open in a new window, select _blank (see the box below for more on targeting links).
The last three options—Title, Access key, and Tab index—are more interesting.
Type a title for the destination page.
This is optional. Most browsers display page titles in a tooltip when a visitor points to the associated link, as described in the box below.
Type a key in the “Access key” box.
An access key lets you follow a link by tapping a key on your keyboard. For example, if you type h in the link’s “Access key” box, a visitor using Google Chrome for Windows can press Alt+H to open the link. Of course, unless your visitors are psychic, you should include the access key with the link label, as in “Home Page (Alt+H).”
Actually using an access key requires a little computer savvy on the part of your visitors. In addition to knowing they can use the key, they need to know how to use it with their browser. The key combinations differ depending on the browser and the operating system, and in the past, browsers’ key combinations were all over the place. It’s a little more uniform with the latest batch of browsers. Here’s the rundown on current Windows browsers:
Alt+ the access key works in Google Chrome, Safari, and Opera.
Alt+ the access key + Enter works in Internet Explorer.
Alt+Shift+ the access key works in Firefox.
Recently, Mac browsers have achieved a little consistency:
Control+Option+ the access key works in Safari (from version 4 on), Chrome, Firefox, and Opera.
In the “Tab index” box, type a number for the tab order.
In most browsers, you can press the Tab key to step through the links on a page (and boxes on a form). This feature not only gives you a handy way to go from link to link using your keyboard, but it also lets people who can’t use a mouse due to disabilities cycle through the links.
Normally when you press Tab, web browsers highlight the links in the order they appear in the page’s HTML. The Tab index, by contrast, lets you control the order in which links light up. For example, you can give your navigation buttons priority when someone presses Tab, even if those buttons aren’t the first links on the page.
For the link that you want first in the Tab order, type 1 in the “Tab index” box. Number the other links in the order you want the Tab key to trigger them. If you aren’t concerned about the order of a particular link, leave this option blank or type 0. Web browsers highlight that link after your visitor tabs through all the links that do have a Tab index.
Adding Email Links
If you want to invite visitors to contact you, an email link is the perfect solution. When someone clicks the link, his email program automatically launches, and a new, empty message opens with your email address already in the To box. Your guest can then just type his message and click Send.
Consider the email link mailto:chef@cafesoylentgreen.com. The first part of any email link, mailto, indicates the type of link (an email link in this case), while the second part (chef@cafesoylentgreen.com) specifies the email address.
Note
Email links work only if the person who clicks the link has an email program set up and running on his computer. If someone visits your site from a computer at the public library, for example, he might not be able to send mail. Likewise, if he’s using a web-based email client, like Gmail, clicking an email link won’t open his Gmail account in a web browser.
You create an email link the same way you create any other Dreamweaver link: by selecting text or an image and typing the mailto address in the Properties panel’s Link box, as shown above. Dreamweaver offers a shortcut, too:
Type in or select the text you want to turn into a link. Email me! or Email the webmaster are good options.
You have to have something to link from, right?
Under the Insert panel’s Common category, click the “Email link” icon,
(see Figure 4-7).Alternatively, choose Insert→Email Link. The Email Link dialog box opens (see Figure 4-9).
Check the Text box. The word or phrase you highlighted in step 1 should appear here.
You can edit the link label if you like.
Type an email address in the Email box.
This is the address that appears in your visitors’ email programs when they click the link. (You don’t have to type mailto—Dreamweaver adds it automatically.)
Click OK.
Dreamweaver makes the mailto link active.
Note
Some people don’t add email links to their websites because they’re afraid of spammers’ automated programs that search the Web and collect email addresses. There are some tricks to fool these “spambots,” but spammers have figured most of them out. The fact is, spammers can attack even Contact Us web forms.
If you’re absolutely obsessed with never being spammed, leave your email address off your site. However, many businesses rely on people contacting them for more information, and the harder you make it for a legitimate visitor to contact you, the fewer legitimate contacts you’ll receive—after all, you wouldn’t have much of a freelance design business if you never provided a way for someone to contact you. Your best bet is to let the spam come, but add a filter to your email program to separate the wheat from the chaff.
Linking Within a Web Page
Clicking a link usually loads a web page in a browser window, but what if you want to link to a specific spot on the same page? Webmasters frequently use this technique on long web pages, like FAQs, where links at the top of the page let visitors jump to content lower down on the page; see Figure 4-10.
You create this type of link by adding an HTML tag to the target section of the destination page, giving it a unique ID, and then linking to that ID. Although this method is newer, it works with all current web browsers.
Note
If you’ve been building web pages for a while, you’re probably familiar with the “named anchor” technique for creating in-page links. That method uses an <a> anchor tag with a name attribute. Because HTML5 doesn’t recognize the named anchor, Dreamweaver no longer offers the Insert→Named Anchor command. So instead of trying to use named anchors, use the ID method described here.
Adding an ID to a Target Page
To link to a specific spot in a page, assign an ID to that spot. For example, to link to a subhead way down on a page (a Heading 2, or <h2> tag, for example), you assign an ID to that heading. For text, you add an ID by clicking anywhere inside a paragraph and then, in the Properties panel’s ID box, typing the ID name you want to use. (Keep in mind that you can’t use spaces or punctuation marks.)
For non-text elements, like images or tables, select the tag (using Dreamweaver’s Tag Selector, discussed in Figure 1-3), and then type a name in the ID box on the left side of the Properties panel.
You might use IDs in another context, too: to identify and style discrete sections of your page by adding an ID to a tag and then styling the page using CSS (see Removing a Class Style for more). The good news is you can use that same ID to both identify the destination point in a target page and to style the tag in a style sheet.
Linking to an ID
Once you add an ID to a tag, creating a link to that ID—either from within the same web page or from a different page—isn’t all that different from linking to a standard web page.
To link to an ID on the same page:
In the document window, select the text or image you want to turn into a link.
For example, drag across some text, or highlight a graphic.
In the Properties panel’s Link box, type #, followed by an ID name you choose.
The # sign tells browsers that the link points to an ID. So, to link to an ID named directions, you’d type #directions.
You can also link from one web page to a particular location on another web page. First, you need to add an ID to the destination page. Then, follow the same process you followed to link to a same-page ID, except that you have to specify not only the ID, but the path to the web page as well.
In the document window, select the text or image you want to turn into a link. Then, in the Link box of the Properties panel, type or choose the URL of the destination page.
You can use any of the methods described above to identify the target page: browsing, point-to-file, or typing in the path name. Unfortunately, if you browse to select the destination page, Dreamweaver doesn’t display any of the IDs on that page, so you need to type in the ID’s name as explained in the next step.
Click at the end of the URL or path. Type # followed by the ID’s name.
In the end, the Link box should look something like this: contact.html#directions.
Modifying Links
At some point, you may need to edit a link. Perhaps the URL you were linking to has changed, or you simply no longer need that link.
Changing a Link’s Destination
As you’ll read in Part V of this book, Dreamweaver provides some amazing tools that automatically update the links on your pages so your site keeps working even if you move files around. But even Dreamweaver isn’t smart enough to know when a page on someone else’s website has been moved or deleted. And you may decide you simply need to change a link so that it points to a different page on your own site. In both cases, you need to edit the links by hand:
Select the text or picture link.
The link path appears in the Properties panel’s Link box.
Use any of the techniques described in Linking from the Scorpio page to the Horoscopes page to specify the link’s new target.
For example, click
in the Properties panel to target a different page on your own site, or type a complete URL that points to a page outside your site.
Removing a Link
Sometimes you want to stop a link from linking—when the web page you were pointing to no longer exists, for example. You want to keep the originating text or image, but remove the outdated link. In that case, select the link text or image and then use one of these tactics:
Choose Modify→Remove Link, or press Shift+Ctrl+L (Shift-⌘-L).
Delete the text in the Link box of the Properties panel and then press Enter (Return).
The text or image remains on your web page, but it no longer links to anything. If you delete a text link, the text changes from your site’s link color to the normal text color for the page.
Of course, if you’re feeling particularly destructive, you can delete the link’s text or image itself, which simultaneously deletes the link.
Styling Links
You can control the basic look of links from the Links category of the Page Properties window (Figure 4-11). To open it, choose Modify→Page Properties→Links (CSS), press Ctrl+J→Links (CSS) [⌘-J→Links (CSS)], or click the Page Properties button in the Properties panel (the button appears only when you have either nothing on the page selected or text selected; it doesn’t appear if you have an image selected). In the Category list, click “Links (CSS).”
The top set of options—font, size, bold, italic—sets the basic format for every link on the page. The next group of options sets the color of the links under specific conditions. Web browsers keep track of how a visitor interacts with the links on a page, such as when she points to a link. Each link has four modes (called states): a plain, unvisited link is simply called a link; a link that a visitor has already clicked (determined by your guest’s browser history) is called a visited link; a link that a guest’s mouse is currently pointing to is technically in what’s called a hover state, though Dreamweaver refers to it as a rollover state; and a link in the process of being clicked (where a visitor has pressed but not released his mouse button) is known as an active link.
You can style each link state individually. In most browsers, a plain link appears blue until you visit the linked page—then the link turns purple. This helpful color-coding lets a visitor know whether to follow a link: “Hey, there’s a page I haven’t seen,” or “Been there, done that.”
The rollover (or hover) link is useful in telling visitors that they can click the link because it provides visual feedback, and it lends itself to a lot of creative potential. For example, when a visitor points to the link, you can change the link’s color, add a background image, or change the background color. (To get neat effects like these, you need to go beyond the Page Properties window and set the styles using CSS, as described next.) But there’s a drawback to rollovers these days: Visitors using phones and tablets can’t see the rollover effect because they’re using a finger instead of a mouse, and fingers don’t hover.
Finally, an active link is for that fleeting moment when a visitor clicks a link but has yet to release the mouse button. It happens so fast that it’s usually not worth spending too much time formatting the state.
Note
Internet Explorer applies the active link style to any link a visitor tabs to (some web surfers can’t, or don’t want to, use a mouse, so they rely on the keyboard to navigate websites). Firefox, Safari, Opera, and Chrome use yet another link state, called focus, to style links that someone reaches via the Tab key. See the note in Figure 4-12 for more on a link’s focus state.
The Page Properties window lets you change the color of each link state. In addition, the “Underline style” menu lets you control whether a browser underlines a link (the norm), displays nothing beneath the link, displays an underline when a guest points to the link, or underlines the link by default but removes it once a visitor points to it. Since web surfers are accustomed to thinking of underlined text as a big “Click Me” sign, think twice before removing underlines from links. Without some clear indication that the text is a link, visitors may never see (or click) the links on your page.
One problem with using the Page Properties window to style links is that the settings apply only to the current page. That’s because the Page Properties window saves the CSS styles to an internal style sheet in the page. Fortunately, you don’t need to set the Page Properties on every page of your site; you can export those styles or even drag them to an external style sheet. (To learn how, see Moving and Managing Styles.) Alternatively, you can bypass the Page Properties window altogether and create CSS link styles from scratch—which you’ll learn about next.
CSS and Links
Using CSS Designer to style links lets you tap many more formatting options than the Page Properties window offers. In fact, CSS Designer lets you apply nearly every CSS property to links. For example, you can set all the text options discussed in Frequently Asked Question: Italic and Oblique Text—font size, weight, variant, letter spacing, and so on. In addition, you can add a border (Adding Borders) and a background color to a link to make it look like a button.
To format the look of all your links, create a style for the <a> tag (the tag that creates links) using the instructions in Creating Styles. To create a different look for a particular link (if you want that “Buy Now!” link to be bigger and bolder than other links on a page, for example), create a class style (Types of Styles) and apply it to that link.
To control how a link looks for different states (link, visited, hover, and active), you need to dip a little deeper into the CSS pool and use what’s called a pseudo-class. Pseudo-classes give you a way to apply special effects to CSS selectors depending on your visitor’s actions. For example, you can change the way an <a> tag’s link looks based on whether your visitor points to the link, has already clicked the link, and so on.
As you may remember, a selector tells a browser where it should apply a style—h1 is the selector for formatting every Heading 1, for example. When you style links, the formatting is all about the <a> tag so you want to find and choose the a selector in CSS Designer’s Selector section. In CSS, you distinguish pseudo-classes from selectors by using a colon between the two. So in a style sheet, the four pseudo-classes for the a link look like this: a:link, a:visited, a:hover, and a:active. It’s easy to create a selector and pseudo-classes in CSS Designer because a pop-up menu prompts you with valid classes as soon as you type in the colon (see Figure 4-12).
You don’t have to set all four pseudo-classes; if you’re not interested in how your link looks during the nanosecond when a visitor clicks it, skip the a:active option. If you want to set more than one pseudo-class, you must create them in the order that they appear in the pop-up Class menu, or the styles may not display as you intend them. In CSS Designer’s Selectors section, that means your pseudo-classes should be in this order, from the top: a:link, a:visited, a:hover, and, if you’re using it, a:active. (A helpful mnemonic for remembering this rule is LoVe HAte—that is, :link comes before :visited, which comes before :hover, which comes before :active.) If your links are in the wrong order in the Selectors section, move them. Click the source in CSS Designer’s Sources section, and then, in Selectors, click and drag your selectors and their pseudo-classes to the proper position. This actually rearranges the code in the style sheet.
Note
Safari, Firefox, and Chrome browsers understand an additional pseudo-class related to links: a:focus. This selector applies when a visitor uses the Tab key to move from one link to another on a page. Each time she jumps to a new link, the browser highlights it and gives the link “focus.” All versions of IE treat a:active as if it were a:focus.
The focus pseudo-class has a special role in making sites accessible to people who navigate websites using a keyboard rather than a mouse. To create a style that formats a link when a visitor tabs to it (instead of pointing to it), create what’s called a group style. Here’s how: When you create the highlighted link style, choose Compound for the selector type. For the selector name, type in a:focus, a:active. This highlights the “tabbed to” link in all current browsers.
Using these styles, you can make your link text appear red and underscored before a visitor clicks the link, twice as large when he points to it, purple and boldfaced when he clicks it, and pale pink after he visits the linked site. (Granted, if you try this, Martha Stewart may never hire you to design her site, but you get the point.)
Note
For privacy reasons, some browsers limit the styling you can apply to a visited link. In other words, say you create the pseudo-class style a:visited and change the font, font size, background color, underline, and set its text color to red; the only visual change the browser will make to a visited link is to change its text color to red—browsers simply ignore the font, background-color, and other settings.
Link pseudo-classes have one drawback: Setting them affects all the links on a page. In that respect, adding pseudo-classes to the <a> tag is like creating tag styles.
To apply a style to only certain links on a page, you need to create a class and then create CSS rules to style the class and its pseudo-classes, like link and hover. For example, to create a special look for the text link “Buy Now!”, create a selector called .buynow:link in CSS Designer. The class, .buynow, has the pseudo-class :link tacked onto it. To make that link look different when someone points to it, create a .buynow:hover selector. Naturally, you need to create the style rules that go along with the .buynow class and its pseudo-classes. You can change the color, size, style, and other properties of the text to make the link stand out. To do that, follow the steps for creating a style in Creating New Styles with CSS Designer. Once you define the style, all you need to do is apply the .buynow class to the text on your page. You can do that easily in the Properties panel’s Class menu. Check your work in Live view, and you’ll see the link with the .buynow class applied.
Note
Descendent selectors provide a more efficient—but more complex—way to format specific links differently from all the other links on a page. You’ll find this CSS concept discussed in Descendent Selectors.
Creating a Navigation Menu
Every website should have navigation links that let visitors jump quickly to different sections of a site. On a shopping site, for example, those links might point to the categories of products for sale—books, DVDs, CDs, electronics, and so on. For a corporate intranet, links to human resources, office policies, company events, and each department might be important. Whatever the site, you should strive to get visitors where they want to go via the shortest route possible. Navigation menus are a good solution, because everyone using a computer is familiar with them.
Dreamweaver CC doesn’t have a built-in system for creating navigation menus, but with the help of some third-party tools, known as Adobe Add-ons, you can easily do so. Think of add-ons as helper programs for Dreamweaver; once you download and install them, they give the program capabilities it didn’t have before. Best of all, add-ons are fairly easy to get up and running (as you’ll see below), and they’re integrated into Dreamweaver—their commands and tools appear in Dreamweaver’s menus and panels.
Some menus rely on JavaScript and its jQuery plug-in, while others use only CSS to work their magic. Most, however, create a hierarchy of menus, submenus, and menu items using HTML unordered lists (Formatting Lists). That makes it easy to add and remove menu items over time, and keeps the structure of the menu separate from its formatting.
Getting a CSS Menu System from Adobe Add-Ons
The tutorial in this chapter uses a menu builder called Advanced CSS Menu Light from Ajatix (Menu Light for short). There are a number of menu creators out there, but this one is available from Adobe Add-ons, which means it’s easy to get and install. Ajatix offers a few menu builders, but this one costs everyone’s favorite price—nothing.
To automatically download and install add-ons, you need Adobe’s Creative Cloud app. For details on downloading and using the app, see the steps below. On Windows computers, it runs in the taskbar in the lower-right corner of the screen. On Macs, it appears on the right side of the menu bar, along with Spotlight and the volume control.
Creative Cloud’s file-synching feature handles downloading and installing add-ons. You can turn file synching on and off (though it needs to be on to manage add-ons), and you can pause and restart a download.
To see if you have file synching turned on, go to Creative Cloud→Assets→Files. When file synching is running smoothly, you see the message, “All files up to date” and you can go ahead and follow the steps below to install the CSS menu add-on. If synching is paused, a message near the bottom of the panel says “Synching Paused.” Click Resume Sync to start it again. If you have synching turned off, you see a big blue button that says “Start Synching.” Click that to turn synching on so you can grab the CSS menu add-on.
Tip
If you don’t want to leave Creative Cloud’s File Sync feature turned on, you can turn it on while you install add-ons and then turn it off when you’re done. The master control for file synching is in the Creative Cloud Preferences area. Open Creative Cloud, click the gear-shaped button in the upper-right corner, and then choose Preferences. Click Files and then, under Sync On/Off, click Off.
Follow these steps to download and install Advanced CSS Menu Light from Adobe Add-ons:
In Dreamweaver, choose Window→Browse Add-ons.
Your web browser opens and displays the Adobe Add-ons page (https://creative.adobe.com/addons). There are tons of extensions, but the buttons along the left side of the page help you find the extension you want.
Click the Dreamweaver icon.
The page shows add-ons that work with Dreamweaver.
Below the Featured Add-ons section, click Free.
The panel displays no-cost extensions.
Set the “Sort by” menu to Most Popular.
At this point, you may see Advanced CSS Menu Light near the top of the group of add-ons. If not, take the next step.
In the search box (upper-right) type CSS Menu, as shown in Figure 4-13.
Extensions related to CSS and menus appear in the list.
Click Advanced CSS Menu Light.
Details about Menu Light fill the panel. If you want more information, explore the Product Info, Rating & Reviews, Notes, and Previews sections.
Click the blue Free button.
The first time you get an add-on, you see an End-User License Agreement, displaying the usual legalese that explains that the extension is copyrighted. Have your lawyer read it thoroughly before you click “Accept and Continue.” If you don’t see the agreement, the download starts immediately. Some blue squares dance on the screen while you “acquire” (download) your new add-on. When the process is complete, you see the “Where to find it” section for Advanced CSS Menu Light.
The text explains that you need to restart Dreamweaver. When you do, you’ll find an Ajatix category with the menu add-on in your Insert menu (Insert→Ajatix). In the Insert panel, there’s an Ajatix category in the drop-down menu.
Figure 4-13. Adobe Add-ons is your source for finding and installing Dreamweaver tools, like Advanced CSS Menu Light, that extend the power and features of Dreamweaver and other Adobe applications. To browse add-ons, use the All, Paid, and Free buttons. To search for a specific extension, type a couple of keywords in the search box. Once you find an interesting candidate in the grid of add-ons, click it to see more details.Restart Dreamweaver, go to the Insert panel, and then select Ajatix from the drop-down menu, as shown in Figure 4-14.
The Ajatix entry appears at the bottom of the menu. When you select it, you see Advanced CSS Drop Down Menu Light. The command to launch Menu Light also appears in the Insert menu (Insert→Ajatix→Advanced CSS Drop Down Menu Light), but you need to restart Dreamweaver before you can see it.
Note
If you have more than one version of Dreamweaver installed on your computer (for example, Dreamweaver CC and Dreamweaver CC Release 2014), add-ons are installed for only one of the programs. Typically, it’s the one you installed first.
In Adobe Exchange, the name for this extension is “Advanced CSS Menu Light,” but once it is installed on your computer, the name in the Insert panel is the wordier “Advanced CSS Drop Down Menu Light.” They are actually the same thing.
Adding a Menu with Submenus
The first step in inserting a menu in a web page is deciding where on the page to put it. A horizontal menu bar, with buttons sitting side by side, works well either at the very top of a page or below the area dedicated to a logo (often called a banner; see Figure 4-15). A vertical menu bar, whose buttons are stacked one on top of the other, usually sits at the left edge of a page, below the banner area.
In the next steps, you’ll create a menu with submenus for the imaginary Chia Vet website. You can follow along, or change the item names for your own nefarious purposes. These steps assume you’ve already downloaded and installed the menu builder described in the previous section.
Start with a web page you’ve already named and saved. In the document window, click the spot where you want to insert the menu.
You can add a menu bar in either Design view or Code view, but it’s easier to position it in Design view.
In the Insert panel (Window→Insert), click the drop-down menu, and then click Ajatix.
If you installed Menu Light as described in Getting a CSS Menu System from Adobe Add-Ons, you see it listed here as Advanced CSS Drop Down Menu Light. If you downloaded other products from the company, they appear here, too.
Click Advanced CSS Drop Down Menu Light.
Menu Light opens its Start Wizard, offering two choices, “Create a new menu” and “Insert an existing menu.”
Choose “Create a new menu,” and then click OK.
Menu Light replaces the Start Wizard with a Select Theme panel. The box on the left shows a number of themes of different styles. Horizontal menus top the list, while vertical menus appear near the bottom.
In the left-hand box, click Horizontal – Leaf Green, and then click Apply (in the lower-right corner).
As you click theme names on the left, Menu Light previews them on the right. Once you choose a theme that has the color, font, and styles you want, click Apply. Menu Light closes the Select Theme window and opens another window, the New Menu window (Figure 4-16). This window is worth getting to know because you use it to build your menu link by link. And later, when you need to make changes to an existing menu, you use a very similar control panel.
Tip
If you want to insert an incomplete menu in a page to serve as a placeholder, you can do that now. Click OK, give your menu a name, and then click Save. A menu bar appears in your document with a single item in it, “Unnamed.” With your placeholder menu on the page, you can come back later and build your menu by adding items, submenus, and all the trimmings, as explained in Adding, Editing, and Removing Menu Links.
Figure 4-16. Menu Light’s New Menu panel gives you all the tools you need to create a snazzy menu for your site. You build one menu item at a time by first adding a label in the Text box; the words you type here appear on the web page’s menu. Next you add the address of the destination page in the Link box. The best way to do that is to click the “Browse for File” button and navigate to the page.In the box labeled Text, type Home.
The words you type in the Text box will appear in the menu. For this first menu item, change the word “Unnamed” to “Home.” As you type, Menu Light adds your new item to the list on the left and changes the preview at the bottom to read “Home.”
In the Link box, type index.html.
You can type in any valid link. For this example, it makes sense to type index.html because that’s the standard name for a website’s home or default page. However, the best way to add most links is to click the Browse button (“...”) next to the Link box and navigate your way to the destination page. That creates a link with the proper path and no typos!
At a minimum, you should provide a label and URL for your menu items. As explained in the box in Frequently Asked Question: Targeting and Titling Links, you don’t have to add a title or target. In fact, ignore the target option unless you want the linked page to open in a new browser window. Fill in a title for the link if you feel the need to provide a better description than the one in the Text box. Titles benefit people with screen readers and they can give you a boost with search engines. In this example, you’ll add a title.
In the Title box, type Welcome to Chia Vet.
For most browsers, this message appears as a tooltip that pops up when someone points to a menu item. Screen readers read these words aloud to visitors, and some search engines read and evaluate the words when ranking a page.
Click + on the left side of the panel.
That adds a new menu item. The function of the other buttons in this row are pretty easy to figure out. The - button removes an item from the list, while the arrow buttons move items up and down in the list, and in- and outdent them. The details are in Figure 4-15.
For the new menu item, change “Unnamed” to About Us in the Text box. Then type about.html in the Link box. In the Title box, type More Info about Chia Vet.
It’s just that easy to create a second menu item, complete with a link and title. In the next step, you’ll add a submenu to About Us.
Click + on the left side of the panel. Below the menu list, click the right arrow button (the Move Item Right button).
When you click +, Menu Light adds a new “Unnamed item” below About Us. When you click the Move Item Right button, the Unnamed item shifts to the right in the list. In the menu preview at the bottom of the page, a down arrow (triangle) appears next to About Us, telling you that this menu item includes a submenu. If you point to About Us, you see the submenu with one “Unnamed item” listed.
Using the arrows below the menu list (Figure 4-16), move items up and down in the list. You see the results immediately in the menu preview. To create a submenu or to add an item to a submenu, click the right arrow button. The left arrow button removes an item from a submenu, bumping it up a level. If it’s the last item in the submenu, it removes the submenu entirely.
With “Unnamed item” selected in the list, type History in the Text box and then type history.html as the link.
The submenu item now has both a title and a link. Continue adding items and submenus as needed.
When you’re done, click OK.
The Save Menu As box appears, where you name the menu.
Type NavChiaVet and then click Save.
You use the CSS filename NavChiaVet.css to add this same menu to other pages on your site. When you click Save, Menu Light creates two new files in your site’s root folder. The file NavChiaVet.css formats the menu and its items. The file NavChiaVet.ajm is an Ajatix proprietary file (.ajm) that stores information about the menu you just created. Dreamweaver uses this information when you add the menu to other web pages.
You won’t need to edit these files, so don’t worry about them too much, but don’t move or delete them, either. If you do, your menus won’t work as expected.
Once you finish a menu, you’ll see something like the menu shown in Figure 4-17. It may include several submenus, like the About Us and Facilities menus do here. Naturally, you’ll adapt the actual menu to match your project. Adding the CSS Menu to Other Pages explains how to add an existing CSS menu to another page. The next section explains how to make changes to your menu after you create it.
Adding, Editing, and Removing Menu Links
At some point, you’re going to want to edit one of your menus—your site structure may change, forcing you to relink pages, or you may add a section to your site that you want to appear in the menu.
To edit a menu, open a page that uses it. Go to the Insert panel (Window→Insert), click Ajatix from the drop-down menu, and then double-click Advanced CSS Drop Down Menu Light. Dreamweaver opens the panel shown in Figure 4-17. Here you can create a new menu, insert an existing one, or edit a menu on the page. Choose the last item, “Edit menu on page.” A box at the bottom of the panel lists all the menus you’ve created for the site so far. Select the one you want to edit and then click OK. Dreamweaver opens the menu in a window like the one in Figure 4-16.
At this point, editing your menu is like creating a new one (described in Adding a Menu with Submenus). Your menu panel should look like the one in Figure 4-18. Use the 
and 
buttons to add and remove menu items. Use the arrow buttons to position items in the list, or to move them back and forth between submenus. To edit a link, select the link’s label from the list on the left and then use the Browse button next to the Link box to select a new destination page.
Note
As you work with the Light version of Advanced CSS Drop Down Menu, you’re likely to encounter features that have an asterisk and a note that says “Not available in the Light version.” These features let you create and edit animated effects, highlight current items, add rounded corners to drop-down menus, and manually position submenus. Bottom line: If you need to support touch devices, assign individual colors to specific buttons, or want the most recent update to the CSS menus, you’re better off ponying up the cash for the full-featured version of the program at http://www.ajatix.com/.
Changing the Look of the Navigation Menu
When you first create a menu with Menu Light, you choose from 18 themes. They include horizontal and vertical menus, and a choice of color schemes and fonts. Some themes have a rounded, three-dimensional look, while others appear flat. Chances are, you’ll find something suitable for your site.
But when it comes to making your menu “perfect,” you probably have your own ideas about colors, fonts, and other styles. Menu Light formats its menus using CSS style sheets, so you could head over to CSS Designer, find the source for your menu styles, and start editing them. However, Menu Light uses some pretty cryptic names for selectors, so you’d spend way too much time just identifying the selectors that control the styles you want to change. The easier way to edit your menu is with Menu Light’s Style Editor, found under the same-named button at the top of the edit window. (As you learned in the previous section, you use the Menu Editor to create the structure of your navigation menu. Here you’ll use the Style Editor to modify its appearance. These two editing tools share the same window, so you fire them up in the same manner.)
The Style Editor (see Figure 4-19) makes it easy to identify page elements and apply changes. Suppose you want to change the font the Chia Vet menu uses. You first open a page that has the menu in it. Then, from the Insert panel, open the Ajatix category and double-click Advanced CSS Drop Down Menu Light. In the Start Wizard that opens (Figure 4-17), choose “Edit menu on page,” select the NavChiaVet.css menu, and then click OK.
When Dreamweaver opens the editor, click the Style Editor button, shown in Figure 4-19. The style editor’s layout is similar to the menu editor’s, and you work with the two in the same way. Use the pane on the left to select a section of your menu, the main part of the window to edit button styles, and the bottom pane to preview your changes. For example, to edit the font for your menu items, select that element from the list on the left.
The entries on the left—Global, Top Menu, and Submenu—identify the major sections of any menu. To see the properties for a menu item, click Regular Items under Top Menu. Dreamweaver displays the properties for top menu items in the main part of the window. An additional row of tabs (Size & Position, Colors, Images, and Text) lets you refine their styles. Click Text, for example, and you see several text-related widgets, including one that lets you change fonts.
The key to styling menus is identifying the menu item you want to format in the Style Editor and then hunting down the property you want to tweak. The good news is that the menus all use CSS styles, and the tabbed panels are fairly well organized. So if you’re familiar with CSS color, text, border, background, and positioning properties, you have a head start with the Style Editor. The next few sections explain how to style different parts of your menu.
Tip
The preview at the bottom of the Style Editor shows you the effect of your new style. When you click OK and close the Style Editor, you should see those changes reflected in Design view, but that doesn’t always happen. Sometimes, the display gets “stuck” on the previous styles. You can take a few steps to fix this. First, choose File→Save All Related Files. If you find Save All Related Files grayed out, choose Save All. This saves your website and any changes you made to it, and saves the CSS style sheets the menu-builder uses. Switch to Live view and you should see the effect of your edits. If the page still looks odd, click the Refresh button (the one with two arrows going in a circle). One of those steps should update the menu to your new styles.
Formatting Top Menu items
Menu Light always displays the menu buttons you created for the main menu bar, whether you use a vertical or horizontal menu. You can style the background of the menu bar and of the menu buttons themselves. To change the background bar, select it in the Top Menu list. Menu Light displays the main menu properties under two buttons in the main window, Layout and Style.
Use the Layout button’s settings to change the menu’s orientation, set the width of the background bar, and align the menu on your web page (Figure 4-20).
Orientation. This drop-down menu gives you two options, Horizontal and Vertical. Even if you initially chose a theme with a horizontal orientation, you can use this menu to change it to a vertical menu.
Width. Choose none if you don’t want to specify a width. In that case, the length of the button labels determines the width of the menu bar. Choose Fixed to set a specific width using pixels as the unit of measure. Choose 100% if you want the menu bar to fill the available space. Choose Min to set the minimum space, in pixels, for the menu background. That way, Menu Light will always make the width of your menu bar equal to or greater than the minimum value. Choose auto to have the background menu bar change size depending on the size of menu items, their spacing, and their padding.
Menu align. You can choose Left, Center, or Right to position your menu on the page. Most people choose Left.
Sublevel offset. Use these settings to position submenus when they pop up. Left to the factory setting of 0, the submenus will touch the menu item that triggered them. To move the menu down from a triggering item, set a positive value (in pixels) in the y property. To move a submenu to the right, set a positive value in the x property. Negative values position submenus up or to the left of their triggering items.
Using the Style Editor’s Style button, you can change the color and images behind the menu. Make sure you select Top Menu in the list on the left, and then set values for these properties:
Background color. Click the swatch and choose a color. Use the Transparent option to make the background invisible, so that Dreamweaver displays only the menu items (buttons), not the backgrounds. (Menu Light uses your operating system’s color picker, so the Windows tools look different from the Mac tools.)
Border. To add a border, turn on the checkbox and then click the swatch to choose a color.
Background image. You can use an image for your menu’s background. Use the alignment tools to position the image horizontally and vertically. If your image is smaller than the background bar, set the Repeat menu to Repeat. This replicates the image both horizontally and vertically. Choose repeat-x if you want to repeat the image horizontally only, or repeat-y to repeat it vertically. The repeat options are standard CSS settings, which you can learn more about in Background-repeat.
To change the background color of a menu item (as opposed to the entire menu bar), go to the list on the left and, beneath Top Menu, choose Regular Items. The main part of the window displays the properties related to the buttons in the menu. Menu Light groups the properties under four tabs: Size & Position, Colors, Images, and Text.
Size & Position
Width. Turn on the Width checkbox to use a fixed width, measured in pixels. Otherwise, Menu Light automatically adjusts the width to fit the text.
Height. This works the same way as the width. Turn on the Height checkbox and type in a value in pixels.
Padding. As usual with CSS, padding is the amount of space between the text and the edge of an element, in this case the menu button.
Spacing. To add space between menu items, set a value in pixels here. When you have space between menu items, the background shows through (if the bar is transparent, you see elements on the web page peek through).
Overlap child dropdown. Turn on this checkbox when you want drop-down menus to overlap the triggering menu item.
Colors
Use the color settings to change the appearance of buttons in their Normal and Over states (the latter when a guest points to a button). Clicking the color swatches next to Items (the button’s background), Text, and “Border standard” opens your operating system’s color picker, which looks different on Windows and Mac computers. In either case, you specify colors by clicking them or typing in values.
Images
Click this tab to choose background images for buttons. You can choose different images for buttons that lead to submenus and for those that don’t. For even snazzier effects, choose different images for the normal and hover states.
Text
The Text tab lets you format the “usual suspects”: the font (called Face in the Font group), size (specified in pixels), style (bold, italic, or underlined), and capitalization (none, Capitalize, Uppercase, and Lowercase), known as Transform in Menu Light. Use the Align menu to position the button text to the left, right, or center. You can add left and right padding and specify different values for items that lead to submenus.
Formatting rollover menu buttons
Visitors get instant feedback when they interact with menus. Pointing to a menu button, for example, changes the color of the button and its text, letting visitors know, “Hey, I’m a link; click me!” You set the colors when you style your menus, as described in the previous section. With the Style Editor button selected, select Top Menu→Regular Items from the list on the left to display the properties that style your Top Menu buttons. Click the Colors button. To set the colors Dreamweaver displays when a guest points to a button (what Menu Light calls a link’s mouseover state), change the Mouseover values.
To create rollover buttons for submenus, choose Submenu→Regular Items, and then click the Colors tab. To set the background color for a submenu item, click the Normal swatch under the Item heading, and then choose a color from your color picker. Repeat the process with the Mouseover swatch under Item, but, of course, choose a different color. In this case, you choose the background color that appears when your guest points to a submenu item. If your color scheme calls for it, you can repeat the process to create different Normal and Mouseover colors for the submenu button’s text and border.
Formatting submenu buttons
Submenu buttons appear in Menu Light’s drop-down menus. In fact, with Menu Light, your submenus can have submenus. But don’t get carried away nesting menus, or you’ll try the patience of your visitors.
Using the Style Editor, format your submenus the same way you format the top menu. In fact, you use the same properties and have the same options as in the top menu. If you prefer an understated appearance, style your submenus with the same colors and rollover properties as your top menu. If you want your submenus to stand apart from the top menu, use different but complementary colors.
To format a submenu’s background box, click Submenu in the list. To format the submenu’s buttons, click Regular Items beneath Submenu.
Note
Menu Light displays an Animation tab when you choose Submenu from the left-hand list. This feature is listed, but not available, in the Light version of the menu-builder. Its properties control the speed, direction, and other effects used to display the submenu. If you’re interested in controlling a submenu’s animation, you can get the full version of Advanced CSS Drop Down Menus from Ajatix at http://www.ajatix.com/.
Tutorial: Adding Links to Pages
In this tutorial, you’ll link to other pages on your own site, link to another site on the Web, and create a great-looking CSS-powered navigation bar, complete with fancy drop-down menus. (To see the completed page, skip ahead to Figure 4-28.
Note
To complete this tutorial, you need to download sample files from this book’s Missing CD page at http://oreilly.com/pub/missingmanuals/dreamweaverccmm2014. (See the Note in Tutorial: The Dreamweaver Test Drive for details.) The files you’ll work on are in the Chapter04 folder, and the finished project, for comparison, is in the Chapter04_complete folder.
Linking to Other Pages and Websites
Once you download the tutorial files and open Dreamweaver, set up a new site as described in Figure 1-13. In a nutshell, choose Site→New Site. In the Site Setup window, type Links into the Site Name box. Click next to the Local Site Folder box, navigate to and select the Chapter04 folder inside the MM_DWCC folder, and then click Choose (Select on Macs). Finally, click OK.
Once again, you’ll be working on a page from Cafe Soylent Green.
In the files panel, double-click the file index.html.
You can also choose File→Open, select the filename, and then click OK (Select on Macs). You’re looking at a basic web page, with a banner, some text, and a footer. It’s all contained inside a <div> tag that’s 800 pixels wide and centered on the screen (you learned how to do this in the tutorial in Chapter 1, in Tutorial: The Dreamweaver Test Drive).
If your screen is wide enough to show both Code and Design views side by side, click the Split button in the top-left corner of the document window. If you can’t fit both comfortably, click the Design button.
At the end of the last paragraph, in the section with the headline “All Natural Ingredients,” you’ll see the text “Read more about our natural ingredients.” This sentence should link to another page.
Select the text “Read more about our natural ingredients.” In the Properties panel, to the right of the Link box, click
, the “Browse for File” button.Dreamweaver opens the Select File window. (If you don’t see the Link box, you may be in the Properties panel’s CSS mode. In that case, click the panel’s HTML button.)
Click Site Root (at the bottom right) to go to your site’s main folder. Double-click ingredients.html.
Dreamweaver closes the Select File window. That’s it? Yup. You just created a link. Now you’ll learn an even faster way to do the same thing.
In the last paragraph before the page’s footer, select the text “Read more about our nutritional principles.”
Make sure you have the Files panel open (Window→Files).
In the Properties panel, drag the “Point to File” icon (
) beside the Link box into the Files panel, point to the file nutrition.html, and then release the mouse button.Dreamweaver adds the link to your page. (If you have the double-monitor configuration discussed in the Note in Figure 4-6, this point-to-file technique won’t work. Use the method described in steps 2 and 3 above.)
Note that if you wanted to link the text in the examples above to a page on another website, you couldn’t use either of the methods outlined here. Instead, you’d need to type an absolute URL into the Link box, as you’ll see in the next two steps.
Scroll to the bottom of the page. In the footer, find the phrase “in collaboration with Cosmopolitan Farmer” and then select the text “Cosmopolitan Farmer.”
You want this text to link to the parent company’s site.
In the Properties panel’s Link box, type http://www.cosmofarmer.com/, and then press Enter (Return).
Now the text “Cosmopolitan Farmer” links to the CosmoFarmer.com website. Unfortunately, the blue links don’t fit in with the cafe’s color palette. You’ll remedy that next.
Formatting Links
You can change the look of links using a little CSS.
Make sure you have CSS Designer open (Window→CSS Designer). In the Sources section, choose soylent_styles.css.
In the Selectors section, you see the selectors you created in soylent_styles.css. You haven’t added a selector for links (the <a> tag) yet. (That’s why the text for your link uses the standard link color, blue.)
In Selectors, click to add a selector. In the text box, type a, and then press Enter (Return) twice.
When you type a, the new selector replaces the selector CSS Designer suggested. The first time you press Enter (Return), you select the <a> tag from the pop-up menu. The second time you press Enter (Return), you create a new selector for anchor tags.
In the Properties section of CSS Designer, click the T (text) button. Make sure you have the Show Set checkbox unchecked.
Dreamweaver scrolls the list of properties until it gets to Text.
Click the swatch next to the color property box, type #417F2C, and then press Enter (Return).
This color makes your text green. After you press Enter (Return), the links on the page change to green. You’ll change one more property to remove the underline from your links.
With the a selector still highlighted in the Selectors section of CSS Designer, find the text-decoration property in the Properties section. Click the first box—the one with the diagonal line through it (circled in Figure 4-21).
Setting text-decoration to “none” overrides the standard value, underlined links. As a result, browsers won’t underscore your links and pseudo-classes like hover will inherit the text-decoration style. In fact, hover is up next for some styling. (For more on pseudo-classes, see CSS and Links.)
Figure 4-21. To remove an underline from a link, set the CSS text-decoration property to “none.” You can create a look similar to an underline (but with a lot more design choices) by turning underlining off here, and then using the CSS border property to create a dotted, dashed, or different-color underline.In CSS Designer’s Selectors section, click to add a selector, type a:hover in the text box, and then click Enter (Return) twice.
A new selector appears in the list. This time, the selector includes the pseudo-class hover.
With a:hover highlighted in Selectors, click the T (for text) in the Properties section. Find the color property, click the swatch next to it, and then type #0A2F02.
To see how this rollover style works, use Dreamweaver’s Live view.
In the Selectors section of CSS Designer, choose the a selector.
At the top of the document window, choose Live from the Design/Live view menu (or choose View→Live View).
Dreamweaver includes an embedded version of the Google Chrome browser, and Live view uses it to preview the look and functionality of a web page. With Live view, you can interact with JavaScript and see CSS hover effects. Point your mouse to the various links on the page, and you see the link change to dark green and the underline disappear. (Of course, to check your work thoroughly, you should also preview your pages in Safari, Internet Explorer, and Firefox. You can do that using the File→“Preview in Browser” command if you have those browsers installed.)
Choose Design from the Design/Live view menu.
It’s generally easier to edit your page in Design view, so leave Live view when you’re ready to work on your page again.
Adding an Email Link
You’ll find the cafe’s email address—info@cafesoylentgreen.com—at the bottom of the index.html page. Clicking it, however, does nothing. Here’s how you turn that address into a link that opens your visitor’s email program and addresses a note to you:
Select the text info@cafesoylentgreen.com, or place your cursor where you’d like to add the email link.
The text you select doesn’t have to be an email address—it could say “Email us” or something similar. Likewise, if you haven’t selected any text, click where you’d like to insert the email link and move on to step 2.
Choose Insert→Email Link (or click the Email link button under the Common category of the Insert panel, shown in Figure 4-7).
Dreamweaver opens the Email Link window (Figure 4-22) with the link text and email address already filled in (it copies the link from the text you selected in step 1). If you didn’t select any text, the Text box is blank. The Email box displays the address for the last Email link you created. You’ll find this helpful if you link to the same email address all the time, or annoying if you don’t.
Dreamweaver adds the email link (pretty easy, huh?).
Adding a Navigation Bar
A navigation bar with rollover effects and smooth drop-down menus gives your website a professional look and feel, and it makes navigating your site easy for visitors.
If you haven’t downloaded and installed the Dreamweaver extension Advanced CSS Drop Down Menu Light, do that now by following the steps in Getting a CSS Menu System from Adobe Add-Ons. Then:
Return to Dreamweaver and make sure you have the file index.html open; in the banner at the top of the page, click just to the right of the word “Green.”
You’ll insert a horizontal menu bar that spans most of the page’s width. Placing it near the top of the page, as part of the banner, lets site visitors easily find it.
Choose Insert→Ajatix→Advanced Drop Down Menu Light.
The Start Wizard window opens, giving you two choices: “Create a new menu” and “Insert an existing menu.”
Choose “Create a new menu,” and then click OK.
Menu Light closes the Start Wizard and opens the Select Theme window. Choose from any of the themes listed in the box on the left. Click a theme to preview it in the box on the right.
Choose the Horizontal-Dark Olive theme and then click Apply.
Menu Light closes the Select Theme window and opens the New Menu window (see Figure 4-23).
In the Text box, replace “Unnamed” with Home.
The words you type here will show up as a button in your menu. As you type, you’re replacing the “Unnamed” label that Menu Light automatically gave the button with your own name for the link, “Home” in this case. You see the change in the page list on the left and in the preview window.
Click inside the empty box next to Link, and then click the Browse button (the three dots) at the end of the box.
Menu Light opens a window displaying your website’s files.
Click index.html, and then click Open (Select on Macs).
A link to index.html appears in the Link box.
In the Title box, type Welcome to Cafe Soylent Green.
You won’t include a title for every link in the menu, but the label “Home” is so generic that a description will help visitors who use screen readers.
Figure 4-23. With Menu Light, you build your navigation menu one item at a time. You use the Menu Editor list (shown on the left in this figure) to add and organize menu items. Select an item in the list, and Menu Light displays its properties on the right, the most important of which are Text and Link. As you can see from the preview at the bottom of the window, the words you type in the Text box appear in the navigation menu. The Link box stores the link to a specific page or to a bookmark on a page.Below the list, click (the Add New Item button).
Menu Light adds a new, “Unnamed” menu item to the list. Next, you’ll create a drop-down menu that has a submenu.
In the Text box, type Menu. Click the Browse button next to the Link box, select the file menu.html, and then click Open (Select on Macs).
The Menu button is at the same hierarchical level as the Home button. The next three items you add—buttons for Cafe Soylent Green’s breakfast, lunch, and dinner menus—will go in a submenu of the Menu button.
Click again, and then click the right-pointing triangle, a.k.a. the Move Item Right button.
After you add a new, top-level menu item, you turn it into a submenu using the right arrow key to nest the item under an existing menu item.
In the Text box, change “Unnamed” to Breakfast. In the Link box, click the Browse button, and then select breakfast.html.
You labeled your first button and created the first link for this submenu.
Click again. Type Lunch in the text box. Set the link to lunch.html. Repeat the process to add a Dinner menu item and link it to dinner.html.
No mysteries here. The process is similar to steps 11 and 12. If you have a submenu selected when you add a new item, Menu Light creates another submenu item. You can always use the arrow buttons to move an item left, right, up, or down. When you finish, the New Menu window should look like the one in Figure 4-24. Time to move on to the About Us page.
Figure 4-24. Menu Light displays the structure of your menu in standard outline form in the Menu Editor pane. You can expand and collapse the submenus by clicking the + or – buttons in Windows (shown here) or the flippy triangle on Macs. The preview pane at the bottom of the window not only shows you what your menu looks like, but it also lets you try out the drop-down menus. Menu Light automatically adds triangle icons to menu items that have submenus so visitors know they have more options.Click to add a new, unnamed menu item to the list, and then click the left arrow to move the item left and make it a top-level button. Type About Us in the Text box, and then, in the Link box, browse to and select about.html.
The left arrow button repositions the new Unnamed item so that it’s at the same level as the Home and Menu buttons. Next you’ll add two submenu items under About Us: Directions and Hours.
Click twice to create two new items. Type Directions and Hours in their respective Text boxes. Set the links to directions.html and hours.html. Use the right arrow to position Directions and Hours as submenu items under About Us.
As you add each button, Menu Light previews it as a submenu item under About Us.
Click OK. In the “File name” box of the Save Menu As window, type soylent_menu. Click Save to save your menu with this descriptive name. Now is a good time to save all your work, so choose File→Save All.
The New Menu window closes, and you see your menu in Design view in all its glory. If you’re eager to give it a test drive, switch to Live view. On the document toolbar’s Live View Options menu, turn on the Follow Links Continuously checkbox. You haven’t added your menu to the other pages in your site, so you’ll need to use the back arrow on the document toolbar to return to the Home page. Remember to switch back to Design view when you move on to the next section, where you’ll style your menu.
Styling the Menu Bar
The basic look of your menu isn’t bad, but it could benefit from some style changes. For example, the text is a little small, and the menu bar has only three items, so it doesn’t need to extend across the banner. Fortunately, styling your menu is almost as easy as creating it.
With index.html open in Design view, choose Insert→Ajatix→Advanced Drop Down Menu Light.
The Start Wizard window opens, with the radio button “Edit menu on page” selected and the menu you just created listed in the filename box. If your cursor is inside your menu when you choose the Insert→Ajatix→Advanced Drop Down Menu Light command, the Start Wizard window doesn’t open—the menu editor opens with your menu loaded and ready for editing. In that case, you can skip the next step.
Click soylent_menu.css, and then click OK.
Menu Light’s Menu Editor/Style Editor window opens, with the name of the menu in the title bar. You used the Menu Editor in the previous exercise to build your menu. Now you’ll use the Style Editor to make it look nice.
Click the Style Editor button.
The list on the left changes from listing the individual menu buttons you previously created, like Home and About Us, to listing the generic terms Global, Top Menu, and Submenu. In the following steps, you’ll see that the Global styles apply to the entire menu, Top Menu styles affect all Top Menu items, and Submenu styles apply to all submenu items.
Initially, the Global item is selected so you see the Z-index property on the right. You see other Global properties grayed out because they’re not available in the Light version of Advanced CSS Drop Down Menu.
Leave the Z-index set to 100 and then, in the list, click Top Menu.
The Z-index determines whether your menu appears in front of or behind other elements on a web page. It’s a standard CSS property covered in Width and height. Here’s how it works: The Z-index controls the order of stacked elements on a page. An element with a larger Z-index (a higher number) appears in front of other elements. Menu Light automatically gives your menu a very high Z-index number: 100. In most cases, you won’t need to change it. However, if your menu is hidden underneath another page element, say the banner at the top of the page, you can enter a higher number here to fix the problem. If you want your menu underneath another element, change this to a lower number. It may take some experimenting to get the order just right.
When you click Top Menu, the window changes. Two buttons divvy up the styling chores, Layout and Style.
Click Layout, leave Orientation set to Horizontal, change the Width value to None, and leave “Menu align” set to Left.
When you finish, the settings should look like those in Figure 4-25. The width property affects the width of the bar that holds your Top Menu buttons. Set to None, Menu Light applies no specific width to the menu bar. This removes the green band (background) that extends beyond the three menu items. The “Menu align” setting—Left, Center, or Right—positions the top menu bar. The Left option works best for Cafe Soylent Green because it places the menu directly below the name of the cafe.
Figure 4-25. To change a menu from horizontal orientation to vertical or vice versa, use Menu Light’s Orientation drop-down menu. In this example, you set the width to None, so the menu bar can stretch and shrink to fit menu items. The “Menu align” option lets you position the menu bar to the right, left, or center of the page.Click the Top Menu’s Style button and then click the Background color swatch. In the Select Color window, choose Transparent. Turn off the Border option.
The Top Menu color and border settings apply to the background bar behind menu items. With these settings, you hide that background bar. In the following steps, you’ll space out the menu buttons so you can see part of the banner behind them.
In the menu list, click Regular Items under Top Menu.
The properties here format the top-level menu buttons. Initially, the Size & Position tab is selected.
Set the width to 100px, the height to 30px, and the spacing to 20px.
With the Width and Height boxes checked, the dimension item (the rectangle) is set to fixed dimensions. So an item with the text “lunch” will have the same size background rectangle as an item with more text, like “early breakfast.” There’s one case that overrides this setting. If the text overflows the width of the box, the width remains fixed, but Menu Light automatically adjusts the height, adding more lines to accommodate the text. For this project, with a width of 100px and a height of 30px, the text in the top menu buttons has some breathing room. The Spacing setting puts some distance between each of the menu items. With the background bar hidden (step 6), you see the site’s banner behind the top menu items. You can’t quite see the effect at this point because the top menu items don’t have any background color. You’ll fix that next.
Click the Colors tab and then turn on the checkboxes next to Normal and Mouseover.
You’ll pick the colors for a menu item’s normal state (when the link just sits on the page) and for the state when a guest points to the button. For each state, you can choose colors for the button’s background, text, and border.
Click the color swatch for Normal/Item.
The process for choosing a color in Menu Light is different for Windows PCs (Figure 4-26, left) and Macs (Figure 4-26, right). For the menu portion of this tutorial, you’ll specify colors as RGB (red, green, blue) values.
On Windows PCs, you see the operating system’s familiar color picker, with swatches on the left and a spectrum square on the right. Below that, boxes let you specify a color as a hex value, an HSL value, or an RGB value. For this tutorial, use the RGB system.
When you click a color swatch on Macs, you see familiar color picker options. Choose your color using the color bar sliders (second button from the left in the Colors window). Then, from the drop-down menu, choose RGB Sliders.
For the Normal menu link, set the RGB values as follows:
For items, use 70, 133, 49.
For text, specify 242, 229, and 194.
As a finishing touch, turn on the border checkbox and set the border color to match the text (242, 229, and 194).
With these settings, buttons in their normal state have a green background and a dark-gray border. The text is the same light color you used at the bottom of the page for the copyright background. For the menu’s state when a visitor points to a link (what Menu Light calls a mouseover state), you’ll swap the text and background colors.
Figure 4-26. Menu Light uses your operating system’s color picker, which looks different on Windows PCs and Macs, even though you enter the same red, green, and blue (RGB) values. Left: For Windows PCs, type the color values in the circled boxes. Right: For Macs, choose the color bars (circled), select RGB Sliders from the drop-down menu, and then set the color by either using the sliders or by typing color values in the Red, Green, and Blue boxes.Move to the Mouseover color swatches. Set the Item color to 242, 229, 194 and the text color to 70, 133, 49.
Reversing colors is a good way to provide feedback for rollover items. In the next step, you’ll increase the size of the button text.
Click the Text tab and then, in the Face (think typeface) drop-down menu, choose “Verdana, Geneva, sans-serif.” Turn on the B (Bold) button next to both Normal and Over, set the size of the text to 14px, set the Transform menu to Uppercase, and then set “Align menu” to Center.
CSS menus don’t currently recognize web fonts, so choosing “Verdana, Geneva, sans-serif” is a reasonable substitute for PT Sans. The Bold and Size settings make the button text easier to read, and the Uppercase setting makes the text for all the items uniform in appearance. The Top Menu Text settings should now match Figure 4-27.
You style submenu items separately from top menu items. That’s next on the agenda.
In the list, click Submenu and then click the Style button. Set the background to Transparent and turn the Border checkbox off.
You can use dramatically different colors for submenus, but that can be distracting. In this case, you’re styling the submenu to match the top menu.
In the list under Submenu, click Regular Items. In the Size & Position tab, set the width to 100px, the height to 27px, and the spacing to 3px.
This width—100px—matches that of the top menu, while the height makes the submenus a tad shorter than the top menu. The spacing lets the submenu background show through. In effect, this creates a matching border around each of the submenu buttons.
In the Colors tab, set the Normal colors to match the Normal colors in the top menu.
For items, use 70, 133, 49.
For text, specify 242, 229, 194.
For the border, use 242, 229, 194.
Next pick the colors for the Mouseover state.
For the Mouseover state, set the Item color to 242, 229, 194 and the text and border colors to 70, 133, 49.
The button’s background and text switch colors when a guest points to them.
Click the Text tab. In the group of fonts at the top of the window, set Face to “Verdana, Geneva, sans-serif,” and the font size to 12. Turn on the bold setting (click the B button) for the Normal and Over states, set the Transform menu to Uppercase, and then set the Align menu to Center.
The text for the submenu will be a little smaller than the text for the top menu, but the other characteristics will match.
Click OK.
Menu Light rewrites the soylent_menu.css file to match your specifications.
Note
If you don’t see the changes in your document immediately, Dreamweaver may not have loaded the changes from the CSS file. If that’s the case, choose File→Save All Related Files. If that command isn’t available (it won’t be if you used it recently), choose File→Save All. Then switch to Live view and, in the document toolbar, click Refresh to reload the HTML and CSS files.
Choose File→Save All.
You save any changes made to index.html and to your CSS files. The next step is to add your menu to the other pages in your website.
Adding the CSS Menu to Other Pages
You’ve built a menu that links the pages in your site. The problem is that those pages don’t have the same navigation bar. Fortunately, it’s easy to add an existing menu to a web page. After all, the CSS file soylent_menu.css has all the formatting your menu needs, and Menu Light’s definition file, soylent_menu.ajm, stores the menu description.
Choose File→Open and then select about.html.
You need to have a web page open in the document window to add an existing menu.
In the banner, click after the word “Green.”
This positions the cursor where you want to insert the menu.
Choose Insert→Ajatix→Advanced CSS Drop Down Menu Light.
Menu Light’s Start Wizard offers two options, “Create a new menu” and “Insert an Existing menu.”
Click “Insert an existing menu” and then click OK.
The dialog box closes and the Open Menu window appears, where you can select a file.
Choose soylent_menu.css and then click Open (Select).
The menu editor appears, where you see the Menu Editor and Style Editor buttons. You don’t need to make any changes at this point.
Click OK.
The menu editing window closes, and Menu Light adds your menu to the page.
Choose File→Close. When prompted to save your page, click Yes.
Menu Light saves and closes your web page, complete with its shiny new menu.
Repeat steps 1–7 for each page in your site.
Once all the pages have the same menu, visitors will find it a snap to jump from one to the other.
Get Dreamweaver CC: The Missing Manual, 2nd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
