CSci 220 - Lecture 8

Web Page Design

© Morris Firebaugh

 

 


I. Chapter 8: Creating Links

A. The Concept of Links

B. HTML Link Syntax

C. Bookmark Links

D. Building Links with HTML Editor

E. Building Links with Adobe GoLive

F. Building Image Maps with Adobe GoLive

 


II. The Concept of Links

The basic concept of an HTML Link involves a Source and Destination



 

 

Links are the very heart of hypertext!

Let's Review Some  Considerations in Link Design

 


III.  HTML Link Syntax

 The basic syntax of HTML Links requires the Anchor tag:  <A>...</A>

 

 

Note:

 


Text Links

The following HTML code:

In case anybody want to offer me a job, I've also included my <A  HREF="http://www.uwp.edu/academic/ computer.science/ Faculty/firebaugh.www/ ResumeMWF.html">Brief Resume.</A>

produces

 

Observations:

 


Graphics Links

The following HTML code:

produces

 

Let's see what happens when we click the hot image!


Observations:



Hybrid Links

The HTML Code:

produces

Observations:



The Color of Links

 


IV. Bookmark Links

Bookmark Links are how long documents are made "non-linear"

<A HREF="#Sect.III">External Links</A>

<A NAME="Sect.III"></A>

 

 

 

 

 


V. Building Links with HTML Editor

External Links are how we connect to the World Wide Web

 

Building Links with HTML Editor

  1. Type link lable (i.e., the Source)

  2. Select it by dragging

  3. Click on External Link button

  4. Fill in the file address as link box opens

 

 

 


V. Building Links with Adobe GoLive

External Links

1. Type the Source Name, e.g.

Go to Google Search Engine

2. Select it by dragging and click "New Link" icon in top menu bar, e.g.

Go to Google Search Engine

3. The context-sensitive Text Inspector window now opens so type in appropriate URL



Internal Links (Bookmarks)

1. Drag the anchor icon, , to the desired Target location

2. Type the Source Name, e.g., Building Links with Adobe GoLive, and select "New Link"

3. While holding down the <APPLE> key, drag the link from the Source Name to the Target




VII. Building Image Maps with Adobe GoLive

Here is how to build the recommended Client-Side Image Map

1. Create the graphical image to serve as the basis for the Image Map, e.g., Grand5.JPG


2. Go to the "Map" tag of the context-sensitive "Clickable Image Map Inspector"


3. Click on "Use Map", select the Rectangular Region button, and outline the appropriate buttons

4. Repeat the process for each "hot spot", entering the URL for the desired destinations. Job done!

5. The resulting HTML code is generated automatically for this Client-Side Image Map:

<body bgcolor="#000010">
<center>
<img height="600" width="800" src="Grand5.jpg" usemap="#Grand5b4befde9">
<map name="Grand5b4befde9">
<area href="mailto:firebaug@wi.net" coords="620,104,760,147" shape="rect">
<area href="Adventures/Adventures.html" coords="477,103,616,149" shape="rect">
<area href="GeneralInfo.html" coords="331,103,472,150" shape="rect">
<area href="Presentations.html" coords="188,106,328,148" shape="rect">
<area href="Syllabi.html" coords="43,105,183,150" shape="rect">
</map>
</center>
</body>




VIII. Laboratory Assignment #4