Grafiken und Farben - bilder.buecher.de · Sie zu diesem Thema wissen müssen. Ich mache Sie...

$: Grafiken und Farben - bilder.buecher.de · Sie zu diesem Thema wissen müssen. Ich mache Sie außerdem mit den Besonderheiten vertraut, die Sie beim ... \_website\bilder. 31: Grafik$
GGrraaffiikkeenn uunndd

FFaarrbbeenn

66

Kapitel 6: Grafiken und Farben 113

Fügen Sie Grafiken in Ihre Webseiten ein! Bringen Sie etwas Farbe in Ihr Dokument. In diesem Kapitel verrate ich Ihnen das Wichtigste, was Sie zu diesem Thema wissen müssen.

Ich mache Sie außerdem mit den Besonderheiten vertraut, die Sie beim Grafikhandling mit FrontPage beachten müssen.

Was Sie bald kennen und können

30: Grafiken in der Bildbearbeitung vorbereiten

31: Grafik in HTML einbinden

32: Grafik in FrontPage nachbearbeiten

33: Alternativtext festlegen

34: Grafik mit Rahmen versehen

35: Grafik links- und rechtsbündig ausrichten

36: Grafik ganz exakt ausrichten

37: Farbe der Seite verändern

38: Hintergrundgrafik statt -farbe

114 FrontPage 2002 | einfach klipp & klar

30: Grafiken in der Bildbearbeitung vorbereiten

Grafiken machen Ihre Homepage erst richtig interessant: Egal ob von der Digitalkamera oder aus dem Scanner – binden Sie die Abbildung einfach in Ihre Seiten ein.

Einzige Voraussetzung: Ihr Bild liegt in einem für das Web geeigneten Format vor.

Tipp: Wählen Sie als Format GIF oder JPEG

Wählen Sie entweder das Format GIF (Endung gif) oder das von den Digitalkameras bekannte Format JPEG(Endung jpg). Nur diese Formate werden von FrontPage (und den meisten Browsern) optimal unterstützt! JPEGist für hochqualitative Fotos mit Millionen von Farben das geeignete Format.

GIF kann dagegen nur 256 Farben anzeigen, eignet sich aber für Animationen und für Firmenlogos. Ideal: GIF-Grafiken lassen sich auf Wunsch mit spezieller Farb-transparenz abspeichern. So können Sie erreichen, dass ein Hintergrundmuster durch die Grafik durchscheint.

Mit welcher Bildbearbeitung arbeiten Sie? Mit PhotoShop, Paint Shop Pro, Corel Photo Paint? Mit Photo Impact oder PhotoShop Elements?

Auf jeden Fall sollten Sie Ihre Grafiken mit Ihrer Bildbearbeitung gut vorbereiten. Wichtig ist hierbei vor allem die Größe, denn im Web gilt: Small is beautiful!

Ich zeige Ihnen auf den nächsten Seiten einige der Möglichkeiten am Beispiel von Picture It! Foto von Microsoft. Das Prinzip ist bei allen Bildbearbeitungen gleich, die Schritte weichen allerdings erheblich ab.


1Zuerst „holen“ Sie Ihre Grafik von der Digicam oder scannen sie ein. In Picture It! Foto steht dafür die Befehlsfolge Datei – Bild laden aus zur Verfügung.

Falls Sie scannen, wird nun der Scanner-Dialog eingeblendet. Die Vorgehensweise beim Scannen hängt von Ihrem Scanner-Modell ab.

Wählen Sie beim Scannen die geringst-mögliche Auflösung. 72 dpi genügen

vollkommen.

2Das Bild liegt vor? Regulieren Sie Farbeinstellun-gen, Helligkeit und Kontrast. In Picture It! Foto finden Sie diese Optionen im Menü Retuschieren.


3Besonders eindrucksvoll ist der Schär-fenfilter zur Steigerung der Bildschärfe. Der Effekt ist manchmal regelrecht ver-blüffend.

Sie finden diesen Befehl ebenfalls im Menü Retuschieren. Wählen Sie einfach Bildschärfe regulieren und stellen Sie die gewünschte Schärfe ein.

