Tworzenie szablonu strony internetowej składa się z dwóch etapów: przygotowanie projektu graficznego, a potem pocięcie i zakodowanie go do HTMLa.
Projekt graficzny można wykonać w dowolnym programie graficznym, np. Photoshop czy Gimp.
Pamiętać trzeba tylko o zasadzie, żeby każdy element strony był na osobnej warstwie. Druga ważna sprawa to napisy na stronie powinny być umieszczane jako tekst a nie grafika.
Kiedy grafika jest gotowa trzeba ją pociąć. Tutaj są dwie możliwości: automatyczne pocięcie w programie graficznym lub ręczne.
Ręczne cięcie szablonu polega na zaznaczania każdego elementu layoutu i kopiowaniu go do osobnego pliku graficznego. Następnie trzeba szablon zakodować w HTMLu lub XHTMLu.
Automatycznie layout można pociąć np. programem ImageReady, który jest instalowany razem z Photoshopem. Narzędzie, które będzie wykorzystywane do cięcia nazywa się Slice Tool (nożyk na pasku narzędzi). Należy zaznaczyć nim elementy, które mają być wycięte i wybrać File → Save Optimized As, żeby zapisać pocięte elementy i plik html. W wygenerowanym pliku html pocięte elementy są zapisane jako obrazki, dlatego trzeba jeszcze zmodyfikować ten plik, tak by obrazki były tłem i możliwe było później wprowadzenie treści strony.
Np.
fragment kodu automatycznie wygenerowany:
<td colspan="4"><img id="home_01" src="obrazki/home_01.png" width="600" height="100" alt="" /></td>
fragment kodu po modyfikacji:
<td colspan="4" background="obrazki/home_01.png" width="600" height="100" alt="" />tutaj będzie treść</td>
Może się wydawać, że automatyczne cięcie layoutu będzie szybsze. Nic bardziej mylnego, jeśli wziąć pod uwagę czas potrzebny na przerabianie pliku html. Ponadto ręczne cięcie i kodowanie layoutu daje większe możliwości webmasterowi i pozwala na przygotowanie strony spełniającej standardy W3C.
