Własna WWW - to proste!

Dzięki programowi WebSite X5 Home 11 przygotujesz i opublikujesz witrynę swoich marzeń, na której zaprezentujesz siebie lub swój biznes w internecie, przedstawisz swoje poglądy lub podzielisz się swoimi pasjami. Jeśli chcesz mieć własną stronę WWW, ale nie wiesz nic na temat programowania w języku HTML i nie stać cię na zlecenie przygotowania witryny przez profesjonalistę, potrzebujesz tylko pełnej wersji programu z naszej płyty.

WebSite X5 Home 11 oferuje ponad 250 gotowych, profesjonalnie przygotowanych wzorców graficznych, z których możesz zbudować witrynę składającą się z aż 25 podstron. Budowanie odbywa się w sposób całkowicie wizualny, poprzez przeciąganie i upuszczanie obiektów na odpowiednie obszary strony, wypełniane tekstem, zdjęciami, filmami, muzyką lub animacjami Flash. Logiczny i intuicyjny interfejs daje możliwość natychmiastowego podglądu tworzonej strony i pozwala na bieżąco kontrolować postęp prac.

Program Website X5 automatycznie tworzy animowane menu nawigacyjne i generuje kod HTML w pełni zgodny ze wszystkimi przeglądarkami a także urządzeniami przenośnymi tj. smartfony czy tablety. Na koniec należy tylko, korzystając z wbudowanego klienta FTP, opublikować gotową witrynę na wskazanym serwerze.

WebSite X5 w wersji Home wyposażony jest w bibliotekę 250 gotowych wzorców graficznych, które podzielono na szereg kategorii. Dzięki tym szablonom już na starcie otrzymujesz witrynę profesjonalnie zaprojektowaną pod względem graficznym. Zacznij od wyboru wzorca, a następnie stwórz nagłówek i stopkę.

W oknie powitalnym programu WebSite X5 kliknij przycisk Start, uruchamiając kreator tworzenia strony. W pierwszym kroku Wybór projektu zaznacz opcję Otwórz nowy projekt, nadaj mu nazwę, np. Pierwsza strona WWW, i kliknij Dalej.

W drugim kroku Ustawienia ogólne wypełnij pola formularza. Wpisz imię i nazwisko autora. Jeśli masz już zarejestrowaną domenę dla strony (np. w darmowym serwisie www.strefa.pl), wpisz adres twojej przyszłej strony w polu Adres URL witryny. Możesz również napisać krótki opis tworzonej strony, a także dodać jej ikonę. Gdy to zrobisz, kliknij przycisk Dalej.

W kolejnym etapie Wybór wzorca wybierz wzorzec graficzny. Kliknij Wzorzec gotowy. Dostępne szablony podzielono tematycznie – przewiń zawartość ekranu, aby obejrzeć miniatury szablonów. Aby znaleźć szablon pasujący do zawartości przyszłej strony, skorzystaj z rozwijanego menu Wszystkie kategorie. Pozwala ono wybrać szablony należące do jednej z kategorii oraz określić orientację menu nawigacyjnego.

Po zaznaczeniu miniatury wybranego szablonu kliknij OK. Wyświetli się okno informacyjne – zamknij je klikając OK. W kolejnym oknie wpisz dane logowania do serwisu WebSite X5 Answers i kliknij OK. Gdy wzorzec zostanie załadowany do programu, kliknij Dalej.

W tej części naszego artykułu pokazujemy, w jaki sposób dostosować wygląd poszczególnych elementów graficznych przyszłej witryny, tj. menu, nagłówka i stopki.

Na początek dostosuj wygląd czcionek obecnych na różnych elementach tj. przyciskach, odnośnikach i polach wskazówek. Kliknij Styl tekstu.

Wywołasz stronę o tej samej nazwie, uzyskując dostęp do opcji pozwalających dostosować styl graficzny tekstu witryny. Z rozwijanej listy wybierz jeden z elementów, np. Tytuł strony, a następnie w sekcji poniżej (Styl) określ takie parametry jak np. kolor tła, kolor tekstu i krój czcionki.

W sekcji Podgląd widocznej po prawej stronie na bieżąco możesz obserwować, jak zmienia się wygląd poszczególnych elementów strony. Gdy zakończysz już dostosowywanie wyglądu tekstu, kliknij przycisk OK. Powrócisz do okna Styl wzorca.