4Stöbern Sie ruhig in den anderen Menüs. Jedes Bildbearbeitungspro-gramm hat seine Spezialitäten.

Da gibt es Filter von Antik bis Schwarzweiß, Einstellungen für Schatten- und Randeffekte, Rote-Augen-Retusche und vieles mehr.

5Am wichtigsten ist jedoch die Mög-lichkeit der Größeneinstellung. Bei Picture It! Foto wählen Sie Format –Bildgröße anpassen. Achten Sie un-bedingt darauf, als Einheit Pixel (pxl) auszuwählen. Legen Sie nun die ge-wünschte Höhe und Breite fest – mög-lichst unter Beibehaltung der Propor-tionen!

Denken Sie an die begrenzte Bildschirm-auflösung: Eine Grafik von 400 Pixel Breite füllt bei vielen Betrachtern schon mehr als

die Hälfte des Browserfensters!

6Zum Schluss speichern Sie Ihre bearbeitete Grafik ab. Denken Sie an den richtigen Dateityp, den Sie im gleichnamigen Listenfeld einstellen. Verwenden Sie JPEG oder GIF.


Tipp: Kompressionsfaktor beim Format JPEG

Gute Bildbearbeitungsprogramme bieten Ihnen zusätzli-che Speicheroptionen an. Klicken Sie in Picture It! Foto auf die Schaltfläche Optionen – besonders nützlich ist das beim JPEG-Format. Auf diese Art können Sie den Kompressionsfaktor der JPEG-Grafik in Stufen einrich-ten. Je höher Sie komprimieren, desto geringer ist die Dateigröße! Suchen Sie einen Kompromiss zwischen Da-teigröße und Qualität. Die günstigste Lösung finden Sie am besten durch Experimentieren.

Mein wichtigster Tipp beim Speichern lautet: Wählen Sie aussagekräfti-ge Dateinamen. Bleiben Sie bei der Kleinschreibung. Verzichten Sie auf Umlaute, Leer- und Sonderzeichen!

Beide Grafiken habe ich im Beispiel im Unterordner bilder unter C:\_website abgelegt. Der Pfad dorthin lautet also – zumindest auf der lokalen Festplatte – C:\_website\bilder.

31: Grafik in HTML einbinden

Für das Kapitel-Beispiel habe ich zwei Fotos vorbereitet. Einmal ein Selbstporträt für den Lebenslauf, der Dateiname lautet portrait.gif (kei-nen Umlaut ä verwenden!). Die zweite Grafik liegt im Format JPEG vor und heißt energie.jpg.

Zuerst binde ich die Grafik energie.jpg in die Startseite ein. Machen Sie mit! Im Beispiel liegt diese Datei im Unterordner bilder.


1An welcher Stelle wollen Sie die Grafik einbinden? Bereiten Sie am besten einen eigenen Absatz vor! Drücken Sie auf (Enter).

Klicken Sie nun in diesen leeren Absatz.

2Wählen Sie im Menü Einfü-gen den Befehl Grafik – Aus Datei.

Das Dialogfenster Bild erscheint.

3Suchen Sie die gewünschte Abbildung aus dem Dateisystem heraus. Gehen Sie sinngemäß vor wie beim Öffnen einer Datei. Wählen Sie die Vorschau-Ansicht, um sich das Heraussuchen der Grafik zu erleichtern. Klicken Sie zum Schluss auf die Schaltfläche Einfügen.


4Schon wird die Grafik an der gewünschten Stelle in Ihr HTML-Dokument eingefügt.

Betrachten Sie Ihr Do-kument ruhig in der An-sicht Vorschau.

Der Verweis auf die Grafik

Die Grafik wird übrigens nicht im HTML-Dokument gespeichert. FrontPage fügt lediglich einen Verweis auf die Grafik ein. Überzeugen Sie sich in der Ansicht HTML: Dafür wird das Tag <img> verwendet.

Die Grafik liegt eine Ordnerebene tiefer, wie im Beispiel? Schließlich hatte ich einen separaten Unterordner bilder für die Abbildungen vorge-sehen! Dann wird das Tag <img> so oder so ähnlich aussehen:

