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.

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.

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.

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>.

W obszarze roboczym powinno się pojawić wybrane tło:

Teraz możesz zapisać swój projekt na dysku. Kliknij ikonę Save. W oknie Zapisz jako wskaż lokalizację na dysku twardym, a w polu Nazwa pliku wpisz nazwę swojej witryny, np. strona_domowa, i kliknij przycisk Zapisz.

W tej części warsztatu na przykładzie naszego projektu pokazujemy, jak zbudować stronę główną, która będzie pełniła strukturę konstrukcyjną dla pozostałych podstron tworzonej witryny.

Przystępujemy do budowania struktury strony głównej. Aby wstawić logo, kliknij w przyborniku Toolbox ikonę Image i w obszarze roboczym, w zakładce index narysuj prostokąt, w którym będzie ulokowany obrazek. W oknie Otwieranie wskaż na dysku lokalizację pliku graficznego, w naszym przykładzie logo.jpg, i kliknij Otwórz.

Program automatycznie dopasuje wymiary prostokąta do wymiarów obrazka. Przytrzymując obrazek kursorem myszy, możesz go przesuwać w dowolnym kierunku. W naszym przykładzie umieściliśmy logo w lewym górnym rogu obszaru roboczego.

Nasza strona ma układ dwukolumnowy. W lewej części zamieścimy podstawowe informacje osobiste, prawa posłuży za miejsce, w którym zostanie opublikowana zawartość merytoryczna dla poszczególnych działów. Do zbudowania tej części witryny wykorzystamy narzędzie Shape z przybornika Toolbox. Po wybraniu tego obiektu narysuj w obszarze roboczym prostokąt, który będzie lewą kolumną witryny.

W oknie Shape Properties, w sekcji Fill Efects masz do dyspozycji cztery możliwe efekty wypełnienia. Domyślnie zaznaczona opcja Solid nadaje kolor kształtu, Gradient pozwala na ustawienie tła z efektem przejścia między dwoma kolorami, Image umożliwia wstawienie pliku obrazu w tło, a opcja Transparent ustawi przezroczystość tego elementu. W naszym przykładzie wybieramy opcję Image. Aby wybrać grafikę, kliknij przycisk .., w oknie Otwieranie wskaż na dysku plik obrazu i kliknij przycisk Otwórz. W sekcji Border, zaznaczając pole Enable Border, możesz dodać obramowanie dla tego kształtu. W naszym przykładzie rezygnujemy z niego. Kliknij przycisk OK.

W naszym założeniu lewa kolumna ma mieć ściśle określone wymiary, tzn. takie, jakie ma nasz plik graficzny. Jeżeli znasz dokładne wymiary (szerokość i wysokość), w oknie głównym programu WYSIWYG Web Builder, mając zaznaczony obiekt utworzonego kształtu, w okienku Quick Properties, w sekcji General rozwiń kategorię Size. W polu Width wpisz szerokość, a w Height wysokość. W naszym przykładzie wymiary to odpowiednio 230 i 466. Na tym etapie warto zablokować elementy, które mogą być nieopatrznie przesunięte kursorem myszy. W tym celu zaznacz obiekt, który chcesz zablokować, kliknij go prawym przyciskiem myszy i z menu kontekstowego wybierz Lock.

Analogicznie do kroków 4–5 wykonujemy prawą kolumnę naszej witryny. Dotychczasowy efekt naszych prac jest taki:

Kolejnym elementem witryny jest stopka, czyli element zamykający układ witryny. W naszym przykładzie umieścimy tu informację o prawach autorskich. Posłużymy się zwykłym tekstowym obiektem. Z przybornika toolbox wybierz narzędzie Text i narysuj prostokąt w obszarze roboczym witryny, w jego dolnej części:

Kliknij dwukrotnie tekst Double click to edit i wprowadź stosowny napis. W naszym przykładzie to copyright 2011. Posługując się narzędziami formatowania, możesz dostosować wygląd stopki do własnych upodobań, np. zmniejszyć lub zwiększyć czcionkę, nadać jej pogrubienie lub zastosować kursywę.

Do struktury strony głównej możesz dodać inne elementy, korzystając z narzędzi z przybornika toolbox. W naszym przykładzie uzupełniliśmy lewą kolumnę, która będzie taka sama na każdej podstronie. Umieściliśmy tu zdjęcie autora i krótkie informacje osobiste. Do tego zadania wykorzystaliśmy opisywane dotychczas narzędzia. Po zakończeniu tworzenia makiety kliknij ikonę Save, by zapisać stan swojego projektu. Możesz już sprawdzić, jak wygląda twoja strona w domyślnej przeglądarce internetowej, wciskając klawisz [F5]:

Przed przystąpieniem do zaprojektowania menu strony przemyśl liczbę podstron i ich nazwy. Będą niezbędne do przygotowania wygodnej nawigacji po serwisie.

Teraz możesz przygotować menu nawigacyjne. W naszym przykładzie oprócz strony głównej przewidzieliśmy jeszcze 4 podstrony: O mnie, Oferta, Galeria oraz Kontakt. Z przybornika Toolbox z sekcji Navigation wybierz narzędzie Text Menu i narysuj prostokąt w obszarze roboczym, w miejscu, gdzie ma się znaleźć menu nawigacyjne. Możesz skorzystać z innych układów menu, wybierając inne ikony z przybornika.

