Share
Under de första två delarna av denna serie gick vi över grunderna i iBooks och förklarade hur du konfigurerar ditt projekt. I den här avgiften lägger vi till något innehåll i vårt fasta layoutprojekt och börjar bygga en fungerande iBook. Låt oss börja!
De nedladdningsbara källfilerna ger bilder du kan använda i ditt projekt för att slutföra handledningen. Om du inte redan har gjort det, ladda ner källfilerna längst upp på den här sidan. Dubbelklicka för att öppna mappen "iBookDemo", öppna sedan "OEBPS" -mappen och högerklicka på mappen "bilder". Välj "Kopiera bilder" "från menyn innan du navigerar tillbaka till projektmappen du har arbetat med i den här serien. Navigera inuti projektets "OEBPS" -mapp och högerklicka. Välj "Klistra in artikel" från menyn för att klistra in bildmappen i din projektmapp.
Låt oss lägga till bakgrundsbilder till XHTML-filerna. Öppna "page01.xhtml", "page02.xhtml" och "page03.xhtml" i din textredigerare och lägg sedan till följande kod inuti varje sidas kropp märka:
Observera beskrivningen av alt märka. Apple lägger hög vikt vid tillgänglighet och kräver alt Taggar är beskrivande för synskadade användare. Filen "demoBackround.jpg" finns i mappen "bilder" som vi klistrade in i OEBPS-mappen tidigare.
Fågelbilden är en PNG-fil medan bakgrundsbilden är en JPEG-fil. Detta beror på att fågelbilden kräver transparens utanför kanterna. När en bild inte behöver transparens för att se bilden nedan, som är fallet med bakgrundsbilden, vill du hålla fast vid JPEG-filtyper med högkvalitativt nivå.
Lägg till följande kod inuti kropp tagg av "page01.xhtml", "page02.xhtml" och "page03.xhtml" för att placera fågelbilden på varje sida.
Många element som läggs till i en bok kommer att ha en tillhörande CSS klass och / eller id. Om du inte är känd med CSS, kommer dessa identifierare att tillåta oss att justera elementens egenskaper, såsom positionering, storlek, layering och typsnittsspecifikationer för text. Ett klassattribut används för att skapa grupper av liknande HTML-element, medan ett ID används för att specificera en viss typ av element. I den här demo behöver vi verkligen ID-attributet, men i dina egna projekt kanske du vill gruppera som objekt tillsammans med en klass. Vi lägger till attributen till den externa CSS-filen för dessa på lite.
Nu när vi har ett par bilder, låt oss lägga till lite text i vår iBook. Navigera tillbaka till "page01.xhtml" och skriv följande kod inuti kropp märka.
Mitt iBook-demoprojekt
All text i en iBook ska kodas in i projektet kontra placerad i en bild. Detta gör att en användare kan söka efter eller leta upp text när som helst, samt ger full tillgänglighet för iOS-enhetens användare med Voice Over aktiverat.
Klicka på "page02.xhtml" och lägg till följande kod inuti kropp märka:
En liten fågel ser en blå himmel.
Klicka på "page03.xhtml" och lägg till följande kod inuti kropp märka:
Lite fågel ser grönt gräs.
Låt oss lägga till lite CSS för att placera elementen på sidan. Öppna filen "cssstyles.css" och lägg till följande kod för att placera bakgrundsbilden:
.backgroundImage position: absolute; marginal: 0; z-index: 0; topp: 0px; vänster: 0px; .backgroundImage img width: 800px; höjd: 600px; topp: 0px; vänster: 0px;
Den första CSS-regeln placerar behållaren i det övre, vänstra hörnet utan marginal. Den andra regeln ger höjd- och breddspecifikationerna för själva bilden och placerar bilden i det övre, vänstra hörnet av behållaren.
Precis under .backgroundImage img regel, lägg till följande kod för att placera fågeln på varje sida:
#bird position: absolute; z-index: 10; vänster: 200px; topp: 250px; #bird img bredd: 200px; höjd: 123px;
Återigen sätts bildstorleken tillsammans med platsen på sidan och placeringen ovanpå bakgrundsbilden.
CSS-regler för text brukar innehålla ytterligare egenskaper, till exempel teckenstorlek och familj. Lägg till följande kod strax under föregående kod:
# page01Text position: absolute; z-index: 20; topp: 74px; vänster: 90px; bredd: 600px; font-family: serif; typsnittstorlek: 28pt; brevavstånd: 2px; font-weight: bold; -webkit-text-fyll-färg: # 000000; text-skugga: 1.5px 1.5px #ffffff; # page02Text position: absolute; z-index: 20; topp: 74px; vänster: 80px; bredd: 600px; font-family: serif; typsnittstorlek: 28pt; brevavstånd: 2px; font-weight: bold; -webkit-text-fyll-färg: # 000000; text-skugga: 1.5px 1.5px #ffffff; # page03Text position: absolute; z-index: 20; topp: 74px; vänster: 65px; bredd: 600px; font-family: serif; typsnittstorlek: 28pt; brevavstånd: 2px; font-weight: bold; -webkit-text-fyll-färg: # 000000; text-skugga: 1.5px 1.5px #ffffff;
Eftersom iBooks stöder WebKit-webbläsarmotorn helt kan text formateras på olika sätt. WebKit har en mängd olika egenskaper som kan ändras för att skapa det utseende du vill ha för din text.
Nu när innehållet har lagts till, låt oss slutföra konfigurationen av EPUB-filerna. Öppna filen "com.apple.ibooks.display-options.xml" och lägg till följande kod inuti Skärmalternativ märka.
Det händer mycket här; låt oss ta en titt på de olika alternativen. Det första alternativet berättar iBooks att boken är en fast layout iBook, inte en flödande eller multi-touch-bok. Det andra alternativet låser boken i liggande riktning. Detta betyder att om användaren roterar enheten är boken låst i liggande orientering. Om du vill att din bok ska ligga ut i stående orientering, använd värdet porträtt-bara. Om du vill att den ska rotera fritt, lämna detta alternativ helt. Det sista alternativet avgör om boken öppnas som en tvåsidig spridning eller bara en enda sida. Genom att ange ett värde av falsk, boken öppnas för en enda sida. Byt ut värdet med Sann att få boken öppen i en tvåsidig spridning.
Accentsconagua
metadata Den första delen av .opf-filen är bokens metadata. Öppna filen "content.opf" och lägg till följande kod inuti metadata märka.
