Budowanie strony od podstaw
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]:
