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.

Zakładanie galerii fotografii

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]: