Rahmen um Bild legen
Tutorials
Rahmen mit CSS um Bilder legen
Für das Rahmen von Bildern bietet die CSS-Formatierung ganz einfache Möglichkeiten. Dazu muss sich das Bild auf dem WEB-Server zum Beispiel im Verzeichnis "images - befinden. Das Bild muss nicht die Größe aufweisen, wie es später auf der Webseite erscheinen soll.
Die genaue Größe wird über die Style-Informationen im HTML-Code bestimmt. Es sollte aber die Mindestgröße haben, wie in den Style-Informationen angegeben, um Verpixelungen durch Vergrößerungen zu vermeiden.
Website X5 bietet zwar die Möglichkeit über das Programm Bilder einzufügen, doch wird bei mehrfacher Verwendung des selben Bildes auf dem Webserver auch mehrfach das Bild mit individueller Buchstaben-/Zahlenkombination hinterlegt (z. B. img_1_5xnj2ds8.jpg). Das kann bei wenigem Webspeicher dann zu Engpässen führen.
Wir empfehlen Bilder immer selbst mit dem <img> Tag einzubinden, um Speicherplatz zu sparen.
Erläuterungen: | ||
alt="Fotoname" | - Alternativtext für Sehgeschädigte | wird nicht angezeigt |
src="images/dateiname.jpg" | - Pfad und Dateiname des Bildes | kann auch mit http:// beginnen |
width="220px" | - Breite des Bildes | sollte angegeben werden |
height="170px" | - Höhe des Bildes | kann auch weggelassen werden |
border-style: dotted; | - Rahmenart | siehe auch hier (CSS4You) |
border-width: 7px; | - Rahmenbreite | siehe auch hier (CSS4You) |
border-color: #FF0000; | - Rahmenfarbe | siehe auch hier (Farbcodetabelle) |
So sieht es dann aus:
So wird es gemacht:
Rahmen unterdrücken:
Code für den <BODY> Bereich
<img alt="Foto Demo1" src="images/demo_1.jpg"
width="220px" height="170px"style="border: 0;
">
Rahmen durchgehende Linie rot:
Code für den <BODY> Bereich
<img alt="Foto Demo2" src="images/demo_2.jpg"
width="220px" height="170px"style="border-style: solid;border-width: 4px;border-color: #FF0000;
">
Rahmen gepünktelte Linie grün:
Code für den <BODY> Bereich
<img alt="Foto Demo3" src="images/demo_3.jpg"
width="220px" height="170px"style="border-style: dotted;border-width: 4px;border-color: green;
">
Rahmen 3D außen Linie gold:
Code für den <BODY> Bereich
<img alt="Foto Demo4" src="images/demo_4.jpg"
width="220px" height="170px"style="border-style: outset;border-width: 7px;border-color: gold;
">
Rahmen 3D innen Linie gold:
Code für den <BODY> Bereich
<img alt="Foto Demo5" src="images/demo_5.jpg"
width="220px" height="170px"style="border-style: inset;border-width: 7px;border-color: gold;
">
Rahmen 3D diagonal Linie gold:
Code für den <BODY> Bereich
<img alt="Foto Demo6" src="images/demo_6.jpg"
width="220px" height="170px"style="border-style: groove;border-width: 7px;border-color: gold;
">
Rahmen doppelte Linie blau:
Code für den <BODY> Bereich
<img alt="Foto Demo7" src="images/demo_7.jpg"
width="220px" height="170px"style="border-style: double;border-width: 5px;border-color: #0000FF;
">
Rahmen gestrichelter Linie schwarz:
Code für den <BODY> Bereich
<img alt="Foto Demo8" src="images/demo_8.jpg"
width="220px" height="170px"style="border-style: dashed;border-width: 5px;border-color: yellow;
">
» nach oben «