Dwukrotnie kliknij utworzony obiekt. W oknie Text Menu Properties, w zakładce General widzisz 4-pozycyjne drzewo menu. Zaznacz Link 1 i kliknij przycisk Edit, aby ustawić parametry przycisku nawigacyjnego.

W oknie Edit Button w polu Name wpisz nazwę podstrony – w naszym przykładzie Strona główna. Pozostałe pola pozostaw na razie bez zmian i kliknij OK. W podobny sposób wyedytuj pozostałe linki. Aby dodać dodatkowe pozycje do menu, kliknij przycisk Edit. W naszym przykładzie po utworzeniu pełnej listy wygląda ona tak:

Teraz przejdź do zakładki Style w celu zdefiniowania wyglądu graficznego menu. Menu nawigacyjne powinno być czytelne, dlatego warto zwiększyć rozmiar czcionki, wybierając ją z listy Size. Kliknij przycisk Edit Styles, aby ustawić styl kolorów dla hiperłączy.

W okienku Hyperlink Style Sheet kliknij przycisk Add i w oknie Add Hyperlink style w polu Style Name wpisz nazwę dla tworzonego stylu, np. menu. Następnie kliknij kolejno odnośniki: Linked, Visited, Active i Hover, i w okienku Format Style ustal kolory dla poszczególnych stanów hiperłącza. Kliknij trzykrotnie OK.

Po ustawieniu formatowania hiperłączy powrócisz do okna Text Menu Properties. Z listy Link style wybierz menu. Z listy Alignment wybierz wyrównanie menu. W naszym przykładzie wyrównaliśmy do prawej, wybierając opcję Right. Natomiast w sekcji Delimiters, w polach Start i End możesz nadać znaczniki, które będą wydzielały poszczególne pozycje menu. W naszym przykładzie w polu End wstawiamy separator, za pomocą kombinacji klawiszy [Shift]+[\]. Zakończ edycję menu, klikając przycisk OK. Zapisz postęp swojej pracy, klikając ikonę Save. Aby zobaczyć efekt w przeglądarce, kliknij klawisz [F5]. Podlinkowaniem poszczególnych przycisków menu zajmiemy się później, gdy przygotujemy już wszystkie podstrony naszej witryny.

Po zagospodarowaniu strony głównej i przyjęciu odpowiedniego układu witryny możesz przejść do tworzenia kolejnych podstron. Nasza przykładowa strona oprócz strony głównej zawiera cztery podstrony.

W oknie głównym programu WYSIWYG Web Builder w okienku Site Manager kliknij ikonę Clone page. Powtórz tę czynność tyle razy, ile potrzebujesz mieć podstron wykonanych na podstawie struktury strony głównej.

Na drzewie struktury witryny zobaczysz listę utworzonych podstron. Kliknij prawym przyciskiem myszy na podstronie page1 i z menu kontekstowego wybierz Rename. Nadaj jej nazwę, która będzie nawiązywała do nazwy podstrony, w naszym przykładzie omnie. W podobny sposób zmień nazwy pozostałych podstron.

Teraz w okienku Site Manager zaznacz dowolną podstronę, np. omnie, i kliknij ikonę Page properties. W okienku Page properties możesz zmienić podstawowe ustawienia dla tej podstrony. Powtórz tę czynność dla pozostałych podstron, jeżeli chcesz zmodyfikować podstawowe ustawienia.

Teraz możesz przystąpić do wypełniania treścią poszczególnych podstron. W oknie głównym programu WYSIWYG Web Builder, nad obszarem roboczym widzisz zakładki. Aby dokonywać zmian na wybranej stronie, kliknij jedną z zakładek i skorzystaj z narzędzi z przybornika Toolbox.

Po wypełnieniu poszczególnych podstron dowolną zawartością wróć do edycji menu nawigacyjnego. W tym celu dwukrotnie kliknij menu, w naszym przykładzie:

W oknie Text Menu Properties z listy elementów wybierz Strona główna i kliknij przycisk Edit. W okienku Edit Buttons z rozwijanej listy Link to wybierz Internal Web Page i kliknij przycisk Select.

W oknie Select Page wybierz z drzewa odpowiednią podstronę, w naszym przykładzie index, kliknij OK. W analogiczny sposób ustaw linki do pozostałych przycisków menu. Decydując się na to rozwiązanie, pamiętaj o zaktualizowaniu menu na wszystkich swoich podstronach. Możesz ułatwić sobie zadanie, zaznaczając obiekt menu i kopiując go kombinacją klawiszy [Ctrl]+[C], a po przejściu na inną podstronę, wklejając obiekt za pomocą klawiszy [Ctrl]+[V].

Jeżeli chcesz, aby program aktualizował menu samodzielnie, możesz zsynchronizować je z podstronami programu, które widać w okienku Site Manager. W tym celu w oknie Text Menu Properties zaznacz opcję Synchronize with Site Manager i kliknij przycisk OK. Zwróć uwagę, że program zmienił nazwy odnośników menu na nazwy, które zostały nadane poszczególnym podstronom w okienku Site Manager. Zmieniając ich nazwy, program automatycznie zaktualizuje twoje menu. Nie zapomnij zapisać pracy na dysku.