Budowanie strony od podstaw

Do wykonania projektu graficznego niezbędny będzie odpowiedni program, np. Adobe Photoshop lub darmowy Gimp. W warsztatach pomijamy opisywanie procesu tworzenia projektu w programie graficznym. Zakładamy, że znasz podstawy obsługi jednej z aplikacji. Przystępujemy od razu do konstruowania zaprojektowanej strony.

Projektowanie witryny od A do z

W naszym przykładzie budujemy stronę prywatną z elementami oferty fotograficznej. Layout wykonaliśmy w aplikacji Adobe Photoshop. Na łamach witryny opublikujemy swoje dotychczasowe osiągnięcia i portfolio wykonanych fotografii w formie galerii zdjęć oraz zamieścimy filmy z serwisu YouTube. W dziale Kontakt przygotujemy specjalny formularz, który ułatwi komunikację z zainteresowanymi klientami.

Wskazówki graficzne

W celu urozmaicenia oprawy wizualnej witryny możesz posłużyć się zdjęciami z bezpłatnego banku zdjęć www.sxc.hu lub sięgnąć po profesjonalne, komercyjne fotografie, np. z serwisów www.fotolia.pl i  www.istockphoto.com. W programie graficznym warto posługiwać się liniami pomocniczymi, które pozwolą na przygotowanie odpowiednich wymiarów elementów graficznych. Unikaj tworzenia stron o szerokości większej niż 960 pikseli. Gotowy projekt graficzny będziesz musiał pociąć na fragmenty, posługując się narzędziami Crop, Slice Tool itp. Aby zachować porządek, pocięte elementy zapisz w dowolnym miejscu na dysku, korzystając np. z katalogu o nazwie images.

Podstawowe ustawienia witryny

Zakładamy, że masz już przygotowane wszystkie elementy graficzne, z których będziesz budować stronę. Jeżeli jesteś już gotowy, możesz przystąpić do zdefiniowania głównych właściwości strony.

W oknie głównym programu WYSIWYG Web Builder kliknij menu File i wybierz New Web Site.



Ustaw teraz podstawowe właściwości strony. W tym celu z menu Page wybierz Page Properties.

W oknie  Page Properties, na karcie General, w polu Title wpisz tytuł strony, w naszym przykładzie Mateusz Nosel - fotografia, grafika, pole pozostaw bez zmian. Możesz tu wybrać krój czcionki, rozmiar i kolor. W naszym przykładzie z listy Default Font wybieramy font, np. Tahoma, na liście Default Color pozostawiamy domyślnie czarny. Z listy Default Size wybieramy rozmiar czcionki, w naszym przykładzie 9. Teraz ustal szerokość i wysokość strony. W polach Page Width i Page Height wpisz odpowiednio szerokość i wysokość. W naszym przykładzie 884 i 600. Następnie z listy Character Set wybieramy kodowanie ISO-8859-2. Jeśli zaznaczysz opcję Center in Browser, twoja strona będzie wyśrodkowana w oknie przeglądarki.



Przejdź do zakładki Background. Jeżeli masz przygotowane tło dla strony, kliknij przycisk Browse i w oknie Otwieranie wskaż na dysku lokalizację pliku tła. W naszym przykładzie tlo.jpg. Po wybraniu obrazka kliknij  Otwórz. W naszym przykładzie z listy Repeat wybieramy opcję Repeat in horizontal direction. Oznacza to, że obrazek tła będzie powtarzany w poziomie. Jeżeli chcesz, aby tło było powtarzane w pionie, wybierz  Repeat in vertical direction. Możesz też zrezygnować z powtarzania tła, wybierając opcję  Do not repeat. Z list Horizontal align i Vertical align wybierasz położenie tła. Domyślnie ustawione opcje oznaczają, że tło będzie wyrównane do lewej górnej krawędzi witryny. Kolejne pola pozwalają na ustalenie kolorystyki. Jeżeli nie masz przygotowanego obrazu grafiki, możesz skorzystać z tła kolorowego, wybierając odpowiednią barwę z listy Background. Obok pola wybierz kolor dla wszystkich hiperłączy, które pojawią się na twojej stronie. Kolor Visited Link będzie obowiązywał dla odwiedzonych linków, Active Link będzie kolorem aktualnie zaznaczonego hiperłącza, a Hover link umożliwi określenie koloru dla hiperłącza w momencie naprowadzenia na niego kursora myszy. W polu Sound możesz wstawić muzykę, która będzie odtwarzana w momencie załadowania twojej strony.

Przejdź do zakładki Meta Tags. W polu Author wpisz dane autora witryny, np. swoje imię i nazwisko. W polu tekstowym Keywords wpisz słowa kluczowe, które opisują twoją witrynę. Ten element jest ważny dla wyszukiwarek. Wyszukiwarki będą wskazywać twoją stronę m.in. na zawierające te słowa hasła, które wpiszesz w tym polu. Staraj się nie przekraczać 400 znaków. W polu Description podaj opis swojej witryny. Zalecany jest opis około 180-znakowy. Pozostałe zakładki możesz pominąć. Kliknij OK, aby zatwierdzić wszystkie ustawienia i zamknąć okno Page Properties.