COMPMaster & F3Site 2011

Skórki, szablony, arkusze CSS

Czym są skórki?

Za pomocą skórek możesz zmienić wygląd Twojego wortalu. Znajdują się w katalogu style. Po czystej instalacji F3Site są tam 2 foldery:

  • system - domyślna skórka - najważniejsze szablony:
    • body.html - główny szablon, oprawa graficzna wortalu
    • admin.html - oprawa graficzna panelu administracyjnego
    • 404.html - szablon nieistniejącej strony
    • login.html - strona logowania (nie panel)
    • message.html - komunikat lub błąd na oddzielnej stronie
    • content.html - panel edycji treści
    • rate.css - wygląd gwiazdek do wystawiania ocen
    • 1.css, 2.css... - schematy, które internauci mogą zmieniać
  • admin - zawiera szablony stron panelu administracyjnego, np.
    • config.css - menu ustawień, ikony
    • summary.html - strona główna panelu administracyjnego

Każda skórka może zawierać dowolną ilość schematów, czyli arkuszy CSS, które określają położenie, kształt, rozmiar i marginesy elementów, kolory, czcionki, tła... Nazwy plików .css są liczbami naturalnymi: 1, 2, 3... Wszyscy użytkownicy mogą wybrać schemat skórki w wyznaczonym przez Ciebie miejscu w body.html.

Gdzie zmienić skórkę?

W przeciwieństwie do schematów (głównych arkuszy CSS), skórkę wybiera administrator w ustawieniach ogólnych w panelu administracyjnym.

Jak stworzyć własną skórkę?

Na początku zaopatrz się w dobry edytor stron internetowych z kolorowaniem składni. Nie używaj systemowego Notatnika! Zainstaluj rozszerzenia dla deweloperów do Twojej przeglądarki. Nie zniechęcaj się, jeżeli napotkasz trudności podczas pisania kodu HTML i CSS. Na pomoc przychodzi dodatek Firebug do Firefoksa.

Jeżeli zamierzasz całkowicie zmienić wygląd Twojego serwisu, najlepszym wyjściem jest stworzenie odrębnej skórki. Utwórz nowy folder w katalogu style. Skopiuj do niego pliki skórki, którą wykorzystasz za wzór, chyba że chcesz pisać kod całkowicie od podstaw.

Od wersji F3Site 2011 oznaczonej numerem 3.2 nowe skórki nie muszą mieć wszystkich szablonów w swoim folderze. Jeżeli skrypt nie znajdzie szablonu, wczyta go ze stylu domyślnego (system).

Kursy HTML i CSS

Zapoznaj się z kursami języków XHTML i CSS na stronach:

Śledź nowe standardy i trendy. Staraj się unikać przestarzałych metod tworzenia układów stron i niezalecanych znaczników. Pamiętaj, że wciąż duży odsetek społeczeństwa korzysta ze starych wersji przeglądarek.

Szkielet serwisu - body.html

W tym szablonie znajduje się główna część skórki - układ strony (layout) z deklaracją typu dokumentu (DTD), tytułem, znacznikami <meta>, <link>... Opisuje rozmieszczenie poszczególnych elementów serwisu: nagłówka, paneli, stopki, nawigacji, miejsca wyboru skórki i języka. W przypadku układów niestandardowych zaleca się napisanie własnego kodu HTML wraz ze stylami w arkuszach CSS.

Deklaracja typu dokumentu i atrybut lang

Pamiętaj, aby na początku kodu HTML wstawić deklarację typu dokumentu. W przeciwnym wypadku przeglądarka przełączy się do trybu trybu zgodności i może wyświetlić stronę niepoprawnie! Znacznik <html> musi zawierać atrybut lang o wartości {LANG}. Jest on wymagany przez niektóre komponenty F3Site, np. system komentarzy.

Wstawki w body.html i admin.html

Aby system wprowadził wartości do szablonu, które zmieniają się w zależności od ustawień lub wyświetlanej podstrony, należy wprowadzić wstawki:

  • {LANG} - aktywny język, np. pl, en...
  • {PAGE TITLE} - tytuł podstrony, np. Użytkownicy
  • {MAIN TITLE} - tytuł serwisu, np. COMPMaster
  • {DESCRIPTION} - opis wyświetlanej podstrony lub całego serwisu
  • {ROBOTS} - ustawienia indeksowania dla wyszukiwarek
  • {FOOTER} - stopka
  • {CSS} - nr używanego arkusza CSS, np. 1, 2, 3...
  • {USER PANEL} - panel użytkownika lub formularz logowania, czyli top.html
  • {BANNER X} - losowy kod HTML dla generatora o numerze X
  • {TODAY} - aktualna data
  • {CONTENT} - główna część podstrony
  • {LEFT MENU} - lewe menu
  • {RIGHT MENU} - prawe menu
  • {MENU} - menu panelu administracyjnego

