Krok 3 – jak zmienić wygląd strony

W poprzednim kroku omówiłem temat aktywacji strony i jej bazowego projektu graficznego, na którym dalej możemy operować. otoKreator w tym względzie jest bardzo interesującym narzędziem. Dd wielu innych kreatorów stron wyróżnia go m.in. jedna cecha. Pozwala w łatwy sposób, bardzo mocno ingerować w wygląd prowadzonej strony. W praktyce więc nie ma większego znaczenia na jakim bazowym projekcie zaczniemy działać, bo każdy możemy dowolnie zmieniać.

W tym kroku przedstawię podstawy pracy z szablonem graficznym projektowanej strony internetowej po to abyś mógł zobaczyć jakie to proste i jak duże daje możliwości komuś kto nigdy jeszcze nie budował strony internetowej. Poza wyborem bazowego projektu o czym już wspomniałem mamy możliwość modyfikacji layoutu (układu szablonu), kolorystyki, czcionek i różnych ozdobników.

Zacznijmy od kolorów

Możemy w błyskawiczny sposób zmienić kolorystykę całej strony wybierając jedą z kilkudziesięciu predefiniowanych palet. Opcję tę docenią zapewne wszyscy Ci, którzy z grafiką nie mają zbyt wiele do czynienia i dobór kolorystyki tak aby całość dobrze się komponowała może sprawiać im kłopot. W takiej sytuacji możemy przeklikać się przez rozmaite palety, aż trafimy na zestaw kolorów, który będzie się nam najbardziej podobał. Nie obwaiajmy się jeśli np. w danej palecie nie odpowiada nam jakiś konkretny kolor ponieważ nasz wybór możemy swobodnie dostosować zmieniając dowolny kolor palety na taki jaki zechcemy.

krok3-02

W efekcie zwykłym klikaniem możemy zaprojektować kolorystykę strony, która z naszego punktu widzenia będzie najlepsza. otoKreator daje tu bardzo duże możliwości, ponieważ niezależnie od wybranej lub stworzonej palety możemy modyfikować kolorystykę dla wybranych cześci naszego projektu, np. możemy określić kolorystykę dla tła strony (jednolity kolor, gradient czy obraz), bocznych kolumn, nagłówka, stopki i w końcu głównej części. W naszym przykładzie stwierdziłem, że chciałbym aby kolor pod treścią główną był po prostu jasnoszary i tak to sobie wyklikałem.

krok3-03

OK przyjmijmy, że kolorystyka z grubsza jest OK (na dowolnym etapie pracy ze stroną możemy ją modyfikować także nie ma obawy). Teraz zmienimy domyślnie zaproponowany obraz w nagłówku naszej strony. Aby to zrobić wystarczy kliknąć na nim, a poniżej pojawią się opcje związane z obrazem nagłówka. W ten sposób zachowują się wszystkie obiekty na naszej stronie, ale o tym napiszę więcej w kolejnych krokach.

krok3-04

Aby przejść do biblioteki dostępnych zdjęć dla nagłówka wystarczy kliknąć w oknie opcji na listę obrazów i zobaczymy całkiem pokaźne archiwum zdjęć jakie możemy wykorzystać. Jest rzecz jasna również opcja pozwalająca nam na załadowanie własnej grafiki, mamy więc tu pełne spektrum możliwości związanych z dostosowaniem wyglądu. Wszystkie dostepne obrazy są wysokiej jakości także z pewnością będą się świetnie prezentować na strone. Wystarczy kliknąć na wybranym i od razu zobaczymy efekt.

krok3-05

Układanie projektu strony z klocków

Mamy kolorystykę, mamy zmieniony obraz w nagłówku. Czas na dostosowanie reszty. Nasz domyślny szablon posiada elementy, które mogą nie być nam potrzebne, np. w moim przypadku nie będzie potrzebne pole wyszukiwarki bo chcę zbudować prostą stronę informacyjną firmy zajmującej się remontami. Klikam więc na obiekt, którego chcę się pozbyć z szablonu graficznego, co natychmiast skutkuje pojawieniem się opcji konfiguracyjnych i przycisku pozwalającego na usuniecie obiektu. Nie potrzebuję pola wyszukiwarki więc ją usuwam. Proste prawda? 🙂

krok3-06

To samo robię z pozostałymi elementami, które nie są mi do szczęścia potrzebne. Zauważcie na powyższym obrazku, że pierwszą ikonką na pasku opcji danego obiektu jest uchwyt. Pozwala on pochwycić kursorem myszki obiekt i przeciągnąć go w inne miejsce naszego projektu. Ot po prostu jeśli chcemy żeby menu strony było nie pod bannerem nagłówka tylko nad nim, to łapiemy obiekt menu i przestawiamy go jak klocek nad obraz nagłówka. I tak sobie klikając, przesuwając obiekty doprowadzamy wygląd szablonu do stanu o jaki nam chodzi i który nas satysfakcjonuje. Rewelacyjne jest to, że nie mamy sztywnych skórek, gdzie musimy się godzić na taki czy inny układ poszczególnych elementów. W otoKreatorze przestawiamy je tak jak chcemy.

Layout projektu

Poza zabawą „klockami” czy jak kto woli puzzlami możemy także określić inne ogólne parametry naszego layoutu, np. możemy zdecydować czy chcemy aby nasz projekt miał jedną lub dwie kolumny albo był ich całkiem pozbawiony. Możemy zdecydować o szerokości kolumn w tym także całej naszej strony, o szerokości nagłówka, stopki itd…

krok3-07

W naszym przykładzie zdecydowałem się na jedną kolumnę po lewej stronie i zrezygnowałem z prawej zostawiając sobie w ten sposób więcej miejsca na treść i jej organizację. Zmieniłem na koniec jeszcze gradient dla tła na nieco mocniejszy i odwróciłem go. Usunałem także zaokrąglenia narożników stopki, nagłówka i bocznej kolumny.

W efekcie tej trwającej dosłownie 5 minut zabawy wyklikałem skórkę, która na tym etapie mi odpowiada. Mam świadomość, że w dowolnej chwili nawet jak już wprowadzę treści na stronę, bedę mógł zmienić jej wygląd tak samo szybko jak zrobiłem to teraz. To olbrzymia zaleta.

krok3-09

Teraz pozostaje już tylko wprowadzenie treści i dopasowanie struktury działów (dodanie nowych, usunięcie lub edycja domyślnych).

przejdź do kroku 4