Zaistnieć w sieci

WebSite X5 jest narzędziem, które pomoże w urzeczywistnieniu marzeń o własnej witrynie internetowej. Wizualny edytor, w jaki został wyposażony program, jest gwarancją wyjątkowo prostego i wygodnego tworzenia stron internetowych. Wszystko, co trzeba zrobić, żeby stworzyć interesujący i przykuwający wzrok projekt, to przeciągnąć myszką na strony tekst, obrazy, wideo, dźwięki i animacje Flash.

Program zawiera 500 profesjonalnych, gotowych do wykorzystania szablonów witryn. Szablony podzielone są tematycznie – nie musisz znać się na tworzeniu grafiki, wystarczy wybrać odpowiedni szablon pasujący do twojego projektu.

Stworzony projekt można na bieżąco modyfikować. W dowolnej chwili możesz zmienić strukturę mapy witryny i dodawać nowe strony. Aplikacja umożliwia również uzupełnienie projektu aktualizowanym na bieżąco blogiem oraz regularne zamieszczanie na stronach najnowszych wiadomości. Pod ręką masz wbudowane edytory tekstu i zdjęć, narzędzia służące do tworzenia sekwencji Flash, importowania filmów z YouTube’a i wiele innych. Program automatycznie produkuje pliki z kodem strony, zapewniając ich pełną zgodność ze wszystkimi przeglądarkami i urządzeniami przenośnymi. Publikacja witryny odbywa się za pomocą prostego w obsłudze klienta FTP.

WebSite X5 wyposażony jest w 500 gotowych wzorców graficznych, które podzielono na szereg kategorii. Dzięki tym szablonom już na starcie dysponujesz profesjonalnie zaprojektowaną pod względem graficznym witryną. Oczywiście każdy z elementów możesz zmodyfikować lub zastąpić własnym.

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

W drugim kroku, ustawienia ogólne, wypełnij pola formularza. Wpisz imię i nazwisko autora, a jeśli masz już zarejestrowaną domenę dla strony, 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 wybierz wzorzec graficzny – dostępne szablony podzielono na kategorie tematycznie. Przewiń zawartość ekranu, aby obejrzeć miniatury szablonów – możesz je powiększyć, klikając ikonę zaznaczoną na poniższym obrazku. Aby znaleźć szablon pasujący do zawartości przyszłej strony, możesz skorzystać z rozwijanego menu. Pozwala ono wybrać szablony należące do jednej z kategorii oraz wybrać orientację menu nawigacyjnego (pionową lub poziomą).

Po zaznaczeniu miniatury wybranego szablonu kliknij Dalej. Wzorzec zostanie załadowany do programu, a ty przejdziesz do projektowania nagłówka i stopki.

W tej części naszego artykułu tłumaczymy, jak dostosować wygląd głównych elementów graficznych przyszłej witryny, jakimi są jej nagłówek i stopka.

Aktualnie jesteś na etapie projektowania wyglądu nagłówka i stopki. Zmaksymalizuj okno programu – edycja będzie o wiele wygodniejsza. Na początek kliknij ikonę A, a pojawi się pole tekstowe z napisem Moja witryna.

Napis ten zmienisz, wpisując w polu Treść własny tekst. Następnie możesz dostosować krój czcionki, np. Tahoma, i jej kolor. Sekcja Efekty pozwoli ci 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ą dwóch kolejnych przycisków możesz wkleić własną grafikę lub serię zdjęć, tworząc pokaz slajdów.

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 sformatować. Na szarej belce pod polem podglądu widoczne są wymiary aktualnie edytowanego elementu graficznego.

Pliki graficzne zawierające nagłówek i stopkę umieszczone są domyślnie w katalogu C:\Użytkownicy\Nazwa_użytkownika\Dokumenty\Incomedia\WebSite X5 v10 – Compact\Nazwa_projektu\Preview\Style\ i możesz je edytować za pomocą dowolnej aplikacji zewnętrznej. Po zakończeniu edycji kliknij przycisk Dalej.

