Strona z szablonu

Pokazujemy tu, jak wybrać szablon, wypełnić witrynę treścią, wygenerować menu nawigacyjne i założyć podstrony. Pamiętaj, że swój projekt możesz edytować w dowolnym momencie, wzbogacając witrynę o kolejne podstrony, aktualną treść lub atrakcyjne dodatki. Jeżeli uznasz, że dobrze radzisz sobie z obsługą programu, zachęcamy do zbudowania własnej strony od podstaw. Przygotowaną witrynę zapiszesz na dysku lub opublikujesz w internecie.

W programie masz do dyspozycji ponad 100 szablonów podzielonych na kategorie tematyczne. Jeżeli nie czujesz się na siłach, by przygotować własny layout w programie graficznym, sięgnij po jedną z gotowych propozycji.

W oknie głównym programu WYSIWYG Web Builder znajdź menu File i wybierz z niego New Web Site From Template.

W oknie Select Template, na liście Category jest domyślnie zaznaczona pozycja Default. Poniżej zobaczysz miniatury gotowych szablonów. Rozwiń listę Category i wybierz jedną z dostępnych kategorii. W naszym przykładzie wybraliśmy kategorię Personal, a z niej szablon o tematyce komputerowej – Computing. Swój wybór zatwierdź przyciskiem OK.

Po krótkiej chwili otworzy się okienko Save Web Site As, w którym zapiszesz projekt swojej witryny. Wybierz lokalizację na dysku twardym, następnie w polu Nazwa pliku wpisz nazwę projektu, np. mojastrona_www, i kliknij Zapisz.

Powrócisz do okna głównego. W obszarze roboczym, w zakładce index pojawi się wybrany szablon. Możesz już przejść do edycji poszczególnych fragmentów witryny.

Po wybraniu oprawy graficznej uzupełnisz witrynę treścią. Proces edycji zawartości jest prosty i przypomina pracę z tradycyjnym edytorem tekstu.

W pierwszej kolejności w okienku Site Manager zaznacz stronę index i kliknij ikonę Page Properties. W oknie Page Properties, w polu Title nadaj tytuł stronie, np. Serwis komputerowy PCF LAB, i z listy Character Set wybierz kodowanie ISO-8859-2, które zapewni poprawne wyświetlanie polskich znaków diakrytycznych na stronie. Kliknij przycisk OK.

Teraz dwukrotnie kliknij kursorem myszy pole z tekstem YOUR WEBSITE TITLE i wprowadź tytuł swojej strony. Korzystając z narzędzi formatowania, możesz zmienić krój i wielkość czcionki oraz kolorystykę. W podobny sposób edytuj pole tekstowe Your Name or Your Slogan Here i wpisz dowolny tekst. Jeśli uznasz, że napis jest zbędny, możesz go skasować klawiszem [Delete].

Szablon został zaprojektowany w języku angielskim, dlatego musisz ręcznie spolszczyć menu nawigacyjne umieszczone po lewej stronie projektu. Kliknij dwukrotnie obiekt zawierający menu:

W oknie Navigation Bar Properties, w sekcji Buttons widzisz listę poszczególnych działów zgrupowanych w menu. Na razie nie masz przygotowanych podstron, dlatego na tym etapie zajmiemy się tylko spolszczeniem nazw działów. Zaznacz dowolny element z listy, np. About You, po czym kliknij przycisk Edit.

W nowym oknie, Edit Button, w polu tekstowym Name wpisz tytuł podstrony, np. O mnie. W naszym przykładzie tytuł jest poprzedzony kilkoma spacjami, aby był czytelny na przycisku i nie stykał się z jego krawędzią. Pozostałe pola w tym oknie pozostaw na razie bez zmian i kliknij przycisk OK. Podobną metodą zmień nazwy pozostałych działów w menu. Po zmianach menu będzie wyglądało tak:

Teraz zmień zawartość belki: Your Expressive Websites Headline here. Kliknij ją dwukrotnie i wprowadź własny tytuł. Następnie w podobny sposób wyedytuj treść widoczną obok obrazka. Nie zapomnij zmienić treści w stopce witryny. W naszym przykładzie stopka wygląda po zmianach tak:

