Zostań webmasterem

Gdy zapragniesz uruchomić internetowego bloga czy zbudować witrynę swojej firmy, sięgnij po pełną wersję programu WebSite X5 Compact z naszej płyty. W aplikacji znajdziesz ponad 500 profesjonalnie wyglądających szablonów graficznych podzielonych na kategorie tematyczne, a każdy z nich możesz dowolnie modyfikować. Gdy już wybierzesz właściwy wzorzec, będziesz mógł wstawić poszczególne strony, a następnie umieścić tam teksty, obrazy, wideo, dźwięki i animacje Flash. Kiedy w przyszłości dodasz do witryny nową stronę, automatycznie zaktualizowane zostanie menu nawigacyjne. Projekt możesz uzupełnić na bieżąco aktualizowanym blogiem oraz regularnie zamieszczanymi na stronie wiadomościami. Program WebSite X5 Compact 11 generuje kod stron spełniający najnowsze standardy, dzięki czemu twoja witryna będzie w pełni zgodna ze wszystkimi przeglądarkami na pecetach i urządzeniach przenośnych.

W programie WebSite X5 czeka na ciebie 500 gotowych wzorców graficznych, które podzielono na szereg kategorii. Dzięki nim twoja witryna będzie miała profesjonalny wygląd.

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, wypełnij pola formularza. Gdy to zrobisz, naciśnij przycisk Dalej.

W kolejnym etapie, Wybór wzorca, wybierz szablon graficzny, klikając Wzorzec gotowy. Dostępne wzorce zostały podzielone 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, skorzystaj z rozwijanego menu. Pozwala ono zawęzić wybór do szablonów należących do jednej kategorii oraz wybrać orientację menu nawigacyjnego (pionową lub poziomą). Po zaznaczeniu miniatury wybranego szablonu kliknij OK.

W wyświetlonym oknie kliknij OK, a następnie zaloguj się do strony Answers.WebsiteX5.com. Wzorzec zostanie załadowany. Kliknij przycisk Dalej.

Kolejny etap budowania witryny polega na dostosowaniu wyglądu czcionek wykorzystywanych na różnych jej elementach, tj. przyciskach, odnośnikach i wskazówkach. Kliknij Styl tekstu.

Wywołasz stronę, na której masz dostęp do opcji pozwalających dostosować styl graficzny tekstu. Z rozwijanej listy wybierz jeden z elementów, np. Abc Tytuł strony, a następnie w sekcji Styl dopasuj parametry takie jak kolor tła i tekstu czy krój czcionki.

W sekcji Podgląd widocznej po prawej stronie możesz na bieżąco obserwować, jak zmienia się wygląd poszczególnych elementów strony. Gdy zakończysz wprowadzanie zmian, kliknij OK.

Kolejnym elementem, którego wygląd możesz zmodyfikować, jest menu główne. Kliknij ikonę Menu główne, a wywołasz stronę: Styl menu głównego. Jej 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. Poniżej, w sekcji Tekst, możesz zmienić krój czcionki menu oraz dobrać sposób wyrównywania tekstu. Możesz też zaznaczyć opcję Zastosuj wygładzanie tekstu, dzięki czemu tekst będzie lepiej wyglądał.

W drugiej zakładce, Elementy menu, możesz zmienić wygląd nieaktywnych elementów menu oraz wygląd obiektu, który jest w danym momencie pod kursorem myszki. Zmodyfikujesz tu kolory tła, tekstu i krawędzi. W sekcji Obraz tła kliknij ikonę z symbolem folderu, aby wskazać na dysku własny obrazek – będzie on wyświetlany jako tło menu. Na samym dole możesz wybrać z listy jeden ze stylów czcionki menu głównego.

Ostatnia zakładka, Trójwymiarowe, pozwala ci modyfikować elementy trójwymiarowe menu, tj. kształty, zaokrąglenia, krawędzie itp.Podczas modyfikowania wyglądu menu cały czas widoczna będzie sekcja Podgląd, w której na bieżąco pojawiać się będą nanoszone zmiany. Gdy skończysz, naciśnij OK, aby powrócić do okna głównego.

Następny etap polega na edycji animowanego menu rozwijanego. Kliknij ikonę Menu rozwijane, a wywołasz stronę: Styl menu rozwijanego. Jej zawartość także podzielona jest na trzy zakładki. W zakładce Ogólne, w sekcji Styl, można dostosować typ menu (wybrać jedną lub kilka kolumn), szerokość menu i styl marginesów.

Poniżej, w sekcji Tekst, zmienisz krój czcionki widocznej w menu oraz ustawisz jeden ze sposobów wyrównywania tekstu. Na samym dole, w sekcji Opcje, wybierz z rozwijanej listy typ animacji menu.

W drugiej zakładce, Elementy menu, możesz zmienić wygląd elementów nieaktywnych menu oraz elementu, który znajduje się pod kursorem myszki, np. kolor tła, tekstu i krawędzi. Możesz też dodać własny obrazek w tle oraz dobrać inny rodzaj punktora.

W ostatniej z zakładek, Trójwymiarowe, możesz zmodyfikować elementy trójwymiarowe menu. Po wprowadzeniu wszystkich zmian kliknij przycisk OK, aby powrócić do okna głównego.

Następnym elementem, którego wygląd możesz zmienić, są wskazówki wyświetlane pod wskaźnikiem myszy – kliknij ikonę Wskazówka pod wskaźnikiem myszy. Zebrane w oknie opcje pozwalają dostosować styl graficzny wskazówki ekranowej wyświetlanej po najechaniu kursorem na odnośnik lub pole formularza.

