Working Smart with Links

[ LiB ]

Links are at the heart of web interactivity, and there's a lot you can do to make them more powerful, more fun, and more interactiveand even more accessible!

Making Your Links Accessible

There's nothing inherently inaccessible about links. But your job as a web author involves making them easier to deal with. In a graphical interface, the user can glance quickly down each page hunting for exactly the links needed. But a screen reader reads the entire page from top to bottom, and links can easily get lost in the shuffle. The user who wants to jump right into the page content doesn't want to listen to a dozen links in the top navigation bar. The user who wants to head straight for the links at the bottom of the page doesn't need to listen to the entire page being read before getting there. Section 508, § 1194.22(o), states:

A method shall be provided that permits users to skip repetitive navigation links.

There's no magic HTML tag or attribute for taking care of this, nor does Dreamweaver have a magic bullet for you. But that doesn't mean it's difficult! The solution is as easy as adding an extra link at the top of any set of repetitive links. Do it this way:

1. At the end of your set of links, immediately before the main page content starts, insert a named anchor. Call it something sensible like main . (For details on creating anchors, see the section "Named Anchors" earlier in this chapter.)
   
   
2. At the beginning of the set of links, insert text or an image and link it to that anchor. The text might say Skip Navigation or Skip to Main Content.
   
   

If you don't mind that the skip-navigation link is visible, your job is done. But you can also hide it. To create a truly invisible link, use a single-pixel transparent spacer GIF as your image. Give it some alt text, such as Skip to Main Content or Skip Navigation, and link it to the anchor. Screen readers will read the alt text, but graphical browsers will completely pass over the image.

The code for an invisible skip-navigation setup looks something like this:

 <a href="#main">   <img src="spacer.jpg" width="1" height="1" alt=Skip to main  content> </a> [navigation bar or other set of links goes here] <a name=main></a> [main page content goes here] 

Figure 6.32 shows how it looks as it's being created in Dreamweaver.

Figure 6.32. Using a transparent spacer image as a skip-navigation Link.

Special Requirements for Image Maps

Of course, image maps are made from images, so all image-accessibility guidelinesmost important, the use of alt labelsapply. In addition, Section 508, § 1194.22(e), states:

Redundant text links shall be provided for each active region of a server-side image map.

Client-side image maps don't require redundant text links because each hotspot in the map has its own alt attribute.

On a less-official note, be aware that image maps are more accessible if their hotspots are large and easy to click on. They should be more or less uniform in size, if not in shape, and large enough that they can be easily found by the cursor. A hotspot should always correspond to a portion of the graphic that clearly communicates the URL destination; if words aren't used, universally understandable icons (such as a mailbox for an email link) should be employed.

Dressing Up Your Links with CSS

By default, links are highlighted in the browser with bright blue. Linked text gets a blue underline; linked images get a blue border. Visited links get a purple underline or border. Although some web pundits argue that we shouldn't mess with these settings (or visitors might get confused and not recognize them as links), most web designers do something to customize link appearance.

Linked Images

When is the last time you saw an image on a web page with a big blue border surrounding it? Not for a while, probably. Borders around linked images can be turned off by specifically setting the image's border attribute to 0. Every time you add a link to an image in Dreamweaver, this happens automatically (see Figure 6.33).

Figure 6.33. Creating borderless linked images in Dreamweaver's Code and Design view.

Linked Text

The appearance of linked texttext color , whether there's an underline, and so forthcan be controlled by using CSS to redefine the a tag. You can approach this task in one of two ways in Dreamweaver: through the Page Properties window or through the CSS Styles panel.

Using the CSS Styles Panel to Control Link Appearance

This is the slow way to do it, but it gives you more of an idea what's happening under the hood and also gives you more options. For instance, you can save your link formatting styles in an external style sheet for sharing across a site using this method.

To change the basic appearance and behavior of all linked text, open the CSS Styles panel and create a new style. In the New Style dialog box, choose to redefine the a tag for the current document only or in a separate style sheet (see Figure 6.34). When the CSS Style Definition dialog box opens, make any choices you want. All linked text will be styled as you choose here. The most commonly set options are all in the Type category:

Figure 6.34. Redefining the anchor tag to control link appearance.

• To customize link color, choose from the Color field.

• To remove the underline, set the Decoration to None.

• To make your links appear in Bold, choose Bold (or any of the bold settings)

Other, more sophisticated text link effects can be created using the a: pseudoclasses. To do this in Dreamweaver, open the CSS Styles panel and create a new style. In the New Style dialog box, choose CSS Selector and choose one of the following from the drop-down menu that appears (see Figure 6.35):

Figure 6.35. Creating CSS pseudo-classes to determine how rolled-over, visited, and active links will appear.

• a:link controls how regular links will look (similar to redefining the a tag).

• a:hover controls how links will look when the user rolls over them.

• a:visited controls how visited links look (those that the user has been to recently).

• a:active controls how links look when the user has clicked on them.

When you choose to create one of these styles, the CSS Style Definition dialog box opens, and you can assign any formatting you want to your hovered-over, visited, or active links. One of the most popular effects currently is to hide the underlines on linked text but have it reappear when the user rolls over the text. Do this by defining the a:hover class and, in the Type category of the Definition dialog box, setting Decoration to Underline.

Using Page Properties to Control Link Appearance

If you don't want to go through the time of setting up multiple styles in the CSS Styles panel, you can quickly set up link appearance in the Page Properties window. Just choose Modify > Page Properties and go to the Links category (see Figure 6.36). The most commonly set options for regular, rolled-over, visited, and active links all appear here.

Figure 6.36. Using the Page Properties dialog box to set link appearance.

When you make your choices using this method, Dreamweaver adds all necessary CSS styles ( a, a:hover , and so on) to an internal style sheet within the current document.

For more on internal and external style sheets, including how to export styles into external CSS documents, see Chapter 11, "Using Cascading Style Sheets."

Assigning Link Colors Without CSS

There is a pre-CSS way to control normal, active, and visited link colors on a page by adding attributes to the body tag:

 <body link="#FFFF00" alink="#FF0000" vlink="#00FF00"> 

There's no real reason to use this method, unless you're targeting very old browsers (version 3 and below). But you can tell Dreamweaver to create your link colors this way, if you prefer. In the Preferences/ General dialog box (choose Edit > Preferences and go to the General category), deselect the option Use CSS Instead of HTML Tags. The next time you choose Modify > Page Properties, the Links category won't appear. Instead, go to the Appearance property and set link colors there. You won't be able to change any other link characteristics, such as removing underlines or creating hover effects, because those require CSS.

Setting URL Parameters

Links can also be to pass information from page to page for scripting purposes. This is done in the form of URL parameters. Information passed as a parameter is coded as a name/value pair appended to the end of the URL, separated from it by a question mark (?). Multiple parameters are separated from each other by an ampersand (&). If any of the passed values includes a space, it must be encoded as a plus sign (+) or an ASCII value (%20). A URL with passed parameters looks like this:

 mypage.html?username=fred+jones&password=logmein 

The page at the end of this link (mypage.html, in this case) can then use JavaScript or any kind of server-side processing to make use of the parameters. (This is the same kind of URL that occurs when you submit a form using the GET method.)

Adding URL Parameters to Links in Dreamweaver

To add URL parameters to your links in Dreamweaver, you can always manually type the parameter into the Link field in the Property Inspector, if you remember the syntax and don't mind doing some typing. But it's easier to let Dreamweaver help you. Click the Browse button to browse for a link. When the Select File dialog box opens, choose the file to link to and click the Parameters button to open the Parameters dialog box (see Figure 6.37). In this window, enter each name and value that you need to be passed. Click OK twice to close both dialog boxes, and you'll see your fully constructed URL in the Property Inspector's Link field.

Figure 6.37. Creating a link with passed parameters in the Select File dialog box.

Using JavaScript to Process URL Parameters

Why would you want to do this? Presumably, you're using some kind of scripting on the linked page, or there's not much point in it. Data-driven pages that use server-side technology, such as ColdFusion or PHP, use URL parameters extensively. But you can also process passed information with JavaScript. Unfortunately, Dreamweaver doesn't come with any prebuilt behaviors for doing this, but if you don't mind a small amount of code-writing , you can create some very useful effects.

For instance, what if visitors might link to the current page from several other places in your site, and you want to customize the information that you present based on who they are? Insert the following script code into your document wherever you want the customized content to appear:

 <script language="JavaScript"> var params = location.search;  //collect the passed parameter as a variable called x  var x = params.substring(x.indexOf("=")+1,x.length);  //if the parameter has a certain value, enter some content  if (x =="parents") document.write('<h1>Hello, Parents!</h1>');  //if the parameter has another value, enter different content  else if (x =="students") document.write('<h1>Hello, Students!  </h1>');  //otherwise, enter some default content  else document.write('<h1>Hello!</h1>'); </script> 

The JavaScript comments (shown in bold here) describe what the script is doing. It's creating a different heading to display on the page, depending on the value of the passed parameter.

You can modify this script to collect any single URL parameter and display optional page content. Just copy the following framework code into your Dreamweaver document wherever you want the customized content to appear:

 <script language="JavaScript"> var params = location.search; var x = params.substring(x.indexOf("=")+1,x.length); if (x=="  value1  ") document.write('  content here  '); else if (x=="  value2  ") document.write('  content here  '); else document.write('  default content here  '); </script> 

Customize the code to your needs like this:

• For the code shown in bold, enter your own information (parameter values, custom content).

• You'll always want to test for at least one value, so always include the line that begins with if .

• For any additional values that you want to have custom content for, include an else if line. Duplicate this line as many times as you want, to add more options.

