Share
I de første to delene av denne serien gikk vi over det grunnleggende i iBooks og forklarte hvordan du satte opp prosjektet. I denne avgiften legger vi til noe innhold i vårt faste layoutprosjekt og begynner å bygge en fungerende iBook. La oss komme i gang!
Nedlastbare kildefiler gir bilder du kan bruke i prosjektet for å fullføre opplæringen. Hvis du ikke allerede har gjort det, last ned kildefilene øverst på denne siden. Dobbeltklikk for å åpne mappen "iBookDemo", åpne deretter mappen "OEBPS" og høyreklikk mappen "bilder". Velg "Kopier" bilder fra menyen før du går tilbake til prosjektmappen du har jobbet med i denne serien. Naviger inne i prosjektets "OEBPS" -mappe og høyreklikk. Velg "Lim inn element" fra menyen for å lime inn bildemappen i prosjektmappen din.
La oss legge til bakgrunnsbilder til XHTML-filene. Åpne "page01.xhtml", "page02.xhtml" og "page03.xhtml" i tekstredigeringsprogrammet, og legg deretter til følgende kode i hver side kropp stikkord:
Legg merke til beskrivelsen av alt stikkord. Apple legger høy grad av betydning for tilgjengelighet, krever alt Tagger for å være beskrivende for synskadede brukere. Filen "demoBackround.jpg" er plassert i mappen "bilder" vi limte inn i OEBPS-mappen tidligere.
Fuglebildet er en PNG-fil mens bakgrunnsbildet er en JPEG-fil. Dette skyldes at fuglebildet krever gjennomsiktighet utenfor kantene. Når et bilde ikke trenger gjennomsiktighet for å se bildet nedenfor, som det er tilfelle med bakgrunnsbildet, vil du holde fast med JPEG-filtyper med høyt kvalitetsnivå.
Legg til følgende kode inne i kropp tag av "page01.xhtml", "page02.xhtml" og "page03.xhtml" for å plassere fuglbildet på hver side.
Mange elementer som legges til i en bok, vil ha en tilknyttet CSS klasse og / eller id. Hvis du ikke er kjent med CSS, vil disse identifikasjonene tillate oss å justere egenskapene til elementene, for eksempel posisjonering, størrelse, layering og skriftspesifikasjoner for tekst. En klassetributt brukes til å lage grupper av lignende HTML-elementer, mens et ID brukes til å spesifisere en bestemt type element. I denne demoen trenger vi egentlig bare ID-attributtet, men i dine egne prosjekter vil du kanskje gruppere som objekter sammen med en klasse. Vi vil legge til attributter til den eksterne CSS-filen for disse på litt.
Nå som vi har et par bilder, la oss legge til litt tekst på vår iBook. Naviger tilbake til "page01.xhtml" og skriv inn følgende kode inne i kropp stikkord.
Mitt iBook-demoprosjekt
All teksten i en iBook skal kodes inn i prosjektet versus plassert i et bilde. Dette tillater en bruker å søke etter eller slå opp tekst når som helst, samt gir full tilgjengelighet for iOS-enhetbrukere med Voice Over aktivert.
Klikk på "page02.xhtml" og legg til følgende kode inne i kropp stikkord:
Lille fugl ser en blå himmel.
Klikk på "page03.xhtml" og legg til følgende kode inne i kropp stikkord:
Liten fugl ser grønt gress.
La oss legge til noen CSS for å plassere elementene på siden. Åpne filen "cssstyles.css" og legg til følgende kode for å plassere bakgrunnsbildet:
.backgroundImage posisjon: absolutt; margin: 0; z-indeks: 0; topp: 0px; venstre: 0px; .backgroundImage img width: 800px; høyde: 600px; topp: 0px; venstre: 0px;
Den første CSS-regelen plasserer beholderen i øverste, venstre hjørne uten margin. Den andre regelen gir spesifikasjonene for høyde og bredde for selve bildet, samt plassering av bildet i det øverste, venstre hjørnet av beholderen.
Like under .backgroundImage img regelen, legg til følgende kode for å plassere fuglen på hver side:
#bird posisjon: absolutt; z-indeks: 10; venstre: 200px; topp: 250px; #bird img bredde: 200px; høyde: 123px;
Igjen blir bildestørrelsen satt sammen med plasseringen på siden og plasseringen oven på bakgrunnsbildet.
CSS-regler for tekst involverer vanligvis flere egenskaper, for eksempel skriftstørrelse og familie. Legg til følgende kode like under forrige kode:
# page01Text posisjon: absolutt; z-indeks: 20; topp: 74px; venstre: 90px; bredde: 600px; font-familie: serif; skriftstørrelse: 28pt; brevavstand: 2px; font-weight: bold; -webkit-tekst-fyll-farge: # 000000; tekstskygge: 1.5px 1.5px #ffffff; # page02Text posisjon: absolutt; z-indeks: 20; topp: 74px; venstre: 80px; bredde: 600px; font-familie: serif; skriftstørrelse: 28pt; brevavstand: 2px; font-weight: bold; -webkit-tekst-fyll-farge: # 000000; tekstskygge: 1.5px 1.5px #ffffff; # page03Text posisjon: absolutt; z-indeks: 20; topp: 74px; venstre: 65px; bredde: 600px; font-familie: serif; skriftstørrelse: 28pt; brevavstand: 2px; font-weight: bold; -webkit-tekst-fyll-farge: # 000000; tekstskygge: 1.5px 1.5px #ffffff;
Fordi iBooks støtter WebKit-nettlesermotoren fullt ut, kan tekst formateres på ulike måter. WebKit har en rekke egenskaper som kan endres for å lage det utseendet du vil ha for teksten.
Nå som innholdet er lagt til, la oss avslutte å sette opp EPUB-filene. Åpne filen "com.apple.ibooks.display-options.xml" og legg til følgende kode inne i display_options stikkord.
Det skjer mye her; la oss ta en titt på de forskjellige alternativene. Det første alternativet forteller iBooks at boka er en Fast Layout iBook, ikke en flytende eller Multi-Touch-bok. Det andre alternativet låser boken i liggende retning. Dette betyr at hvis brukeren roterer enheten, forblir boken låst i liggende retning. Hvis du vil at boken din skal ligge ut i stående orientering, bruk verdien portrett-only. Hvis du vil at den skal rotere fritt, la dette alternativet ut helt. Det siste alternativet bestemmer om boken åpnes som en tosidig spredning eller bare en enkelt side. Ved å spesifisere en verdi på falsk, boken vil åpne for en enkelt side. Erstatt verdien med ekte Å ha boken åpen i en tosidig spredning.
Accentsconagua
metadata Den første delen av .opf-filen er bokens metadata. Åpne filen "content.opf" og legg til følgende kode inne i metadata stikkord.
