Haupt Andere Übernehmen Sie die Kontrolle über iWeb
Andere

Übernehmen Sie die Kontrolle über iWeb

Wie manTablets 27. März 2008 03:08 PDT

Anmerkung der Redaktion: Der folgende Artikel ist ein Auszug aus dem soeben erschienenen Übernehmen Sie die Kontrolle über iWeb: iLife ’08 Edition , ein elektronisches Buch im Wert von 10 US-Dollar, das von heruntergeladen werden kann TidBits-Veröffentlichung . Das 133-seitige E-Book hilft Lesern, professionell aussehende Websites mit iWeb zu erstellen, indem es alle Seitentypen von iWeb verwendet und spezielle Elemente wie iPhoto-Alben, YouTube-Videos, Google Maps, Google AdSense-Anzeigen und Formulare enthält, die in Google Docs einfließen.

Auch wenn Sie ausgefallene Grafiken oder Podcasts in Ihre Website einbinden, ist der Text das Herzstück Ihrer Website und verdient Ihre Aufmerksamkeit. In diesem Auszug aus Übernehmen Sie die Kontrolle über iWeb: iLife ’08 Edition , beschreibe ich eine Sammlung von Techniken, die sich alle auf die Arbeit mit Text beziehen: Verbesserung des Aussehens, Vermeidung von Problemen mit Zeichen mit hohem ASCII-Wert und Erstellen von Hyperlinks.

Text funkeln lassen

Die professionell entwickelten Vorlagen von iWeb sind nett, aber vielleicht möchten Sie das Aussehen Ihres Textes anpassen, vielleicht um Ihre Seite besser hervorzuheben. Obwohl ich es nicht übertreiben möchte, möchte ich meinen Beispielseiten Pep verleihen, indem ich Textfarben und -stile ändere und Effekte wie Deckkraft und Drehung anwende.



Schriftarten

Wenn Sie eine besondere Überschrift haben, die auffallen muss, sollten Sie eine andere Schriftart verwenden. An anderer Stelle in diesem E-Book warne ich davor, zu viele verschiedene Schriftarten zu verwenden, und diese Grundregel gilt immer noch. Die vernünftige Verwendung einer speziellen Schriftart kann jedoch das Aussehen Ihrer Webseite definitiv verändern. Als Beispiel habe ich beschlossen, den Titeltext Über diese Site auf der zu ändern Site, die ich in Verbindung mit diesem Buch erstellt habe damit es freundlicher aussieht und etwas auffällt. Ich habe den Text durch Doppelklick ausgewählt und dann in der Symbolleiste auf die Schaltfläche Schriftarten geklickt. Als ich eine Weile mit dem Font-Panel spielte, fand ich eine Schriftart (Bernard MT Condensed), die mir das gewünschte Aussehen verlieh.

Was ist das neueste iOS-Update?

Größe

Die Größe ist wichtig, wenn es um Text auf Webseiten geht. Überschriften und Titel sollten größer als der Fließtext sein. Um die Textgröße zu ändern, ohne das Schriftartenbedienfeld zu verwenden, wählen Sie den Text aus und drücken Sie Befehlstaste-Minus, um den Text zu verkleinern, oder Befehlstaste-Plus, um den Text zu vergrößern. Es gibt auch einen Schieberegler im Schriftartenbedienfeld, mit dem Sie die Größe von Text im Handumdrehen ändern können.

Farbe

Das Hinzufügen von Farbe ist eine einfache und normalerweise unauffällige Möglichkeit, den Text auf Ihrer Website anzupassen. Ich empfehle, auf Ihrer gesamten Website ein einheitliches Farbdesign zu verwenden. Wählen Sie Farben, die gut zusammenpassen und den Text gut lesbar machen. Auf meiner Website habe ich einen Farbtupfer hinzugefügt, indem ich einige Titel und Überschriften in dieselbe gebrannte Sienafarbe geändert habe, die an anderer Stelle im Thema zu finden ist.

Um die Farbe des Textes zu ändern, wählen Sie ihn aus und rufen dann das Farbenbedienfeld auf, indem Sie in der Symbolleiste auf die Schaltfläche „Farben“ klicken. Sie können eine Farbe auf verschiedene Weise auswählen und dann auch die Helligkeit und Deckkraft der Farbe anpassen.

Stile

Ihnen stehen auch eine Reihe von Textstilen zur Verfügung. Wenn ich mich auf Stile beziehe, spreche ich über die üblichen Dinge, die Sie mit Text aus dem Menü „Format“ machen – fett, kursiv, unterstrichen oder umrandet. Mit iWeb können Sie mit zusätzlichen Funktionen im Schriftartenbedienfeld über diese einfachen Stile hinausgehen.

