Formulieren Sie die Grundregeln für die Platzierung von Grafiken auf der Seite. Fernkurse, HTML. Sichere Farbpalette

Eine der attraktivsten Funktionen des WWW ist die Möglichkeit, Links zu Grafiken und Multimediadateien einzubinden, die eine Webseite attraktiver und interessanter machen. Dazu können Symbole, Zeichnungen, Fotos, Bildkarten und die Verwendung von Audio-, Video- und Animationsdaten gehören.

2.2.1. Einfügen von Grafiken in ein HTML-Dokument

Die Bedeutung grafischer Bilder bei der Erstellung elektronischer Dokumente kann nicht hoch genug eingeschätzt werden; Dokumente werden ausdrucksvoller und lebendiger und werden einfacher und natürlicher wahrgenommen. Allerdings sollte man bei allem immer auf Augenmaß achten. Eine Übersättigung eines Dokuments mit illustrativem Material lenkt die Aufmerksamkeit des Benutzers ungerechtfertigterweise vom wahren Inhalt der Seite ab und führt außerdem dazu, dass die Seite aufgrund der großen Anzahl von Bildern langsamer geladen wird.

Die grafischen Komponenten einer Webseite können je nach Zweck in drei große Kategorien eingeteilt werden:

– illustrative Grafiken, einschließlich begleitender Textfotos, erläuternder Zeichnungen , Zeichnungen, Diagramme;

– funktionale Grafiken, das Steuerelemente darstellt (Navigationsschaltflächen, Zähler und interaktive Formularelemente);

– dekorative Grafiken – darin enthaltene Seitengestaltungselemente aus Schönheitsgründen und ohne Informationslast (Hintergrundbilder, Trennlinien in Form von Grafikdateien, Kopfzeilen und vieles mehr).

Grafikformate. Aufgrund der Nutzung des Internets nimmt der Download von Grafiken eine gewisse Zeit in Anspruch. Und je kürzer diese Zeit ist, desto komfortabler ist es für den Benutzer. Daher sind die drei beliebtesten Formate, die heute für Grafikbilder verwendet werden, GIF, JPEG und PNG. Sie enthalten verschiedene verlustbehaftete Bildkomprimierungsalgorithmen, die die Größe der Zieldatei erheblich reduzieren können.

GIF-Format. 1978 entwickelten die israelischen Forscher Jacob Ziv und Abraham Lempel einen neuen Datenkomprimierungsalgorithmus für die damalige Zeit ohne Datenverlust (LZ78 ist der Name des Projekts). Einige Jahre später verbesserte es der amerikanische Programmierer Terry Welch (LZW) und stellte seine Entwicklung auch für jedermann zur Verfügung.

1987 schuf Bob Berry ein grundlegend neues Grafikformat, GIF, basierend auf dem LZW-Algorithmus. Die Essenz des Komprimierungsalgorithmus: Die Reduzierung der Größe einer Grafikdatei wird durch das Mischen ähnlicher Farbtöne erreicht; Informationen über das Bild in der GIF-Datei werden Zeile für Zeile aufgezeichnet, d. h. es handelt sich um eine Reihe von Beschreibungen von Zeilen mit einer Höhe von einem Pixel. Eigenschaften: Mischen ähnlicher Farbtöne zu einem, Betrieb mit einer festen Palette von 256 Farben.

Das GIF-Format wird in einem HTML-Dokument nur zur Anzeige von Geschäftsgrafiken verwendet: Diagramme, Logos, Schaltflächen, andere Seitengestaltungselemente – und Bilder mit einer Farbpalette von 256.

Eine weitere Eigenschaft von GIF ist das Interlacing, d.

Im Jahr 1989 veröffentlichte CompuServe eine neue Version von GIF89a, die den sogenannten „Alphakanal“ – eine Maske der Bildtransparenz – verwendet, um ein Bild mit transparentem Hintergrund zu erstellen, indem es zusammen mit der Datei gespeichert wird. Farben, die als transparent gesättigt sind, werden im Browser unsichtbar.

Ein weiteres Merkmal von GIF89a besteht darin, dass Sie mit diesem Format mehrere verschiedene Bilder in einer Formel mit einem physischen Titel speichern und sie nacheinander auf dem Bildschirm anzeigen können.

JPEG-Format. Der JPEG-Standard wird zum Posten von Fotos, Reproduktionen von Gemälden und Bildern mit einer großen Anzahl von Farben und Farbübergängen verwendet. JPEG-Format, das auf der Grundlage eines Einweg-Bildkomprimierungsalgorithmus mit Qualitätsverlust erstellt wurde und nicht identische Elemente wie LZW-Algorithmen, sondern Interpixelintervalle kodiert.

Der Kompressionsmechanismus besteht aus drei Stufen.

Das Bild wird in ein LAB-Farbbild umgewandelt, das das Bild in drei unabhängige Kanäle zerlegt: L – Beibehaltung der Farbintensität, A und B – zum Speichern von Farbinformationen.

Komprimierung: Ungefähr drei Viertel der Farbinformationen werden aus dem resultierenden Farbmodell entfernt, dann wird das Bild in Abschnitte von 8 x 8 Pixeln aufgeteilt und in ein numerisches Datenarray umgewandelt. Der Titel jedes Blocks beschreibt die vorherrschende Farbe des Bereichs, die restlichen Informationen beschreiben weniger auffällige Farbtöne.

In der dritten Komprimierungsstufe wird ein bestimmter Teil der Informationen, die Sekundärschattierungen beschreiben, aus dem Datenarray entfernt, und die Menge der entfernten Daten hängt von der Qualität des vom Benutzer ausgewählten resultierenden Bildes ab. Und schließlich wird die fertige Datei nach dem Hoffman-Algorithmus komprimiert, bei dem die am häufigsten vorkommenden Zeichen im Datenarray durch eine kompaktere Zwei-Bit-Kodierung ersetzt werden.

Die JPEG-Dekomprimierung erfolgt in umgekehrter Reihenfolge.

