 |
|||||||||||||||||||||||
| Introduction | Readings | Instruction | Assessment | Calendar | |||||||||||||||||||||||
| Module Two: Links,
Links, Links Instruction & Guided Practice Basic Linkology | Anchors | Images as Links | Buttons & Nav Bars
Text Links can be made in several easy and convenient ways. The first is done through the Menu Bar. Begin by placing the cursor where you want the link to appear in your document. Click on Insert in the Menu bar, find Hyperlink, and click on it. This dialog window opens (it won't have text in the input fields; I've added it as an example):
The Text window shows the text that will appear on the web page, underlined in blue (unless I tell it to do otherwise -- more on that later). Link is the URL I copied from my web browser and pasted into this window. I can also type it in, but Copy & Paste is safer (less likely to make a mistake) and faster. The Target window is used primarily with frames, so usually you won't need to put anything there. The current window (above) shows _blank. This means that when my reader clicks on the link to University of London, a new window will open in his browser. Other choices are _self, meaning open in the active window (the default action), _parent and _top -- both used with frames. The last three dialog boxes,Title, Access key, and Tab index, we will leave alone. The
second way to insert a link is through the Common
tab of the Insert bar. Place the cursor where you want the
link to appear and click on the Link icon --
NOTE: The image above illustrates the Properties inspector for CS3. It is very similar to CS4. The fourth and probably easiest method is to start with the link text already in place. For example, I had already typed in "Common tab of the Insert bar" in the second paragraph before I made it into a link. I then highlighted the text. I entered the URL for the link in the Text window of the Properties Inspector and hit Enter. This method can also be achieved by right-clicking (Control+Click for Mac) on the highlighted text, however this works best for links within the site. This method opens your file window and allows you to navigate to the document to which you are linking.
Notice that there is a Target option in the Link dialog, but we don't want a new window, so we won't touch that box.
It's also possible to link to a non-HTML document, such as a photo, sound file, PDF, or Word document. Do it the same way as you did the first three, but you have to use the correct file extension when you write the link, like glossary.doc for a Word document. Like an HTML document, however, the Word document (or whatever) must be saved in your Dw folder and it must be uploaded to your remote server in order for your readers to access it. One more useful link is the e-mail link. Its structure differs from a regular link; it looks like this: <a href="mailto:erbej@uwstout.edu">James Erbe</a>. My name will appear as the underlined link, and when the reader clicks on it, a new mail document will be created in his e-mail program, pre-addressed to me. E-mail is an easy and convenient way for parents to communicate with you. Be sure to have your e-mail address prominently displayed on every page of your web site.
Guided
Practice - Text Links Our first activity will be to add some links to existing text. It would be helpful if you printed out these directions so you can stay with the Dw screen rather than switch back and forth.
All of the links we have created so far have been external links, ones that lead out of the current page. Now we'll look at ways to link from one part of the page to another and from one page to a specific part of another page. This is done using anchors. If you just clicked on anchors you activated a link using an anchor. It took you from this page to the definition of anchor on the index page of this module. I can place an anchor anywhere I want
simply by placing the cursor where I want the reader to "arrive"
when he clicks on the link. I then click on the anchor icon
in the Common tab of the Insert Bar --
There are two instances where anchors and internal links are a fundamental part of every web page. One is Return to Top or Top of Page. This link helps your reader navigate your pages more efficiently with less scrolling. I've included this kind of link on every page of this site, formatted as a graphic that says, simply, "Top." The other highly effective use of anchors is a page index or table of contents. Perhaps you've created a newsletter with titles at the top that link to articles lower on the page. The internal link is a very user-friendly navigation device. Linking to a specific point on another page isn't much more difficult than what I've described so far -- and what you will practice shortly. I've already shown you such a link in the first paragraph of this section. Let's say I want to take my reader to the glossary page we linked to in the first activity, but I wanted to go directly to the definition for "link." First, I'll set an anchor on glossary.html immediately in front of the term, link. I'll name the anchor something logical -- like link. Now I'll create the link. The text that I want to act as the link is "a definition of link." The definition is on the page named glossary.html, and the anchor is named link. So the link would look like this: <A href="glossary.html#link">a definition of link</A>. Here's the real active link: a definition of link. Guided
Practice - Anchors & Internal Links Let's try doing some anchors and links. Please open glossary.html in Design View.
II-3 - Linking Up with Graphics We're getting into a "chicken or the egg" quandary now because we need to explore the role that graphics can play in links, but we haven't had any background in graphics -- at least as far as Dw is concerned. That's the subject of our next module. However, we'll brave the wilderness and consider two ways of using graphics (images) as links. Neither way will include how to create the graphic itself. Dw "doesn't do graphics."
In preparation for adding pictures to our web pages, we have to create a folder on the site, both locally and on the server, in which to store the images. Storing your graphics in a folder separate from your HTML is standard web design practice. As with any program, you can always create a new folder by opening the site files on your hard drive or other storage device and using the computer's tools. However, you learned at the end of Module One that creating a new folder is a snap (or a click). Use the method of your choice to create a folder called images in your main folder.
Turning a graphic into a link is really easy. Click on the image you wish to use, then refer to the Properties Inspector. You'll see that a new window has opened, one specifically for a graphic, that gives you lots of information and allows you to do a fair amount of formatting. We won't go into the details of that window now, except to point out the space labeled Link. This is where you'll enter the URL for the link that is attached to the image. At this time you'll need to download the sample graphics that we'll use for our guided practice. Please get your materials from the Mod II-3 Graphics Resource Page now. Return to this page by closing the window. Guided
Practice - Graphics that Link
II-4 - Link Buttons & Nav Bars We used text to make a link index on our Glossary
Page,
but we can make an index with buttons almost as easily --
if you don't include the time it takes to make the button
graphics. You already know how to make a graphic into a link, so
there's really nothing new except the appearance and function
of these links. We can make a set of buttons that look
like this --
To insert a rollover image, click on
the down arrowhead next to the Image button
in the Common tab of the Insert Panel -- The following dialog box appears (the illustration has been cropped to fit on the screen):
Rollover images can be used for all kinds of creative imagery on your site, but when it's a link button, it often appears with other link buttons in a Navigation Bar. This structure is usually the main navigation device for a site and consists of a number of rollover images, usually arranged in a table. The Navigation Bar (or nav bar) has several traits that make it a valuable resource. First, it establishes a predictable navigation scheme for your site because it is meant to be used on all of the pages of the site. Second, once it is created it can be Copied & Pasted into other pages. Third, Dw allows you to update the navigation bar on all of your pages with one edit; it will update the rest of the site for you. NOTE: You may use only one navigation bar per page, and that navigation bar can be used only once on the page. To create a Navigation (Nav) Bar, click
on down arrowhead next to the Image button
in the Common tab of the Insert Panel -- The dialog box is similar to the Rollover Image but with more options. The four buttons, Going on in the Nav Bar dialog window, Alternate Text is defined above. Fill in the anchor or link address in When Clicked, Go To URL, or Browse... to the desired file. Ignore the Main Window button for now. Under Options, check Preload Images; do not check Show "Down Image" Initially. The options for Insert: (red arrow above) are Horizontally (in a line across the page) or Vertically (in a column down the page. Check the box marked Use Tables (we'll discuss why in Module Six). To add another button to the list, click on the Add icon at the top of the panel. After you have them all entered you can edit their order with the up and down arrows; click on the appropriate element in the Nav Bar Elements window, then use the arrows to change its place in the list. Use the Minus icon to remove a button from the list.
Here is a nav bar that I created with the graphics provided on the resource page. I've linked the images to pages within our class web site rather than to create new pages. Try passing your cursor over each one and then try the link. Please return to this paragraph when you're done experimenting. You've seen two ways to use interactive images on your links, although the rollover image can be used without a link, as you also saw above. Now it's time for you to practice what I've preached. NOTE: It is not possible to change the orientation from Horizontal to Vertical or Vertical to Horizontal. You must create a new Nav Bar.
Guided
Practice - Rollovers & Nav Bars
Notify your instructor via e-mail when these five documents have been uploaded to your web site. Please include the full address (URL) of your portfolio page in your message. When you have finished your work on this page, continue to the Assessment Page.
|
|||||||||||||||||||||||
| Introduction | Readings | Instruction | Assessment | Calendar | |||||||||||||||||||||||
 |
|||||||||||||||||||||||
| © COPYRIGHT 2009 James
Erbe All Rights Reserved. Logo design by Carlo Vergara and Phillip Martin. Last Updated: Monday, November 9, 2009 http://www.uwstout.edu/soe/profdev/advwebdesign |
|||||||||||||||||||||||
. The Hyperlink dialog
box will open as it did above, providing the same 
Since we've already completed
a module, you should be accustomed to the Enter/Return variation
in Windows and Mac. From here on, Enter will mean Enter/Return.
Like
the other links, the e-mail link can be created through the Menu
--> Insert --> Email Link.
A dialog box opens asking you for the text that will appear as
the link -- usually the
e-mail address itself -- and the e-mail address. Do not enter
"mailto:" as
part of the address; Dw will do that for you. Or you can
place the cursor where you want the e-mail link to go and click on
the e-mail icon in
the Common tab of the Insert Bar. The same dialog box opens. The
last is again the easiest method. Type the text you want to use as
the e-mail link, such as the person's name and/or e-mail address,
then highlight it and click on the e-mail icon in the Insert Bar.
The highlighted text will appear in the Text window. You just have
to supply the address, although once you've entered an address, Dw remembers it and will offer to use it for the link. 
Just a reminder . . . 
--
and the anchor dialog box appears, asking me what I want
to name this anchor. The anchor icon now appears on the Design
View, but it is not visible to your reader.
I can also insert an anchor using Menu
--> Insert -- > Named Anchor. There are two vital
rules in naming anchors: no spaces are allowed and
case
must
remain
the
same
from link
to anchor. The HTML for an anchor looks like this: <A
name="anchor_name"></A>. Because
the anchor is invisible, there is nothing between the two
tags. A link to this same anchor would look like this<A
href="#anchor_name">Go
to this anchor.</A> Notice the pound
sign; this is the designation for a link using an anchor.
--
don't appear on the browser screen, but they do appear
in the Design View and affect its appearance.
For example, a nicely aligned column will be distorted
when an anchor is inserted into it. But don't worry: when
you go to the browser, the spacing reverts to what you
had intended and the icon is invisible. That's why saving
and previewing in the browser (F12) is important to do
periodically. We'll set this up shortly, so don't try it
yet.
For
a visual explanation of these directions,
watch this Flash movie for a step-by-step 
--
that's located to the right of the Title window in the
Workspace. The directions below will help you set that
up.
nickname
is fine. Next, click on the 
When 
.
The reason the graphic doesn't show is that the script
downloads it from the Internet when your page is viewed
online. If you want to see what it looks like, switch to 
--
and arrange them in a column or a row. What's the advantage
of a graphic button instead of a text? You can use any
font you like
on a graphic (and jazz it up a bit, too), but if you use
text, the font you use must be installed on the reader's
computer,
too,
or
she
won't
see it as you designed it. I've supplied you with five
buttons like the one above. But you also have a set of
buttons that look like this: 
.
Click the Rollover Image button -- 
--
that appears in the pop-up menu. You may also use the Insert menu --> Image
Objects --> Rollover Image. 
--
and 
,
allow you to add or remove nav bar elements and move up or
down in the list of elements
you have in the nav bar, which is shown below these four
buttons in the large illustration above. Element
Name is
what you will call each link on the Nav Bar. It should be
short
and
have
no
spaces in it. Up
Image is
the image you wish to appear when the page first loads, an
unclicked
link as
it were. Over Image is how the button looks
when the cursor is passed over it. Down Image occurs
when the reader clicks on the button. Over While
Down Image is
the appearance after the button has been clicked. Notice
that the Browse... button allows you to
find the image files easily (especially if they're in your
images folder). It isn't necessary to have four different
images in the four button states, but you must have at least
an Up Image. But if you don't use at least two, what's the
point? We'll
make the first and last position one image,
and the second and third position
another image. 
--
again. You'll get this message: "Each page can have
only one Navigation Bar, and one already exists on this
page. Would you like to modify the existing one?" Click
on 
Would you like to dig deeper?