Um das Schriftartenbedienfeld aufzurufen, klicken Sie in der Symbolleiste auf die Schaltfläche Schriftarten. Die Schaltflächen oben im Schriftartenbedienfeld sind leistungsstarke Werkzeuge. Mit ihnen können Sie Text doppelt unterstreichen, durchstreichen oder doppelt durchstreichen. Diese Stile können nicht in HTML codiert werden, daher überlagert iWeb den Text mit einer transparenten Grafik, um spezielle Unterstreichungs- und Durchstreichungseffekte zu erzielen.

Verwenden Sie die Symbolleiste oben im Schriftartenbedienfeld, um verschiedene Arten von Unterstreichungen, Durchstreichungen, Farben, Hintergründen und Schatten (von links nach rechts) anzuwenden.

Der Textinspektor bietet eine weitere Position zum Ändern der Textfarbe zusätzlich zu seinen Ausrichtungs- und Abstandssteuerungen. Typografen, die mein Buch lesen, werden erfreut sein zu erfahren, dass iWeb Werkzeuge zum Führen und Kerning bereitstellt. Wenn Sie kein Typograf sind, könnte es für Sie interessant sein zu wissen, dass der Zeilenabstand der Abstand zwischen den Textzeilen und das Kerning der Abstand zwischen den Zeichen ist.

Sie können dem ausgewählten Text auch einen Schatten zuweisen, indem Sie auf die Schaltfläche Schatten klicken. Die drei Schieberegler rechts neben der Schaltfläche „Schatten“ steuern die Deckkraft, Unschärfe und den Versatz des Schattens, während das Drehrad die Richtung des Schattens steuert. Nehmen Sie sich eine Minute Zeit, um mit diesen Steuerelementen zu spielen, um sie zu beherrschen. Ich schlage vor, an einem Text mit mindestens 24 Punkten zu arbeiten, damit Sie die Auswirkungen leichter erkennen können.

Ausrichtung & Abstand

Die Ausrichtung und der Abstand von Text können das Aussehen Ihrer Webseite erheblich verändern. Sie steuern beide Formatierungsarten im Textinspektor.

Wenn ich von Ausrichtung spreche, beziehe ich mich darauf, wie der Text mit den Rändern des ihn umgebenden Textfelds ausgerichtet ist. Text kann linksbündig, zentriert oder rechtsbündig ausgerichtet werden. Text kann auch sein gerechtfertigt , was bedeutet, dass es sowohl am linken als auch am rechten Rand sauber ausgerichtet ist. Ich mag das glatte, professionelle Aussehen von Blocksatz, da er beide Seiten des Absatzes ausrichtet und keine ausgefransten Kanten hinterlässt.

Der Textabstand kann auch das Aussehen Ihrer Seiten beeinflussen:

    Zeichenabstand: In der typografischen Welt als Kerning bekannt, definiert der Zeichenabstand, wie weit einzelne Zeichen voneinander entfernt sind. Ziehen Sie den Zeichenschieberegler im Textinspektor, um diesen Abstand anzupassen. Ich neige dazu, diese Einstellung bei der Standardeinstellung 0 Prozent beizubehalten, obwohl ich den Prozentsatz gelegentlich erhöhe, um zu erzwingen, dass der Text eine Zeile ausfüllt. Zeilenabstand: Diese Art der Formatierung wird auch als Leading (ausgesprochenes Leading) bezeichnet, nach den Bleistücken, die herkömmliche Schriftsetzer zwischen Zeilen mit physischem Typ platzieren, um den Abstand zwischen den Zeilen anzupassen. Um den Zeilenabstand anzupassen, klicken Sie in einen Absatz, den Sie anpassen möchten; Ziehen Sie dann den Linienschieberegler im Textinspektor (der Abstand zwischen den Linien wird größer, wenn Sie ihn nach rechts schieben). Leerzeichen vor/nach Absatz: Verwenden Sie die Schieberegler Vor dem Absatzabstand und Nach dem Absatzabstand, um festzulegen, wie viel Platz vor und nach Absätzen angezeigt wird. Dieses Tool ist nützlich für lange Webseiten, die viel Text enthalten, der in Absätzen angeordnet ist. Rand: Schließlich können Sie den Rand mithilfe des Schiebereglers „Rand einfügen“ einfügen. Einfügung bezieht sich auf die Anzahl der Leerzeichen zwischen den Rändern des Textfelds und den Zeichen.

Die Startseite der Beispiel-Site enthält Blocksatz. Ausgefranster Text ist leichter zu lesen, da die Zeichenabstände auf der gesamten Website gleich bleiben, während Blocksatz den Seitendesigns ein glatteres Aussehen verleiht.

