 |
| Photo credit: Bart Maguire, uploaded via Flickr, Creative Commons License |
10.1 Introduction:
We start off by taking quick look at the Dreamweaver live view feature. This feature allows one to see the page that appears in the design window to behave as though it’s being viewed in a web browser. This means that one can check the function of mouse-over scripts, dropdown boxes and other dynamic elements without having to launch the browser each time. Live view can be toggled on and off via the Live View button on the document bar, or via the Live View option on the View menu.
Moving on, our tutor outlines some of the different types of links we might incorporate into our pages. For instance, our home page might have navigation links to sub-pages within our site. We might also create links to external webpages. Our links might be hypertext based, like this, or clickable images that link elsewhere. We may use named anchor links, which most of us have experienced on FAQ pages, wherein clicking a link on a page simply scrolls the page to the appropriate content. We may link to specific files within an FTP site, or files that launce on the users system with a third-party application, such as MS Excel or Word. We may even utilize mailto: links, which launch the users mail client and populate the addresse field.
10.2 Linking to a Page on the Inter-Tubes
In this exercise, we create a link to an external website with hypertext. This is a simple matter of selecting the text on our design page that we wish to serve as the hypertext, and then inserting the URL into the Link field in the Properties panel.
We also note that the default behavior for the link is to launch the linked-to URL in the current browser instance or tab, leaving the current site. Sometimes this is the desired action, but not always. We can determine the browser’s behavior in this regard with the Target field, also in the properties panel. By selecting “_blank” from the dropdown list, we can instruct the browser to launch the linked URL in a new window or tab.
10.3 Linking to a Page on the Same Site:
Linking to other pages within your site can be done as with external links, by simply highlighting the link text, and inserting the target page in to the link field. However, for internal pages one only need specify the relative filename of the page, such as foo.html, rather than the entire protocol/domain/suffix/etc…
An even cooler way to create links is to begin by highlighting the link text, as before, and then using the click-and-drag gesture in conjunction with the target icon next to the Link field in the properties panel. One can drag this icon over to the files panel, and drop it on top of the desired link target. The page filename will automatically populate into the link field, with no chance of misspelling the name. Sweet!
10.4 Linking to a non-HTML File:
One can create a link to any type of file just as easily as linking to HTML file; the process is the same.
10.5 Named Anchors:
This type of link is useful for long pages, especially text-heavy ones such as FAQ’s. This technique allows one to create a link on a page that scrolls the page to another position. For instance, one might create a named anchor link at the top of an FAQ page with the hypertext How much does it cost? This link could then point to a named anchor further down the page where information on pricing is spelled-out.
To do this, one navigates to the target portion of the page, and inserts an anchor with the gold anchor icon found on the insert bar. A dialogue box will appear asking for a unique name to assign to the anchor, such as pricing (no leading caps or spaces allowed here, just legal HTML). Then, one can create the link by highlighting the hypertext-to-be, and specifying the target anchor’s unique name in the Link field, preceded by a “#” (pound-sign), such as “#pricing”. Alternatively, one can use the target icon to drag a pointer to the anchor.
10.6 E-mail Links:
E-mail links, which trigger the default mail client on the user’s system when followed, can be inserted as any other link. The desired hypertext is highlighted, and the entry in the Link field takes the form of an e-mail address, preceded by the “mailto:” tag.
Alternatively, one can click on the e-mail icon in the insert bar, and a dialogue appears prompting one to insert the link text, along with the target e-mail address.
10.7 Images and Image Mapping:
Ordinarily, one can designate an image to serve as a hyperlink just as easily as text. However, one can also create multiple links from within an image by creating hot spots, or an image map superimposed on a graphical image. This is most frequently encountered when visiting a global homepage for a multinational entity, and a map of the world appears, asking the user to select her region.
The developer achieves this effect by using the Dreamweaver image mapping tool to draw regions atop the desired graphic (although these drawings are not visible when the page is rendered in the browser). With the image selected in the design view window, the Properties panel displays information about the selected image. Also in the Properties panel, in the lower left corner, are a set of icons representing a cursor, rectangle, circle, and polygon. These are the drawing tools that one can use to draw and edit shapes on top of the graphic image. When a region is drawn with one of the drawing tools, or a previously drawn region is selected with the cursor tool, the properties panel changes to show the properties for the current hot spot. Any of the previously discussed link types van be inserted as the link target corresponding to the current hotspot.
Once the hotspots are defined, the instance of the image map drawn used should be given a unique name to avoid possible conflicts with other image maps on the page. The name can be assigned in the Map field of the Properties panel.
10.8 Creating a Rollover Image:
A rollover image is simply an image that changes when a user’s cursor moves over it. Often, this might involve an image changing color, or magnifying, of generally responding in some way to grab the user’s attention. Inserting a rollover image does not necessarily require that a link be associated with the image in question, but this is an effective way to provide feedback to the user that an image serves as a link.
Inserting a rollover image is really inserting a pair of images, and specifying one as the default image, and the other as the rollover image. One can specify these images by choosing mthe Insert=>Image Objects=>Rollover Image menu command. A dialogue appears prompting one to specify each image file location, and the optional link to which the image should point.
10.9 Inserting a Navigation Bar:
In this section our tutor discusses inserting a navigation bar that she created in Adobe Fireworks. Unfortunately, the creation of the actual navigation bar, along with any HTML code embedded within same, was not covered (maybe that’s in the Fireworks DVD, sold separately, batteries not included, not available in Alaska and Hawaii).
Well, the process of importing the Nav bar seems simple enough; Insert=>Image Objects=>Fireworks HTML.
No comments:
Post a Comment