Witryna w 5 krokach

Website X5 Compact 9 pomoże każdemu urzeczywistnić jego marzenia o własnej, samodzielnie przygotowanej witrynie internetowej. Tworzenie i publikowanie witryn internetowych za pomocą tej aplikacji jest naprawdę łatwe. Nie trzeba się uczyć ani korzystać z kodowania HTML. Proces budowania i publikowania witryny odbywa się w 5 krokach, przez które prowadzi intuicyjny graficzny interfejs użytkownika. Program udostępnia 500 wzorcowych szablonów, gotowych do wykorzystania, dzięki którym bez umiejętności tworzenia grafiki nadasz swojej witrynie profesjonalny wygląd. Możesz też zmienić strukturę mapy witryny i dodać do niej nowe strony, następnie wypełnisz je tekstem, obrazami, klipami wideo, dźwiękami i animacjami flash.

W WebSite X5 Compact 9 masz pod ręką dodatkowe narzędzia: edytor tekstu, edytor zdjęć, funkcje do tworzenia galerii flash oraz obsługę importu wideo z YouTube. Możesz uzupełnić swój projekt, tworząc blog, który będziesz mógł w każdej chwili modyfikować i aktualizować oraz regularnie zamieszczać w nim nowe treści.

WebSite X5 Compact 9 automatycznie generuje kod stron, zapewniając ich pełną zgodność ze wszystkimi przeglądarkami i urządzeniami przenośnymi. Gdy projekt witryny będzie już gotowy, opublikujesz ją za pomocą wbudowanego w program mechanizmu FTP, a potem również bezpośrednio z programu będziesz mógł powiadomić o twojej nowej stronie znajomych z Facebooka lub Twittera.

• Ponad 500 profesjonalnych wzorców graficznych do wyboru
• Edytor zdjęć do obróbki grafiki
• Możliwość tworzenia galerii obrazów
• Importowanie wideo (także z YouTube), dźwięków i animacji flash
• Możliwość tworzenia blogów z udostępnianiem audio i wideo (podcast i videocast)
• Edytor do tworzenia przycisków
• Mechanizm FTP do publikowania witryn

Website X5 w wersji Compact jest wyposażony w bibliotekę 500 gotowych wzorców graficznych, które podzielono na szereg kategorii. Dzięki tym szablonom już na starcie masz witrynę profesjonalnie zaprojektowaną pod względem graficznym. Zaczniemy od wyboru wzorca, następnie utworzymy 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 projektowi nazwę 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, a w pole Słowa kluczowe wpisz jak najwięcej słów związanych z treścią twojej strony. Możesz również napisać krótki opis tworzonej strony, wpisać imię i nazwisko autora, a także dodać ikonę. Gdy to zrobisz, kliknij przycisk Dalej.

W 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. Pozwala ono wybrać szablony należące do jednej z kategorii oraz wybrać uł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 poniżej 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.

W kolejnym etapie zdecydujemy, z ilu stron będzie się składała witryna. Następnie dodamy ich nazwy do menu nawigacyjnego i ustalimy ich kolejność.

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

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

Przyciski 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 Zapisz, a następnie kliknij przycisk Podgląd, aby obejrzeć w oknie podglądu, jak prezentuje się witryna na tym etapie produkcji. Gdy zakończysz, zamknij okno podglądu standardową ikoną X i po powrocie do okna programu Website X5 kliknij przycisk Dalej.

Przechodzimy do ważnego etapu, jakim jest wypełnianie poszczególnych stron treścią, grafiką oraz innymi elementami.

Każda ze stron 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. wideo, dźwiękiem czy animacjami flash. Każda ze stron witryny jest domyślnie podzielona na cztery komórki. Informacja, jaką stronę aktualnie edytujesz, wyświetla się nad komórkami, np.:

