iBooks Bootcamp Feste Layout-Inhalte hinzufügen

In den ersten beiden Raten dieser Serie haben wir uns mit den Grundlagen von iBooks beschäftigt und erläutert, wie Sie Ihr Projekt einrichten. In diesem Teil werden wir unserem Projekt mit festem Layout einige Inhalte hinzufügen und mit der Erstellung eines funktionierenden iBook beginnen. Lass uns anfangen!

Holen Sie sich die Projektbilder

Die herunterladbaren Quelldateien enthalten Bilder, die Sie in Ihrem Projekt verwenden können, um das Lernprogramm abzuschließen. Wenn Sie dies noch nicht getan haben, laden Sie die Quelldateien oben auf dieser Seite herunter. Doppelklicken Sie auf den Ordner "iBookDemo", öffnen Sie den Ordner "OEBPS" und klicken Sie mit der rechten Maustaste auf den Ordner "images". Wählen Sie "Kopieren" aus dem Menü, bevor Sie zum Projektordner zurückkehren, mit dem Sie in dieser Serie gearbeitet haben. Navigieren Sie im Ordner "OEBPS" Ihres Projekts und klicken Sie mit der rechten Maustaste. Wählen Sie "Element einfügen" aus dem Menü, um den Bilderordner in Ihren Projektordner einzufügen.

Schritt 1: Hinzufügen von XHTML-Inhalten

Hintergrundbilder

Fügen wir den XHTML-Dateien Hintergrundbilder hinzu. Öffnen Sie "page01.xhtml", "page02.xhtml" und "page03.xhtml" in Ihrem Texteditor, und fügen Sie den folgenden Code in jede Seite ein Karosserie Etikett:

Beachten Sie die Beschreibung des alt Etikett. Apple legt großen Wert auf die Erreichbarkeit alt Tags, die für sehbehinderte Benutzer beschreibend sein sollen. Die Datei "demoBackround.jpg" befindet sich im Ordner "images", den wir zuvor in den Ordner OEBPS eingefügt haben.

Vogelbild hinzufügen

Das Vogelbild ist eine PNG-Datei, während das Hintergrundbild eine JPEG-Datei ist. Dies liegt daran, dass das Vogelbild außerhalb seiner Kanten Transparenz erfordert. Wenn für ein Bild keine Transparenz erforderlich ist, um das Bild unten zu sehen, wie dies beim Hintergrundbild der Fall ist, sollten Sie JPEG-Dateitypen mit hoher Qualität beibehalten.

Fügen Sie den folgenden Code in das Karosserie Tags von "page01.xhtml", "page02.xhtml" und "page03.xhtml", um das Vogelbild auf jeder Seite zu platzieren.

Viele Elemente, die einem Buch hinzugefügt werden, verfügen über ein zugehöriges CSS Klasse und / oder Ich würde. Wenn Sie mit CSS nicht vertraut sind, können Sie mit diesen Bezeichnern die Eigenschaften der Elemente anpassen, z. B. Positionierung, Größe, Layering und Schriftartspezifikationen für Text. Ein Klassenattribut wird zum Erstellen von Gruppen ähnlicher HTML-Elemente verwendet, während eine ID zur Angabe einer bestimmten Elementart verwendet wird. In dieser Demo benötigen wir eigentlich nur das ID-Attribut, aber in Ihren eigenen Projekten möchten Sie vielleicht gleichartige Objekte mit einer Klasse gruppieren. Wir werden die Attribute der externen CSS-Datei in einem Schritt hinzufügen.

Text hinzufügen

Nachdem wir nun ein paar Bilder haben, fügen wir unserem iBook etwas Text hinzu. Navigieren Sie zurück zu "page01.xhtml" und geben Sie den folgenden Code in die Karosserie Etikett.

  Mein iBook-Demo-Projekt

Der gesamte Text in einem iBook sollte in das Projekt codiert und nicht in ein Bild eingefügt werden. Dies ermöglicht es einem Benutzer, jederzeit nach Text zu suchen oder nach ihnen zu suchen, und bietet iOS-Gerätenutzern mit aktiviertem Voice Over vollen Zugriff.

Klicken Sie auf "page02.xhtml" und fügen Sie den folgenden Code in die Karosserie Etikett:

  Kleiner Vogel sieht einen blauen Himmel.

Klicken Sie auf "page03.xhtml" und fügen Sie den folgenden Code in die Karosserie Etikett:

  Kleiner Vogel sieht grünes Gras.

Schritt 2: CSS erstellen

Fügen wir CSS hinzu, um die Elemente auf der Seite zu platzieren. Öffnen Sie die Datei "cssstyles.css" und fügen Sie den folgenden Code hinzu, um das Hintergrundbild zu platzieren:

 .backgroundImage position: absolut; Marge: 0; z-Index: 0; oben: 0px; links: 0px;  .backgroundImage img width: 800px; Höhe: 600px; oben: 0px; links: 0px;

Die erste CSS-Regel positioniert den Container in der oberen linken Ecke ohne Rand. Die zweite Regel enthält die Angaben zu Höhe und Breite für das Bild selbst sowie zum Platzieren des Bildes in der oberen linken Ecke des Containers.