iphone 12 und 12 pro vergleich

Hintergrundfüllung

Hintergrundfüllung ist eine Farbe oder ein Bild, das den Raum hinter dem Text ausfüllt. Hintergrundfüllungen, wenn sie richtig gemacht werden, heben den Text hervor und lenken die Aufmerksamkeit des Lesers auf wichtige Informationen. Hintergrundfüllungen in iWeb beziehen sich auf ein bestimmtes Textobjekt. Mit anderen Worten, Sie können nicht einige Wörter hervorheben und ihnen eine Hintergrundfüllung zuweisen – wenn Sie dies tun möchten, müssen Sie diese Wörter in ein separates Textobjekt aufteilen.

Um eine Hintergrundfüllung anzuwenden, wählen Sie den Textblock aus, klicken Sie auf die Schaltfläche „Informationen“ und dann auf die Schaltfläche . Sehen wir uns die Füllarten an, die das Einblendmenü „Füllung“ im Informationsfenster „Grafik“ bietet:

Das Einblendmenü „Füllen“ ist ein Zugang zu allen möglichen Fülleffekten. Das Farbfeld unter dem Menü fungiert als Schaltfläche, auf die Sie klicken können, um auf das Farbbedienfeld zuzugreifen.

Farbfüllung : Wie Sie sich vorstellen können, füllt dies den Hintergrund eines Textobjekts mit Farbe. Um die Farbe zu ändern, klicken Sie auf das Farbfeld, um das Bedienfeld „Farben“ anzuzeigen. Wenn Sie eine Volltonfarbe auswählen, nimmt die Vertiefung eine Volltonfarbe an. Wenn Sie die Deckkraft Ihrer Farbe ändern, um sie leicht transparent zu machen (suchen Sie im Bedienfeld Farben nach einem Schieberegler für die Deckkraft), hat das Farbfeld zwei Töne, wie das Bild rechts.

Verlaufsfüllung : Eine Verlaufsfüllung erzeugt einen glatten Übergang zwischen zwei Farben und platziert ihn hinter Ihrem Text. Wenn Sie im Popup-Menü „Füllung“ die Option „Verlaufsfüllung“ auswählen, werden dem Füllbereich des Grafikinspektors zwei neue Farbfelder hinzugefügt, eine für die Farbe am Anfang des Farbverlaufs und eine für die Farbe am Ende.

Anwenden einer Verlaufsfüllung auf den Hintergrund eines Textfelds.

In der Abbildung rechts haben beide Farben eine gewisse Transparenz (daher die semaphorartigen Rechtecke). Sie können ändern, welche Farbe oben oder links im Verlauf angezeigt wird, indem Sie auf den Doppelpfeil neben den Farbfeldern klicken. Oder Sie können mit dem Drehrad 'Winkel' herumfummeln, um die Richtung des Farbverlaufs zu bestimmen, oder auf einen der beiden kleinen Pfeile klicken, um schnell einen vertikalen oder horizontalen Farbverlauf einzustellen.

Der facettenreiche Füllbereich des Grafikinspektors ändert sich erneut, wenn Sie eine Bildfüllung auswählen.

Bild füllen : Diese Füllung setzt ein Bild hinter den Text. Ich empfehle, es sparsam zu verwenden. Eine Bildfüllung funktioniert gut in einer Schaltfläche, bei der ein Bild als Hintergrund dient und ein großer, fetter Text die Schaltfläche beschriftet. Nachdem Sie Bildfüllung aus dem Einblendmenü ausgewählt haben, ändert sich der Füllbereich des Grafik-Informationsfensters geringfügig: Im zweiten Einblendmenü können Sie festlegen, wie sich das Bild als Hintergrundfüllung verhält, und mit der Schaltfläche „Auswählen“ können Sie das Bild auswählen.

Die Verwendung eines braunen Farbtons auf einem Schwarzweißfoto ergibt ein feines Faux-Sepia-Tönungsbild.

sind iphone5 und 5s gleich groß

Getönte Bildfüllung : Ähnlich wie bei einer Bildfüllung fügt eine getönte Bildfüllung ein Farbfeld hinzu, sodass Sie die Tönungsfarbe und Deckkraft auswählen können. Sie können beispielsweise ein Schwarzweißfoto und eine Brauntönung verwenden, um ein simuliertes Bild mit Sepiatönung zu erstellen.

Textdrehung

Ihr Text muss nicht horizontal sein. Mit der Textdrehung können Sie Ihren Text in jedem beliebigen Winkel platzieren – sogar auf dem Kopf! Obwohl ich für die meisten Websites keinen auf den Kopf gestellten Text vorschlage, kann das Anbringen von Titeln oder Überschriften in einem leichten Winkel einer ansonsten langweiligen Seite Dramatik verleihen.

