Zbuduj swoją stronę

... lub zaprojektuj witrynę sam

Do dyspozycji masz kilka gotowych szablonów, które dodatkowo zostały wzbogacone o różne wersje kolorystyczne. Dzięki temu dobierzesz odpowiednie dla siebie barwy. To najprostsza i najszybsza droga do zbudowania własnej strony.

Poważniejszym wyzwaniem jest zaprojektowanie całkowicie autorskiej strony. To zadanie przyniesie więcej satysfakcji niż tworzenie witryny według gotowego szablonu, który mogą mieć setki innych internautów. Zanim zaczniesz projektować konstrukcję w programie WebPlus, przygotuj projekt szaty graficznej w dowolnym programie graficznym. Budując stronę od podstaw, nie jesteś w żaden sposób ograniczony, wystarczy pomysł i odrobina umiejętności graficznych. Poszczególne elementy oprawy wizualnej interfejsu zapisuj w osobnych plikach, a z tak przygotowanych „klocków” zbudujesz spójny projekt w programie.

Szkielet strony w Master Page

Aby uprościć pracę nad projektami podstron, wykorzystaj stronę wzorcową, czyli tzw. master page. W tym trybie zbuduj szkielet strony, który będzie elementem konstrukcyjnym wykorzystywanym przez wszystkie podstrony. Dzięki temu nie będziesz musiał kopiować i dublować stale powtarzających się elementów.

W prawej części okna programu WebPlus, w zakładce Site kliknij przycisk Master Pages. Rozwinie się dodatkowe pole zawierające ikonę Master A. Kliknij ją prawym przyciskiem myszy i z menu kontekstowego wybierz Master Page Manager.

W oknie Master Page Manager kliknij Properties. Następnie w oknie Master Page Properties w sekcji Dimensions ustal szerokość i wysokość (w pikselach) dla strony, wpisując te parametry odpowiednio w pola Width i Height (dla rozdzielczości monitora 1024x768 pikseli standardowa szerokość wynosi 960 pikseli).

Z drzewa kategorii wybierz Background i z rozwijanej listy w sekcji Background wybierz Use custom Background. Po odblokowaniu dodatkowych opcji kliknij przycisk    Background Image.



W okienku Background zaznacz teraz opcję Use Background Image i kliknij Browse. W oknie Import Picture wskaż na dysku plik z tłem dla strony i zatwierdź wybór przyciskiem Otwórz. Z rozwijanej listy Repeat wybierz opcję Horizontal, aby tło było powtarzane w poziomie. Jeżeli w tle chcesz zastosować plik w formie tapety, nie zmieniaj tej listy, lecz na rozwijanej liście  Position ustal pozycję ustawienia obrazu. Aby obrazek w tle był wyśrodkowany i przyciągnięty ku górnej krawędzi, wybierz opcję Top Center. Kliknij OK, jeszcze raz OK i Close.

Pozostając na stronie wzorcowej master page, dodaj pozostałe elementy witryny, które będą powtarzane na wszystkich podstronach, m.in. logo, menu i stopkę.


Aby umieścić na stronie np. logo w formie pliku graficznego musisz przeciągnąć z zakładki QuickBuilder Bar na obszar roboczy ikonę Image. W oknie Import Picture wskaż na dysku plik z logo i kliknij przycisk Otwórz. Posługując się kursorem myszy, ustaw logo według własnego uznania. Powtórz tę czynność tyle razy, ile masz do umieszczenia plików graficznych.

Kolejnym ważnym elementem konstrukcyjnym jest dodawanie tekstów. Aby umieścić na stronie pole tekstowe, z zakładki QuickBuilder Bar przeciągnij na obszar roboczy ikonę Text Frame. Następnie chwyć kursorem myszy białe kwadraciki umieszczone na krawędziach pola tekstowego i dostosuj w ten sposób szerokość tego obiektu. Teraz wprowadź docelowy tekst, wybierając czcionkę, jej wielkość i kolor według własnego uznania.


Obiekt ze sformatowanym tekstem może wyglądać tak jak na poniższym obrazku. Nie przejmuj się, że wokół napisu jest obramowanie. Po uruchomieniu strony w przeglądarce nie będzie tego widać. Obramowanie jest widoczne tylko w trybie projektowania, a jego celem jest ułatwienie widoczności ustawionych pól tekstowych. Pamiętaj, aby na stronie wzorcowej master page dodać tylko elementy, które mają być powtarzane na pozostałych podstronach.

Jeżeli zbudowałeś już podstawową konstrukcję strony i chcesz budować zawartość poszczególnych podstron, opuść tryb master page. W tym celu w prawej części okna programu, w zakładce  Site, na liście podstron Pages kliknij dwukrotnie nazwę podstrony, którą chcesz edytować, np. Home. Po chwili obok nazwy podstrony powinna się pojawić ikona z okiem, która oznacza podstronę, na której aktualnie pracujesz.