Do utworzenia projektu graficznego (poza szaty graficznej) wykorzystamy PHP-Fusion w wersji 6-01-11, która w chwili pisania artykułu była najnowszą wersją. Proces tworzenia zaczniemy od omówienia jakie pliki odpowiadają za wygląd gotowego szablonu graficznego, czyli plik z definicjami kaskadowych arkuszów styli , a oprócz tego pliku w którym znajdują się definicje bloków.Autor: Dawid BaruchŹródło: sdjournal.org Szablon w PHP-FusionSzablony w PHP-Fusion są zamieszczone w katalogu themes, gdzie każdy szablon ma swój folder, który stanowi nazwę, pod jaką użytkownicy naszego serwisu będą go widzieć. Każdy szablon musi zawierać trzy pliki, a są nimi: index.php, theme.php i styles.css. Plik index.PHP (ang. Hypertext Preprocessor) jest to pusty plik (bez zawartości), który uniemożliwi przeglądanie katalogu, gdy ktoś wpisze w przeglądarce adres: http://adres_naszego_serwis/them es/nazwa_szablonu. Plik theme.PHP (ang. Hypertext Preprocessor) zawiera funkcje, które są odpowiedzialne za poprawny wygląd naszej strony, jednak styles.css zawiera definicje arkusza stylów dla naszego gotowego projektu graficznego. Zmienne używanew szablonachNa początku każdego naszego gotowego projektu graficznego musi znajdowaćsię pięć zmiennych:• $body _ text - zmienna ta definiuje, jaki kolor posiada zostać wykorzystany do tekstu na stronie, na przykład. $body _ text = ”#000000” spowoduje, że treść na mojej stronie będzie miał kolor czarny;• $body _ bg - tutaj posiadamy zdefiowane tło naszej strony;• $theme _width, $theme _width _l, $theme _width _ r - pozostały nam już wyłącznie trzy zmienne, które są odpowiedzialne stosownie : pierwsza za szerokość całej mojej strony; możemy zdefiniowaćzarówno sztywną wartość, np. 700Px, jak również wartość procentową, na przykład. 100%. Ostatnie zmienne odpowiadają za margines lewy i prawy strony, tzn. jak dużo pixeli albo ile procent od krawędzi przeglądarki ma być odsunięta tekst.Dawid Baruch jest studentem III roku informatyki na WSZiB w Krakowie. Pracuje jako administrator technicznydla Apogeo.pl. Po pracy zajmuje się tworzeniem skinów i stron internetowych. Kontakt z autorem: dawid@baruch.pl http://www.baruch.pl W chwili obecnej możemy swobodnie przejść do budowy naszego pierwszego szablonu do strony www. Nagłówek stronyZa wyświetlanie nagłówka mojej strony, tak zwanego Headeru, odpowiada funkcja render_header zacznijmy zatem od wytworzania odpowiedniego nagłówka, którego kod można ujrzeć na Listingu 1.W Listingu 1. użyliśmy dwóch nowych procedur: showsublinks() i showsubdate(). Pierwsza z nich jest odpowiedzialna za wyświetlanie górnego menu naszej strony i pobiera dwa parametry. Pierwszym z nich jest symbol, jakim mają być oddzielone odnośniki w menu, w naszym przypadku jest to &-czyli wyświetlany będzie symbol &; drugim parametrem, jaki pobiera ta funkcja, jest kolor, który ma być zastosowany do wyświetlenia. Może on być zapisany w formie słowa angielskiego albo w postaci HEX-owej, czyli #FFFFFF (odpowiednik white). Ostatnia funkcja jest odpowiedzialna za wyświetlenie komunikatu z aktualnądatą i godziną. Stopka stronyStopka mojej strony znajduje się w procedur render_footer, dlatego także teraz zajmiemy się napisaniem aktualnie tej zadań. Kod tej funkcji znajduje się na Listingu 2. Jak widać, kod tej funkcji jest bardzo niedługi, ponieważ zawiera dwa elementy, stopkę programistów, a także nasz tekst. Treść, który możemy sami zredagować ustawiamy w panelu admina, a odpowiedzialna jest za niego zmienna $settings['footer'] wraz z funkcją stripslashes(), która usuwa znaki ukośnika z tekstu. Stopkę programistów stanowi cały warunek if($license == false) … Pozostała część stronyPrzedstawione powyżej funkcje stanowią najważniejszą część strony. Oprócz nich mamy jeszcze takie funkcje jak: render_ news - funkcja ta jest odpowiedzialna za wygląd newsa,który umieścimy na mojej stronie, render_article - odpowiedzialna za wyświetlanie artykułów. Funkcja render_news przedstawiona na Listingu 3. wymaga wykorzystania kilku zmiennych: $subject, która przechowuje zagadnienie naszego newsa, $news -odpowiedzialnej za treść oraz $info - będącej tablicą zawierająca takie informacje, jak równieżd newsa czy autora.Przykładowy news składa się z tabelki zawierającej temat i tabelki z tekstem, na końcu której znajdują się wspomniane wyżej dane, tj., kto jest autorem newsa , a dodatkowo wskaźnik adresu www do pełnej treści newsa.Render_article jest tożsama do procedur render_ news pod kątem tworzenia i pod kątem przeznaczonych zmiennych, z tą różnicą, że zamiast zmiennej $news jest zmienna $article. Dodatkowo różnica występuje także pomiędzy ostatnimi fragmentami zadań, a dokładniej fragmentami odpowiedzialnymi za wyświetlanie treści, czyli zmiennej $info. Dokładny kod końcowej części procedur znajduje się na Listingu 4. Arkusz stylów CSSDo najważniejszych części arkusza należy sekcja body odpowiedzialnaza ogólny kolor strony. Przykładowy kod znajduje się na Listingu 5. Pozostałe bloki, które powinny się wyszukać w arkuszu to: a:adres www, a:visited, a:active i a:hover. Można je zawrzeć w dwóch blokach, jeden odpowiedzialny za wygląd linków po najechaniu na nie myszką, a drugi odpowiedzialny za wygląd linków aktywnych, odwiedzonych i nieodwiedzonych. Kod tych bloków znajduje się na Listingu 6. Wskaźnik adresu www, na który najedziemy myszką w tym przypadku będzie miał kolor zielony i będzie podkreślony, natomiast odnośniki odwiedzone, nieodwiedzone i aktywne (tzn. takie, które były kliknięte, ale strona się dopiero wczytuje) będą miały kolor niebieski i nie będą w żaden inny metodę odznaczone. Przy tworzeniu CSS warto również zadbać o wiele innych bloków na przykład. Shoutbox który definiuje kolorystykę Shoutboxa (Listing 7.), shoutboxdate definiujący wygląd daty dodania wpisu w shoucie (Listing 8.), poll opisujący wygląd naszej ankiety ( Listing 9.) i jeszcze jeden z dużo ważniejszych quote (Listing 10.). Blok ten opisuje wygląd cytatu umieszczonego przykładowo w komentarzu. Jeżeli jesteśmy już przy wyglądzie komentarzu, to tło i wygląd będzie podobny jak ustawimy dla artykułu, natomiast szablony stron PHP-Fusion umożliwiają nam jeszcze zdefiniowanie wyglądu nazwy użytkownika wyświetlanej w komentarzu, chodzi tu o tak zwany nick mężczyźni i kobiety komentującej nasz artykuł. Klasa CSS odpowiedzialna za ten wygląd nosi nazwę comment-name (Listing 11.). Sam system PHP-Fusion zawiera jeszcze wiele innych klas, ale niestety żeby wszystko szczegółowo opisać co i jak artykuł ten musiałby być znacznie dłuższy, ale zachęcam wszystkich do testowania i próbowania przy modyfikowaniu szablonu do strony internetowej.To że coś jest nie opisane nie znaczy, że nie trzeba tego przerabiać nawet całkiem inaczej uważam, że należy same-mu popróbować różnorakich efektów a oczywiście będziemy mile zaskoczeni uzyskanym rezultatem. PodsumowanieTym sposobem przebrnęliśmy poprzez cały artykuł, opisujący krok po kroku, jak zbudować własny skin do naszego CMS-a PHP-Fusion. Mam nadzieję, że właściwie każdy z was będzie teraz w stanie sobie poradzić ze zbudowaniem własnego gotowego projektu graficznego. Starałem się zaprezentować, że tworzenie swojego wyglądu strony nie jest wcale ani zbyt niełatwe, ani nieproste i mam nadzieję, że udało mi się Was do tego przekonać. Chociaż wykreowany szablon jest dość łatwy w bardzo łatwy sposób można te techniki przenieść do bardziej nieprostych szablonów stron internetowych. Sam proces budowy skinów nie jest nieprosty i nie zabiera wiele czasu, a przy wytwarzaniu swojego wyglądu jedynym ograniczeniem jest nasza wyobraźnia , a oprócz tego ewentualne kwalifikacji w trakcie budowy projektu graficznego. Jeśli nie posiadamy umiejętności i nie potrafimy wyprodukować sami takiego projektu zawsze możemy skorzystać z jakiegoś darmowego szablonu strony www i przekształcić go dla własnych potrzeb, jednak powinno sięwtedy pamiętać o tym aby zachować oryginalną stopkę autora świadczącą, że to on wykonał ten skin, jedyne co możemy w niej zmodyfikować to dopisać, że zmodyfikowaliśmy ten skin dla spersonalizowanych potrzeb. Przykładowe bezpłatne skiny można odnaleźć na stronie Fuzed Themes, której adres umieściłem w ramce„W Sieci”.