Możesz wybrać pozycję wyświetlanej wskazówki, rodzaj efektu otwarcia i sformatować tekst. Obok widoczny jest podgląd. Widać na nim, jak będą się prezentowały wskazówki wyświetlane na twojej stronie. Po wprowadzeniu zmian kliknij OK, aby powrócić do okna głównego.

Ostatnim elementem podlegającym modyfikacji jest Okno podręczne - Pole pokazu, czyli okno, w którym wyświetlane są np. pokazy slajdów lub wideo. Możesz tu zmodyfikować kolory oraz sformatować tekst, który wyświetlany będzie w oknie. Gdy dokonasz zmian, kliknij przycisk OK, aby powrócić do okna głównego.

Na koniec kliknij przycisk Zapisz, a następnie włącz podgląd, naciskając Podgląd, aby sprawdzić, jak prezentuje się witryna na obecnym etapie prac. Następnie zamknij okno podglądu standardową ikoną X i w oknie głównym kliknij Dalej.

W tej części naszego artykułu tłumaczymy, jak szybko dostosować wygląd głównych elementów graficznych powstającej witryny, tzn. nagłówka i stopki.

Aby rozpocząć projektowanie nagłówka i stopki, kliknij ikonę Wstaw tekst. Gdy to zrobisz, pojawi się pole tekstowe z napisem Moja witryna. Napis ten zmienisz, wpisując w polu Treść własny tekst. Następnie dostosuj krój czcionki i jej kolor oraz dodaj 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 nawet serię zdjęć, tworząc w ten sposób pokaz slajdów.

Gdy zakończysz edycję nagłówka, kliknij zakładkę Stopka. Dzięki identycznemu zestawowi narzędzi możesz dodać do stopki grafikę i pola tekstowe oraz odpowiednio je sformatować. Na szarej belce poniżej 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 v11 – Compact\Nazwa_projektu\Preview\Style i możesz je edytować za pomocą innych aplikacji graficznych. Po zakończeniu edycji nagłówka i stopki kliknij przycisk Dalej.

Podczas tego etapu zabawy w webmastera zdecydujesz, 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 przycisk Zmień nazwę i wpisz tytuł strony, po czym zatwierdź modyfikację klawiszem Enter.

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

Przyciski ze strzałkami 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 za pomocą przycisku Usuń i zmienić właściwości wybranego elementu, naciskając Właściwości.

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

Gdy to zrobisz, zamknij podgląd standardową ikoną X. Po powrocie do okna programu wybierz pierwszy element na liście, a następnie kliknij przycisk Dalej.

Przyszła pora na najważniejszy etap, tzn. wypełnienie poszczególnych podstron tekstem, grafiką oraz innymi dostępnymi elementami.

Wyświetli się okno tworzenia podstrony. Każda z podstron podzielona jest na komórki tworzące kolumny i wiersze 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ż wstawić inne elementy, np. odnośniki do Facebooka czy Map Google. Każda ze stron witryny domyślnie podzielona jest na cztery komórki. Informacja o tym, którą część aktualnie edytujesz, wyświetla się nad komórkami.

Aby dodać komórki, musisz wstawić wiersze i kolumny, korzystając z przycisków powyżej tabeli. Jak nietrudno się domyślić, za pomocą usuniesz niepotrzebne wiersze i kolumny.

Po prawej stronie widoczne są ikony reprezentujące typy obiektów, które możesz dodać do każdej z komórek. Aby umieścić w komórce np. obraz, kliknij ikonę Obraz i, nie puszczając przycisku myszy, przeciągnij ją i upuść na wybraną komórkę. Zostanie ona oznaczona jako „graficzna”.

Jeśli chcesz, aby dany obiekt wypełniał dwie komórki, upuść jego ikonę na łączącą je linię. Komórki zostaną sklejone i zostanie im przypisany określony charakter. Aby umieścić w ich obrębie obiekt wybranego rodzaju, kliknij dwukrotnie wypełnioną komórkę.

W opisany wyżej sposób możesz dodawać inne elementy – animacje, filmy, dźwięk i inne elementy dostępne w postaci ikon. W trakcie edycji od czasu do czasu zapisuj pracę i, korzystając z funkcji Podgląd, oceniaj rezultaty pracy, w razie potrzeby wprowadzając korekty. Gdy zakończysz tworzenie pierwszej podstrony, kliknij Dalej i w analogiczny sposób wypełnij pozostałe podstrony pożądanymi obiektami.

Gdy zaprojektujesz wszystkie strony, kliknij przycisk Zapisz, by zapisać projekt na dysku. Jeszcze raz skorzystaj z opcji Podgląd i, gdy uznasz, że wszystko działa poprawnie, przejdź do etapu opisanego w ramce obok.

To już ostatni krok – witryna została przygotowana i przetestowana, pora więc umieścić pliki na serwerze FTP i pokazać swoje dzieło światu.

W oknie Eksport wybierz opcję: Publikuj witrynę w Internecie – pliki witryny zostaną przesłane na serwer FTP. Warunkiem jest posiadanie zarezerwowanej domeny i zarejestrowanego konta dającego dostęp do przestrzeni na serwerze, na którym umieścisz pliki strony WWW.

W kroku Publikacja witryny w Internecie, w sekcji Profil sesji, podaj dane niezbędne do zalogowania się na serwer FTP (otrzymałeś je podczas rejestracji konta). Nie musisz modyfikować ustawień w sekcjach Parametry opcjonalne i Opcje eksportu. Kliknij przycisk Dalej.

Wyświetli się kolejna plansza, Publikacja witryny w Internecie. Kliknij przycisk Start. Rozpocznie się przesyłanie plików na serwer. Gdy operacja dobiegnie końca, zobaczysz okno: Eksport został zakończony. Wybierz opcję: Twoja witryna jest dostępna w sieci! aby otworzyć okno przeglądarki WWW i wyświetlić swoją witrynę.