Szablony Poprawny szablon dla Joomla! V. Stwórz 3-kolumnową szatę dla Twego Mambo/Joomla | V. Stwórz 3-kolumnową szatę dla Twego Mambo/Joomla |
|
|
Poprawny szablon dla Joomla. cz. VW tym poradniku rozpatrzymy tworzenie 3-kolumnowego układu szablonu dla Twojego Joomla. 3-kolumnowy układ jest najczęściej wykorzystywany przez serwisy internetowe, co potwierdza, że jest to dobre założenie. Boczne kolumny możemy ukrywać, gdy nie ma w nich żadnej zawartości. Moglibyśmy stworzyć taki układ z łatwością za pomocą tabeli. Dotychczas z tego powodu większość z nas tak to robiła… (my też rumienimy się ze wstydu). Wykonanie tego zadania za pomocą CSS jest dużo trudniejsze. Opanowanie tej umiejętności prowadzi stromą drogą, usłaną problemami spowodowanymi różną interpretacją CSS przez przeglądarki internetowe. Wspominaliśmy nieco o tym w poradniku: Instalacja Joomla, doctype i czysty szablon Joomla. Przystąpimy od razu do tworzenia 3-kolumnowego układu, ale polecam zapoznanie się co najmniej z jednym przewodnikiem CSS dla początkujących, jeżeli nie masz wiedzy w tym zakresie. Poniżej jest kilka sugestii: Kevin Hale's - An Overview of Current CSS Layout Techniques I - oczywiście - od tłumacza - odnośniki do kilku dobrych polskich kursów:
Krzysztof Stelmach: Kurs CSS Skoro poczytałeś do snu dobrą lekturę albo poznałeś już wcześniej CSS, pora spojrzeć na wybór możliwości układu. Poniżej jest wykaz wszystkich szablonów CSS/szat CSS, które udało mi się znaleźć w Sieci:
Chociaż ta ilość pozycji może Cię zaskoczyć i trochę przestraszyć, potraktuj ją jako wspierający wykaz zasobów. Zrób sobie zakładkę do tej strony w przeglądarce i wracaj w razie potrzeby. Możesz skorzystać z któregokolwiek z tych projektów, tworząc stronę Joomla. 3-kolumnowa szata dla Joomla w CSSPo zapoznaniu się z którymkolwiek z powyższych opracowań lub na podstawie własnego obeznania z tematem, wiesz, że istnieje pewna ilość sposobów projektowania układu strony. Teraz, z tą wiedzą mógłbyś powędrować do csscreator.com; http://www.csscreator.com/version2/pagelayout.php. To wspaniałe narzędzie, za pomocą którego możesz stworzyć bogaty asortyment układów i wygenerować arkusze CSS [nie rozstawaj się z nim nawet we śnie!]. Ale dla celów tego poradnika zastosujemy inną technikę rozmieszczenia (csscreator korzysta z elementów pływających), opartą na pozycjonowaniu absolutnym. Myślę, że korzystanie z tej techniki CSS może być najłatwiejszym do zrozumienia modelem dla początkujących. Mówiąc prosto: określisz dokładnie, w którym miejscu pudełka z zawartością znajdą się na stronie. Na przykład: #leftcontent { position:absolute; top:20px; left:50px; width:200px; } stworzy pudełko o szerokości 200px i rozpoczynające się na wysokości 20px od góry od 50px z lewej strony. Dlaczego 50px od lewej, pytasz? Dobrze, tu zastosowana jest pewna sztuczka. Normalnie będzie to 50px od szczytu okna przeglądarki. Jednak jeśli selektor nadrzędnego elementu - rodzica (leftcontent znajduje się w nim) też jest pozycjonowany, to leftcontent będzie pozycjonowany względem NIEGO. Dobrze, wypij piwo/herbatę/wino, jeśli nie widzisz w tym sensu (dla mnie też!). Dodajmy inny styl i szkicujmy kilka ilustracji… To będzie nadrzędne pudełko (rodzic): #wrapper { position:relative; width:560px; margin: 50px auto; } Jeśli jesteś spostrzegawczy - zauważyłeś, że zmieniliśmy w tym miejscu sposób pozycjonowania z absolutnego na relatywny. Zmierzamy w ten sposób do czegoś co nazywamy "przepływem" dokumentu i do ustalenia, jak poszczególne elementy wpływać będą na inne. Pooglądaj przykłady szablonów podane wyżej w wykazie, a zorientujesz się w szczegółach dyskusji na ten temat. OK, użyjmy poniższego HTM jako nasz pierwszy przykład: <div id="wrapper"> Tekst we wraperze, lorem ipsum lorem ipsum </div> <div id="leftcontent"> Tekst w Leftcontent, dowolny, losowy, generowane URL-e, itp. </div> Oparty na dwu powyższych regułach CSS, nasz układ wygląda tak:
No tak, niewielki pożytek. Umieśćmy teraz blok leftcolumn wewnątrz kontenera #wraper (domyślasz się, dlaczego nazwaliśmy go "wraperem"?) <div id="wrapper"> Tekst we wraperze, lorem ipsum lorem ipsum <div id="leftcontent"> Tekst w Leftcontent, dowolny, losowy, generowane URL-e, itp. </div> </div> <!-- End of the wrapper div--> Teraz powinno to wyglądać tak: :
Dużo lepiej. Oba teksty są wewnątrz wrapera, nakładają się wprawdzie na siebie, ale nie musimy się tym teraz niepokoić. Zobaczymy teraz na CSS, który zastosujemy na naszej stronie.
Uwaga: Zapisujemy go jako oddzielny plik nazwany Tak więc, po tym objaśnieniu, mamy 3-kolumnową szatę Joomla: /* Podstawowa 3-kolumnowa szata joomla*/ body { margin:10px 10px 0px 10px; padding:0px; } #leftcontent { position: absolute; left:10px; top:100px; width:200px; background-color:#fff; border:1px solid #000; } #centercontent { background-color:#fff; margin-left: 211px; /*1 wiecej niz 210 bo musimy dodac obwodke: border*/ margin-right:211px; margin-top:7px; /* Margines dodaje linie ponad zawartoscia na szer. centralnej kolumny */ border:1px solid #000; } #rightcontent { position: absolute; right:10px; top:100px; width:200px; background-color:#fff; border:1px solid #000; } Inspiracją adaptowanego szablonu było kilka miejsc w Internecie. Więcej możesz przeczytać na ten temat w http://glish.com/css/7.asp. Uwaga: Opuściliśmy pewną ilość kodu CSS, aby uprościć arkusz, a także dlatego, że nie będziemy wspierać IE 5.x tym szablonem. To nie jest zwykłe, proste, bezwzględne pozycjonowanie (czy ktoś mówił, że będzie łatwo?).
Leftcontent i rightcontent są umieszczone tak, jak zamierzaliśmy. Ale środkowa kolumna wydaje się nie mieć żadnego położenia. Skąd ten efekt? Elementy pozycjonowane bezwzględnie ( Tak więc, projekt witryny już się nam urodził (werble!). Zapamiętaj, nasz plik <body> <?php echo $mosConfig_sitename; ?> <?php mospathway() ?> <?php mosLoadModules('top');?> <?php mosLoadModules('left');?> <?php mosMainBody(); ?> <?php mosLoadModules('right');?> <?php mosLoadModules('bottom');?> <?php include_once('includes/footer.php'); ?> </body> </html> Teraz umieścimy kilka pozycji w naszym nowym CSS-sie: <body> <?php echo $mosConfig_sitename; ?> <?php mospathway() ?> <?php mosLoadModules('top');?> <div id="leftcontent"> <?php mosLoadModules('left');?> </div> <div id="centercontent"> <?php mosMainBody(); ?> </div> <div id="rightcontent"> <?php mosLoadModules('right');?> </div> <?php mosLoadModules('bottom');?> <?php include_once('includes/footer.php'); ?> </body> Mamy już 3-kolumnową szatę dla Joomla. Obejrzymy ją szybko: livesite.compassdesigns.net . Są trzy kolumny, umieszczone w zaplanowanych miejscach. Zmień wielkość okna przeglądarki, a przekonasz się, że centralna kolumna dostosowuje swój rozmiar do wielkości okna. Taki layout nazywany jest zwykle układem płynnym. Sprawdźmy jeszcze, jak nasza szata wygląda pod Internet Explorerem 6.x. Oj, coś się dzieje niedobrego z dołem lewej kolumny, ale to się w IE często zdarza [bo dziwy i IE często idą w parze] Tak. Szablon jest zgodny ze standardami W3C. Oczywiście, przyznaję, że nie wprawia on jeszcze w zdumienie, ale … za tydzień kolejna część poradnika! Tłum. Stefan Wajda [aka zwiastun] |
|
| Zmieniony ( 04.02.2006. ) |
| « poprzedni artykuł | następny artykuł » |
|---|