Die maximale Anzahl an Farben, die ein JPEG-Bild enthalten kann, beträgt 16 Millionen.

PNG-Format. Dieses Format wurde 1995 entwickelt, um das GIF-Format zu ersetzen, nachdem Unisys seinen LZW-Komprimierungsalgorithmus urheberrechtlich geschützt hatte. Gleichzeitig wurden einige technische Merkmale entwickelt, insbesondere die Qualität verbessert und die Anzahl der unterstützten Farben erhöht.

Grafiken aktivierenNetz-Seite. Die Integration von Grafiken in ein HTML-Dokument erfolgt über ein einziges Tag < IMG >.

Das SRC-Attribut (Quelle) gibt die URL des Bildes an (Abbildung 2.3).

Reis. 2.3. Beispiel-Anzeigebeispiel mit Tag < IMG >

Dieses Attribut ist im Tag erforderlich < IMG > (Tabelle 2.2).

Tabelle 2.2

Tag-Attribute< IMG>

Zweck	Attributwert	Aufnahmebeispiele
Bildadresse
Objekte auf dem Bildschirm positionieren (optionales Attribut)	Nivellierung Links Links Richtig richtig MITTE – entlang der Linienlinie TOP – ganz oben BOTTOM – ganz unten
Bildbreite (optionales Attribut)	in Pixel
Höhe (optionales Attribut)	in Pixel

Ende des Tisches. 2.2

Zweck	Attributwert	Aufnahmebeispiele
Tooltip (optionales Attribut)	enthält einen alternativen Text
Das Bild einrahmen	Dicke in Pixel
Leerer Raum über dem Bild	in Pixel
Leerer Raum links und rechts	Pixelwert

HEIGHT="215" BORDER="5" ALT="lily">!}

Durch die Verwendung eines Tags in diesem Beispiel können Sie ein Bild aus einer Datei auf der rechten Seite des Browserfensters platzieren, die Größe dieses Bildes festlegen und es in einem Rahmen platzieren (siehe Abbildung 2.3).

Den Grafiken auf Webseiten ist es zu verdanken, dass WWW zum beliebtesten Internetdienst geworden ist, und ihm verdanken wir die ganze Seitenvielfalt.

Die Besonderheit der auf Webseiten verwendeten Grafiken besteht darin, dass sie bestimmte Einschränkungen haben, die wir berücksichtigen und von denen wir profitieren müssen.

Für die Verwendung auf Websites werden hauptsächlich zwei Dateiformate verwendet: GIF und JPG. Ein neues Format für Webgrafiken namens PNG (ausgesprochen „Ping“) wird gefördert, ist aber noch nicht weit verbreitet und wird nicht von allen Browsern verstanden, sodass wir uns vorerst nicht mit diesem Format befassen.

Beginnen wir also mit der Analyse der GIF- und JPG-Formate und beschreiben ihre wichtigsten Eigenschaften und Funktionen.

GIF-Format

Unterstützt nicht mehr als 256 Farben (weniger ist möglich und oft notwendig);

Verwendet eine Farbpalette;

Verwendet verlustfreie Komprimierung mit der LZW-Methode (die der im PKZIP-Archiver verwendeten ähnelt und daher GIF-Dateien praktisch nicht komprimiert);

Unterstützt Interlace-Scannen;

Es handelt sich um ein Streamingformat, d.h. die Bildanzeige startet während des Pumpens;

Ermöglicht Ihnen, einer der Farben in der Palette das transparente Attribut zuzuweisen, das beim Erstellen sogenannter transparenter GIFs verwendet wird;

Es bietet die Möglichkeit, mehrere Bilder in einer Datei zu speichern, die bei der Produktion animierter GIFs verwendet wird.

Unterstützt die Möglichkeit, Steuerblöcke in eine Datei einzufügen, mit denen Sie Kommentare in die Datei einfügen können (z. B. zum Urheberrecht:), Verzögerungen zwischen der Anzeige von Bildern usw.

Und nun eine kleine Klarstellung – wozu diese Eigenschaften führen können. GIF unterstützt maximal 256 Farben, was bedeutet, dass alle Bilder, die wir im GIF-Format speichern, die Anzahl der Farben entweder explizit oder implizit reduzieren, um dieses Limit einzuhalten (verschiedene Programme mit unterschiedlichem Erfolg). Und daher die Schlussfolgerung: Wenn Sie ein schönes Foto mit sanften Übergängen und subtilen Farbschattierungen platzieren müssen, wird nach der Transformation alles viel schlimmer sein – die Schattierungen werden nicht mehr subtil sein und das gesamte Foto wird unnatürlich aussehen. unrealistisches Aussehen. Wenn Sie das Foto dennoch im GIF-Format speichern und alle Schattierungen vermitteln möchten, müssen Sie auf Tricks zurückgreifen. Sie können beispielsweise einen künstlerischen Filter auf ein Foto anwenden und es in eine Zeichnung umwandeln oder eine Tönung anwenden. Das Speichern von Bildern und Zeichnungen in diesem Format ist jedoch problemlos möglich. Sie sind in der Regel gut komprimiert und enthalten nicht viele Farben. Schauen wir uns nun die Eigenschaften und Funktionen des zweitbeliebtesten Formats im Internet an.

JPEG-Format

Ermöglicht das Speichern von Vollfarbbildern mit einer Farbanzahl von 16,7 Millionen Farben (oder 24 BPP). Wenn das Bild weniger Farben hat, wird es vor dem Speichern der Datei noch in ein Vollfarbbild konvertiert. Verwendet verlustbehaftete Komprimierung, wodurch eine enorme Dateikomprimierung erreicht wird; Unterstützt Progressive Scan, d.h. Das Bild erscheint zunächst in schlechter Qualität und verbessert sich im Laufe des Ladevorgangs allmählich. Vielleicht sind dies alle Vorteile des JPG-Formats, und sein Hauptzweck besteht darin, Bilder in Fotoqualität zu speichern.

Grafikoptimierung

