Share
Dans les deux premiers volets de cette série, nous avons passé en revue les bases de iBooks et expliqué comment configurer votre projet. Dans cet article, nous allons ajouter du contenu à notre projet de disposition fixe et commencer à construire un iBook fonctionnel. Commençons!
Les fichiers sources téléchargeables fournissent des images que vous pouvez utiliser dans votre projet pour compléter le didacticiel. Si vous ne l'avez pas déjà fait, téléchargez les fichiers source en haut de cette page. Double-cliquez pour ouvrir le dossier "iBookDemo", puis ouvrez le dossier "OEBPS" et cliquez avec le bouton droit de la souris sur le dossier "images". Sélectionnez "Copier" images "dans le menu avant de revenir au dossier de projet sur lequel vous avez travaillé dans cette série. Naviguez dans le dossier "OEBPS" de votre projet et cliquez avec le bouton droit de la souris. Sélectionnez "Coller l'élément" dans le menu pour coller le dossier images dans votre dossier de projet..
Ajoutons des images d'arrière-plan aux fichiers XHTML. Ouvrez "page01.xhtml", "page02.xhtml" et "page03.xhtml" dans votre éditeur de texte, puis ajoutez le code suivant dans chaque page. corps étiquette:
Notez le caractère descriptif de la alt étiquette. Apple accorde une grande importance à l'accessibilité, ce qui nécessite alt les balises doivent être descriptives pour les utilisateurs malvoyants. Le fichier "demoBackround.jpg" se trouve dans le dossier "images" que nous avons précédemment collé dans le dossier OEBPS..
L'image de l'oiseau est un fichier PNG alors que l'image d'arrière-plan est un fichier JPEG. Ceci est dû au fait que l'image de l'oiseau nécessite une transparence en dehors de ses bords. Lorsqu'une image n'a pas besoin de transparence pour voir l'image ci-dessous, comme c'est le cas avec l'image d'arrière-plan, vous voudrez vous en tenir aux types de fichiers JPEG avec un niveau de qualité élevé..
Ajoutez le code suivant à l'intérieur du corps balise de “page01.xhtml”, “page02.xhtml” et “page03.xhtml” pour placer l'image de l'oiseau sur chaque page.
De nombreux éléments ajoutés à un livre auront un code CSS associé classe et / ou identifiant. Si vous ne connaissez pas bien CSS, ces identifiants nous permettront d'ajuster les propriétés des éléments, telles que le positionnement, la taille, la superposition et les spécifications de police du texte. Un attribut de classe est utilisé pour créer des groupes d'éléments HTML similaires, tandis qu'un identifiant est utilisé pour spécifier un type d'élément spécifique. Dans cette démo, nous n'avons besoin que de l'attribut ID, mais dans vos propres projets, vous souhaiterez peut-être regrouper des objets similaires avec une classe. Nous allons ajouter les attributs au fichier CSS externe dans un peu.
Maintenant que nous avons quelques images, ajoutons du texte à notre iBook. Revenez à «page01.xhtml» et tapez le code suivant dans le champ corps étiquette.
Mon projet de démonstration iBook
Tout le texte d'un iBook doit être codé dans le projet plutôt que placé dans une image. Cela permet à un utilisateur de rechercher ou de rechercher du texte à tout moment, ainsi que d'offrir une accessibilité complète aux utilisateurs d'appareils iOS avec la fonction Voice Over activée..
Cliquez sur "page02.xhtml" et ajoutez le code suivant à l'intérieur du corps étiquette:
Petit oiseau voit un ciel bleu.
Cliquez sur "page03.xhtml" et ajoutez le code suivant à l'intérieur du corps étiquette:
Petit oiseau voit l'herbe verte.
Ajoutons des CSS pour placer les éléments sur la page. Ouvrez le fichier "cssstyles.css" et ajoutez le code suivant pour placer l'image d'arrière-plan:
.backgroundImage position: absolute; marge: 0; z-index: 0; en haut: 0px; gauche: 0px; .backgroundImage img width: 800px; hauteur: 600px; en haut: 0px; gauche: 0px;
La première règle CSS place le conteneur dans le coin supérieur gauche sans marge. La deuxième règle fournit les spécifications de hauteur et de largeur pour l'image elle-même, ainsi que le placement de l'image dans le coin supérieur gauche du conteneur..
Juste en dessous du .backgroundImage img règle, ajoutez le code suivant pour positionner l'oiseau sur chaque page:
#bird position: absolute; z-index: 10; à gauche: 200px; en haut: 250 px; #bird img width: 200px; hauteur: 123px;
Encore une fois, la taille de l'image est définie avec l'emplacement sur la page et le placement au-dessus de l'image d'arrière-plan.
Les règles CSS pour le texte impliquent généralement des propriétés supplémentaires, telles que la taille de la police et la famille. Ajoutez le code suivant juste en dessous du code précédent:
# page01Text position: absolute; z-index: 20; en haut: 74px; à gauche: 90px; largeur: 600px; famille de polices: serif; taille de la police: 28 pt; espacement des lettres: 2px; poids de police: gras; -webkit-text-fill-color: # 000000; text-shadow: 1.5px 1.5px #ffffff; # page02Text position: absolute; z-index: 20; en haut: 74px; à gauche: 80px; largeur: 600px; famille de polices: serif; taille de la police: 28 pt; espacement des lettres: 2px; poids de police: gras; -webkit-text-fill-color: # 000000; text-shadow: 1.5px 1.5px #ffffff; # page03Text position: absolute; z-index: 20; en haut: 74px; à gauche: 65px; largeur: 600px; famille de polices: serif; taille de la police: 28 pt; espacement des lettres: 2px; poids de police: gras; -webkit-text-fill-color: # 000000; text-shadow: 1.5px 1.5px #ffffff;
IBooks prenant entièrement en charge le moteur de navigateur Web WebKit, le texte peut être formaté de différentes manières. WebKit a une variété de propriétés qui peuvent être changées pour créer le look que vous voulez pour votre texte.
Maintenant que le contenu a été ajouté, finissons de configurer les fichiers EPUB. Ouvrez le fichier "com.apple.ibooks.display-options.xml" et ajoutez le code suivant dans le dossier option d'affichage étiquette.
Il y a beaucoup de choses ici; jetons un coup d'oeil aux différentes options. La première option indique à iBooks que le livre est un iBook à format fixe, et non un livre fluide ou multitouche. La deuxième option verrouille le livre en orientation paysage. Cela signifie que si l'utilisateur fait pivoter le périphérique, le livre reste verrouillé en orientation paysage. Si vous voulez que votre livre soit en orientation portrait, utilisez la valeur portrait seulement. Si vous voulez qu'il tourne librement, laissez cette option complètement. La dernière option détermine si le livre s'ouvre sous la forme d'une double page ou d'une seule page. En spécifiant une valeur de faux, le livre s'ouvrira sur une seule page. Remplacer la valeur par vrai d'avoir le livre ouvert en deux pages.
Accentsconagua
Métadonnées La première partie du fichier .opf contient les métadonnées du livre. Ouvrez le fichier "content.opf" et ajoutez le code suivant dans le répertoire métadonnées étiquette.
