Anfang
| Problembeschreibung Erstellung der Webseite in Frametechnik anhand dem Beispiel "Zug - Reisen auf Schienen" mit HTML-Kommentar im Quelltext |
 screenshot_zug  screenshot_ticketautomat |
Anfang
| Schriftliche
Problemlösung Quelltext der einzelenen Frames index.html <html> <head> <title> Willkommen auf meiner Homepage </title> </head> <frameset rows="10%,80%,10*"> <!--hier wird das hauptframeset definiert--> <frame noresize src="./seiten/werbung1.html" name="Werbung" scrolling="no" frameborder="0" framespacing="0" border="0"> <!--mit "noresize" verhindere ich, dass man die größe der frames im browser ändern kann--> <frameset cols="15%,*,40%"> <frame noresize src="./seiten/navigation.html" name="Navigation" scrolling="no" frameborder="0" framespacing="0" border="0" > <!-- mit "scrolling="no"" bestimme ich, dass der angezeigte inhalt nicht gescrollt werden kann--> <frame noresize src="./seiten/textbereich.html" name="Textbereich" scrolling="no" frameborder="0" framespacing="0"> <!-- mit "frameborder="0" framespacing="0"" bestimme ich, dass der rahmen konsepuent unterdrückt bleiben soll(Internet Explorer), zusätlich mit "border="0"" (Netscape)--> <frame noresize src="./seiten/tabelle.html" name="Tabelle" scrolling="no" frameborder="0" framespacing="0"> </frameset> <frame noresize src="./seiten/werbung2.html" name="Werbung" scrolling="no" frameborder="0" framespacing="0"> </frameset> </html> navigation.html <html> <table border="1"> <tr> <th> <a href="./home.html" target="Textbereich" title="Home">HOME</a> <!--mit "a href=..." vergebe ich hyperlinks--> </th> </tr> <tr> <th> <a href="./ticketautomat.html" target="Textbereich" title="Ticketautomat">Ticketautomat</a> </th> </tr> </table> </html> textbereich.html* <html> <body> <h3>Herzlich Willkommen bei</h3> <img src="../bilder/reisen_auf_der_schiene.jpg" target="Textbereich" alt="schienen" border="1" title="Schienen"> </body> </html> *Die Frameseite home.html hat ebenfalls den gleichen Quelltext! tabelle.html <html> <h2>Reisen auf der Schiene</h2> <table border="0"> <!--tabelle eingefuegt--> <tr> <td width="500" height="400"><p align="center"><img src="../bilder/zug.gif"></p></td> <!--mit "p align="center"" wird das bild zentriert, und mit "width="500" height="400" weite und hoehe bestimmt--> </table> </html> ticketautomat.html <html> <body> <p> <img src="../bilder/ticketautomat.gif" alt="Ticketautomat" usemap="#automat"> <!--hier wird die imagemap initialisiert, d.h. es wird die zu verwendende bilddatei angegeben, als alternativtext soll "Ticketautomat" angezeigt werden, und der befehl usemap heißt, dass eine imagemap folgt--> <map name="automat"> <!--der map name muss immer mit dem wortlaut hinter usemap übereinstimmen, damit es funktioniert--> <area shape="circle" coords="137,132,15" href="geldeingabe.html" target="Tabelle" alt="Muenzeinwurf" title="Geld"></area> <!-- circle steht für einen kreis, der mit den Koordinaten des Mittelpunktes und des radius eingegrenzt wird--> <area shape="circle" coords="180,265,15" href="ticket.html" target="Tabelle" alt="Ticket" title="ticket"></area> <area shape="circle" coords="49,310,15" href="rueckgeld.html" target="Tabelle" alt="Rueckgeld" title="rueckgeld"></area> </map> </p> </body> </html> ticket.html* <html> <body> Ihr Ticket </body> </html> *geldeingabe.html, rueckgeld.html, werbung1.html, werbung2.html besitzen den identischen Quelltext, nur mit anderem Text! frame_zug (.zip) |