Start arrow Programowanie arrow Szablon arrow Portal Zwiastuna
Portal Zwiastuna: Założenia Drukuj Wyślij znajomemu
Spis treści
Portal Zwiastuna
Założenia
Treść główna i poboczna
Przygotowanie
Elastyczność
Udoskonalenie układu
Ukrywanie kolumny
Umieszczenie modułów
Umieszczenie modułów. 2
Style dla modułów
Zaokrąglone szczęście
Inne elementy
Nazwa serwisu
Czcionki
Kolorystyka

Założenia projektu

Projekt szablonuBędziemy zmierzać do stworzenia szablonu o następujących właściwościach:

  • układ płynny, 3-kolumnowy,
  • stała szerokość bocznych kolumn,
  • ukrywana prawa kolumna,
  • wysokości kolumn dostosowane do najdłuższej,
  • nagłówek powyżej górnej krawędzi kolumn,
  • w nagłówku: logo, nazwa, ścieżka, wyszukiwarka,
  • górne poziome menu pod nagłówkiem - zakładki,
  • stopka poniżej dolnej krawędzi kolumn,
  • w stopce: noty prawne, menu, wyszukiwarka,
  • elastyczny: skalowanie tekstu, układu, grafik,
  • czytelny kod,
  • semantyczna struktura i układ treści,
  • najpierw treści główne, potem towarzyszące,
  • różne szablony modułów.

Ambitne zadanie. Zapewne nie wszystkie założenia uda się w pełni zrealizować. Na pewno nie będzie to najlepszy projekt dla Joomla. I na pewno nie będzie idealnym szablonem. Ale przecież nie takie są nasze oczekiwania.

Struktura i układ treści

Rozpoczniemy od zaprojektowania struktury i układu treści. Marzy nam się oczywiście struktura logiczna, uwzględniająca znaczenie poszczególnych elementów, oznakowana w sposób czytelny.

<body>
    <!-- NAGŁÓWEK - nazwa serwisu, logo, menu główne...  -->
    <div id="header">                             <!-- może: #naglowek -->
       <div id="header_logo">                     <!-- może: #naglowek_logo -->
          <h1> Zwiastunowy portal</h1>
                Ścieżka powrotu,
                Wyszukiwarka
          </div>
          <div id="header_baner">                 <!-- może: #naglowek_baner -->
                Moduł2: Obrazki losowe
          </div>
          <div id="menu_top">                     <!-- może: #menu_glowne -->
                Moduł: Menu główne          
          </div>
       </div>
    <!-- TREŚCI - nazwa serwisu, logo -->
       <div id="content"> 
       <--Najpierw treści główne -->
          <div id="content_main">                 <!-- może: #tresci_glowne -->
             <div id="migawki">
                Moduł: Migawki           
             </div>
             <div id="short_links">               <!-- może: #na_skroty -->
                Moduły: Nowości, Popularne,              
             </div>
                Główny materiał strony
             <div id="related_links">             <!-- może: #pokrewne -->
                Moduły: Tematy pokrewne, Na forum, Źródła    
             </div>
             <div id="adverts">                   <!-- może: #banery -->
                Moduł: Banery             
             </div>
          </div><!-- koniec content_main -->
       <-- Potem nawigacja -->
 
          <div id="nav_bar">                      <!-- może: #nawigacja -->
                Menu lokalne
                Menu użytkownika
                Moduł: Sekcje
                Moduł: Archiwum
          </div>
       </div><!-- koniec content -->
       <-- Następnie rozmaitości towarzyszące głównej treści -->
 
       <div id="misc_bar">                        <!-- może: #rozmaitosci -->
                Moduł: Sondy
                Moduł: Mini pogawędki
                Moduł: Statystyki
                Moduł: Gościmy
       </div>
    <!-- STOPKA,  dodatkowe menu, noty prawne, adresy, podziękowania -->
 
       <div id="footer">                          <!-- może: #stopka -->
               Wyszukiwarka
               Moduł Stopka
          <div id="footer_credits">               <!-- może: #stopka_podziekowania -->
               Moduł: Podziękowania
          </div>
       </div>
 </body>


 
« poprzedni artykuł   następny artykuł »