Tydzień trzeci: strona główna i nawigacja

W tym tygodniu pisałam o nawigacji na stronie i kilku dobrych zasadach, o których należy pamiętać. I również na tym elemencie mojego projektu skupiłam się w tym tygodniu.

1. Szkic

Na początku zabrałam się za naszkicowanie widoku wszystkich podstron. Wyszły trzy: widok strony głównej, widok kategorii, widok pojedynczego zwierzaka. Na każdym z nich nawigacja będzie wyglądać trochę inaczej. Strona główna to przede wszystkim cztery duże zdjęcia. Każde z nich jest odnośnikiem do podstrony kategorii. Widok kategorii będzie się składał z miniatur obrazków prowadzących do podstrony zwierzęcia. Dodatkowo, wysuwany sidebar będzie umożliwiał powrót do strony głównej i przejście bezpośrednio do pozostałych kategorii. Widok pojedynczego zwierzaka otrzyma ten sam sidebar co kategoria. A ponadto horyzontalne menu, które będzie nawigowało do pozostałych zwierząt danej kategorii.

2. Strona główna i podstrona kategorii

Żeby zabrać się za faktyczne budowanie nawigacji, zajęłam się stroną główną i podstroną kategorii. Ponieważ mam już kilka zwierzaków stworzonych CSSie, mogę je wykorzystać do pracy nad sidebarem i menu. Wersje stron są dość robocze pod względem wyglądu. Poza tym, nie są jeszcze ze sobą połączone. Ostateczne szlify i faktyczne ładowanie podstron później.

Sidebar zrobiłam z pomocą tutorialu kodu.je, o którym wspominałam w tym tygodniu.

3. Efekty

Pokaz slajdów wymaga JavaScript.

4. Co dalej?

Ponieważ strona będzie skierowana do młodych użytkowników, będę musiała dopracować jeszcze kilka rzeczy. Przede wszystkim w sidebarze, poza tekstem, chcę umieścić miniatury obrazków widocznych na stronie głównej. W ten sposób nawet dzieciaki, które jeszcze nie czytają tak dobrze, będą mogły z niego skorzystać. Navbar na stronie zwierzęcia dostanie trochę animacji i koloru, tak żeby lepiej rzucał się w oczy.

Pliki możecie znaleźć na GitHubie.
Cel na najbliższy tydzień to skończyć/dokończyć zwierzaki w CSSie.

Reklamy

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Wyloguj / Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Wyloguj / Zmień )

Zdjęcie na Facebooku

Komentujesz korzystając z konta Facebook. Wyloguj / Zmień )

Zdjęcie na Google+

Komentujesz korzystając z konta Google+. Wyloguj / Zmień )

Connecting to %s