Alle Grafikverarbeitungsarbeiten werden in einem Zwischenformat durchgeführt

Schauen wir uns einige Funktionen der Arbeit mit Grafiken an. Obwohl wir Bilder in einer GIF-Datei mit Unterstützung für 256 Farben oder in einer JPG-Datei mit 16,7 Millionen Farben speichern, müssen wir mit dem Bild in einem Zwischenformat arbeiten, das es uns ermöglicht, das Bild ohne Verzerrung und ohne Farbverlust zu speichern Tiefenfarben (z. B. TIFF und interne Formate von Editoren wie PSD). Tatsache ist, dass Sie während der Arbeit das Bild viele Male ändern oder verzerren müssen, was letztendlich zu einem wiederholten Neuschreiben der Datei führt. Wiederholtes Aufnehmen im GIF-Format führt zum Verlust der Schattierungen des Bildes, und im JPG-Format führt jedes neue Überschreiben der Datei zu neuen Verzerrungen und nach einer Weile sieht das Foto schrecklich aus. Daher erfolgt die gesamte Arbeit an der Grafikverarbeitung in einem Zwischenformat (obwohl die Dateigröße groß ist) und erst im allerletzten Schritt wird das Bild in das gewünschte Format konvertiert (oft gleichzeitig mit der Optimierung der Dateigröße).

Bei Webseiten ist die Frage der Fotogröße sehr wichtig. Welche Größe soll ich sie machen? Wird das Laden zu lange dauern? Beim Optimieren kann man zwar die Dateigröße reduzieren, aber es lohnt sich kaum, ein Foto zu optimieren, das keine Aussagekraft hat. Der allererste Schritt der Optimierung besteht darin, das Wesentliche auf dem Foto hervorzuheben (alles andere zu verwerfen) und sich auf das abgebildete Element zu konzentrieren. Dies wird durch den Vorgang des Zuschneidens und der Suche nach dem ausdrucksstärksten Teil erreicht, der die Bedeutung des Fotos vermittelt. Nach diesem Vorgang können Sie das Bild bereits optimieren. In diesem Fall hat es tatsächlich die kleinste Größe.

Und bei der Größe von Fotos müssen Sie einen gewissen Kompromiss einhalten: Machen Sie sie nicht zu klein, sodass Sie selbst unter der Lupe nichts erkennen können, und machen Sie sie nicht zu groß, um dies nicht zu tun dehne die Zeit in die Ewigkeit. Allerdings gibt es natürlich Ausnahmen: Ein richtig optimiertes großes Foto kann eine Übertragungszeit in Anspruch nehmen, die der Übertragungszeit eines normalen Fotos entspricht, und umgekehrt dauert das Laden eines schlecht optimierten kleinen Bilds mehrere Tage. Als normales Foto gilt ein Foto mit einer Größe von etwa 250 x 300 Pixeln und einer Größe von etwa 6 bis 10 Kilobyte. Dies bedeutet nicht, dass alle Fotos diese Größe haben sollten, aber die Fläche des Fotos sollte dieser Größe entsprechen. Diese Empfehlungen gelten für Fotos, die Text „illustrieren“, und nicht für Zeichnungen, die als Navigationselemente dienen.

Die Arbeit mit Grafiken im Textverarbeitungsprogramm kann in drei Richtungen erfolgen.

1. Einfügen eines Objekts, das in einem anderen Grafikeditor erstellt wurde (z. B. Paint, MicrosoftDrawing, Paintbrush usw.).

2. Zeichnen im Dokument selbst (mit den Werkzeugen des Zeichenbedienfelds).

3. Nutzen Sie vorgefertigte Zeichnungen aus der Clipart-Sammlung zum Gestalten von Texten.

Im Folgenden betrachten wir alle aufgeführten Möglichkeiten, Grafiken in einem Dokument zu platzieren.

Laufen Wort in irgendeiner Ihnen bekannten Weise.

Übung 1. Einfügen eines in einem anderen Grafikeditor erstellten Objekts

Einfügen eines in einem anderen Grafikeditor erstellten Objekts, Bearbeiten nach dem Einfügen und Kennenlernen der Methode zum Erstellen von Beschriftungen.

1.1. Erstellen eines grafischen Bildes in einem Grafikeditor.

1. Starten Sie den Paint-Grafikeditor. Klicken Sie dazu auf die Schaltfläche Start, im Punkt Programme wählen Standard und klicken Sie auf den Artikel Malen .

2. Erstellen Sie ein Bild in einem Grafikeditor, z. B. wie in Abb. 4.1

3. Wählen Sie mit der Schaltfläche ein Bild aus Wählen Grafikeditor (Abb. 4.2).

4. Kopieren Sie das Bild in die Zwischenablage. Führen Sie dazu den Befehl aus Bearbeiten ÞKopieren oder Hotkeys drücken [ Strg+ C].

1.2. Einfügen eines Bildes in Word.

1. Gehen Sie zum Word-Editor. Wenn es gestartet wurde, klicken Sie einfach auf das entsprechende Symbol in der Windows95-Taskleiste. Wenn Sie Word noch nicht gestartet haben, ist jetzt der richtige Zeitpunkt dafür: Starten Sie Word auf eine der Ihnen bekannten Arten.

2. Fügen Sie ein Bild aus dem Puffer ein. Platzieren Sie dazu den Cursor an der Stelle, an der Sie das Bild platzieren möchten, und klicken Sie auf die Schaltfläche Einfügen in der Symbolleiste. Ihr Bild wird im geöffneten Dokument platziert.

3. Klicken Sie auf das eingegebene Objekt. Um das Bild herum erscheinen quadratische „Knötchen“. Wenn Sie mit der linken Maustaste auf einen solchen Knoten klicken und ihn gedrückt halten, können Sie durch Bewegen der Maus die Größe des Bildes ändern. Stellen Sie die benötigten Bildgrößen ein.

Reis. 4.2. Grafikeditor Malen und das ausgewählte Bild

1.3. Platzieren eines Bildes im Text.

Ein in einem Textdokument platziertes Objekt kann sich überall befinden, aber nicht dort, wo Sie es benötigen. Um das Bild genau an der Stelle des Textes zu platzieren, an der Sie es sehen möchten, müssen Sie die Symbolleiste „Bildanpassung“ verwenden.

1. Öffnen Sie das Panel Bildeinstellungen. Führen Sie dazu den Befehl aus Sicht Symbolleisten ÞBildeinstellungen. Vor Ihnen sollte ein Panel erscheinen Bildeinstellungen .

2. Drücken Sie die Taste Textumbruch. Wählen Sie im angezeigten Menü die gewünschte Verpackungsoption aus und klicken Sie darauf. Zum Beispiel, wenn Sie wählen Rund um das Büro, dann wird es bei der Texteingabe um den Umriss des Bildes herum platziert, da Abb. 4.1 in diesem Handbuch.

1.4. Bearbeiten eines Bildes.

Um ein Objekt zu bearbeiten, doppelklicken Sie darauf. Als Ergebnis wird der Editor gestartet, in dem dieses Bild erstellt wurde, und das Bild selbst wird darin platziert. Sollte der Editor, in dem das Bild erstellt wurde, nicht verfügbar sein, kann das Bild mit dem in Word integrierten Editor geändert werden.

1.5. Eine Bildunterschrift erstellen.

1. Schalten Sie das Panel ein Zeichnung. Klicken Sie dazu auf die Schaltfläche Zeichnung in der Symbolleiste.

2. Platzieren Sie einen Textblock unter dem Bild. Klicken Sie dazu auf die Schaltfläche Inschrift auf dem Panel Zeichnung. Platzieren Sie den Mauszeiger unter dem Bild, klicken Sie mit der linken Maustaste, halten Sie sie gedrückt und stellen Sie die Größe des Textblocks in der Breite auf die Größe des Bildes und in der Höhe auf etwa 1 cm ein. Als Ergebnis erhalten Sie einen rechteckigen Block, in den Sie Text platzieren können (Abb. 4.3). Wenn Sie mit der Maus den „Knoten“ auf dem Block „ziehen“, können Sie die Größe des Blocks ändern.

3. Geben Sie eine Bildunterschrift ein, zum Beispiel „ Abb.1. Meine Kunst" Die Beschriftung muss eingetragen werden Kursiv .

Legen Sie in der Gruppe „Füllung“ in der Dropdown-Liste „Farbe“ den Wert auf „Keine Füllung“ und in der Gruppe „Linien“ in der Liste „Farbe“ den Wert auf „Keine Linien“ fest. OK klicken. Dadurch verschwindet der Rand um den Block und der Text wird durch ihn sichtbar, auch wenn der Block den in das Dokument eingegebenen Text überlappt.

5. Stellen Sie den gewünschten Textfluss um den Rahmen ein. Öffnen Sie dazu das Fenster „Etikettenformat“ auf die gleiche Weise wie im vorherigen Fall und gehen Sie zur Seite „Umbruch“. Klicken Sie in der Gruppe „Umbrechen“ auf „Auf Pfad“ und dann auf „OK“.

Wenn Sie alles richtig gemacht haben, erhalten Sie genau das gleiche Ergebnis wie im Bild rechts.

Übung 2: Zeichnen auf einem Dokument

Zeichenfenster des Editors Wort. Einführung in die Werkzeuge, die Möglichkeit, einen Linientyp auszuwählen, einen Textrahmen einzufügen, die Linienfarbe festzulegen und ihn zu füllen.

Versuchen wir, ein regelmäßiges Parallelepiped zu zeichnen (Abb. 4.6). Wenn Sie die Aufgabe vereinfachen möchten, beschränken Sie sich auf ein Parallelepiped ohne Koordinatenachsen und Scheitelpunktbezeichnungen.

Bevor Sie mit der Aufgabe beginnen, analysieren Sie sorgfältig die Baureihenfolge.

Aus welchen geometrischen Formen kann dieses Parallelepiped bestehen?

Sie können mit einem Rechteck ABB 1 A 1 beginnen. Sie möchten es wahrscheinlich kopieren und dasselbe Rechteck CC 1 D 1 D einfügen, was falsch ist. CC 1 D 1 D kann keine einzelne geometrische Figur sein, da sie aus Linien unterschiedlichen Stils (durchgezogen und gepunktet) besteht.

Reis. 4.6

Schlüssel zur Aufgabe

Sie können die folgende Baureihenfolge vorschlagen (alle verwendeten Schaltflächen aus dem Bedienfeld). Zeichnung. Um es aufzurufen, drücken Sie die Taste Zeichnung in der Symbolleiste):

1. Zeichnen Sie ein Rechteck ABB 1 A 1 ;

2. Zeichnen Sie eine der geneigten Linien, zum Beispiel A 1 D 1;

3. Kopieren Sie A 1 D 1 und fügen Sie dreimal BC, B 1 C 1 und AD ein;

4. Zeichnen Sie die Linien CC 1, DD 1, DC und D 1 C 1;

5. Markieren Sie die entsprechenden Segmente und wählen Sie sie aus Schlaganfalltyp– interpunktieren;

6. Vervollständigen Sie die Koordinatenachsen, indem Sie das Werkzeug auswählen Linie und Stil - Linie mit Pfeil. Um einen Autoshape-Stil auszuwählen, klicken Sie mit der rechten Maustaste auf das Objekt und wählen Sie das Element aus dem angezeigten Kontextmenü aus AutoShape-Format. Als Ergebnis erscheint ein Fenster vor Ihnen AutoShape-Format, in dem Sie den gewünschten Formtyp festlegen können, beispielsweise das Hinzufügen eines Pfeils zu einer Linie.

Der zeitaufwändigste Vorgang in dieser Übung ist die Benennung der Eckpunkte.

Um den Buchstaben an der gewünschten Stelle zu platzieren, schalten Sie den Knopf ein Inschrift auf dem Panel Zeichnung und strecken Sie den Rahmen mit der Maus auf die gewünschte Größe.