Den Vogel positionieren

Direkt unter dem .backgroundImage img Fügen Sie in der Regel den folgenden Code hinzu, um den Vogel auf jeder Seite zu positionieren:

 #vogel position: absolut; z-Index: 10; links: 200px; oben: 250px;  #bird img width: 200px; Höhe: 123px;

Wieder wird die Bildgröße zusammen mit der Position auf der Seite und der Platzierung auf dem Hintergrundbild festgelegt.

Text positionieren und formatieren

CSS-Regeln für Text umfassen normalerweise zusätzliche Eigenschaften wie Schriftgröße und -familie. Fügen Sie den folgenden Code direkt unter dem vorherigen Code hinzu:

 # page01Text position: absolut; z-Index: 20; oben: 74px; links: 90px; Breite: 600px; Schriftfamilie: Serife; Schriftgröße: 28pt; Buchstabenabstand: 2px; Schriftdicke: fett; -webkit-text-fill-color: # 000000; Text-Schatten: 1.5px 1.5px #ffffff;  # page02Text position: absolut; z-Index: 20; oben: 74px; links: 80px; Breite: 600px; Schriftfamilie: Serife; Schriftgröße: 28pt; Buchstabenabstand: 2px; Schriftdicke: fett; -webkit-text-fill-color: # 000000; Text-Schatten: 1.5px 1.5px #ffffff;  # page03Text position: absolut; z-Index: 20; oben: 74px; links: 65px; Breite: 600px; Schriftfamilie: Serife; Schriftgröße: 28pt; Buchstabenabstand: 2px; Schriftdicke: fett; -webkit-text-fill-color: # 000000; Text-Schatten: 1.5px 1.5px #ffffff;

Da iBooks die WebKit-Webbrowser-Engine vollständig unterstützt, kann Text auf verschiedene Arten formatiert werden. WebKit verfügt über eine Vielzahl von Eigenschaften, die geändert werden können, um das gewünschte Erscheinungsbild für Ihren Text zu erstellen.

Schritt 3: Formatieren der EPUB-spezifischen Dateien

com.apple.ibooks.display-options.xml

Nachdem der Inhalt nun hinzugefügt wurde, beenden Sie die Einrichtung der EPUB-Dateien. Öffnen Sie die Datei "com.apple.ibooks.display-options.xml" und fügen Sie den folgenden Code in das Verzeichnis ein Anzeigeoptionen Etikett.

Hier ist viel los; Lassen Sie uns einen Blick auf die verschiedenen Optionen werfen. Die erste Option teilt iBooks mit, dass das Buch ein festes Layout-iBook ist, kein Flowing- oder Multi-Touch-Buch. Die zweite Option sperrt das Buch im Querformat. Das heißt, wenn der Benutzer das Gerät dreht, bleibt das Buch in Querformat gesperrt. Wenn Ihr Buch im Hochformat angeordnet werden soll, verwenden Sie den Wert Nur Porträt. Wenn Sie möchten, dass es sich frei drehen lässt, lassen Sie diese Option vollständig aus. Die letzte Option legt fest, ob das Buch als zweiseitige Seite oder nur als einzelne Seite geöffnet wird. Durch Angabe eines Wertes von falsch, Das Buch öffnet sich zu einer einzigen Seite. Ersetzen Sie den Wert durch wahr das Buch auf zwei Seiten öffnen zu lassen.

OPF-Datei: `Metadaten`

Der erste Teil der .opf-Datei sind die Metadaten des Buches. Öffnen Sie die Datei "content.opf" und fügen Sie den folgenden Code in die Datei ein Metadaten Etikett.

 iBooks Demo Aaron Crabtree 12345 en-US

Dies ist nur eine kleine Auswahl der vielen verfügbaren Meta-Tags. Für EPUBs sind drei Tags erforderlich: Titel, Bezeichner und Sprache. Die Tags sind ziemlich einfach. Titel ist der Titel des Buches, der Urheber ist der Autor, die Identifikation wird zur Identifizierung des Buches verwendet und ist fast immer eine ISBN. Sprache ist die Sprache, in der das Buch geschrieben wird, und Cover identifiziert das Bild, das als Cover des Buches verwendet werden soll.

OPF-Datei: `Manifest`

Damit der EPUB ordnungsgemäß funktioniert, müssen alle im Projekt enthaltenen Dateien im Manifest aufgeführt sein. Fügen Sie in der Datei "content.opf" den folgenden Code in der Datei " Manifest Etikett:

Zu jedem Element im Manifest gibt es einige Attribute. Das erste Attribut ist Ich würde, ein Wert Ihrer Wahl. Das zweite Attribut ist href, die angibt, welche Datei mit der Ich würde und seine Lage Das letzte Attribut ist Medientyp, einen Typ und einen Untertyp, die den Dateityp des Elements angeben. Das erste Element in der Liste ist das toc.ncx Datei, die wir im zweiten Teil der Serie erstellt haben. Der zweite Abschnitt enthält die XHTML-Dateien. Der dritte Abschnitt enthält das Hintergrundbild, das JPEG. Der vierte Abschnitt ist das Vogelbild, eine PNG-Datei, und das letzte Element verweist auf die CSS-Datei.

