ÿþ<HTML> <HEAD> <TITLE> HTML-Seiten: Aspekte der Gestaltung </TITLE> <META NAME="description" content="Hinweise für Anfänger zu informationsorientierten HTML-Seiten."> <META NAME="resource-type" content="document"> <META NAME="robots" content="index,follow"> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <link rel=stylesheet type="text/css" href="../perau2.css"> <link rel=stylesheet media=print type="text/css" href="../print.css"> <!-- Erstellt von Strobl Hans --> </HEAD> <BODY> <center> <div class=noprint> <TABLE border=0 cellspacing=0 cellpadding=1> <TR> <TD align=center> <A HREF="../index.htm" target="_top"> <IMG SRC="../grafiken/homesmal.gif" WIDTH="18" HEIGHT="14" BORDER="0" alt="Homepage"></A></TD> <TD class="kopfzeile" align=center nowrap><A HREF="../index.htm" target="_top"> &nbsp;&nbsp;Bundesgymnasium&nbsp;und&nbsp;Bundesrealgymnasium&nbsp;Villach&nbsp;-&nbsp;Peraustrasse</A></TD> <td align=center valign=top>&nbsp;&nbsp; <A HREF="http://babel.altavista.com/babelfish/trurl_pagecontent?lp=de_en&trurl=http://www.peraugym.at/html/html-seitengestaltung.htm"><IMG SRC="../grafiken/english.gif" WIDTH="52" HEIGHT="21" BORDER="0" alt="Translation by Altavista"></A></TD> </TR> </TABLE> <HR> </div> <TABLE width=640 border=0 cellspacing=5 cellpadding=0> <TR> <td width=3%> <div class=noprint> <a href="javascript:window.print()"><img src=../grafiken/drucken.gif border=0 alt=Ausdrucken!></a> </div> <td class=untertitel align=center> <a href="html.html" target="_top">Aspekte bei der Gestaltung von HTML-Seiten </A></TD> <td width=3%> &nbsp; </TD> </TR> <tr><td height=0></td></tr> </TD> </TR> </table> <br> <TABLE width=640 border=0 cellspacing=0 cellpadding=4> <TR><td valign=top rowspan=5>1) &nbsp; </td> <td colspan=2> <b>Erscheinungsbild:</b> </td></TR> <tr><td nowrap valign=top> a) &nbsp; </td><td> Der Text ist <b>gut lesbar</b> (Schriftart, Schriftgröße und Kontrast passend). </td></tr> <tr><td valign=top> b) &nbsp; </td><td> Die Textblöcke und Bilder sind zueinander <b>richtig platziert</b>. </td></tr> <tr><Td valign=top> c) &nbsp; </td><td> Das Schirmbild ist <b>ruhig</b> (keine blinkenden Texte, Animationen sparsam). </td></TR> <tr><td nowrap valign=top> d) &nbsp; </td><td> <b>Farben</b> von Flächen werden fehlerfrei wiedergegeben. (<a href="html-farben.htm"><img src="../grafiken/verweis.gif" border=0> Hinweise</A>). </td></tr> <tr><td height=10></td></tr> <a name=Navigation> <TR><td valign=top rowspan=4>2) &nbsp; </td> <td colspan=2> <b>Benutzerführung:</b> </td></tr> <tr><td valign=top> a) &nbsp; </td><td> Die <b>Navigation</b> ist einheitlich, lückenlos und möglichst intuitiv erfassbar.</td></TR> <tr><td valign=top> b) &nbsp; </td><td> Jede Informationsseite enthält mindestens einen <b>Link</b> zu einer übergeordneten Seite. </td></TR> <tr><td valign=top> c) &nbsp; </td><td> Alle sichtbaren Menüpunkte haben schon einen <b>Inhalt</b>; es gibt keine toten Links. </td></TR> <tr><td height=10></td></tr> <a name=Wiedergabe> <TR><td valign=top rowspan=4>3) &nbsp; </td> <td colspan=2> <b>Wiedergabe:</b> </td></tr> <tr><td valign=top> a) &nbsp; </td><td> Aus Rücksicht auf die <b>Ladezeit</b> hat eine Seite höchstens <b>200&nbsp;kB</b>; größere Seiten werden nur als Folgeaufruf angeboten (z.B. ein großes Bild erscheint nach Klick auf ein kleines Bild). <a href="../pib/eiskar/eiskar2004-bilder.htm"> <img src="../grafiken/verweis.gif" border=0> Beispiel</A></Td></tr> <tr><td valign=top> b) &nbsp; </td><td> Die <b>Platzaufteilung</b> auf dem Bildschirm ist konzipiert für <b>1024</b> Bildpunkte in der Breite, aber auch <b>fehlerfrei</b> bei 800, 1280 und mehr Bildpunkten (austesten).</td></TR> <tr><td valign=top> c) &nbsp; </td><td> Die Darstellung ist <b>browserneutral</b>, also fehlerfrei nicht nur im <a href="http://www.microsoft.com/downloads/search.aspx?displaylang=de&categoryid=6" target="_space">Internet Explorer</A> sondern auch unter <a href="http://www.mozilla.com/de/firefox/"><img src="../grafiken/verweis.gif" border=0>&nbsp;Firefox</a> und <a href="http://de.opera.com/"><img src="../grafiken/verweis.gif" border=0>&nbsp;Opera</a>.</TD></TR> <tr><td height=10></td></tr> <a name=Indizierung> <TR><td valign=top rowspan=4>4) &nbsp; </td> <td colspan=2> <b>Indizierung:</b> </td></tr> <tr><td valign=top> a) &nbsp; </td><td> Jede Seite enthält passende Anweisungen für die <b>Suchroboter</b> <BR>(no/index, no/follow).</td></TR> <tr><td valign=top> b) &nbsp; </td><td> <a href="html-email.htm"><b>E-Mail-Adressen</b></A> sind so <a href="html-email.htm"><img src=../grafiken/verweis.gif border=0> maskiert</A>, daß ein automatisiertes Auslesen erschwert wird. </td></TR> </table> <BR> <div class=noprint> <TABLE width=640 border=0 cellspacing=0 cellpadding=5> <tr><td align=right> <a href="html-kriterien.htm"><img src="../grafiken/verweis.gif" border=0> <b>Links: Kriterien für gutes Webdesign</b></A> </TD> </TR> </table> </div> <BR> <TABLE width=640 border=0 cellspacing=0 cellpadding=5> <tr> <td class="vermerk"> <div class=noprint> SH, 8.11.2001; zuletzt geändert am 26.3.2011 </div> </TD> <td align=right class=url> www.peraugym.at/html </A></TD> </TR> </table> <div class=noprint> <BR><HR> <TABLE width=640 border=0 cellspacing=0 cellpadding=0 class="linktabelle"> <tr> <td class="menuzeile"><a href="html-erstellen.htm">Erstellen</A></TD> <td class="menuzeile"><a href="html-befehle.htm">Befehle</A></TD> <td class="menuzeile"><a href="html-woerter.htm">Abk.</A></TD> <td class="menuzeile"><a href="html-farben.htm">Farben </A></TD> <td class="menuzeile"><a href="html-bilder.htm">Bilder </A></TD> <td class="menuzeile"><a href="html-photo.htm">Photo</A></TD> <td class="menuzeile"><a href="html-wordart.htm">WordArt</A></TD> <td class="menuzeile"><a href="html-email.htm">eMail-Adressen</A></TD> <td class="menuzeile"><a href="html-tutorials.htm">Tutorials</A></TD> <td class="menuzeile"><a href="html-glossar.htm">Glossar</A></TD> </TR></table> </div> </BODY> </HTML>