Durch Drücken der Taste Linienfarbe(Der Rahmen muss ausgewählt sein), wählen Sie aus der vorgeschlagenen Palette aus Keine Linieähnlich Füllfarbe - Keine Füllung, Ihr Rahmen ist transparent geworden. Sie können darin Text platzieren (wir benötigen nur einen Buchstaben – die Bezeichnung des Scheitelpunkts).

Wählen Sie Ihren Rahmen aus, kopieren Sie ihn und fügen Sie ihn dann zehnmal ein (heben Sie die Auswahl des Originalrahmens vor dem Einfügen auf).

Der neue Rahmen kann nach dem Einsetzen auf den vorherigen Rahmen passen. In diesem Fall scheint es, dass das Einsetzen nicht stattgefunden hat, tatsächlich reicht es jedoch aus, den oberen Rahmen zur Seite zu verschieben.

Der Index wird mit dem Befehl abgerufen Format ÞSchriftart... wenn auf der Registerkarte „Schriftart“ in der Optionsfeldgruppe Auswirkungen intensivieren Index. Rahmen werden mit der Maus auf dem Blatt verschoben.

Die Zeichnung ist fertig.

Es empfiehlt sich, es als einzelnes grafisches Objekt darzustellen. Schalten Sie dazu den Knopf ein Objekte auswählen, ziehen Sie einen gepunkteten Rahmen um das gesamte Bild (wählen Sie das Bild aus) und klicken Sie Aktionen, und wählen Sie im angezeigten Menü aus Gruppe.

Jetzt können Sie die gesamte Zeichnung über das Blatt verschieben.

Darüber hinaus können Sie die Proportionen ändern, indem Sie das Bild auswählen und die Knoten (Quadrate im Auswahlrahmen) mit der Maus ziehen.

Übung 3: Fügen Sie ein Bild aus der Clipart-Galerie ein und platzieren Sie Text darüber

Eine ungewöhnlich einfache und effektive Aufgabe.

Reis. 4.7. Fenster zur Auswahl eines Kollektionsmusters Clip Art

2. Ändern Sie die Proportionen und Abmessungen der Zeichnung (ähnlich wie bei der vorherigen Aufgabe).

3. Zeichnen Sie einen Textrahmen über das Bild ( Linienfarbe- Nein, Füllfarbe- Nein) auf die gleiche Weise, wie die Eckpunkte in der vorherigen Aufgabe bezeichnet wurden.

4. Geben Sie abschließend den Text der Einladung ein und formatieren Sie ihn nach Ihren Wünschen.

Übung 4: Erstellen einer Visitenkarte

Lassen Sie uns unsere eigene Visitenkarte erstellen. Zusätzlich zum Einfügen von Bildern und der Verwendung des Textrahmens können Sie sich alle Konzepte im Abschnitt zur Absatzformatierung merken. Hier gibt es mehrere Möglichkeiten, eine Visitenkarte zu gestalten:

· eine einfache Visitenkarte, Formatierung mit Absatzeinzügen und -abständen, verschiedene Arten der Absatzausrichtung, Schriftarten (Übung 4.1);

· eine Visitenkarte, die auf der Grundlage eines Rahmens aus der Clipart-Sammlung erstellt wurde (Übung 4.2);

· eine Visitenkarte, die mithilfe von Absatzrahmenelementen in einem Textrahmen platziert wird (Übung 4.3). Wir haben die Absatzeinrahmung nicht separat betrachtet, da sie völlig identisch mit der Tabellenzelleneinrahmung ist und mit denselben Vorgängen durchgeführt wird.

Bevor wir mit der Beschreibung jedes einzelnen davon beginnen, betrachten wir die allgemeinen Bestimmungen.

1. Platzierung auf einem Blatt.

Abhängig von der Art der Ausrüstung, auf der Ihre Produkte in Zukunft gedruckt werden, müssen Sie entweder eine oder die maximale Anzahl an Visitenkarten auf dem Blatt platzieren. In beiden Fällen wird eine Visitenkarte erstellt und dann repliziert (durch Kopieren und Einfügen). Zuerst müssen Sie die entsprechenden Dokumentränder festlegen (berechnen Sie die optimalen Ränder, um die maximale Anzahl an Visitenkarten im Format 5 x 9 cm unterzubringen). Bevor Sie mit der Eingabe Ihres Visitenkartentextes beginnen, müssen Sie dafür einen Textrahmen einer bestimmten Größe erstellen (anstelle eines Textrahmens können Sie auch eine unlinierte Tabelle einfügen). Dazu „strecken“ Sie einen beliebigen Textrahmen und drücken dann die Taste Linientyp , Wählen Sie 3 pt (der Rand sollte zu diesem Zeitpunkt ausgewählt sein). Mit diesem Verfahren müssen Sie mit der Arbeit mit einer der vorgeschlagenen Visitenkarten beginnen.

2. Textformatierung.

· Auswahl von Schriftart und -größe;

· Verwendung verschiedener Arten der Textausrichtung und -einrückung sowie des Schriftabstands;

· Einfügen von Symbolen (-,- usw.);

Absätze einrahmen

· Verwendung nicht dehnbarer Leerzeichen zum Formatieren von Text;

· Erstellen eines Rahmens durch Einfügen eines Bildes aus der Clipart-Sammlung;

· Einfügen eines Bildes.

Lassen Sie uns nun jeden Visitenkartentyp direkt kommentieren.

Übung 4.1: Erstellen Sie eine Visitenkarte unter Verwendung von Absatzeinzügen, Abständen, verschiedenen Absatzausrichtungen und Schriftarten

Übung 4.2. Erstellen einer Visitenkarte, gerahmt in einem Rahmen aus der Clipart-Sammlung

Schlüssel zur Aufgabe

1. Bereiten Sie einen Textrahmen einer bestimmten Größe vor.

2. Ein Bild aus der Clipart-Sammlung (Rahmen) wird in den Textrahmen eingefügt.

