This page has been robot translated, sorry for typos if any. Original content here.

Mit Bildern arbeiten

Mit Bildern arbeiten

Grafiken auf Websites spielen eine wichtige Rolle. Die Monotonie langer Textseiten verletzend, kann sie die Bedeutung des Kontexts vermitteln, ein Element der Ästhetik der Seiten sein oder als Werbung dienen (wichtig in kommerziellen Aktivitäten). Mit allen Vorzügen von Bildern können sie nicht missbraucht werden. Der Grund dafür ist, dass die meisten Internetnutzer wegen ihrer hohen Kosten noch nicht für den Hochgeschwindigkeitszugang gewählt haben und eine große Anzahl von Bildern eine exorbitante Wartezeit beim Hochfahren verursachen, die zu einer "Grenze" der Geduld wird. Das optimale Verhältnis zwischen Grafikdateien beträgt 50-80 KB pro Seite. Um in dieses Framework zu passen, komprimieren Sie die Dateien im GIF- oder JPEG-Format, optimieren Sie die fertigen Bilder in diesen Formaten (nach dem "Size-Quality" -Prinzip).

Wenn Sie mit der Beschreibung von HTML-Tools zum Platzieren von Bildern auf einer Webseite beginnen, kompilieren Sie die Bilder in einem Ordner. So sparen Sie viel Zeit.

Um Bilddateien auf der Seite einzufügen, gibt es nur ein <IMG> -Tag . Hier sind seine Attribute:

  • SRC - gibt die Adresse des Bildes an. Betrifft immer das <IMG> -Tag
  • WIDTH ist die Breite des Bildes. (gemessen in Pixel (px))
  • Höhe - die Höhe des Bildes (px)
  • ALIGN - die Methode zum Ausrichten des Bildes auf der Seite (Werte von links, rechts, oben, unten, Mitte)
  • VSPACE - Einrückung aus dem Text entlang der Vertikalen (px)
  • HSPACE - Einrückung aus dem Text horizontal (px)
  • ID oder NAME - weist einen Namen zu (wenn eine interne Referenz auf das Bild gemacht wird)
  • RAND - die Dicke des Rahmens (px)
  • USEMAP - Referenzkarte
  • ALT - Kommentare, die sichtbar sind, wenn Sie den Mauszeiger über das Bild bewegen

Attribute für das <IMG> -Tag werden nach Bedarf angewendet, mit Ausnahme des ersten. Und der Code auf der Seite könnte so aussehen:

<IMG SRC = "img / tchk.gif" WIDTH = "5" HEIGHT = "5" HSPACE = "5" VSPACE = "5" BORDER = "0" ALIGN = "links">

Beachten Sie, dass es kein abschließendes </ IMG> -Tag gibt .

Die Abmessungen des Bildes sollten angegeben werden - real, um eine falsche Darstellung der Bilder auf dem Bildschirm zu vermeiden.

Insbesondere möchten wir das wichtige Attribut ALIGN notieren . Mit seiner Hilfe wird das Bild auf dem Bildschirm positioniert:

  • relativ zum Text (der Bildcode wird in die Container <P> </ P> und <DIV> </ DIV> eingefügt, Positionierung untereinander). Beispiel: <P ALIGN = "links"> <IMG SRC = " Adresse " ALIGN = "rechts"> Text </ P>
  • relativ zur Tabelle (der Bildcode wird in die Tabellenzelle eingefügt - Container <TD> </ TD> und relativ zur Zelle ausgerichtet)
  • relativ leere Seite

Hinweis: Das Bild kann nicht vertikal mit der üblichen Methode ausgerichtet werden. Platzieren Sie dazu den Container in den Container <P> </ P> oder <DIV> </ DIV> , wobei Sie in diesem die Werte " ALIGN " angeben .

Eine Referenzkarte ist eine Möglichkeit zum Anwenden von Verknüpfungen mittels eines Bildes, das bedingt in Teile unterteilt ist, wobei jedes Teil als eine Referenz dient. Es basiert auf dem kartesischen Koordinatensystem, wobei (0,0) die obere linke Ecke des Bildes ist. Der Code für solche Referenzkarten ist ziemlich mühsam, wenn Sie ihn manuell eingeben. Anfängern wird daher empfohlen, auf grafische HTML-Editoren zu verweisen, die den Link-Code in der fertigen HTML-Datei ausgeben.

Anstelle der Attribute VSPACE , HSPASE , BORDER und ALIGN ist es üblich , Cascading Stylesheets zu verwenden.

Um diesen Prozess vollständig zu verstehen, reicht eine Theorie nicht aus, also beginnen Sie mit dem praktischen Training auf Ihrem PC.