<img border="0" src="bilder/energie.jpg" width="320" height="180">

Überzeugen Sie sich ruhig im Quelltext: Beachten Sie vor allem die rela-tive Pfadangabe zur Grafik, hier bilder/energie.jpg.

Tipp: Relative statt absolute Pfade

Wieso steht an dieser Stelle der Pfad bilder/energie.jpgund nicht C:\_website\bilder\energie.jpg, wie es doch eigentlich richtiger wäre? Weil Sie im Web nur mit rela-tiven Pfaden arbeiten dürfen! Auf dem Webserver macht ein absoluter Pfad wie C:\_website\bilder\energie.jpgkeinen Sinn! Schließlich wissen Sie nicht, in welchen Ordnern auf welcher Festplatte Ihr Dienstleister Ihre Dateien bereithält. Man geht deshalb stets vom Wurzel-Ordner (Root-Ordner) aus, also dem obersten Ordner Ih-res Webprojekts. Alle Pfadangaben beziehen sich auf diesen Root-Ordner, sie sind relativ. Beachten Sie au-ßerdem, dass der Webserver bei Pfadangaben den Schrägstrich (/) verlangt, nicht den Backslash (\).


Automatisch fügt FrontPage außerdem gleich Angaben für Höhe (height)und Breite (width) der Grafik ein. Darüber hinaus unterdrückt das Att-ribut border="0" einen eventuellen Rand um die Abbildung.

Probleme beim Speichern der HTML-Datei?

Sie wollen Ihre Seite mit der verknüpften Grafik speichern? Meist geht alles glatt. In manchen Fällen allerdings reagiert FrontPage eigensinnig!

Das Programm behauptet dann beim Speichern, eine eingebettete Grafik müsse gespeichert werden. Das ist eine gut gemeinte Fehlinterpretation, denn schließlich liegt die Grafik ja schon fix und fertig gesichert im ent-sprechenden Ordner!

Klicken Sie in dem nun erscheinenden Dialogfenster die entsprechende Grafik an. Wählen Sie die Schaltfläche Aktion festlegen.

Entscheiden Sie sich für die Option Nicht speichern … und klicken Sie zweimal auf OK.

Sie wählen dagegen die Option Speichern: Diese Datei speichern? Dann wird FrontPage die Abbildung eigenmächtig an einer anderen Stelle ab-legen und außerdem den Verknüpfungspfad ändern. FrontPage wird die Abbildung dabei in der Regel im selben Ordner speichern, in dem auch die HTML-Datei liegt!


Tipp: Grafiken im selben Ordner ablegen

Sie hatten einen extra Ordner für die Grafiken einge-richtet, wie im Beispiel am Ordner bilder gezeigt? Ei-gentlich handelt es sich dabei um eine sehr sinnvolle und vor allem für größere Projekte unbedingt zu empfehlen-de Praxis. Wenn Sie allerdings nicht ständig wie ein Schießhund aufpassen, könnte FrontPage die Verweise beim Speichern irgendwann doch einmal eigenmächtig ändern. Zack – schon liegt eine Kopie der Grafik im gleichen Ordner, in dem sich die HTML-Datei befindet, und Ihre schöne Ordnung ist dahin.

Mein Tipp: Wenn Sie sich Ärger ersparen möchten, spei-chern Sie die Grafik deshalb von vornherein im selben Ordner wie die HTML-Datei.

Dieses Problem kann auch bei Verwendung eines FrontPage-Webs auf-treten. Zwar hält ein FrontPage-Web ganz automatisch einen Ordner images vor. Aber auch das Ablegen einer Grafik in diesem Ordner ist kein Garant dafür, dass nicht doch noch beim Speichern ein Grafik-Klon entsteht.

32: Grafik in FrontPage nachbearbeiten

Wozu gibt es sie überhaupt, diese eben erwähnte Speicher-Option bei Grafiken? Schließlich hatte sie uns beim Einbinden der Grafiken doch nur gestört? Die Antwort ist einfach: FrontPage besitzt eigene „bild-bearbeiterische“ Fähigkeiten und will diese auch zur Geltung bringen.

Wenn Sie Veränderung an der Grafik vornehmen, müssen diese natür-lich auch gesichert werden. Und gerade dann macht das Speichern un-bedingt Sinn.

Probieren Sie es einfach aus:


1Sie wollen die Größe der Grafik ver-ändern? Klicken Sie die Grafik an, um sie zu markieren. Fahren Sie nun mit dem Mauszeiger über einen der Eckpunkte. Wenn der Mauszeiger zum Doppelpfeil wird, klicken Sie die linke Maustaste und halten diese gedrückt.

Bei gedrückter linker Maustaste ziehen Sie die Grafik auf die gewünschte Größe. Sie können auf diese Art verkleinern

und vergrößern!

Tipp: Größe in der Bildbearbeitung vorbereiten.

Allerdings empfehle ich Ihnen eine Größenänderung in-nerhalb von FrontPage nur unter Vorbehalt. Besser wäre es, die Grafik stets mit Ihrer Bildbearbeitung in der Größe vorzubereiten, in der Sie diese benötigen! Alles andere geht entweder auf Kosten der Qualität oder auf Kosten von Speicherplatz!

2Sie wollen weitergehende „Manipulationen“ an Ih-rem Bild vornehmen? Noch mehr Möglichkeiten bie-tet Ihnen die Symbolleiste Grafiken. Klicken Sie auf eine Grafik. Die Symbolleiste Grafiken erscheint. Hier finden Sie verschiedene Filter und Effekte. Selbst Text können Sie über die entsprechende Schaltfläche einfügen. Probieren Sie die Möglichkei-ten ruhig aus!


3Sie haben an der Grafik herumexperimen-tiert? Sie wollen Ihre Versuche ungeschehen machen? Klicken Sie auf die Schaltfläche Wiederherstellen. Auch die per „Ziehme-thode“ veränderte Größe der Grafik wird wieder auf das Normalmaß zurechtgestutzt.

4Mit an Sicherheit grenzender Wahrschein-lichkeit erscheint beim Speichern wieder ein Dialogfeld, das danach fragt, was mit den „eingebetteten“ Grafiken passieren soll.

Diesmal gibt es gleich drei Auswahlmög-lichkeiten:

5Ich plädiere für Nicht speichern, wenn nichts verändert werden soll. Damit gelten Ihre Versuche als „ungesche-hen“. Wenn Sie die Grafik allerdings innerhalb von FrontPage bearbeitet haben und diese Bearbeitung auch sichern möchten, müssen Sie auf jeden Fall die Option Überschreiben wählen.

Beachten Sie dabei jedoch, dass ein schon vorhandener Verweis von FrontPage eigenmächtig verändert wird! FrontPage legt die veränderte Grafik in der Regel wieder im gleichen Ordner ab, in dem auch das HTML-Doku-ment liegt.


Tipp: Cliparts und andere Grafiken einfügen

Gewinnen wir dem etwas verzwickten Grafikhandling an dieser Stelle eine gute Seite ab: Sie können sogar normale Cliparts direkt über FrontPage in Ihre HTML-Seite einbinden! (Normalerweise liegen Cliparts nicht in einem für das Web tauglichen Format vor.)

Holen Sie die Clipart über Einfügen –Grafik – Clipart in Ihr Dokument. Beim Speichern der Seite schlägt Front-Page vor, die „eingebetteten Dateien“ zu speichern. Stimmen Sie diesmal auf jeden Fall zu, denn dadurch werden die Clips automatisch in das Web-taugliche GIF-Format umgewandelt. Sie landen im selben Ordner wie die HTML-Datei!

Sie wollen die Grafik aus der Webseite wieder entfernen? Klicken Sie sie an. Drücken Sie die Taste (Entf) auf Ihrer Tastatur.

33: Alternativtext festlegen

Die Grafik haben Sie eingebunden? Legen Sie den Alternativtext fest. Es handelt sich dabei um eine kurze Beschreibung, die immer dann ange-zeigt wird, wenn die Grafik noch nicht vollständig geladen ist.