Aby utworzyć więcej komórek, musisz wstawić wiersze i kolumny. Przyciskami (1) powyżej tabeli możesz wstawiać kolumny i wiersze. Obok nich dostępne są przyciski (2) 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ącej je linii. Komórki zostaną sklejone oraz wypełnione upuszczonym tam obiektem.

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 i dźwięk. W trakcie edycji zapisuj od czasu do czasu pracę i korzystając z funkcji podglądu, oceniaj wyniki pracy i wprowadzaj korekty. Gdy zakończysz tworzenie pierwszej strony, kliknij przycisk 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 poprzednich krokach, zaprojektuj wszystkie pozostałe strony witryny.

Gdy zaprojektujesz wszystkie strony, kliknij przycisk Zapisz i zachowaj dotychczasową pracę na dysku. Jeszcze raz skorzystaj z opcji Podgląd i gdy się przekonasz, że wszystko działa poprawnie, przejdź do kolejnego etapu, klikając przycisk Dalej.

Na tym etapie mamy już gotową strukturę witryny z działającym menu nawigacyjnym i stronami wypełnionymi treścią. W tej części naszego artykułu zajmiemy się dostosowaniem funkcji zaawansowanych, dzięki którym nasza witryna nabierze profesjonalnego, wyjątkowego wyglądu.

Po zaprojektowaniu ostatniej strony (patrz poprzedni warsztat) wyświetli się plansza Ustawienia zaawansowane. Na początek zajmiemy się dopracowaniem wyglądu menu głównego. Kliknij ikonę Menu główne. Wywołasz stronę Styl menu głównego. Zawartość jest podzielona na trzy 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 również zaznaczyć opcję Zastosuj wygładzanie tekstu, która poprawi jakość czcionek, oraz opcję Pozwól na automatyczne przewijanie, która uaktywnia przewijanie 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. Za pomocą pola Obraz tła, klikając przycisk z symbolem folderu, możesz wskazać własny obrazek z dysku, jaki będzie wyświetlany w tle menu. Na samym dole możesz wybrać z listy jeden ze stylów czcionki menu głównego.

Ostatnia z zakładek – Trójwymiarowe – umożliwia dodanie do „płaskiego” menu efektów 3D: zmiany kształtu, formatu i krawędzi 3D. Podczas modyfikowania wyglądu menu jest cały czas widoczna sekcja Podgląd, w której możesz na bieżąco obserwować zastosowane zmiany. Po zakończeniu kliknij przycisk OK, aby powrócić na planszę Ustawienia zaawansowane.

Na kolejnym etapie zajmiemy się animowanym menu rozwijanym. Na planszy Ustawienia zaawansowane kliknij ikonę Menu główne. Wywołasz stronę Styl menu rozwijanego. Także tu zawartość jest podzielona na trzy 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.

Ostatnia z zakładek – Trójwymiarowe – umożliwia dodanie do menu efektów 3D: zmiany kształtu, formatu i krawędzi 3D. Po zakończeniu kliknij przycisk OK, aby powrócić na planszę Ustawienia zaawansowane.

Po uporaniu się z wyglądem nawigacji dostosujemy za pomocą stylów graficznych wygląd innych elementów witryny: czcionek na przyciskach, odnośnikach i polach, krawędzi i wskazówek. Na planszy Ustawienia zaawansowane kliknij ikonę Style i modele. Wywołasz stronę o tej samej nazwie. Zawartość jest 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 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, 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 planszę Ustawienia zaawansowane. Kliknij przycisk Zapisz, a następnie kliknij przycisk Podgląd, aby obejrzeć, jak prezentuje się gotowa witryna. Następnie kliknij przycisk Dalej.

Jak opublikować gotową witrynę w internecie

Jesteśmy w oknie 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 do wskazanego folderu 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 – Eksportuj projekt – 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 opcję Publikuj witrynę w Internecie i kliknij przycisk Dalej.

W kolejnym kroku: 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, a na następnej planszy 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ę plansza Eksport został zakończony. Dostępne tu opcje pozwalają: uruchomić okno przeglądarki WWW i załadować witrynę, wysłać witrynę do galerii projektów wykonanych programem Website X5 oraz pochwalić się efektami pracy znajomym na Facebooku lub Twitterze.