Aby dodać do strony dowolny obrazek z komputera, wybierz z przybornika toolbox ikonę Image i w obszarze roboczym strony, w miejscu, w którym chcesz ustawić obrazek, narysuj prostokąt. W oknie, które się otworzy, wybierz z dysku plik graficzny, który chcesz umieścić na stronie, i kliknij Otwórz. W naszym przykładzie wstawiliśmy logo PC Format.

Po zaznaczeniu pliku obrazu uaktywni się w oknie głównym programu dodatkowy pasek narzędzi dla obrazów. Do dyspozycji masz podstawowe narzędzia edycyjne, m.in. rozjaśnianie/przyciemnianie, poprawianie kontrastu. Po kliknięciu strzałki obok ostatniej ikony rozwinie się menu z dodatkowymi opcjami. Możesz poprawić ostrość obrazka, wybierając z menu kolejno: Convolve i Sharpen.

Jeżeli chcesz przeskalować obrazek (zmniejszyć lub powiększyć), chwyć kursorem myszy za jeden z uchwytów umieszczonych wokół krawędzi obrazka i nie zwalniając przycisku myszy, przesuń krawędź w dowolnym kierunku, aby dopasować rozmiar według własnego uznania.

Po zagospodarowaniu strony głównej i przyjęciu odpowiedniego układu witryny możesz przejść do tworzenia kolejnych podstron. Aby zachować spójność w obrębie witryny, kolejne podstrony należy tworzyć na podstawie struktury strony głównej (index).

Wybrany przez nas szablon serwisu komputerowego wymaga wykonania pięciu podstron. Na początek utworzymy stronę „O mnie”. W tym celu w okienku kliknij ikonę Clone Page, za której pomocą utworzysz klon dotychczasowej strony głównej.

Na drzewie struktury witryny pojawi się nowa strona o nazwie page1. Kliknij na niej prawym przyciskiem myszy i z menu kontekstowego wybierz Rename Page. Nadaj jej nazwę, która będzie związana z nazwą działu, w naszym przykładzie omnie. W nazwach podstron nie używaj polskich znaków diakrytycznych i wersalików (dużych liter). Następnie, pozostawiając zaznaczoną stronę omnie, kliknij ikonę Page Properties.

W oknie Page Properties, w polu Button Name wpisz tytuł swojej strony (w naszym przykładzie O mnie). Następnie w polu nadaj skrótową nazwę podstrony, np. o_mnie. Teraz z listy character set wybierz kodowanie ISO-8859-2 i kliknij OK.

Możesz już zmienić treść na utworzonej podstronie, klikając dwukrotnie poszczególne obiekty. Skorzystaj z narzędzi znajdujących się w przyborniku Toolbox, które opisaliśmy na początku artykułu. W sposób analogiczny do kroków 1–3 utwórz listę pozostałych podstron i uzupełnij je dowolnymi materiałami tekstowymi i graficznymi.

Po utworzeniu wszystkich podstron, które będą spójnymi elementami twojej witryny, możesz powrócić do tworzenia menu nawigacyjnego. Pokazujemy, jak utworzyć hiperłącza, które pozwolą na wygodne przemieszczanie się między podstronami.

W obszarze roboczym okna programu WYSIWYG Web Builder kliknij dwukrotnie kursorem myszy menu nawigacyjne.

W oknie Navigation Bar Properties, w sekcji Buttons zaznacz na liście pozycję O mnie i kliknij przycisk Edit.

Następnie w okienku Edit Button z listy Link To wybierz Internal Web Page, a następnie kliknij przycisk Select.

Zobaczysz okno Select Page. Z drzewa podstron wybierz stronę omnie i kliknij przycisk OK. Powrócisz do okna Edit Button. Kliknij OK.

W podobny sposób jak w krokach 2–4 ustaw odnośniki do podstron dla pozostałych przycisków menu nawigacyjnego. W przypadku ustawiania linku do strony głównej wybierz z drzewa podstron w oknie Select Page pozycję index.

Jesli chcesz, aby jeden z przy cisków menu nawigacyjnego prowadził do strony zewnętrznej (w naszym przykładzie będzie to dział Pliki do pobrania, który poprowadzi do strony http://pcformat.pl/programy), w oknie Navigation Bar Properties, w sekcji Buttons zaznacz na liście pozycję Pliki do pobrania i kliknij przycisk Edit.

W oknie Edit Button w polu URL wpisz adres docelowej strony internetowej, w naszym przykładzie:

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