Pięć kroków do WWW

WebSite X5 pozwoli każdemu, nawet początkującemu użytkownikowi przygotować w pięciu krokach własną stronę WWW. Korzystanie z tej aplikacji nie wymaga żadnej wiedzy programistycznej. Do dyspozycji otrzymujesz wizualny edytor całkowicie po polsku. Obsługując go za pomocą myszy, możesz utworzyć pełną strukturę strony, menu nawigacyjne, dodawać obiekty, tj. tekst, obrazki, pliki audio i wideo oraz animacje. Tworząc stronę, nie musisz się znać na projektowaniu grafiki. Program wyposażono w zestaw 250 nowych, profesjonalnie przygotowanych szablonów podzielonych tematycznie. Podczas projektowania WebSite X5 automatycznie kopiuje pliki przyłączone do projektu, dzięki czemu szybciej przebiegają operacje wyodrębniania z niego plików, tworzenia kopii zapasowej oraz importu i eksportu.

Interfejs programu jest intuicyjny i w każdej chwili możesz sprawdzić efekt swojej pracy, wyświetlając na bieżąco aktualizowany podgląd. Wbudowana przeglądarka wykorzystuje silnik Chromium, jest on instalowany na komputerze i pracuje w trybie wielowątkowym. Program WebSite X5 jest ładowany dynamicznie, dzięki czemu uruchamia się szybciej i zajmuje mniej pamięci. Gdy całość jest już gotowa, moduł FTP wysyła pliki na serwer, i już po chwili możesz się pochwalić się swoją stroną WWW.

Website X5 w wersji Home jest wyposażony w bibliotekę 250 efektownych, gotowych do wykorzystania wzorców graficznych, które podzielono na kategorie: sport, religia, natura, sklep, motoryzacja, sztuka, uroda itp. Dzięki tym szablonom już na starcie masz profesjonalnie zaprojektowaną witrynę. A zatem czas zabrać się do pracy! Na początku zdecyduj, który z szablonów będzie najlepiej pasował do treści witryny, i dostosuj wygląd stałych elementów, czyli nagłówka i stopki. Gdy to zrobisz, starannie rozplanuj strukturę witryny i połącz strony za pomocą nawigacji. Gdy będziesz miał to gotowe, zacznij dzielić obszary stron i wypełniać je obiektami.

Na pierwszym etapie tworzenia strony należy wybrać szablon graficzny, zmienić wygląd nagłówka i stopki. Aby to wykonać, postępuj zgodnie z naszym opisem.

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 projektowi nazwę, np. Prywatna strona WWW i kliknij Dalej.

W drugim kroku – Ustawienia ogólne – należy wypełnić pola formularza. Jeśli masz już zarejestrowaną domenę dla strony, wpisz te informacje w pole Adres URL witryny. W pole Słowa kluczowe wpisz jak najwięcej oddzielonych przecinkami słów związanych z treścią twojej strony. Możesz również napisać krótki opis tworzonej strony i wpisać imię i nazwisko autora. Gdy to zrobisz, kliknij przycisk Dalej.

Na kolejnym etapie należy wybrać szablon graficzny. Dostępne tu szablony podzielono tematycznie. Przewiń zawartość ekranu, aby obejrzeć miniatury szablonów. Aby znaleźć szablon pasujący do zawartości przyszłej strony, skorzystaj też z rozwijanego menu Wszystkie kategorie. Pozwala ono wybrać szablony należące do jednej z kategorii oraz wybrać położenie (pionowe lub poziome) menu nawigacyjnego. Po zaznaczeniu miniatury wybranego szablonu kliknij Dalej.

Przechodzimy do edycji tekstu na elementach statycznych strony, czyli na nagłówku i na stopce. Na początek kliknij ikonę Wstaw tekst. Pojawi się pole tekstowe z napisem Moja witryna. Napis ten 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 Wstaw obraz możesz wkleić własną grafikę ze wskazanego pliku.

Gdy zakończysz edycję nagłówka, kliknij zakładkę Stopka. Mając dostęp do identycznego zestawu narzędzi, możesz tam dodać grafikę, pola tekstowe oraz odpowiednio je formatować. Po zakończeniu edycji kliknij przycisk Zapisz, a następnie kliknij przycisk Dalej.