Außerdem hat der Alternativtext noch eine andere Funktion, aber das verrate ich noch nicht, das soll eine Überraschung werden!

1 Doppelklicken Sie auf die Grafik.

Das Dialogfenster Bildeigenschaftenerscheint.


2Gehen Sie ins Register Allgemeindurch Klick auf die gleichnamige Re-gisterkarte.

3Schauen Sie in den Bereich Alterna-tive Darstellungsweisen, und zwar zum Feld Text. Notieren Sie hier ei-nen kurzen beschreibenden Text.

4Bestätigen Sie Ihre Einstellung durch einen Klick auf OK.

5Rufen Sie nun die Vorschau auf. Parken Sie den Mauszeiger über der Grafik.

Der Alternativtext wird zu einer informativen QuickInfo.

Schauen Sie ruhig auch in den Quellcode. Der Alternativtext wird hinter einem Attribut namens alt (wie engl. alternative) eingefügt:

alt="Raumenergie ist überall!"

Die Verwendung des Alternativtexts ist in HTML bei Grafiken Vor-schrift.


34: Grafik mit Rahmen versehen

Sie wollen die Grafik mit einem schicken Rahmen versehen? Auch hier hilft Ihnen das Dialogfenster Bildeigenschaften.

1Doppelklicken Sie wieder auf die Abbildung und bleiben Sie im Register Erscheinungsbild.

2Schauen Sie zum Bereich Layout.Legen Sie die Rahmenstärke im gleichnamigen Drehfeld fest. Eine 1 steht für eine Rahmenstärke von 1 Pixel (Bildpunkt). Je höher der Wert, desto dicker der Rahmen.

3Nach dem Klick auf OK wird um die Grafik ein mehr oder weniger dicker „Trauerrand“ gezogen. Die Farbe ist schwarz.

35: Grafik links- und rechtsbündig ausrichten

Sie wollen die Grafik wunschgemäß ausrichten? Sie soll in die Mitte der Seite oder nach rechts gesetzt werden? Dafür gibt es mehrere Techniken!

Grafikausrichtung mit Hilfe des Absatzes

Erste Methode: Richten Sie die Grafik mit Hilfe des Absatzes aus. Einzi-ge Voraussetzung: Sie haben der Grafik einen eigenen Absatz spendiert. Ausgerichtet wird im Prinzip der Absatz, die Grafik wandert mit. Die Vorgehensweise ist ganz einfach:


1Klicken Sie in den Absatz. Klicken Sie z. B. kurz hinter die Grafik, aber vor die Absatz-marke. Wichtig: Sie dürfen auf keinen Fall auf die Grafik klicken, sondern nur daneben.

2Wählen Sie die gewünschte Schaltfläche zum Ausrichten. Klicken Sie z. B. auf Zentriert oder auf Rechtsbündig.

Die Grafik wird nun entweder in der Mitte (siehe untere Abbildung) oder am rechten

Rand platziert.

Was passiert dabei in HTML? Der Absatz wird durch das Attribut alignausgerichtet. Wenn die Grafik zentriert ist, sieht das einleitende <p>-Tag so aus:

<p align="center">

Mit align wird ausrichten bezeichnet, center steht für zentriert.

Grafikausrichtung mit Textfluss

Lernen Sie nun die andere Variante kennen! Richten Sie die Grafik so aus, dass der Text drum herum fließt. Ich zeige es Ihnen am Beispiel der


zweiten Mustergrafik portrait.gif. Da diese nur 100 x 130 Pixel groß ist, kann man den übrigen Text bequem drum herum fließen lassen.

1Klicken Sie diesmal direkt auf die Grafik. Wichtig ist, dass Sie die Markierungspunkte der Grafik erkennen.

2Wählen Sie wieder eine der Schaltflächen zur Ausrichtung. Diesmal dürfen Sie sich aber nur zwischen linksbündig und rechtsbündig entscheiden, nicht jedoch für zentriert. Kli-cken Sie im Beispiel auf Rechtsbündig.

Die Grafik rutscht an den rechten Rand. Der Text jedoch fließt links dran vorbei.