Podczas kolejnego etapu możesz zdecydować, z ilu stron będzie się składała witryna.

Domyślnie tworzona witryna składa się ze strony głównej oraz trzech podstron. Kliknij nazwę Strona 1, następnie naciśnij Zmień nazwę i wpisz tytuł strony, np. „Powidła domowe”. Zatwierdź zmianę klawiszem Enter.

W ten sam sposób zmień tytuły pozostałych stron. Możesz tez dodać kolejną stronę, klikając przycisk Nowa strona i wpisując jej tytuł. Za pomocą przycisku Nowy poziom utworzysz nowe menu rozwijane, w którym będziesz mógł umieścić kolejne odnośniki do stron.

Przyciski ze strzałkami 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, klikając Właściwości.

Gdy zakończysz tworzenie mapy witryny, kliknij przycisk Zapisz a następnie naciśnij Podgląd, aby obejrzeć w oknie podglądu, jak prezentuje się witryna na tym etapie produkcji.

Gdy zakończysz pracę, zamknij okno podglądu, klikając X. Po powrocie do okna programu WebSite X5 wybierz jeden z elementów na liście, i kliknij Dalej.

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

Wyświetla się okno tworzenia podstrony (w naszym przykładzie (1) to wybrana w poprzedniej części tekstu strona Powidła domowe). Każda z podstron podzielona jest na komórki tworzące kolumny i wiersze tabeli (2). Komórka może być wypełniona zawartością – tekstem, grafiką lub multimediami, tj. wideo, dźwiękiem czy animacjami Flash. Możesz tez wstawiać inne obiekty, tj. odnośniki do Facebooka czy map Google oraz pozostałe dostępne elementy (3). Każda ze stron witryny domyślnie podzielona jest na cztery komórki. Informacja, którą stronę aktualnie edytujesz, wyświetla się nad komórkami – Bieżąca strona (1).

Aby utworzyć więcej komórek, musisz wstawić wiersze i kolumny. Przyciski powyżej tabeli pozwalają wstawiać kolumny i wiersze. Obok nich dostępne są przyciski służące do usuwania niepotrzebnych elementów. Opcje te dostępne są też w menu kontekstowym – kliknij prawym klawiszem Wstaw/usuń wiersz lub kolumnę.

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 ikonę Tekst i, nie puszczając przycisku myszy, przeciągnij ją i upuść na obszar komórki. Zostanie ona oznaczona ikoną jako „tekstowa”. Jeśli chcesz, aby dany obiekt przypisać do dwóch komórek, upuść jego ikonę na linii je łączącej. Komórki zostaną sklejone i odpowiednio oznaczone, np.:

Aby zdefiniować zawartość wybranego obiektu, kliknij dwukrotnie wypełnioną komórkę, np. „tekstową”. Wyświetli się sekcja Tekst, wpisz tutaj słowa, które będą wyświetlane w wybranym polu i sformatuj tekst, korzystając ze standardowego zestawu funkcji. Gdy wprowadzisz zmiany, kliknij przycisk OK.

W opisany wyżej sposób możesz dodawać inne obiekty – obrazki, animacje, filmy, dźwięki i inne elementy widoczne w postaci ikon. W trakcie edycji od czasu do czasu zapisuj pracę i, korzystając z funkcji Podgląd, oceniaj wyniki pracy, po czym wprowadzaj korekty. Gdy zakończysz tworzenie pierwszej podstrony, kliknij widoczny z lewej element Planowanie witryny, wybierz kolejną podstronę do edycji, i kliknij Dalej.

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

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

Korzystając z ustawień zaawansowanych, możesz nadać swojej witrynie ostateczny szlif. Zmodyfikuj wygląd menu, zmień styl graficzny, dodaj do swojej witryny blog tekstowy.

Pierwszym elementem, którego wygląd możesz zmodyfikować, jest menu. Kliknij ikonę Menu główne. Wywołasz wtedy stronę Styl menu głównego, której zawartość podzielona jest na trzy 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. Zaznacz opcję Pozwól na automatyczne przewijanie, która uaktywnia przewijanie menu.

