Gesualdo Project Page
Project elements/specifications
The logical organization/navigation of the site:
1. The site opens with a teaser page as an intro, from which one enteres the site by
clicking on an animated gif or on a specific topic link.
2. The home page of the site (bio.htm) has a box with links to all pages of the site,
and a link to return to the Intro if so desired.
3. At the top of each page (other than home page) there is a link to return to the
home page, where there is a list of all links.
4. At the bottom of each page is a link to take you to the next topic.
5. The exceptions are “davalos.htm” and “deste.htm” which are digressive links
which “return” to the home page (there is no forward as these are digressions
inside the homepage topic) and “chron.htm” which is the final page and only has
a home link.
1) Teaser/Intro page:
http://www.geocities.com/alantom128/Gesulado/intro.htm
Two stylesheets control the formatting:
 media="screen, tty, tv, handheld" and
 media="print, projection" as well as embedded and inline styles.
Print stylesheet suppresses links and enlarges image to full page.
Features



embeded MIDI background sound (validator w3 didn’t care for the bgsound tag).
scrolling Java applet (applet .class file from chapter 8 materials) giving a
greeting, name of background sound and link to a review of an upcoming movie
with the same topic.
links to major topics inside the website, colored green, which turn to italic when
cursor hovers over the link as a rollover effect.
Has:
 background image gif, and
 gif animation as link to enter the website.
Clicking the gif or the links brings one into the site.
2) The Home Page/Bio
http://www.geocities.com/alantom128/Gesulado/bio.htm

This page has been validated at Validator.w3.org and is valid xhtml transitional.
I cannot get Internet Explorer to work with the Validator, but Firefox will send and
receive the data properly (validator thinks IE is sending it plain text files for some
reason). A link has been provided to the zip file of bio.htm for your validation
purposes.







Two external stylesheets control the formatting: media="screen, tty, tv, handheld"
and media="print, projection" as well as embedded and inline styles.
External stylesheet provides background image for screen view.
Print stylesheet suppresses all links and inserts a page break before each H2
heading.
Has image of Gesualdo with word “intro” as link to return to intro.
Also has a CSS box element with links to all pages of the website. Again, the links
are colored green, which turn to italic when cursor hovers over the link.
Anchor links are used to split the page into topics: “the Murderer” #murder, and
“the Musician” #musician.
There are two unordered lists of Gesualdo’s printed works.
3) The page has inline text link for the name Donna Maria d’Avalos,
http://www.geocities.com/alantom128/Gesulado/davalos.htm
which takes you to a page of similar style and biographical information on this lady.
4) There is another inline text link for the name Donna Eleonora d’Este,
http://www.geocities.com/alantom128/Gesulado/deste.htm
which takes you to a page which gives biographical information about this lady
and also about the court of Ferrara.

There is an IFRAME which scrolls photos and biographies of famous artists
from Ferrara.
5) There is a MIDI page:
http://www.geocities.com/alantom128/Gesulado/madrigals.htm



With embedded MIDI files of songs,
Song lyrics in English and Italian
Diacritical marks (special characters) used in Italian lyrics.
6) The biography ends with an obituary page:
http://www.geocities.com/alantom128/Gesulado/morte.htm
This summs up the biographical information and uses the same stylesheets as bio.htm.
7) There is a page displaying an original letter written by Eleonora d’Este.
http://www.geocities.com/alantom128/Gesulado/letter.htm



Emailto: protocol link provided with graphic to encourage someone to attempt
translation.
Print stylesheet creates pagebreak before letter image.
Large image of letter is in gif format which interlaces to load.
8) There is a page of external links for further study.
http://www.geocities.com/alantom128/Gesulado/links.htm
9) There is an “Interactive Map” of Italy:
http://www.geocities.com/alantom128/Gesulado/map.htm



Above the map is an original javascript giving the current date and time in
Italy, based on getUTCHours() (GMT time) plus one hour for Italy time.
When client-side map hotspots for Gesualdo or Ferrara are clicked, a
wikipedia or travel page link takes you to an external site for city information.
The print stylesheet suppresses links and also suppresses the word
“interactive” as it has no hotspots on the printed page.
10) There is a “Subscribe” page:
http://www.geocities.com/alantom128/Gesulado/subscribe.htm
When this page opens:
 A JavaScript “alarm” box appears, bugging the viewer to subscribe.
Once OK is clicked, the Subscription page appears:
 A form which is laid-out in table format and
 includes name and email text input boxes and ends with a free text area.
There are
 radio buttons,
 check boxes and a
 drop-down selection menu.
 Finally, there are Subscribe (submit) and Cancel buttons.

The subscribe button emails the contect of the form to my email in plain text
format.
11) There is a chronology page:
http://www.geocities.com/alantom128/Gesulado/chron.htm




The page is a graphical table,
Top row has been spanned.
Text in 1616 entry has been linked to “letter.htm”.
Print styles keep as much of table on each page as possible.