OPF-Datei: `Rücken`

Der Rücken bestimmt die Reihenfolge der Seiten im Buch. Fügen Sie den folgenden Code in das Rücken Etikett.

Beachten Sie den Artikel Ich würde Von der Manifest-Sektion wird auf die Seite verwiesen, nicht auf den Namen der Datei.

OPF-Datei: `Führen`

Der Leitfaden ist ein optionales Element, das zur Identifizierung wichtiger, referenzbezogener Abschnitte des Buches verwendet wird, z. B. Glossar, Index oder Inhaltsverzeichnis. Fügen Sie den folgenden Code in das führen Stichworte.

Da wir in unserem Buch keine Referenzabschnitte haben, enthalten wir nur einen Verweis auf "page01.xhtml" als Titelcover.

NCX-Datei: `Kopf`

Die .ncx-Datei oder Inhaltsverzeichnisdatei wird verwendet, um Lesezeichen für die wichtigen Abschnitte Ihres Buches zu erstellen. Öffnen Sie die .ncx-Datei und fügen Sie den folgenden Code in die

Etikett.

Der wichtigste Teil dieses Abschnitts besteht darin, dass der Wert der ersten Zeile mit dem Wert des Buchbezeichners im Metadatenabschnitt der .opf-Datei identisch ist.

NCX-Datei: `docTitle`

Bewegen Sie sich nach unten docTitle Tag und fügen Sie den folgenden Code hinzu.

 iBook Demo

Dieser Wert sollte mit dem Wert von übereinstimmen Titel Tag im .opf-Metadaten-Tag.

NCX-Datei: `navMap`

Der letzte Abschnitt der .ncx-Datei enthält die Startseite für das Buch. Da wir ein einfaches Buch erstellen, benötigen wir keine komplexe Seite mit Lesezeichen für verschiedene Kapitel und Abschnitte. Fügen Sie den folgenden Code in das navMap Etikett.

   Buchumschlag

Das Text Tag gibt den Text an, der im Inhaltsverzeichnis für Ihr Buch angezeigt werden soll, und das Inhalt Tag ist der Link-Ort.

Schritt 4: EPUB erstellen

Lassen Sie uns das iBook auf einem Gerät erstellen und testen. Beginnen Sie mit dem Starten von Terminal. Stellen Sie sicher, dass Sie sich im selben Verzeichnis wie Ihr EPUB-Hauptordner befinden. Geben Sie die folgenden Befehle in Terminal ein:
zip -0Xq iBooksDemo.epub Mimetyp.

Dieser Befehl weist Terminal an, eine neue ZIP-Datei mit dem Namen "iBooksDemo.epub" zu erstellen, ohne die Dateien zu komprimieren und die Mimetype-Datei aus dem ZIP-Archiv zu lassen. Da iBooks auf die Mimetype-Datei zugreifen muss, um EPUB zu öffnen, muss die Datei außerhalb des ZIP-Archivs bleiben.

Als Nächstes fügen wir der ZIP-Datei die Ordner META-INF und OEBPS hinzu, indem Sie Folgendes in Terminal eingeben:
zip -0Xr9Dq iBooksDemo.epub *.

Dieser Befehlssatz weist Terminal an, die beiden Ordner und ihren Inhalt zum ZIP-Archiv hinzuzufügen. Es ist wichtig, dass Sie Ihrem EPUB in jeder Zeile denselben Namen geben. Öffnen Sie den Hauptordner Ihres Buches, und Sie sehen die neu erstellte .epub-Datei. Diese Datei enthält alle Elemente Ihres Buches in einer praktischen Datei.

Schritt 5: Testen des iBook auf einem Gerät

Wenn Sie die iBooks-Anwendung nicht heruntergeladen haben, rufen Sie den App Store auf Ihrem Gerät auf, suchen Sie nach "iBooks" und laden Sie sie herunter. Starten Sie iTunes und schließen Sie ein Gerät an Ihren Computer an. Ziehen Sie die .epub-Datei in die Bibliothek in iTunes. Klicken Sie in iTunes auf das verbundene Gerät und klicken Sie unten auf der Seite auf "Synchronisieren". Starten Sie nach der Synchronisierung des Geräts iBooks und tippen Sie auf Ihr Buch, um das iBook zu starten und zu testen.

Fazit

Herzliche Glückwünsche! Sie haben gerade ein festes Layout-iBook erstellt! Wenn Sie Ihre Fähigkeiten entwickeln, werden Sie feststellen, dass iBooks eine unglaubliche Gelegenheit bietet, vollständig interaktive, unterhaltsame und ansprechende Bücher für Leser jeden Alters zu erstellen. Bücher sind nicht mehr nur Text und Bilder. Dank iBooks sind sie multimediale Erlebnisse mit Animationen, Video, Audio, Interaktivität und mehr!

Code