Wenn Sie dagegen auf Linksbündig klicken, fließt der Text rechts an der Abbildung vorbei.

Schauen Sie in den Quelltext! Auch hier wird mit dem Attribut aligngearbeitet. Das Attribut steht diesmal jedoch direkt im <img>-Tag. Bei einem rechtsbündigen Bild heißt die Anweisung:

align="right"

Bei einer linksbündigen Abbildung dagegen

align="left"

Wenn Sie dieses Attribut manuell entfernen, wird auch der Textfluss wieder aufgehoben.


36: Grafik ganz exakt ausrichten

Sie wollen die Grafik ganz exakt auf der Seite ausrichten, und zwar pi-xelgenau? Eigentlich ging so etwas bisher nicht in HTML. Eigentlich. Doch findige Webdesigner haben sich schon vor Jahren einige Tricks einfallen lassen: Erstellen Sie eine (unsichtbare) Tabelle. Setzen Sie die Abbildung in eine Tabellenzelle hinein.

Das ist die Technik, die am häufigsten verwendet wird. Mit Tabellensatz mache ich Sie weiter hinten im Buch in einem eigenen Kapitel ausführ-lich vertraut.

Die zweite Technik ist wesentlich moderner und nicht ganz unproblema-tisch. Setzen Sie die Grafik in ein <span>-Tag und schieben Sie sie fröh-lich umher.

1Markieren Sie die Grafik, damit die Symbolleiste Grafiken erscheint.

2Klicken Sie auf die Schaltfläche Absolut positionieren.

Die Grafik lässt sich nun durch Ziehen frei auf der Seite verschieben.


Wie problematisch das ist, zeigt die Vorschau: Die Grafik verdeckt im Zweifelsfalle wichtige Textstellen. Denn bei dieser Technik findet kein Textfluss statt. Die Grafik schwebt stattdessen über dem Text.

Sie wollen diese Funktion wieder abschalten? Klicken Sie wieder auf die Grafik und wählen Sie erneut die Schaltfläche Absolut positionieren.

37: Farbe der Seite verändern

Wie wär’s denn mit einer anderen Hintergrundfarbe? Kein Problem mit dem Dialogfenster Seiteneigenschaften!

1Wählen Sie im Menü Datei den BefehlEigenschaften.

Tipp: Seiteneigenschaften noch schneller aufrufen

Sie wollen die Seiteneigenschaften noch schneller aufru-fen? Klicken Sie mit der rechten Maustaste in einen frei-en Bereich Ihrer Webseite. Wählen Sie im Kontextmenü den Befehl Seiteneigenschaften.

2 Klicken Sie auf die Registerkarte Hintergrund.

3Schauen Sie in den Bereich Farben.Wählen Sie im Listenfeld Hintergrunddie gewünschte Farbe aus. Tipp: Bei Weitere Farben finden Sie viele gedeck-te Töne.

4Nach einem Klick auf OK wird Ihrer Seite die-se Hintergrundfarbe zugewiesen.


Seien Sie vorsichtig bei der Auswahl der Farben. Die auf professionellen Seiten am häufigsten anzutreffende Farbe ist und bleibt Weiß.

Ich finde jedoch, dass ein zarter Pastellton Ihrer Präsenz durchaus mehr „Farbe verleihen kann“.

Übung

Die Hintergrundfarbe wird im Tag <body> festgelegt. Schauen Sie in den Quelltext: Finden Sie heraus, welches Attribut dafür verantwort-lich ist.

38: Hintergrundgrafik statt -farbe

Die Farbe genügt Ihnen nicht? Sie wollen Ihren Seitenhintergrund „tapezieren“? Nutzen Sie das Feature „Hintergrundgrafik“, denn eine Hintergrundgrafik wird so oft wiederholt, bis der ganze Hintergrund „zutapeziert“ ist.

Probieren Sie es einfach aus! Im Beispiel binden Sie eine schon vorbe-reitete Grafik einfach zusätzlich als „Hintergrundtapete“ ein.

1Wählen Sie Datei – Eigenschaften bzw. Rechtsklick, Seiteneigenschaften.