Poniżej, w sekcji Tekst, możesz zmienić krój czcionki użytej w menu oraz wybrać rodzaj wyrównywania tekstu. Możesz też zaznaczyć opcję Zastosuj wygładzanie tekstu, co spowoduje poprawienie wyglądu użytych czcionek.

W drugiej zakładce, 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 możesz wybrać własny obrazek z dysku, który będzie służył za tło menu – kliknij ikonę z symbolem folderu. Na samym dole możesz wybrać z listy jeden ze stylów czcionki menu głównego.

W ostatniej z zakładek, Trójwymiarowe, możesz zmodyfikować elementy trójwymiarowe menu, tj. kształty, zaokrąglenia, krawędzie itp.

Modyfikując wygląd menu, cały czas widoczna jest sekcja Podgląd, w której na bieżąco obserwować możesz nanoszenie zmian. Na koniec kliknij przycisk OK, aby powrócić do okna ustawień zaawansowanych.

Teraz należy zająć się animowanym menu rozwijanym. Kliknij ikonę Menu rozwijane. Wywołasz w ten sposób stronę Styl menu rozwijanego. Tu także zawartość podzielona jest na trzy zakładki.

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

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

W drugiej zakładce, 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.

W ostatniej z zakładek, Trójwymiarowe, możesz zmodyfikować elementy trójwymiarowe menu. Po zakończeniu pracy kliknij przycisk OK, aby powrócić do okna ustawień zaawansowanych.

Kolejny etap budowania witryny polega na dostosowaniu wyglądu czcionek obecnych na różnych elementach, tj. przyciskach, odnośnikach i polach wskazówek. Kliknij ikonę Style i modele.

Wywołasz stronę o tej samej nazwie. Znajdują się tu opcje pozwalające zmodyfikować styl graficzny tekstu na twojej witrynie. Z rozwijanej listy Element strony wybierz jeden z elementów, a następnie w sekcji poniżej Styl określ takie parametry jak kolor tła, kolor tekstu i krój czcionki.

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

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

Możesz tu wybrać pozycję wyświetlania wskazówki, rodzaj efektu otwarcia i formatowanie tekstu. Następnie kliknij przycisk OK, aby powrócić do okna ustawień zaawansowanych.

Kliknij przycisk Zapisz, a następnie naciśnij Podgląd, aby obejrzeć, jak prezentuje się witryna. Zamknij okno podglądu, po czym kliknij przycisk Dalej.

Dotarłeś do ostatniego etapu – witryna jest już gotowa i przetestowana. Pora umieścić pliki na serwerze FTP i pokazać stronę światu.

Jesteś w oknie Eksport, gdzie 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. Ostatnia opcja, Eksport skompresowanego projektu, służy do zapisania plików w jednym folderze i pozwala zoptymalizować wielkość użytych obrazków.

Jeśli masz już zarezerwowaną domenę i zarejestrowane konto dające dostęp do powierzchni na serwerze, na którym umieścisz pliki strony WWW – wybierz pierwszą opcję Publikuj witrynę w internecie.

W kroku Publikacja witryny w internecie, w sekcji Profil sekcji, podaj dane niezbędne do zalogowania się na serwerze FTP. Nie musisz modyfikować opcji w sekcjach Parametry opcjonalne i Opcje eksportu. Kliknij przycisk Dalej.

Wyświetli się kolejna plansza, Publikacja witryny w internecie. Kliknij przycisk Start, a zobaczysz okno z pytaniem, czy chcesz wyeksportować witrynę. Kliknij przycisk Tak, pliki zostaną przesłane na serwer.

Następnie wyświetli się ostatnie okno – Eksport został zakończony. Dostępne tu opcje pozwalają uruchomić okno przeglądarki WWW i wyświetlić witrynę, przesłać witrynę do galerii projektów wykonanych w programie WebSite X5, pochwalić się efektami pracy rodzinie i znajomym na Facebooku i Twitterze.