Web Designer - jak zrobić stronę WWW bez znajomości HTML

Web Designer to wizualny edytor, który pozwala projektować strony WWW bez znajomości języka HTML. Umożliwia on utworzenie witryny od zera lub skorzystanie z jednego z dostępnych szablonów. Modyfikować możesz wygląd i działanie wszystkich elementów strony: menu nawigacyjnego, nagłówków, przycisków i pól tekstowych. Gdy utworzysz już strukturę witryny (może się ona składać z 10 podstron), wystarczy dostosować wygląd i działanie elementów nawigacyjnych, uzupełnić treść stron, dodać ilustracje i przesłać gotowe pliki na wybrany serwer, korzystając z wbudowanego w klienta FTP – wszystko to bez konieczności używania narzędzi dodatkowych. Pełna wersja Silver umożliwia też umieszczenie strony WWW na darmowym serwerze MAGIX Online World oraz jej natychmiastową publikację w sieci.

Interfejs programu Web Designer jest nowoczesny i zaprojektowany tak, aby podczas pracy wszystkie niezbędne narzędzia były stale pod ręką. Pokazujemy, jak go obsługiwać.

Po uruchomieniu w oknie Tip of the Day odznacz pole Show Tips on StartUp i kliknij Close. Następnie zamknij domyślnie wyświetlony szablon ikoną X widoczną na jego zakładce. W oknie głównym kliknij przycisk New document widoczny na górnym pasku narzędziowym.

Najedź kursorem myszy na zakładkę Designs gallry widoczną przy prawej krawędzi okna. Wysunie się panel Designs gallry – rozwiń grupę Website Themes i dwukrotnym kliknięciem wybierz jeden z szablonów graficznych, np. Holiday Theme.

Złap pierwszą miniaturę szablonu i przeciągnij ją w obszar edycji. Wyświetli się strona. Teraz możesz modyfikować jej treść, przestawiać i zmieniać elementy graficzne itd. Każdy element graficzny bądź tekstowy załadowanego szablonu możesz usunąć – wystarczy zaznaczyć go i nacisnąć klawisz Delete.

Aby rozpocząć edycję menu nawigacyjnego, wybierz z lewego zasobnika narzędzie Select tool i kliknij dwukrotnie myszką na menu nawigacyjnym. Wywołasz okno Navigation Bar Properties.

W oknie tym możesz modyfikować wygląd i działanie nawigacji: w sekcji Orientation możesz zmienić orientację paska (pion Vertical lub poziom Horizontal), a w sekcji Justification wyrównywanie (do lewej Left, do środka Centre, do prawej Right).

W sekcji Settings możesz użyć opcji: Adjust button widths to tabels – dostosowuje długość przycisku do wpisanego tekstu, All buttons the same widt – sprawia, że przyciski będą tej samej długości, Button spacing – pozwala ustalić odstępy między przyciskami. Opcja: Site navigation bar... sprawia, że przyciski na pasku nawigacji będą automatycznie odnosić się do wszystkich podstron witryny a sam pasek będzie widoczny na każdej z nich.

W sekcji Buttons and menus widoczna jest tabelka, a w niej wszystkie elementy paska nawigacyjnego. W kolumnie Button and menu widoczne są oryginalne nazwy poszczególnych przycisków. Gdy klikniesz jedną z nich, np. home, zostanie ona podświetlona, a ty będziesz mógł za pomocy klawiatury wpisać nową nazwę, np. Strona START.

W kolumnie URL widoczne są odnośniki, do których prowadzą poszczególne przyciski. Jeśli chcesz zmienić odnośnik, kliknij go, a wyświetli się kolejne okno – Web Properties. Zmodyfikujesz w nim wszystkie parametry wybranego odnośnika. W opisany powyżej sposób zmodyfikuj wszystkie elementy menu nawigacyjnego. Gdy zakończysz pracę, kliknij przycisk OK.

Pracując na gotowym szablonie graficznym strony, możesz dodawać nowe elementy oraz dowolnie modyfikować wszystkie znajdujące się tam obiekty.

Aby zamienić istniejący element graficzny, np. zdjęcie, na inny, odszukaj jego miniaturę w eksploratorze Windows i techniką drag and drop umieść ją w obszarze zdjęcia, które chcesz podmienić, np.:

Aby zmienić lub dodać odnośnik do obiektu na stronie (np. tekstu, grafiki), zaznacz obiekt myszką, a następnie kliknij przycisk Link properties widoczny na górnym pasku narzędziowym. Wywołasz w ten sposób okno Web Properties w którym dodasz lub zmodyfikujesz wszystkie parametry odnośnika.

Aby dodać do strony pole tekstowe, wybierz z lewego zasobnika narzędzie Text tool. Następnie przejdź do obszaru edycji i wyznacz obszar nowego pola tekstowego. Po wyznaczeniu obszaru możesz wpisać w nim tekst.

Gdy zakończysz edycję strony pierwszej, przejdź do prawego panelu Page&Layer.... Wybierz w nim miniaturę kolejnej podstrony do edycji, np. 3.products. Elementy stałe, np. menu, zmieniane są jednocześnie na wszystkich podstronach.

Wszystkie elementy graficzne wykorzystane na stronach witryny znajdziesz, wysuwając boczny panel Bitmap gallery.

Korzystając z panelu Designs gallery, możesz wstawiać na strony gotowe obiekty graficzne należące do kilku kategorii, tj. przyciski (Buttons), elementy nawigacji menu (Navigation Bars), nagłówki (Headings), ikony (Icons), zdjęcia (Photo), kształty (Shapes) i pola tekstowe (Text Panels).

Zasobnik narzędziowy widoczny w lewej części interfejsu pozwala ponadto rysować linie proste oraz kształty (prostokąty, elipsy). Lupa pozwala powiększać edytowany fragment strony.

Gdy wszystkie elementy stron będą już gotowe, należy cały projekt zapisać na dysku. Umożliwi to dalszą jego edycję i uaktualnianie w przyszłości. W tym celu z menu File wybierz opcję Save All, nadaj plikowi nazwę i kliknij przycisk Zapisz.

Pełna wersja Silver programu Web Designer umożliwia umieszczenie gotowej strony na serwerze MAGIX Online World. Pokazujemy, jak założyć tam darmowe konto i przerzucić pliki strony. Oczywiście nie musisz korzystać z tej oferty – program prześle pliki gotowej witryny na inny, dowolnie wskazany serwer.

Z menu Share wybierz opcję Free Web space & more. Wywołana zostanie strona WWW. Kliknij widoczny na niej przycisk REGISTER. Na następnej stronie kliknij Continue.

Na kolejnej stronie wybierz opcję i kliknij I am a new user. Następnie musisz wypełnić formularz rejestracyjny. Gdy to zrobisz, kliknij Continue i na następnej stronie zaznacz pole: Yes, I have read and accept the Terms.... Raz jeszcze kliknij Continue.

Na podany adres e-mail wysłana zostaje wiadomość zawierająca twoje dane oraz odnośnik aktywacyjny. Kliknij go. Wyświetli się strona – użyj widocznego na niej przycisku To Control Center.

Na następnej stronie WWW kliknij widoczny odnośnik Your Homepage free, a poniżej zostaną wyświetlone informacje niezbędne do zalogowania się na serwer FTP. Pozwolą ci one przesłać pliki witryny. Adres serwera FTP to ftp.magix-online.com, nazwą użytkownika jest adres e-mail, jaki podałeś przed chwilą podczas tworzenia konta. Również hasło pozostaje takie samo, jak to, które podałeś podczas rejestrowania konta.

Przejdź do sekcji Unassigned domains, rozwiń menu Assignment i wybierz opcję FTP. W otwartym oknie zaznacz element index_html_files i kliknij Save.

Wróć do okna programu i z menu Share wybierz opcję Publish website. Wyświetli się okno ustawień, Web Properties, z wybraną zakładką Publish. W polach FTP username i FTP password wpisz dane, które podałeś podczas rejestracji konta, kliknij OK, a w kolejnym oknie – Publish. Zacznie się wysyłanie plików na serwer.

Po chwili możesz już odwiedzić swoją prywatną stronę. Jeśli adres e-mail, który podałeś podczas rejestracji konta, brzmiał np.: xyz@poczta.pl, to adres twojej nowej strony WWW wygląda tak: http://xyz.magix.net.