Kolejnym elementem, którego wygląd możesz zmodyfikować, jest menu główne. Kliknij ikonę Menu główne. Wywołasz stronę Styl menu głównego. Zawartość podzielona jest na dwie zakładki. W pierwszej (Ogólne) możesz zmienić wygląd paska menu.

W sekcji Styl dostosujesz szerokość menu, marginesy i odległości między przyciskami. Możesz też zaznaczyć opcję Pozwól na automatyczne przewijanie, która uaktywnia przewijanie menu.

Poniżej, w części Tekst, możesz zmienić krój czcionki menu oraz skorzystać z jednej z opcji wyrównywania. Możesz też zaznaczyć opcję Zastosuj wygładzanie tekstu, która poprawi jakość czcionek.

W drugiej zakładce (Elementy menu) możesz zmienić wygląd elementów nieaktywnych menu oraz wygląd elementu, który w danej chwili znajduje się pod kursorem myszki. Zmieniać można kolory tła, tekstu i krawędzi. Za pomocą pola Obraz tła, klikając przycisk Przeglądaj możesz wskazać własny obrazek z dysku, jaki będzie wyświetlany w tle menu. Na samym dole z listy możesz wybrać jeden ze stylów czcionki menu głównego, np. Wypukły.

Podczas modyfikacji menu cały czas widoczna jest sekcja Podgląd, w której na bieżąco możesz obserwować stosowane zmiany. Po zakończeniu kliknij przycisk OK, aby powrócić do okna Styl wzorca.

W kolejnym etapie zajmiesz się animowanym menu rozwijanym. Kliknij ikonę Menu rozwijane. Wywołasz kolejną stronę: Styl menu rozwijanego – ona również podzielona jest na dwie zakładki.

W zakładce Ogólne, w sekcji Styl, możesz dostosować typ menu (jedna lub kilka kolumn), jego szerokość oraz marginesy.

Poniżej, w sekcji Tekst, możesz zmienić krój czcionki menu oraz skorzystać z jednej z metod wyrównywania. Na samym dole, w sekcji Opcje, z rozwijanej listy wybierz jeden z dostępnych efektów animacji menu, np. Zanikanie.

W drugiej zakładce (Elementy menu) możesz zmienić wygląd elementów nieaktywnych menu oraz wygląd elementu, który aktualnie znajduje się pod kursorem myszki. Zmieniać można kolory tła, tekstu i krawędzi. Możesz też dodać własny obrazek w tle oraz własną ikonę punktora, klikając przycisk Przeglądaj. Po zakończeniu kliknij OK, aby powrócić do okna Styl wzorca.

Ostatnim elementem, którego wygląd możesz zmodyfikować, są wskazówki pod wskaźnikiem myszy. Kliknij ikonę Wskazówka pod wskaźnikiem myszy. Opcje tu umieszczone pozwalają dostosować styl graficzny wskazówki ekranowej wyświetlanej po najechaniu wskaźnikiem myszki na odnośnik lub pole formularza.

Możesz tu także określić pozycję wyświetlanej wskazówki, rodzaj efektu otwarcia i sformatować tekst. Obok widoczny jest podgląd, na którym widać, jak będzie się prezentowała wskazówka. Po zakończeniu kliknij przycisk OK, aby powrócić do okna Styl wzorca, kliknij przycisk Zapisz. Aby obejrzeć, jak prezentuje się witryna na obecnym etapie prac, kliknij przycisk Podgląd. Po sprawdzeniu, jak wygląda i działa witryna w aktualnej wersji, zamknij okno podglądu i w oknie Styl wzorca kliknij przycisk Dalej.

Ostatnimi elementami stałymi witryny, których wygląd możesz zaprojektować, są nagłówek i stopka. Na początku kliknij ikonę A, a pojawi się pole tekstowe z napisem Moja witryna.

Napis możesz zmienić wpisując w polu Treść własny tekst. Następnie należy dostosować krój czcionki, jej kolory i dodać efekty specjalne. Położenie napisu zmienisz przeciągając pole tekstowe za pomocą myszki.

W ten sam sposób możesz dodawać i formatować kolejne pola tekstowe. Za pomocą przycisku Obraz z pliku możesz wkleić własną grafikę.

Gdy zakończysz edycję nagłówka, kliknij zakładkę Stopka. Mając dostęp do identycznego zestawu narzędzi możesz dodać grafikę oraz tekst. Po zakończeniu kliknij OK, a następnie Dalej.

W kolejnym, bardzo ważnym etapie zdecydujesz, z ilu stron będzie się składała witryna – maksymalnie może ich być aż 25. Następnie dodasz ich nazwy do menu nawigacyjnego i ustalisz ich kolejność.

Domyślnie tworzona witryna składa się ze strony głównej oraz trzech podstron. Kliknij na nazwie Strona 1, następnie kliknij przycisk Zmień nazwę i wpisz tytuł, np. „Moje trasy”. Zatwierdź zmianę klawiszem ENTER.

Tak samo zmień tytuły pozostałych stron. Możesz tez dodać kolejne strony klikając przycisk Nowa strona i wpisując jej tytuł, np. Strona 4. Przyciskiem utworzysz nowe menu rozwijane, do którego będziesz mógł dodać kolejne odnośniki do stron.

Przyciski ze strzałkami skierowanymi w górę i w dół służą do zmiany kolejności elementów na liście. Możesz również usunąć stronę lub menu przyciskiem oraz zmienić właściwości wybranego elementu przyciskiem Właściwości.

Gdy zakończysz tworzenie mapy witryny, kliknij przycisk Zapisz, a następnie kliknij przycisk Podgląd, aby obejrzeć w oknie podglądu, jak prezentuje się witryna na tym etapie tworzenia. Gdy zakończysz, zamknij okno podglądu standardową ikoną X. Po powrocie do okna programu WebSite X5 wybierz jeden z elementów na liście, np. Wyścigi, czyli jedną z wcześniej skonfigurowanych stron. Gdy to zrobisz, przejdź do następnego etapu klikając przycisk Dalej.

Opisujemy kolejny ważny etap, jakim jest wypełnianie poszczególnych podstron treścią, grafiką oraz innymi elementami.

Wyświetla się okno tworzenia podstrony (w naszym przykładzie jest to wybrana w poprzedniej części podstrona „Wyścigi”). Każda z podstron podzielona jest na komórki uporządkowane w kolumnach i wierszach tabeli. Komórka może być wypełniona zawartością – tekstem, grafiką lub multimediami, tj. wideo, dźwiękiem czy animacjami flash. Możesz też wstawiać dodatkowe elementy, np. odnośniki do Facebooka czy Map Google oraz wiele innych. Każda ze stron witryny domyślnie podzielona jest na cztery komórki. Informacja, jaką stronę aktualnie edytujesz, wyświetla się nad komórkami.

Aby utworzyć więcej komórek, musisz wstawić wiersze i kolumny przyciskami powyżej tabeli. Obok nich dostępne są przyciski, które usuwają niepotrzebne wiersze i kolumny. Te same opcje dostępne są w menu kontekstowym, które jest przypisane do prawego klawisza myszki.

Po prawej stronie widoczne są ikony reprezentujące typy obiektów, które możesz dodać do każdej z komórek. Aby dodać do komórki np. obiekt tekstowy, kliknij na ikonie Tekst i, nie puszczając przycisku myszy, przeciągnij ją i upuść w obszar wybranej komórki. Zostanie ona oznaczona ikoną jako „tekstowa”. Jeśli chcesz, aby dany obiekt wypełniał dwie komórki, upuść jego ikonę na linii je łączącej. Komórki zostaną sklejone i przypisane do upuszczonego tam obiektu.

Aby zdefiniować zawartość wybranego obiektu, kliknij dwukrotnie na wypełnionej komórce, np. „tekstowej”. Wyświetli się sekcja Tekst. Wpisz tutaj tekst, jaki będzie wyświetlany w wybranym polu, i sformatuj go korzystając ze standardowego zestawu funkcji. Gdy zakończysz, kliknij przycisk OK.

W opisany wyżej sposób możesz dodawać inne obiekty – obrazki, animacje, filmy, dźwięk i inne elementy dostępne w postaci ikon. W trakcie edycji od czasu do czasu zapisuj postępy i korzystając z funkcji Podgląd oceniaj wyniki pracy i wprowadzaj potrzebne zmiany. Gdy zakończysz tworzenie pierwszej podstrony, w lewym menu kliknij element Tworzenie mapy. Wybierz kolejną podstronę do edycji, np. Moje trasy, i kliknij Dalej.

Przechodzisz do edycji kolejnej strony. W górnej części wyświetla się informacja o aktualnie edytowanej stronie. Postępując tak, jak opisaliśmy w krokach wyżej, zaprojektuj wszystkie pozostałe podstrony witryny.

Gdy zaprojektujesz wszystkie strony, kliknij przycisk Zapisz i zachowaj dotychczasową pracę na dysku. Jeszcze raz skorzystaj z opcji Podgląd i, jeśli wszystko działa poprawnie, przejdź do kolejnego etapu klikając w lewym menu element Ustawienia zaawansowane.