Przykład ich wykorzystania zobacz w istniejących skórkach.

Arkusze CSS

Opisują kolory, czcionki, tła, obramowania, marginesy, położenie i rozmiar obiektów, a w niektórych skórkach nawet rozmieszczenie. Za pomocą stylów CSS możesz zmodyfikować prawie cały wygląd serwisu.

Obecnie nie zaleca się tworzenia układów stron na tabelach, gdyż służą one do przedstawiania danych tabelarycznych. Jeżeli zdecydujesz się zbudować taki layout, musisz ustalić ściśle pozycję i marginesy elementów, np. menu, środkowej części - tak, jak w domyślnej skórce. Specyfikacja CSS 3 przewiduje łatwiejsze tworzenie układów wielokolumnowych, lecz prace nad nim wciąż trwają.

Składnia języka szablonów

Aby ułatwić projektowanie skórek, F3Site 3 oferuje język szablonów. Składnia opiera się na wstawkach i komentarzach HTM zamienianych na kod PHP:

{zmienna}

{tablica.klucz}

{obiekt->wlasnosc}

Instrukcje warunkowe:

<!-- IF zmienna -->
Tekst wyświetli się, gdy zmienna ma wartość logiczną TRUE
<!-- END -->

<!-- IF tablica.klucz -->
Gdy element tablicy ma wartość logiczną TRUE
<!-- END -->

Instrukcja ELSE = w przeciwnym przypadku:

<!-- IF nowy -->
Wpis jest nowy.
<!-- ELSE -->
Wpis jest stary.
<!-- END -->

Pętle foreach - zdarzenia zapisane w tablicy $zdarzenia:

<!-- START zdarzenia -->
<div>
	Użytkownik {nadawca} napisał do {odbiorca}.
</div>
<!-- STOP -->

Zauważ, że w środku pętli można potraktować klucze tablicy jako zmienne, aby zwiększyć czytelność kodu i zmniejszyć jego rozmiar.

Jak przemierzać tablicę, która zawiera tylko klucze i wartości skalarne?

<!-- START tablica -->
Klucz: {KEY}
Wartość: {ITEM}
<!-- STOP -->

Dołączanie innych szablonów:

<!-- INCLUDE nazwa_szablonu_bez_rozszerzenia -->

Szablon zostanie wczytany z katalogu wskazanego w $content->dir lub folderu domyślnej skórki.

Wstawki PHP

Zazwyczaj nie ma potrzeby wstawiania kodu PHP do szablonów. Wystarczy skorzystać z przedstawionych wyżej konstrukcji.

Domyślnie kod PHP jest interpretowany. Jego użycie może być jednak niebezpieczne. Jeżeli obawiasz się, że szablony pobrane z Internetu mogą wyrządzić szkody, włącz usuwanie wstawek PHP. Otwórz plik lib/compiler.php i ustaw mu wartość true.

Ułatwienia dla formularzy

Trudność mogą sprawiać pola <select>, checkbox i radio. Nie można wprowadzić do nich aktualnej wartości za pomocą atrybutu value. Kontrolki, które powinny być zaznaczone po załadowaniu strony, muszą zawierać atrybut checked lub selected. Aby ułatwić zadanie, system szablonów wprowadza dodatkowe parametry dla znacznika <form> lub jego elementów:

<form action="" method="post" f3:array="tablica">
<input type="checkbox" name="klucz" />
<select name="wybor">
	<option value="1">Opcja o wartości 1</option>
	<option value="2">Opcja o wartości 2</option>
</select>

Pola select, checkbox i radio będą automatycznie zaznaczane. Rozważmy pole zawierające name="klucz". Gdy $tablica['klucz'] ma wartość logiczną TRUE, pole zostanie zaznaczone.

W przypadku elementów select i radio są porównywane wartości wszystkich opcji. Spójrz na powyższy przykład. Gdy $tablica['wybor'] wyniesie 2, zostanie zaznaczona druga pozycja.

W polach tekstowych zawsze musisz wstawić wartość do value=""

<input name="title" value="{tablica.title}" />

Możesz też dodać atrybut f3:var konkretnym polom select, radio lub checkbox w formularzu. Element zostanie zaznaczony, jeżeli jego wartość logiczna wyniesie TRUE lub będzie zgodna z atrybutem value.

Zakończenie

Jeżeli chcesz stworzyć całkowicie nową skórkę, najlepiej rozpocznij pracę na bazie istniejącego skinu, np. system. Przeanalizuj konstrukcje językowe w szablonach. Znacznie szybciej nauczysz się edytować skórki dla F3Site.

Ocena:
Napisał: WebCM - 20.07.2009 o 12:00
System CMS - F3Site 2011
Gry i skrypty
Artykuły
Statystyki