Kurs języka HTML i CSS

Po utworzeniu projektu ebooka, co pokazaliśmy w poprzednim rozdziale, możemy teraz zmienić nieco projekt i przyjrzeć się, co z tego wyniknie po jego skompilowaniu.

Kliknij przycisk Edit w pasku narzędziowym. Ukaże się okno Project Properties z własnościami projektu. Na karcie Basics uzupełnij dane o język, wpisując w polu Language wartość pl.

Na karcie Files znajdziesz nazwy i adresy plików i folderów użytych w trakcie kompilacji.

Na karcie Options zobaczysz domyślne opcje projektu ustawione w trakcie jego budowania.

Wyjaśnijmy kolejno, na co wpływa zaznaczenie poszczególnych opcji.

• Generate Epub - opcja odpowiada zaznaczeniu opcji w drugim etapie pracy z kreatorem i oznacza po prostu kompilowanie pliku EPUB.
• Generate MobiPocket - opcja pozwala utworzyć plik ebooka w formacie Mobipocket, ale wymaga użycia specjalnego programu mobigen; format Mobipocket jest pokrewny EPUB-owi.
• Generate cover page - zaznaczenie tej opcji powoduje wygenerowanie dokumentu CoverPage.html z ilustracją CoverPage.jpg, widniejącego w momencie wczytania książki do czytnika. W Adobe Digital Editions jest to pierwsza pozycja spisu treści w lewym panelu. Gdy zaznaczymy jeszcze dodatkowo Expand image to fit, obrazek będzie rozciągany na całe okno interfejsu.
• Generate TOC - dzięki tej opcji jest generowany plik TableOfContents.html ze spisem treści umieszczany jako druga lub trzecia pozycja na liście dokumentów i zawierający po prostu spis rozdziałów, podobnie jak w zwykłej książce.
• Generate title page - opcja pozwala wygenerować dokument TitlePage.html zawierający kilka elementów wprowadzonych w pierwszym etapie kreatora, o ile je tam podaliśmy - tytuł, autor, wydawca, data. Dokument ten jest umieszczany na drugim miejscu, za okładką CoverPage, a przed spisem treści TableOfContents.
• Generate guide - opcja pozwala wygenerować sekcję guide w pliku content.opf, widoczną w Mobipocket Reader.
• Generate CSS file - dzięki zaznaczeniu tej opcji powstaje plik ze stylami CSS wpływającymi na wyświetlanie publikacji.

To tyle, jak chodzi o opcje w definicji projektu w programie. Mamy jednak jeszcze możliwość manipulowania spisem treści, mianowicie tworzenia wielopoziomowego spisu. W naszym przykładzie przyjmiemy, że tworzymy dwuszczeblowy - na pierwszym poziomie będą to części książki, na drugim - rozdziały przypisane do poszczególnych części.

Do plików źródłowych dodamy więc jeszcze jeden rozdział, a także dwa pliki XHTML zaczynające części książki.

Teraz musimy dodać te pliki do listy plików widniejących w definicji projektu w programie Anthemion eCub. Klikamy więc zielony przycisk z plusem i wybieramy z dysku dodatkowe pliki źródłowe umieszczone w folderze, po czym kilkamy Otwórz.

Po dołączeniu tych plików zmieniamy ich kolejność za pomocą przycisków strzałek w górę lub w dół, tak by kolejność była następująca: część I, rozdział I, rozdział II, część II, rozdział III, rozdział IV. Po zmianie definicji zapisujemy ponownie projekt na dysku.

Następnie ustawiamy kursor na tytułach rozdziałów i w polu Level wybieramy poziom 2. Ostatecznie zobaczymy taki widok:

W Adobe Digital Editions, po ponownym skompilowaniu publikacji, zobaczymy teraz rozwijalny spis treści, mający dwa poziomy.

Jednocześnie hierarchiczny spis treści zostanie zapisany w sekcji NavMap w pliku toc.ncx znajdującym się w podfolderze OPS z plikami tworzącymi publikację. Zwróć uwagę, że części I i II są wyżej w hierarchii niż przypisane do nich rozdziały. Rozdziały są zagnieżdżone w częściach.

 <navMap>
        <navPoint id="navPoint-1" playOrder="1">
            <navLabel>
                <text>Część I</text>
            </navLabel>
            <content src="/cz1.html" />
                <navPoint id="navPoint-2" playOrder="2">
                    <navLabel>
                        <text>Rozdział I</text>
                    </navLabel>
                    <content src="/r1.html" />
                </navPoint>
                <navPoint id="navPoint-3" playOrder="3">
                    <navLabel>
                        <text>Rozdział II</text>
                    </navLabel>
                    <content src="/r2.html" />
                </navPoint>
        </navPoint>
        <navPoint id="navPoint-4" playOrder="4">
            <navLabel>
                <text>Część II</text>
            </navLabel>
            <content src="/cz2.html" />
                <navPoint id="navPoint-5" playOrder="5">
                    <navLabel>
                        <text>Rozdział III</text>
                    </navLabel>
                    <content src="/r3.html" />
                </navPoint>
                <navPoint id="navPoint-6" playOrder="6">
                    <navLabel>
                        <text>Rozdział IV</text>
                    </navLabel>
                    <content src="/r4.html" />
                </navPoint>
        </navPoint>
 </navMap>