2Wechseln Sie zur Registerkarte Hintergrund. Haken Sie die Option Hintergrundbild ab und klicken Sie auf die Schaltflä-che Durchsuchen.

3Suchen Sie das Hintergrundbild aus dem Dateisystem aus. Gehen Sie praktisch so vor wie beim Öffnen einer Datei.


4Bestätigen Sie alle Dialoge, klicken Sie auf Öffnen und auf OK.

Die „Fototapete“ wird eingefügt.

Wie Sie sehen, wird das Bild praktisch „gekachelt“, also so oft wiederholt, bis das

gesamte Browserfenster ausgefüllt ist.

Tipp: Hintergrundgrafiken sinnvoll nutzen

Besitzen Sie gestalterisches Talent? Dann bereiten Sie die Hintergrundgrafiken mit der Bildbearbeitung vor. Erstellen Sie dezente Grafiken, die sich so nahtlos an-einander fügen, dass ein Muster entsteht. Wie wäre es mit Linien? Oder einem Ringbucheffekt?

Auch der Trick mit der 1-Pixel-Grafik ist beliebt. Sie erstellen eine Grafik, die nur 1 � 1 Pixel groß sein muss. Wählen Sie die von Ihnen bevorzugte Farbe. Da diese Grafik so oft wiederholt wird, bis alles ausgefüllt ist, er-gibt sich ein Farbteppich in Ihrer Wunschfarbe!


Hintergrundeffekte mit Designs

FrontPage wäre nicht FrontPage, wenn das Programm nicht einige vor-gefertigte Hintergründe für Sie bereithielte. Diese erreichen Sie über den Befehl Designs im Menü Format.

Dahinter verbergen sich die attraktiven „Designsammlungen“, eine Art vorgefertigte Layouts.

Mit diesen „Designs“ verleihen Sie Ihren Seiten praktisch durch Maus-klick ein „peppigeres“ Aussehen. Der passende Hintergrund wird auto-matisch gleich mit hinzugefügt.

Apropos automatisch. Dabei fügt FrontPage natürlich auch automatisch die entsprechenden Abbildungen ein und legt sie im selben Ordner ab. Sie werden es beim Speichern merken.


Tipp: Designs oder selber machen?

Sie wollen gerne mit Designs arbeiten? Dann empfehle ich, ganz links unten im Dialogfenster zusätzlich ein Häkchen zu setzen vor CSS verwenden. Nur so gehen Sie sicher, dass für die Designs auch die neueste Technologie (eben dieses CSS) verwendet wird.

Sie wollen Ihre „Designs“ lieber selbst erstellen und blättern dazu zum weiter hinten befindlichen Kapitel zu den Stylesheets? Auch nicht schlecht. Denn viele dieser Designs sind inzwischen hinlänglich bekannt und man merkt sofort: „Aha, von FrontPage erstellt“. Grund: FrontPage ist ein sehr populäres Programm! Außerdem blähen diese Designs den HTML-Quelltext auf. Front-Page fügt hier unzählige Kommentare ein, die lediglich zum Wiedererkennen dienen und ansonsten jedoch nutz-los sind.

Um ein Design zu entfernen, wählen Sie im Dialogfenster einfach die Option Ohne Design. Es ist die erste Option ganz links.


Übungen

Erstellen Sie ein neues HTML-Dokument. Bereiten Sie hier eine Li-teratur- und Linkliste vor. Nennen Sie das Dokument literatur.htm.

Fügen Sie eine passende Grafik in dieses Dokument ein, platzieren Sie diese Grafik in einem eigenen Absatz ganz oben im Dokument. (Die Beispielgrafik heißt wasser.jpg.)

Legen Sie den Alternativtext für diese Abbildung fest, schreiben sie im Beispiel „Wasser ist Energie …“.

Grafiken und Farben - bilder.buecher.de · Sie zu diesem Thema wissen müssen. Ich mache Sie...

Documents

Transcript of Grafiken und Farben - bilder.buecher.de · Sie zu diesem Thema wissen müssen. Ich mache Sie...