Korzystając z ustawień zaawansowanych możesz dać swojej witrynie ostatni szlif dodając takie elementy jak strona wstępna oraz reklama.

Pierwszym elementem zaawansowanym, jaki możesz dodać, jest strona wstępna, tj. plansza, która będzie wyświetlana przez określoną ilość sekund (lub do kliknięcia myszką) zanim otworzy się witryna. Kliknij ikonę Strona wstępna.

W wywołanym oknie za pomocą menu rozwijanego Rodzaj możesz określić, czy na stronie ma być wyświetlany obraz, animacja czy plik wideo. Po wskazaniu pliku, który będzie wyświetlany jako strona wstępna, dodatkowo możesz określić jego rozmiar.

W sekcji Tło strony ustalisz kolor tła lub ustawisz zamiast koloru grafikę z pliku. Dodatkowo możesz określić sposób wypełnienia tła obrazkiem oraz jego ustawienie na ekranie. Opcjonalnie możesz ustalić czas, po upływie którego strona wstępna zostanie automatycznie zamknięta i wyświetli się strona główna witryny. Gdy skonfigurujesz już wszystkie opcje, kliknij przycisk OK.

Drugim elementem w ustawieniach zaawansowanych jest tzw. reklama, czyli aktywny, animowany element graficzny w postaci ikony. Zostanie ona wyświetlona w prawym górnym narożniku witryny i posłuży jako odnośnik do innej strony, pliku lub innego elementu. Kliknij ikonę Reklama, na otwartej stronie zaznacz pole Pokaż reklamę. W sekcji Ustawienia za pomocą pola Plik obrazu możesz wskazać obrazek, który będzie automatycznie wyświetlany, gdy najedziesz kursorem myszki na ikonę reklamy.

Poniżej z listy Wyświetlanie wybierz jeden ze wzorów ikony reklamy. Jej wygląd widoczny jest na podglądzie po prawej stronie okna. W sekcji Opcje kliknij ikonę Hiperłącze przy polu Link i w otwartym oknie określ, do jakiego elementu prowadzić będzie reklama. Po wybraniu akcji kliknij OK.

Po powrocie do okna Reklama w ostatniej sekcji wybierz jeden z trybów wyświetlania. Gdy zakończysz, kliknij Zapisz i OK. Po powrocie do okna ustawień zaawansowanych kliknij Podgląd oraz sprawdź, czy witryna działa prawidłowo. Kliknij Dalej, by przejść do ostatniego etapu, czyli eksportu witryny na serwer FTP.

Doszedłeś do ostatniego etapu. Twoja witryna jest już gotowa i przetestowana, pora umieścić pliki na serwerze FTP i uruchomić witrynę.

Otwórz okno Eksport. Teraz należy wybrać jedną z opcji: Publikuj witrynę w Internecie – pliki witryny zostaną przesłane na serwer FTP, Eksportuj witrynę na dysk – pliki zostaną zapisane we wskazanym folderze na dysku lokalnym i będziesz je mógł przesłać na serwer korzystając z dowolnego klienta FTP, np. programu Total Commander. Ostatnia opcja: Eksport skompresowanego projektu zapisuje pliki w jednym folderu i optymalizuje wielkość użytych obrazków.

Jeśli masz już założone konto na stronę WWW np. w darmowym serwisie Interii www.strefa.pl, wybierz pierwszą opcję.

W kolejnym kroku etapu w sekcji Publikacja witryny w Internecie wypełnij dane niezbędne do zalogowania się na serwer FTP: Adres FTP, Nazwa użytkownika, Hasło (otrzymałeś je podczas rejestracji konta, np. w serwisie strefa.pl). Nie musisz modyfikować opcji w sekcjach Parametry opcjonalne i Opcje eksportu. Kliknij przycisk Dalej.

Wyświetli się nowa plansza etapu Publikacja witryny w Internecie. Kliknij przycisk Start. Wyświetli się okno z pytaniem, czy chcesz wyeksportować witrynę. Kliknij przycisk Tak. Pliki zostaną przesłane na serwer.

Po zakończeniu wyświetli się ostatnie okno: Eksport został zakończony. Dostępne tu opcje pozwalają uruchomić okno przeglądarki WWW i wyświetlić witrynę, wysłać witrynę do galerii projektów wykonanych programem WebSite X5 oraz pochwalić się efektami np. na Facebooku.