Atrakcyjne dodatki

Przed przystąpieniem do tej części warsztatu przygotuj niezbędne fotki, które chcesz opublikować na stronie. Aby ułatwić sobie pracę, zgromadź je w jednym, dowolnie wybranym folderze na dysku komputera. W artykule pokazujemy też, jak zrobić prosty formularz kontaktowy i wzbogacić zawartość podstron o materiały wideo z serwisu YouTube. Korzystając z klipów filmowych z zewnętrznego serwera, zmniejszasz obciążenie i zużycie zasobów własnego konta WWW.

Przed założeniem galerii warto w dowolnym programie graficznym przeskalować pliki, aby ułatwić przeglądanie galerii internautom. Umieszczanie plików w oryginalnych rozmiarach nie ma sensu. Nie tylko wydłuży czas ładowania zdjęć, ale też utrudni przeglądanie fotografii ze względu na duże wymiary pliku. Do zaprezentowania zdjęć na stronie wystarczy maksymalna szerokość 800–900 pikseli.

W oknie głównym programu WYSIWYG Web Builder, w okienku Site Manager kliknij dwukrotnie podstronę, na której chcesz założyć galerię zdjęć. W naszym przykładzie to galeria. W obszarze roboczym uaktywni się zakładka galeria z projektem witryny.

Z przybornika narzędzi Toolbox, z sekcji Extra wybierz Photo Gallery i w obszarze roboczym narysuj prostokąt, w którym chcesz umieścić galerię.

Dwukrotnie kliknij utworzony obiekt zawierający opis Double click to select images i w oknie Photo Gallery Properties, w zakładce Images kliknij przycisk Add.

W oknie Select one or more files wskaż na dysku zdjęcia, które chcesz dodać do galerii. Możesz zaznaczyć kilka plików jednocześnie, przytrzymując klawisz [Ctrl]. Jeżeli wybrałeś już zdjęcia, kliknij przycisk Otwórz.

W zakładce Images pojawi się lista dodanych fotografii. Możesz nadać tytuły miniaturkom, zaznaczając na liście wybrane zdjęcie i wpisując tytuł w polu Thumbnail Title. Z rozwijanej listy Thumbnail size możesz wybrać rozmiar miniaturek. Jeżeli twoje zdjęcia są zarówno pionowe, jak i poziome, zalecamy wybranie jednego z określonych formatów, np. 120x120. Wówczas wszystkie miniaturki będą jednakowe. Jeżeli pozostawisz domyślnie wybraną pozycję Variable, miniaturki będą miały różne wymiary, w zależności od wymiarów oryginalnego zdjęcia.

Z rozwijanej listy Columns wybierasz liczbę kolumn, na które zostanie podzielona galeria. W naszym przykładzie to 4. Ten parametr możesz później zmienić, aby dostosować wygląd galerii do przyjętego szablonu strony. Pola Horizontal i Vertical możesz pozostawić bez zmian. Kolejne pola, Cell Padding oraz Cell Spacing, oznaczają kolejno dopełnienie komórek i odstęp między nimi. Te parametry możesz zostawić domyślne. Jeżeli efekt końcowy nie będzie zadowalający, zmienisz je.

Na rozwijanej liście Target masz domyślnie zaznaczoną opcję Open in the same browser window. Po kliknięciu miniaturki obraz w pełnej rozdzielczości wyświetli się w tym samym oknie przeglądarki. Jeżeli wolisz, aby docelowe zdjęcie wyświetlało się w nowym oknie, wybierz opcję Open in a new browser window, a jeśli ma to być okienko wyskakujące – Open in a popup window. W naszym przykładzie wybraliśmy właśnie tę opcję.

Jeżeli pliki źródłowe zdjęć mają duże wymiary, zaznacz dodatkowo opcję Generate thumbnail Images w celu usprawnienia wczytywania strony z galerią. Dzięki temu nie będzie ładowany oryginalny obrazek przeskalowany do postaci miniaturki, tylko zostaną wygenerowane dodatkowe pliki graficzne dla miniaturek. Kliknij OK i przetestuj swoją galerię w przeglądarce internetowej, wciskając klawisz [F5]:

W zakładce kontakt warto przygotować formularz, który ułatwi komunikację. Internauci będą mogli bezpośrednio ze strony wysłać ci wiadomość na skrzynkę e-mailową.

W oknie głównym programu WYSIWYG Web Builder aktywuj zakładkę działu kontakt.

Z przybornika Toolbox, z sekcji Forms wybierz ikonę Form Area i w obszarze roboczym narysuj prostokąt, w którym ma być umieszczony formularz kontaktowy. Dwukrotnie kliknij utworzony obiekt.

W oknie Form Properties, w sekcji General, w polu Form Name wpisz nazwę formularza, np. Kontakt. W polu Action wpisz komendę mailto:twojadres@interia.pl, podając swój adres elektroniczny i kliknij przycisk OK.

Korzystając z przybornika narzędzi Toolbox, wybierz Editbox i narysuj dwa prostokąty pól tekstowych w obrębie pola formularza. Wybierz Text i opisz krótko pola tekstowe. W naszym przykładzie są to pola:

Teraz kliknij dwukrotnie pole tekstowe utworzone jako pierwsze. W oknie Editbox Properties, w sekcji General, w polu Name wpisz nazwę pola, np. Tytul, i kliknij OK. Następnie kliknij dwukrotnie drugie pole tekstowe, w polu Name nadaj mu nazwę E-mail i kliknij OK.

Z przybornika Toolbox wybierz obiekt Text Area i narysuj prostokąt w obrębie pola formularza. To pole posłuży do wpisywania treści wiadomości przesyłanej za pośrednictwem formularza.

Teraz wstaw przycisk do wysyłania formularza. W tym celu z przybornika Toolbox wybierz Push Button i narysuj przycisk na formularzu. Dwukrotnie kliknij utworzony przycisk i w oknie Button Properties, w polu Value/Label nadaj mu nazwę, np. Wysyłka.

Twój formularz kontaktowy jest już gotowy. Możesz go wzbogacić o dodatkowe pola, korzystając z innych obiektów z przybornika. Aby przetestować jego funkcjonowanie w przeglądarce internetowej, wciśnij klawisz [F5].

Korzystając ze zwykłego kodu HTML, możesz osadzić na swojej witrynie film z serwisu YouTube. Niezbędny kod wygenerujesz na stronie z klipem wideo.

W przeglądarce internetowej uruchom serwis www.youtube.pl i przejdź do ulubionego filmu lub twojej własnej produkcji.

Pod materiałem filmowym kliknij przycisk Udostępnij i na rozwiniętym polu kliknij przycisk Umieść. Poniżej rozwinie się lista opcji pozwalających na dostosowanie ustawień wyświetlania. Wybierz jedną z miniaturek formatów filmu lub w polach Szerokość i Wysokość określ własne wymiary klipu, a następnie zaznacz i skopiuj kombinacją klawiszy [Ctrl]+[C] kod embed.

W oknie głównym programu WYSIWYG Web Bulider wybierz z przybornika Toolbox, z sekcji Advanced ikonę HTML i narysuj prostokąt w obszarze roboczym. Dwukrotnie kliknij utworzony obiekt.

W oknie HTML Properties w polu tekstowym HTML wklej, posługując się skrótem [Ctrl]+[V], kod embed do filmu YouTube i kliknij przycisk OK.