• What happens if there is no passed parameter? If you want default content, use the else statement. If you don't want to display any content, you don't need to include the else statement.

You can make life even easier on yourself by turning each of these lines into a snippet so you don't have to type it by hand every time:

1. Open the Snippets panel (Window > Snippets).
   
   
2. Right-click the JavaScript Snippets folder, and choose New Snippet from the contextual menu. For the snippet name, enter something such as Parameter-if . For type, choose Block. Type the fif-statement from the code listed earlier into the text area, like this:
   
   

    if (x=="value1") document.write('content here'); 

   
   Click OK to close the dialog box.
   
   
3. Repeat this process to create a Parameter If-Else snippet and a Parameter Else snippet.
   
   
4. Finally, create one more snippet. Call it Parameter-Wrapper . For type, choose Wrap. In the Insert Before text area, enter this:
   
   

    <script language="JavaScript"> var params = location.search; var x = params.substring(x.indexOf("=")+1,x.length); 

   
   In the Insert After text area, enter this:
   
   

    </script> 

   
   

To use your new snippets, create a document, go to Code view, and do this:

1. Place the insertion point where the parameter-testing script should go.
   
   
2. From the Snippets panel, select the Parameter-If snippet and click the Insert button. When the generic code is pasted into your document, change value1 and content here to whatever you need.
   
   
3. For each additional else-if or else line that you want to add, create a new blank line in your code and insert the appropriate snippet. Then customize the value and content portions of the code.
   
   
4. Finally, select all of the lines of code that you just created, and insert the Parameter-Wrapper snippet. This wraps your if statements in the script needed to process parameters.
   
   

Passed parameters are used extensively when constructing data-driven pages. For more on using passed parameters, see Chapters 22, "Creating Dynamic Pages," and 23, "Further Dynamic Techniques." For the full story on snippets, see Chapter 27, "Writing Code in Dreamweaver."

Spiffing Up Email Links with Parameters

URL parameters can also be used with email addresses to specify extra things, such as subject and cc. This means that when the user clicks the link and the email program launches, it opens a new message window with all of this information already in place. Table 6.2 lists some email- related URL parameters and what they do.

Table 6.2. URL Parameters for Use in Email Links

Parameter	Values	Description
cc	Email address	Adds a cc (carbon copy) recipient to the email message
bcc	Email address	Adds a bcc (blind carbon copy) recipient to the message
subject	Text string	Adds a subject line to the message
body	Text string	Adds text to the body of the message

An email address with URL parameters in place looks like this:

 mailto:[e-mail]?subject=Info%20Request&Cc=sallysmith  @xyz.com&Bcc=[e-mail] 

Figure 6.38 shows how an email message window looks when activated by this link.

Figure 6.38. An email message window as it appears when the email link that called it includes parameters.

Unfortunately, you can't use Dreamweaver's handy Parameters window to add parameters to an email address because the Parameters window is called from the Select File dialog box, accessed when you browse to choose a file to browse to. An email address can't be browsed to because it's an absolute URL.

But you can add parameters by manually entering them in the Property Inspector's Link field (which is very tiny) or, of course, directly into Code view. Just remember to include all the proper punctuation: ? to start, & between parameters, and %20 where you want spaces inserted.

Using Links for JavaScript

Web designers use anchor tags for more than just linking from page to page. Rolling over or clicking on a link in a web page can trigger JavaScript events, which means the a tag can have behaviors attached to it.

Null Links and Behaviors

If you want a piece of text to trigger a Dreamweaver behavior, it needs to first be made into linked text. Images can trigger behaviors without being linked images, but by having the link turns the browser's cursor into a hand, without which the user might not know to click on the image. You want the user to click on the link, but you don't want the link to actually go anywhereit just needs to trigger the behavior. You need to create a null link. That's an a tag with an href value that does nothing.

To create a null link, select your text or image and type javascript:; into the Property Inspector's Link field (see Figure 6.39). The code ends up looking like this:

Figure 6.39. Creating a null link in the Property Inspector.

 <a href="javascript:;">Click here!</a> 

This tells the browser not to do anything when the link is pressed.

It's also possible to create a null link by entering the pound sign (#) in the Link field (that's easier to type!). This link points to the current page, so it essentially does nothing in the browser. But if your link is toward the bottom of a long scrolling web page, clicking it might cause the browser to jump to the top of the page. For that reason, it's not used much anymore. The javascript:; link is safer.

Entering JavaScript into the HREF

If you like creating your own JavaScript code, and just have a short little chunk of code to type, you can also enter it into the href attribute directly, preceded by the keyword javascript :

 <a href="javascript:alert('You clicked me!');">Click here!</a> 

If you're fond of this kind of coding, you probably know all about this already. But did you know that you can enter this information in the Link field of the Property Inspector? The only problem is, the input field is awfully tiny, so it can be hard to see what you're doing (see Figure 6.40).

Figure 6.40. Using the Property Inspector to create a JavaScript link.

[ LiB ]