Share
În primele două tranșe din această serie, am trecut peste elementele de bază ale cărților iBook și am explicat cum să vă configurați proiectul. În această tranșă, vom adăuga un anumit conținut la proiectul nostru cu aspect fix și vom începe să construim un iBook de lucru. Să începem!
Fișierele sursă descărcate furnizează imagini pe care le puteți utiliza în proiect pentru a finaliza tutorialul. Dacă nu ați făcut deja acest lucru, descărcați fișierele sursă în partea de sus a acestei pagini. Faceți dublu clic pentru a deschide dosarul "iBookDemo", apoi deschideți dosarul "OEBPS" și faceți clic dreapta pe folderul "imagini". Selectați "Copiați" imaginile "din meniu înainte de a naviga înapoi la dosarul proiectului cu care lucrați în această serie. Navigați în folderul "OEBPS" al proiectului și faceți clic dreapta. Selectați "Inserați elementul" din meniu pentru a lipi dosarul cu imagini din interiorul folderului proiectului.
Să adăugăm imagini de fundal fișierelor XHTML. Deschideți "page01.xhtml", "page02.xhtml" și "page03.xhtml" în editorul de text și apoi adăugați următorul cod în interiorul fiecărei pagini corp etichetă:
Observați descriptivitatea Alt etichetă. Apple plasează un nivel ridicat de importanță asupra accesibilității, care necesită Alt etichetele să fie descriptive pentru utilizatorii cu deficiențe de vedere. Fișierul "demoBackround.jpg" este localizat în dosarul "imagini" pe care l-am lipit mai devreme în dosarul OEBPS.
Imaginea pasăre este un fișier PNG, în timp ce imaginea de fundal este un fișier JPEG. Acest lucru se datorează faptului că imaginea de pasăre necesită transparență în afara marginilor sale. Atunci când o imagine nu are nevoie de transparență pentru a vedea imaginea de mai jos, ca în cazul imaginii de fundal, veți dori să rămâneți cu tipurile de fișiere JPEG cu un nivel de calitate ridicat.
Adăugați următorul cod în interiorul corp tag-ul "page01.xhtml", "page02.xhtml" și "page03.xhtml" pentru a plasa imaginea pasărelor pe fiecare pagină.
Multe elemente adăugate unei cărți vor avea un CSS asociat clasă și / sau id. Dacă nu sunteți familiarizați cu CSS, acești identificatori ne vor permite să ajustăm proprietățile elementelor, cum ar fi poziționarea, mărimea, stratificarea și specificațiile fontului pentru text. Un atribut de clasă este folosit pentru a crea grupuri de elemente HTML asemănătoare, în timp ce un id este utilizat pentru a specifica un anumit tip de element. În acest demo, avem într-adevăr nevoie de atributul ID, dar în proiectele proprii este posibil să doriți gruparea ca obiecte împreună cu o clasă. Vom adăuga atributele la fișierul CSS extern pentru acestea într-un pic.
Acum, când avem câteva imagini, să adăugăm un text în iBook. Navigați înapoi la "page01.xhtml" și tastați următorul cod în interiorul corp etichetă.
Proiectul Demo iBook
Tot textul dintr-un iBook ar trebui să fie codificat în proiect față de plasat într-o imagine. Acest lucru permite unui utilizator să caute sau să caute text în orice moment, precum și oferă acces deplin pentru utilizatorii de dispozitive iOS cu Voice Over activat.
Faceți clic pe "page02.xhtml" și adăugați următorul cod în interiorul corp etichetă:
Pasărea mică vede un cer albastru.
Faceți clic pe "page03.xhtml" și adăugați următorul cod în interiorul corp etichetă:
Mica pasăre vede iarba verde.
Să adăugăm niște CSS pentru a plasa elementele pe pagină. Deschideți fișierul "cssstyles.css" și adăugați următorul cod pentru a plasa imaginea de fundal:
.backgroundImage poziție: absolut; marja: 0; z-index: 0; top: 0px; stânga: 0px; .backgroundImage img lățime: 800px; înălțime: 600px; top: 0px; stânga: 0px;
Prima regulă CSS plasează containerul în colțul din stânga, din stânga, fără margini. A doua regulă oferă specificațiile înălțimii și lățimii pentru imaginea în sine, precum și plasarea imaginii în colțul din stânga sus al containerului.
Chiar sub limita .backgroundImage img , adăugați următorul cod pentru a poziționa pasărea pe fiecare pagină:
#bird position: absolute; z-index: 10; stânga: 200px; top: 250px; #bird img lățime: 200px; înălțime: 123px;
Încă o dată, dimensiunea imaginii este setată împreună cu locația de pe pagină și cu destinația de plasare din partea superioară a imaginii de fundal.
Regulile CSS pentru text implică de obicei proprietăți suplimentare, cum ar fi dimensiunea fontului și familia. Adăugați următorul cod chiar sub codul anterior:
# page01Text poziție: absolută; z-index: 20; top: 74px; stânga: 90px; lățime: 600px; font-family: serif; font-size: 28pt; spațierea literelor: 2 pixeli; font-weight: bold; -webkit-text-fill-color: # 000000; text-shadow: 1.5px 1.5px #ffffff; # pagină02Text poziție: absolută; z-index: 20; top: 74px; stânga: 80px; lățime: 600px; font-family: serif; font-size: 28pt; spațierea literelor: 2 pixeli; font-weight: bold; -webkit-text-fill-color: # 000000; text-shadow: 1.5px 1.5px #ffffff; # pagină03Text poziție: absolută; z-index: 20; top: 74px; stânga: 65px; lățime: 600px; font-family: serif; font-size: 28pt; spațierea literelor: 2 pixeli; font-weight: bold; -webkit-text-fill-color: # 000000; text-shadow: 1.5px 1.5px #ffffff;
Deoarece iBooks acceptă pe deplin motorul browserului WebKit, textul poate fi formatat în mai multe moduri. WebKit are o varietate de proprietăți care pot fi modificate pentru a crea aspectul dorit pentru textul dvs..
Acum, când a fost adăugat conținutul, să terminăm configurarea fișierelor EPUB. Deschideți fișierul "com.apple.ibooks.display-options.xml" și adăugați următorul cod în interiorul Optiuni de afisare etichetă.
Se întâmplă multe aici; să aruncăm o privire asupra diferitelor opțiuni. Prima opțiune spune iBooks că cartea este o carte iBook fixe, nu o carte în curs de desfășurare sau multi-atingere. A doua opțiune blochează cartea în orientare peisaj. Aceasta înseamnă că dacă utilizatorul rotește dispozitivul, cartea rămâne blocată în orientarea peisajului. Dacă doriți ca cartea să fie așezată în orientare portret, utilizați valoarea portret numai. Dacă doriți să se rotească liber, lăsați această opțiune complet. Ultima opțiune determină dacă cartea se deschide ca o răspândire în două pagini sau doar o singură pagină. Specificând o valoare de fals, cartea se va deschide la o singură pagină. Înlocuiți valoarea cu Adevărat pentru a avea cartea deschisă într-o răspândire în două pagini.
Accentsconagua
metadate Prima parte a fișierului .opf este metadatele cărții. Deschideți fișierul "content.opf" și adăugați următorul cod în interiorul metadate etichetă.