3. Der Text der Visitenkarte wird in den Textrahmen eingegeben, den Sie über das Bild „spannen“.

4. Alle Formatierungstechniken sind die gleichen wie bei der vorherigen Aufgabe, nur der Absatz mit dem Nachnamen hat unten einen Rahmen Format ÞRänder und Schattierungen... und gleicher Abstand links und rechts (damit die Unterstreichungslinie nicht bis zum äußersten Rand der Visitenkarte reicht) . ^

Übung 4.3: Anwenden von Absatzrahmenelementen auf das Visitenkartendesign

Schlüssel zur Aufgabe

1. Der gesamte Text ist zentriert.

2. Die Schriftgröße wurde zur Eingabe der Position verwendet.

3. Die Absatzrahmung wurde angewendet.

4. Bei einem Absatz, der den Namen der Organisation enthält, gibt es unten einen Rahmen mit einer Doppellinie, bei einer Adresse mit einer Telefonnummer gibt es einen Rahmen (nach der Adresse können Sie ein erzwungenes Zeilenende einfügen) .

5. Um sicherzustellen, dass die Rahmenlinien nicht bis an die Ränder der Visitenkarte reichen, wird der gesamte Text links und rechts gleich stark eingerückt.

Die meisten Webseiten enthalten Grafiken. Es ermöglicht Ihnen, Informationen farbenfroh und übersichtlich darzustellen. In vielen Fällen ist es besser, ein Bild zu zeigen, als eine lange Textbeschreibung zu geben.

Es gibt zwei Möglichkeiten, Grafiken auf einer Seite zu platzieren:

Einfügen einzelner Bilder;
Füllen Sie den Hintergrund mit einem Bild.

In jedem Fall wird das grafische Bild aus der Datei übernommen.

Grafiken einfügen

Das Einfügen eines Grafikbildes aus einer Grafikformatdatei auf eine Seite erfolgt mithilfe des Tags (aus dem Englischen, Bild – Bild) gibt die Dateiadresse als Argument des SRC-Attributs an:

< IMG SRC = "адрес_графического_файла" >

Die Adresse der Grafikdatei ist entweder eine URL oder ein Dateiname, möglicherweise mit einem Pfad. Um beispielsweise eine Grafikdatei logotip.jpg anzuzeigen, sollten Sie das Tag schreiben:

< IMG SRC = "logotip.jpg" >

Um die Übertragungsgeschwindigkeit eines Grafikbildes in einem Tag zu erhöhen Sie können das Attribut LOWSRC (zusätzlicher Parameter) verwenden, das die Adresse der Grafikdatei als Argument verwendet. Sie können zwei Grafikdateien erstellen: Eine (z. B. logotip.jpg) enthält ein Bild mit hoher Auflösung und die andere (z. B. logotip.gif) enthält ein Bild mit niedriger Auflösung. Dann der Tag:

< IMG SRC = "logotip.jpg" LOWSRC = "logotip.gif" >

...weist den Browser an, zuerst die Datei logotip.gif herunterzuladen und sie dann beim Empfang durch die Datei logotip.jpg zu ersetzen.

Eine weitere Möglichkeit, das Laden von Grafiken zu beschleunigen, besteht darin, mithilfe von Attributen die Größe des rechteckigen Bereichs festzulegen, in dem die Grafik platziert wird BREITE(Breite) und HÖHE(Höhe), gemessen in Pixel. Wenn Sie diese Attribute angeben, reserviert der Browser zunächst Platz für die Grafiken, bereitet das Dokumentlayout vor, zeigt den Text an und lädt erst dann die Grafiken. Beachten Sie, dass der Browser das Bild komprimiert oder streckt, damit es in die angegebene Bildgröße passt. Ein Beispiel für die Angabe von Bildabmessungen:

< IMG SRC = "logotip.gif" WIDTH = 40 HEIGHT = 20 >

Grafiken werden normalerweise in Verbindung mit Text verwendet, sodass die Herausforderung besteht, Text und Grafiken auszurichten. Dieses Problem wird mithilfe des Attributs gelöst AUSRICHTEN Etikett mit verschiedenen Argumenten. Beispielsweise möchten wir möglicherweise, dass der Text rechts oder links um ein Bild herumfließt. Normalerweise ist das Bild eng mit dem Text eingebettet, was hässlich sein kann. Um dies zu vermeiden, können Sie um die Abbildung herum leere Ränder festlegen. Felder werden mithilfe von Attributen erstellt VSPACE für obere und untere Ränder und НSPACE für Seitenränder in einem Tag . Die Argumente für diese Attribute werden als Zahlen angegeben, die die Größe der Felder in Pixel angeben. Um den Textumbruch um Grafiken zu unterbinden, verwenden Sie das Tag
.

Das folgende Tag legt fest, dass die Grafiken aus der Datei logotip.jpg nach rechts umgebrochen werden (das Bild wird links vom Text platziert):

< IMG SRC = "logotip.jpg" ALIGN = LEFT >

Wenn Sie ein Bild rechts vom Text platzieren möchten, benötigen Sie das Attribut AUSRICHTEN Argument zuweisen RECHTS:

< IMG SRC = "logotip.jpg" ALIGN = RIGHT >

Um die Ränder um das Bild herum festzulegen, müssen Sie ein Tag schreiben wie:

< IMG SRC = "logotip.jpg" ALIGN = LEFT HSPACE = 20 VSPACE = 10 >

Dabei bestimmen die Zahlen 20 und 10 die Größe der Felder.

Betrachten wir ein Beispiel für die kombinierte Verwendung von Grafiken und Texten. Öffnen Sie Notepad (Texteditor Notepad) Windows. Schreiben Sie darin HTML-Code mit den oben besprochenen Tags. Nachfolgend finden Sie ein Programm, das einige Texte und Grafiken ausgibt. Sie können jede Ihrer Dateien als Grafikdatei verwenden. Die hier verwendete Datei ist logotip.gif.

< HTML >

< HEAD >

< TITLE >Übung 1< / TITLE >

< / HEAD >

< BODY BGCOLOR = "YELLOW" >

< IMG SRC = "logotip.gif " ALIGN = LEFT >

< H1 >Der Text umschließt die Grafiken auf der rechten Seite< / H1 >

Reis. 657. Der Text wird rechts um das Bild herum umbrochen

Umfangreiche Möglichkeiten zur präzisen Positionierung von Bildern (sowie anderen Elementen) auf der Seite bieten Tische Und Stile. Diese HTML-Elemente werden später besprochen. Sie können beispielsweise eine Tabelle ohne sichtbare Rahmen definieren und in den Zellen dieser Tabelle Bilder, Texte und andere Elemente platzieren.

Definition 1

Eine Webseite ist eine in HTML erstellte Textdatei, die im World Wide Web (WWW) gehostet wird. Zusätzlich zum Text kann eine Webseite Hypertext-Links enthalten, über die Sie zu anderen Webseiten navigieren und diese anzeigen können, sowie Einfügungen in Form von Grafiken, Animationen, Videoclips und Musik.

Mit HTML können Sie:

Webseiten erstellen und bearbeiten.
Bearbeiten Sie HTML-Dokumente aus dem Internet und berücksichtigen Sie dabei die Funktionsweise aller im Dokument eingebetteten Objekte (Bilder, Animationen usw.).
Mithilfe von Hypertext-Links und der Möglichkeit, Zeichnungen, Diagramme, Animationen, Videoclips, Musik und Sprache sowie Textspezialeffekte in ein HTML-Dokument einzubetten, können Sie Multimedia-Präsentationen, Diashows und Demonstrationsprojekte erstellen.

Anmerkung 1

Grafische Bilder werden normalerweise in separaten Dateien gespeichert. Die HTML-Sprache verfügt über spezielle Tags, mit denen Links in die Codes von Webseiten geschrieben werden, die die tatsächlichen Adressen dieser Dateien im Internet darstellen. Wenn auf solche Tags gestoßen wird, fordert der Webbrowser beim Webserver die entsprechende Datei mit einem Bild, Audio oder Video an und zeigt sie auf der Webseite an der Stelle dieses Tags an. Alle Daten (Bilder, Audio- und Videodateien usw.), die in von der Webseite getrennten Dateien gespeichert sind, werden als eingebettete Elemente von Webseiten bezeichnet. Schauen wir uns den Vorgang des Hinzufügens eines Bildes zu einer Webseite genauer an.

Bilder zu einer Webseite hinzufügen

Die Attraktivität von Webseiten liegt gerade in den darauf verwendeten Grafiken und anderen verschiedenen Objekten. Das Hinzufügen eines Bildes zu einer Seite ist nicht schwierig. Das Hinzufügen von Grafiken, die einer Webseite ein ansprechenderes und professionelleres Aussehen verleihen können, ist jedoch viel schwieriger und erfordert spezielle Kenntnisse.

Sie können einer Seite ein Bild hinzufügen, indem Sie das Bildquellen-Tag verwenden, das wie folgt aussieht:

Dabei ist das Tag selbst und scr sein Attribut. Da das scr-Attribut erforderlich ist, können wir sagen, dass dieser gesamte Eintrag ein gemeinsames Tag ist. Das Bildquellen-Tag verwendet kein entsprechendes schließendes Tag, da das Quellen-Tag in sich geschlossen ist und daher bei Verwendung einen schließenden Schrägstrich am Ende erfordert: .

Alternative Untertitel hinzufügen

Im Internet findet man häufig verschiedene Beschriftungen, die angezeigt werden, wenn man mit der Maus über ein beliebiges grafisches Objekt auf einer Webseite fährt. Diese Bildunterschriften enthalten in der Regel zusätzliche Informationen zum Bild selbst oder zum Bereich der Seite, auf dem es sich befindet.

Unten finden Sie den HTML-Code mit dem im Tag hinzugefügten alt-Attribut. Dieses Attribut teilt dem Browser, ähnlich dem src-Attribut, einige zusätzliche Informationen über das Bild mit und kann auch immer in Verbindung mit einem Tag verwendet werden.

alt="Das ist ein Bild!" />!}

Die Funktion des alt-Attributs besteht darin, alternativen Text für ein grafisches Element zu definieren, das einer Webseite hinzugefügt wird. Es wird alternativ genannt, weil es auf dem Bildschirm als Alternative zum Bild selbst angezeigt wird. Das alt-Attribut erfüllt eine weitere wichtige Funktion. Dadurch kann der Webdesigner sicher sein, dass, wenn ein Seitenbesucher kein Bild auf seinem Bildschirm sieht, er zumindest die zu diesem Bild hinzugefügten Textinformationen sehen kann.

Bei der Verwendung des Alt-Attributs für jedes Tag ist es wichtig, darauf zu achten, grafischen Elementen keine unangemessenen Textnachrichten zuzuweisen. Beispielsweise macht es keinen Sinn, alternative Textbeschriftungen zu Seitengestaltungselementen hinzuzufügen. Um solche Fehler zu vermeiden, können Sie das Alt-Attribut dieser Elemente auf einen leeren Wert (alt=" ") setzen. Wenn Sie keine anderen Attribute festlegen, rendert der Browser das Bild in seiner Originalgröße, richtet jedoch den oberen Rand des Bildes am oberen Rand der angrenzenden Textzeichenfolge aus. Sie können diese beiden Einstellungen jedoch mithilfe von Stylesheet-Tags ändern.

Bildattribute

Das Tag verfügt über Attribute, mit denen Sie die Größe von Bildern ändern können. Hier sind einige davon:

Höhe – wird verwendet, um die Höhe des Bildes in Pixeln oder Prozentsätzen zu bestimmen;
Breite – wird verwendet, um die Breite des Bildes in Pixeln oder Prozentsätzen zu bestimmen.

Bildhöhe und -breite anpassen

