Übung 4 - vhs-ob.de

Allgemeines: Das Projekt soll im Intranet der Volkshochschule Informationen für die Hörer und Dozenten bereitstellen, sowie die Steuerung der Internetanbindung über einen Linux-Proxy per HTML und Perl ermöglichen (letzteres ist nicht Bestandteil der Übung).
Download der zu diesem Projekt benötigten Dateien hier (Entpacken im Verzeichnis webwiese)
   
1. Erstellen Sie in dem Ordner "vhs-ob.de" ein 2teiliges Frameset mit den folgenden Eigenschaften:
 
Frameset "index.htm":
nav

164Pixel
index-l.htm
main
relativ (Rest des Fensters)
main.htm
 
  • kein Rahmen; links 164 Pixel
  • Titel: "Intranet der VHS-Oberhausen"
  • Meta-Tags: description, copyright, author, generator, expires
 
Seite "index-l.htm":
 
  • Frame-Name: nav; Scrollbar: nein, Grössenänderung: nein; (Frame-)Randbreite: 1 Pixel
  • Titel: NavPage; Hintergrund: bkEff08.gif
  • In einer 1spaltigen Tabelle: i_vhslogo.gif und 6 selbst erstellte Schaltflächen (160x24, Hintergrund #1010B0, Schrift: #F0F0FF, Arial-10pt-fett, Antialiasing)
  • Links:
    1. Internet-Homeindex-r.htm
    2. Nutzungsregelnhtml/regeln.htm
    3. Infos zum Schulnetzhtml/inetz.htm
    4. Infos für Dozentenhtml/pdozent.htm
    5. Internet freischaltenhtml/internet.htm
    6. Service Formularhtml/servform.htm
 
Seite "index-r.htm":
 
  • Frame-Name: main; Scrollbar: auto
  • Titel: MainPage; Hintergrund: bkEff03.jpg; Textfarbe: schwarz
  • Aufbau siehe Vorlage
  • Titelgrafik: mygifs/i_welcome.gif (600x50, Times Roman-24pt-fett und Arial-10pf-fett, transparent, interlaced)
  • Bild: bbhaus1.gif
   
2. Seite "html/servform.htm":
 

Fügen Sie ein Formular nach folgender Vorgabe ein:

 
Betrifft: Netz Internet Rechner -
falls Rechner,
  Komponente:
Tastatur Maus Monitor
Ausdruck Tonwiedergabe Diskettenlaufwerk
Festplatte Netzanbindung sonstiges
   
Fehlerbeschreibung:
   
Name:
   
 
 
  • 1zeilige Rahmentabelle (Breite 90%, zentriert), 2spaltige "blinde" Gliederungstabelle
  • Das Formular soll die Daten per POST-Methode an eine EMail-Adresse senden.
  • Dabei sollen durch Wahl geeigneter Namen und Werte der Formularobjekte Paarungen nach folgendem Schema entstehen: Betrifft=Rechner; Raum=R003 (R003, R404, R429, R430); Platz=00 (00, 01,..,16); Tastatur=defekt; Maus=defekt; ...; Fehler=...; Name=...;
   
3. Seite "html/pdozent.htm":
 

Da die Informationen für Dozenten nicht allen zugängig gemacht werden sollen, leitet die Seite nur nach Eingabe eines Passwortes zur eigentlichen Informationsseite html/pdozent.htm (leer) weiter.

 
  • Fügen Sie dazu im Head des Dokuments die folgende Javascript-Funktion ein:
var kennwort = "geheim"
var datei = "idozent.htm"

function go(knw)
{
  if(knw == kennwort)
    location.href = datei
  else
    alert("Geben Sie bitte das richtige Kennwort ein.")
}
 
  • Im Body des Dokuments das folgende Formular
<form>
Passwort:
<input type=PASSWORD name="Kennwort" maxlength=30 size=20>
<input type=BUTTON value="Anzeigen" onClick="go(this.form.Kennwort.value)">
</form>
 

 

4. Verfeinerungen
a)

Das Bild sunset.jpg zur Datei "html/internet.htm" finden Sie nebst dem Java-Applet Lake.class im Ordner div\lake. Kopieren Sie beide Dateien in das Verzeichnis vhs-ob.de/html.
Fügen Sie dann per Menü (Einfügen/Medien) den Aufruf Code für das Applet an geeigneter Stelle in die Datei ein.
Die Breite ist gleich der Bildbreite, die Höhe gleich dem 1,5-2fachen der Bildhöhe zu wählen (z. B. 251x230).
Als Parameter muss "image" mit dem Wert "sunset.jpg" angegeben werden.

b) Es wäre schön, wenn beim Überfahren des Bildes "bbhaus1.gif" auf der Startseite ein gleichgrosses GIF mit der Adresse der Volkshochschule angezeigt würde:
c) In der Datei index.htm könnte per Javascript das Laden des Framesets in ein anderes Frame vermieden werden (?)
d) Das Navigationsmenü wäre natürlich funktioneller, wenn die gerade aktive Seite durch eine andersfarbige/markierte Schaltfläche erkennbarwäre (?)
   
5. Vorlagen
   
index-l.htm und index-r.htm

html/servform.htm (Einsatz von Javascript)

html/internet.htm (Einsatz von Applets, siehe Verfeinerungen 4.a)

html/regeln.htm

html/inetz.htm (Arbeiten mit Tabellen)

Top  Previous  Next