Na tym etapie zadecydujesz, z ilu podstron będzie się składała witryna, dodasz ich nazwy do menu nawigacyjnego i określisz ich kolejność.

Początkowo 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ł podstrony, np. Moje bryki. Zatwierdź zmianę klawiszem [Enter].

Tak samo zmień tytuły pozostałych podstron. Możesz też dodać kolejne podstrony, klikając za każdym razem przycisk Nowa strona i wpisując tytuł strony. Przyciskiem Nowy poziom utworzysz nowe menu rozwijane, do którego będziesz mógł dodać kolejne odnośniki do podstron.

Przyciski ze strzałkami służą do zmiany kolejności elementów na liście. Możesz również usunąć zbyteczny element przyciskiem Usuń oraz zmienić jego właściwości przyciskiem Właściwości.

Gdy zakończysz tworzenie mapy witryny, kliknij przycisk Zapisz, a następnie kliknij przycisk Podgląd, aby obejrzeć, jak prezentuje się witryna na tym etapie produkcji. Gdy zakończysz, zamknij okno podglądu standardową ikoną i po powrocie do okna programu Website X5 kliknij przycisk Dalej.

Przechodzimy do najważniejszego etapu, tj. wypełniania poszczególnych podstron treścią, grafiką oraz innymi elementami.

Każda z podstron jest podzielona na komórki uporządkowane w kolumnach i wierszach tabeli. Komórka może być wypełniona zawartością – tekstem, grafiką lub multimediami, tj. materiałem wideo, dźwiękiem czy animacją. Każda z podstron witryny jest domyślnie podzielona na cztery komórki.

Aby utworzyć więcej komórek, musisz wstawić wiersze i kolumny przyciskami rozwijającymi menu: Powyżej tabeli możesz wstawiać kolumny i wiersze. Obok nich dostępne są przyciski Usuń… usuwające niepotrzebne wiersze i kolumny. Te same opcje dostępne są w menu kontekstowym 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 łączącą je linię. Komórki zostaną sklejone i wypełnione upuszczonym tam obiektem, tak jak to widać na obrazku powyżej.

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 już sposób możesz dodawać inne obiekty – obrazki, animacje, filmy i dźwięk. W trakcie edycji od czasu do czasu zapisuj pracę i korzystając z funkcji Podgląd, oceniaj wyniki pracy i wprowadzaj korekty. Gdy zakończysz tworzenie pierwszej strony, kliknij przycisk Dalej. Postępując jak w poprzednich krokach, zaprojektuj wszystkie pozostałe podstrony. Przejdź do kolejnego etapu, klikając Dalej.

Masz już gotową strukturę witryny z działającym menu nawigacyjnym i podstronami wypełnionymi treścią. Teraz pora dostosować funkcje zaawansowane, dzięki którym witryna nabierze profesjonalnego wyglądu. Zacznij od dopracowania wyglądu menu głównego, następnie zajmij się animowanym menu rozwijanym. Po uporaniu się z wyglądem nawigacji dostosuj za pomocą stylów graficznych wygląd takich elementów, jak czcionki na przyciskach, odnośnikach i polach, krawędzie i wskazówki ekranowe. Potem zostanie już tylko wysłanie gotowych plików witryny na dowolny serwer za pośrednictwem wbudowanego mechanizmu FTP.

Nadszedł czas na „dopieszczanie” wyglądu i funkcjonowania witryny. Zajmiesz się teraz menu nawigacyjnym i zdefiniujesz style graficzne.

Na stronie Ustawienia zaawansowane kliknij ikonę Menu główne. Wywołasz stronę Styl menu głównego. Zawartość jest podzielona na dwie zakładki. Pod pierwszą Ogólne możesz zmienić wygląd paska menu.

W sekcji Styl dostosujesz szerokość menu, marginesy i odległości między przyciskami. Poniżej, w sekcji 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.

Pod drugą zakładką, Elementy menu, możesz zmienić wygląd elementów nieaktywnych menu oraz wygląd elementu, który jest aktualnie pod kursorem myszki. Zmieniać można kolory tła, tekstu i krawędzi.