Die Größe der auf Webseiten platzierten Bilder kann mithilfe der oben genannten Attribute festgelegt werden. Darüber hinaus werden ihre Werte entweder als feste Pixelzahl oder als Prozentsatz relativ zur Seitengröße festgelegt. Im folgenden HTML-Code enthält das erste Tag die Abmessungen des Originalbilds in Pixel (60 Pixel vertikal und 60 Pixel horizontal), das zweite Tag legt die Breite desselben Bildes auf 6 % der Seitenbreite und die Höhe auf fest 10 % der Seitenhöhe.

alt="Das ist ein Bild!" height="60" width="60" />

alt="Das ist ein Bild!" height="10%" width="6%" />

Anmerkung 2

Bei der Darstellung von Bildern in einem eigenen Fenster verarbeitet der Browser beide Arten von Werten gleichermaßen gut. Sie müssen jedoch bedenken, dass Besucher von Webseiten auf ihren Computern möglicherweise eine andere Bildschirmauflösung haben als Sie. Daher müssen Sie bei der Größenänderung eines Bildes beide Bildwerte (Höhe und Breite) angeben. Wenn Sie nur einen dieser Werte ändern, erscheint das Bild auf dem Bildschirm möglicherweise vertikal oder horizontal gestreckt.

Es kann verwendet werden, um die Illusion eines schnelleren Ladens von Bildern zu erzeugen. Dazu müssen Sie immer die Werte der Höhen- und Breitenattribute angeben, unabhängig davon, ob die Bildgröße geändert wurde oder nicht. Denn sie übermitteln dem Browser wichtige Informationen über den Platzbedarf, der zum Platzieren eines Bildes auf einer Seite erforderlich ist. Als Reaktion darauf weist der Browser den für das Bild erforderlichen Speicherplatz zu und baut weiterhin andere Elemente der Seite auf, ohne das Laden des Bildes selbst zu stoppen. Dadurch scheint die Seite schneller zu laden, da Besucher nicht warten müssen, bis das Bild vollständig geladen ist, bevor sie andere Informationen auf der Seite sehen.

Um sicherzustellen, dass das Bild auf jedem Bildschirm, unabhängig von seiner Auflösung, genau einen bestimmten Platz über die Breite der Seite einnimmt, ist die Verwendung von Prozentwerten erforderlich. Wenn Sie möchten, dass die Auflösung des Bildes selbst konstant bleibt (seine Größe in Pixel), müssen Sie Werte in Pixel verwenden.

Ausrichten von Text und Grafiken

Um ein Bild am rechten oder linken Rand einer Textzeile auszurichten, verwenden Sie das align-Attribut des Tags. Zum Beispiel:

alt="Das ist ein Bild!" height="60" width="60" align="right" />

Um ein Bild relativ zu einer Textzeichenfolge vertikal auszurichten, können Sie auch dieses Attribut verwenden, das die Werte oben, unten und Mitte annehmen kann. Der Wert top gibt an, dass die Oberkante des Bildes an der Oberkante des umgebenden Textes ausgerichtet werden soll. Der Wert unten gibt an, dass der untere Rand des Bildes am unteren Rand des umgebenden Textes ausgerichtet werden soll. Der Wert center gibt an, dass die Mitte des Bildes an der Mitte der Textzeile ausgerichtet werden soll.

Bilder als Links verwenden

Bilder werden auch verwendet, um Hyperlinks zu anderen Dokumenten zu erstellen. In HTML wird ein Bild auf die gleiche Weise zu einem Hyperlink wie ein Textfeld. Dazu wird ein Tag verwendet, der ein Seitenelement (in unserem Fall ein Bild) umschließt, das zu einem Link werden soll. Durch Klicken auf dieses Bild gelangen Sie zum Link.

Miniaturbilder

Zusätzlich zu der oben genannten Methode, bei der ein Bild als Hyperlink fungiert, kann es auch als Hyperlink verwendet werden, der von einem Bild zum anderen übergeht. Dies ist in Fällen erforderlich, in denen das Bild, das Sie auf einer Webseite veröffentlichen möchten, recht groß ist und das Laden sehr lange dauert, was für viele Besucher nicht akzeptabel ist. Daher erstellen sie eine verkleinerte Kopie dieses Bildes (Miniaturansicht) und stellen es mit einem Hyperlink dar. Wenn sich ein Seitenbesucher für dieses Bild interessiert, kann er auf das Miniaturbild klicken, um das vollständige Bild anzuzeigen. Hier ist ein Codebeispiel:

alt="Klicken Sie, um das normale Bild anzuzeigen."

height="60" width="60" />

Geheimnisse für den erfolgreichen Einsatz von Bildern

Bilder liefern den Besuchern viele visuelle Informationen, was sie attraktiv macht, und sie lassen sich auch recht einfach zu einer Webseite hinzufügen. Es gibt jedoch bestimmte Regeln für die Erstellung einer Website, die befolgt werden müssen, wenn wir möchten, dass sie beliebt wird das Internet.

Beim Erstellen von Seiten sollten Sie versuchen, kleine Bilder darauf zu platzieren, da das Laden großer Bilder lange dauert und einige Benutzer immer noch Verbindungen mit geringer Bandbreite für den Zugriff auf das Netzwerk verwenden und daher die Größe der Download-Dateien für sie von grundlegender Bedeutung ist.

Notiz 3

Wichtig ist auch die Gesamtdateigröße des gesamten HTML-Dokuments, die wiederum nicht nur von der Größe der darin enthaltenen Bilder abhängt, sondern auch von deren Anzahl. Bei der Verwendung des Alt-Attributs ist Vorsicht geboten, damit der Inhalt der Textnachricht immer mit dem Bild selbst übereinstimmt. Und im umgekehrten Fall: Es muss sichergestellt werden, dass das Bild mit den auf der Seite dargestellten Textinformationen übereinstimmt.

Wenn Sie auf der von Ihnen erstellten Seite aus dem Internet entliehene Bilder verwenden, müssen Sie prüfen, ob diese Bilder urheberrechtlich geschützt sind.