So drehen Sie einen Textblock:

  1. Wählen Sie das Textobjekt aus, indem Sie darauf klicken. Am Rand erscheinen Griffe.
  2. Halten Sie die Befehlstaste gedrückt und bewegen Sie den Mauszeiger über einen Ziehpunkt. Der Zeiger nimmt ein Doppelpfeilsymbol an, um anzuzeigen, dass Sie den Text drehen können.
  3. Halten Sie die Befehlstaste weiterhin gedrückt, während Sie den Ziehpunkt ziehen, um den Text zu drehen. Ein Hilfetipp wird in der Nähe schweben und den Winkel des Textfelds in Grad anzeigen.

Sie können andere Texteffekte auf gedrehten Text anwenden, um eine zusätzliche Wirkung zu erzielen. Die Screenshots unten zeigen, wie ich gedrehten Text und einen Schatten verwendet habe, um meine Video-Podcast-Seite zu beschriften.

Notiz : Wann ist Text kein Text? Wenn es eine Grafik ist! Immer wenn Sie Rotation, Schatten, Ebenen oder eine andere Schriftart verwenden, die keine Standard-Webschriftart ist, wird Ihr Textobjekt in eine portable Netzwerkgrafik umgewandelt (.png'ad page-ad has-ad-prefix ad-article' data- ad-template='article' data-ofp='false'>

Schichtung

Mit iWeb steht Ihnen ein weiteres Layout-Tool zur Verfügung: Layering. Das Bild unten zeigt ein nebeneinanderliegendes Beispiel für das Layering in Aktion.

Im linken Bild habe ich ein Textfeld mit einer Farbfüllung über einen gedrehten und schattierten Text gezogen. Mit den Schaltflächen Vorwärts und Zurück in der Symbolleiste kann ich das Textfeld entweder nach hinten oder den gedrehten Text nach vorne verschieben.

Text und Grafiken können in virtuellem 3D verschoben werden, wobei einige Elemente in Bezug auf die unterste Ebene höher oder niedriger sind. Stellen Sie sich Ihre Webseite als Schichtkuchen vor. Die untere Ebene kann ein Bild sein, während die obere Ebene ein Text oder ein anderes Bild sein kann. Die obere Schicht kann opak sein, in diesem Fall blockiert sie einen Teil der Sicht auf die untere Schicht, oder sie kann transparent sein und eine ungestörte Sicht auf die darunter liegende Schicht ermöglichen.

Der Screenshot unten zeigt einen interessanten Effekt, den ich für meine Podcast-Seite erstellt habe. Um es zu schaffen, habe ich mit dem großen Podcast hinten angefangen, der in einem eigenen Textobjekt war. Ich habe es mit dem Deckkraft-Schieberegler im Farbbedienfeld leicht transparent gemacht. Der nächste Schritt bestand darin, das Textobjekt zu kopieren und einzufügen, und in der Kopie habe ich die Schriftgröße etwas kleiner und die Transparenz etwas geringer gemacht und dann die Kopie vor den vorherigen Text gelegt. Das habe ich viermal wiederholt.

Um diese dynamische Überschrift für meine Podcast-Seite zu erstellen, brauchte ich kein spezielles Grafiktool wie Photoshop. Ich habe es mit Ebenen in iWeb gemacht.

Um diese dynamische Überschrift für meine Podcast-Seite zu erstellen, brauchte ich kein spezielles Grafiktool wie Photoshop. Ich habe es mit Ebenen in iWeb gemacht.

Notiz : Die meiste aktuelle Apple-Software ist Unicode-kompetent, was bedeutet, dass sie Text in einer der Dutzenden von Sprachen akzeptiert, die von Mac OS X unterstützt werden. iWeb ist ein perfektes Beispiel dafür. Es codiert Webseiten so, dass die meisten modernen Browser nicht-englischen und nicht-lateinischen Text richtig anzeigen.

Die Tastatureingabe von rechts-nach-links-Text in Sprachen wie Arabisch oder Hebräisch ist für die praktische Verwendung in iWeb schwierig, obwohl Sie möglicherweise zufriedenstellende Ergebnisse erzielen, wenn Sie Text aus einer anderen Anwendung kopieren und in iWeb einfügen.

[ Steve Sande ist Präsident von Raven Solutions, LLC und betreibt die Podbus.com Podcast-Hosting-Dienst. Außerdem lehrt er am Center for Requirements Excellence die geheimnisvolle Kunst des Schreibens von Softwareanforderungen. Sein neuestes Buch ist Übernehmen Sie die Kontrolle über iWeb: iLife ‘08 Edition ( TidBits Publishing Inc. , 2008). ]