Z rozwijanej listy Obraz tła możesz wybrać jeden z szablonów obrazka, jaki będzie się wyświetlał pod elementami menu, gdy naprowadzisz na nie kursor myszki. Jeśli żaden z szablonów ci nie odpowiada, za pośrednictwem przycisku Przeglądaj możesz wskazać własny element graficzny zapisany na dysku.

Na samym dole możesz wybrać z listy jeden ze stylów czcionki menu głównego. Modyfikując wygląd menu, cały czas widzisz sekcję Podgląd, w której możesz obserwować zastosowane zmiany. Po zakończeniu kliknij OK, aby powrócić na stronę Ustawienia zaawansowane.

Na stronie ustawień zaawansowanych kliknij ikonę Menu rozwijane. Wywołasz stronę Styl menu rozwijanego. Także tu zawartość jest podzielona na dwie zakładki.

Pod pierwszą zakładką Ogólne, w sekcji Styl możesz dostosować typ menu (jedna lub kilka kolumn), szerokość menu oraz marginesy:

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

Pod drugą zakładką, Elementy menu, możesz zmienić wygląd elementów nieaktywnych menu oraz wygląd elementu, który jest aktualnie 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.

Modyfikując wygląd menu, cały czas widzisz sekcję Podgląd, w której możesz na bieżąco obserwować zastosowane zmiany. Po zakończeniu kliknij przycisk OK, aby powrócić na stronę Ustawienia zaawansowane.

Na stronie Ustawienia zaawansowane kliknij ikonę Style i modele. Wywołasz stronę o tej samej nazwie. Zawartość jest tradycyjnie podzielona na dwie zakładki: Tekst i Wskazówka ekranowa.

Pod pierwszą zakładką masz dostęp do opcji pozwalających dostosować styl graficzny tekstu witryny. Z rozwijanej listy wybierz jeden z elementów strony, a następnie w sekcji Styl poniżej określ takie parametry, jak np. kolor tła, kolor tekstu, krój czcionki itp.

W sekcji Podgląd, widocznej po prawej stronie, możesz na bieżąco obserwować, jak zmienia się wygląd poszczególnych elementów strony.

Kliknij zakładkę Wskazówka ekranowa. Zgromadzone tu opcje pozwalają dostosować styl graficzny wskazówki ekranowej wyświetlanej po naprowadzeniu wskaźnika myszki na odnośnik lub pole formularza. Możesz tu określić pozycję wyświetlanej wskazówki, rodzaj efektu otwarcia, sformatować tekst oraz określić kolor i grubość krawędzi.

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ć na stronę ustawień zaawansowanych. Kliknij Zapisz, a potem kliknij przycisk Podgląd, aby obejrzeć, jak prezentuje się gotowa witryna. Następnie kliknij Dalej.

Twoja witryna jest już gotowa i przetestowana. Pora umieścić pliki na serwerze FTP i uruchomić stronę.

W oknie Eksport wybierz jedną z opcji. Po wybraniu Publikuj witrynę w Internecie pliki witryny zostaną przesłane na serwer FTP. Opcja Eksportuj witrynę na dysk zapisuje pliki do wskazanego folderu na dysku lokalnym i będziesz mógł je przesłać na serwer, korzystając z dowolnego klienta FTP, np. programu Total Commander. Opcja Eksport skompresowanego projektu zapisuje pliki do jednego 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, zaznacz pierwszą opcję i kliknij przycisk Dalej.

W oknie Publikacja witryny w Internecie, w sekcji Profil sesji wypełnij dane niezbędne do zalogowania się na serwer FTP (otrzymałeś je podczas rejestracji konta). Nie musisz modyfikować opcji w sekcji Parametry opcjonalne. Kliknij przycisk Dalej.

Wyświetli się kolejna plansza. Kliknij przycisk Start. Wyświetli się okno z pytaniem, czy chcesz wyeksportować witrynę. Kliknij przycisk OK. Pliki zostaną przesłane na serwer. Wyświetli się ostatnie okno informujące o pomyślnym przesłaniu plików. Zamknij je, klikając OK. Teraz otwórz okno przeglądarki WWW, wpisz adres swojej strony i sprawdź, jak działa.