Tutorial zajęcia 12  Tworzenie prostych stron internetowych przy
użyciu bezpłatnych narzędzi.
Korzystając z niniejszego tutorialu nauczą się Państwo jak tworzyć proste
strony internetowe przy pomocy Google Sites. Efektem będzie własna strona
internetowa na dowolny temat. Oczywiście istnieją inne sposoby stworzenia
własnej strony internetowej, która wygląda lepiej niż utworzona
z pomocą narzędzia Google Sites, jednak wymagają one więcej czasu
i umiejętności. Zaletą Google Sites jest to, jest to narzędzie bezpłatne, a jego
obsługa jest intuicyjna. Nie trzeba wiele czasu by zapoznać się z przydatnymi
funkcjami, a aktualizacja strony również nie sprawia wiele problemów.
Strona internetowa może przydać do zamieszczania plików, które będą
dostępne dla wielu osób (nie musimy wysyłać setek maili), publikowania różnych
ogłoszeń i innych ważnych informacji.
Zadanie domowe:
Aby wykonać zadanie proszę wykonać kolejno poniższe instrukcje i umieścić na
forum kursu na Pegazie - zajęcia 11 - forum  Zadanie  tworzenie stron
internetowych link do strony, którą Państwo stworzyli.
1. Wchodzimy na stronę https://sites.google.com i logujemy się na swoje konto
(używając loginu i hasła identycznych jak w naszym gmailowym e-mailu).
2. By zapoznać się z krótkim filmem
promocyjnym objaśniającym przydatne
funkcje Google Sites, po zalogowaniu się na
tej stronie klikamy w  Więcej informacji .
3. Oglądamy wspomniany w punkcie 2. filmik zwracając uwagę na możliwości,
które stwarza narzędzie Google Sites.
4. Po obejrzeniu filmu cofamy się do poprzedniej strony (sites.google.com).
5. Klikamy  Utwórz .
6. Następnie mamy możliwość wyboru wyglądu naszej strony. Wejdz
my w opcję
 Przeglądaj galerię .
7. Teraz można przejrzeć oferowane szablony wyglądu strony. Aby to zrobić należy
kliknąć w wybrany przez nas szablon, jeżeli chcemy dokładniej zapoznać się z
danym szablonem klikamy  Preview template (proszę wykonać tą czynność wobec
kilku szablonów by zobaczyć co Google Sites nam oferuje).
1
Technologia Informacyjna 2011, IPs UJ, mgr Dominika Czajak
8. Jeżeli chcielibyśmy wybrać dany szablon, to
klikamy w przycisk  Wybierz znajdujący się przy
opisie szablonu lub przycisk  Użyj szablonu
znajdujący się w widoku podglądu szablonu.
9. Teraz jednak nie będziemy wybierać żadnego predefiniowanego szablonu.
Wracamy więc do strony głównej. Zamykamy okienko/okienka z podglądem strony i
klikamy Anuluj przy opisie szablonu.
10. Wpisujemy nazwę jaką chcemy by otrzymała nasza witryna [1], wybieramy
opcję pusty szablon [2], a następnie naciskamy  Utwórz [3].
11. Następnie określamy jaki adres ma mieć nasza witryna. Google Sites domyślnie
definiuje go zgodnie z określoną wcześniej przez nas nazwą witryny. Teraz jednak
zmieńmy ten adres (ma się różnić od nazwy witryny).
2
Technologia Informacyjna 2011, IPs UJ, mgr Dominika Czajak
12. Teraz klikamy w opcję  Wybierz motyw i z dostępnych
motywów wybieramy taki jak nam się podoba (po prostu
klikając na niego).
13. Wybieramy  Więcej opcji [1].
Następnie wpisujemy krótki opis
witryny [2]. Teraz mamy możliwość
ustawienia opcji udostępnienia strony
[3], jak na razie pozostawmy domyślne
ustawienie  Wszyscy na świecie mogą
wyświetlać tę witrynę .
Można również jeśli istnieje taka
potrzeba zaznaczyć czy treść danej
witryny jest przeznaczona tylko dla
dorosłych [4]. My nie musimy tego robić
(mam nadzieję, że nie będą Państwo na nowo stworzonej stronie poruszać
niecenzuralnych kwestii :&).
14. Po wprowadzeniu tych ustawień wpisujemy wyświetlony kod a następnie
klikamy czerwony przycisk u góry strony  Utwórz witrynę . Mamy już własną
stronę!
15. Następnie zmienimy jednak opcje
udostępniania strony. W tym celu klikamy
w przycisk  Udostępnij .
Teraz klikamy  Zmień , a następnie
ustawiamy opcję  Każdy użytkownik mający
link i klikamy  Zapisz .
16. Teraz wzbogacimy nieco naszą stronę główną. Klikamy więc przycisk  Edytuj
stronę . Napiszmy parę zdań o naszej
stronie. Używając paska edycji możemy
zmienić krój, wielkość, kolor i rozmieszczenie tekstu.
Aby ustalić co jest nagłówkiem (np. słowo Witaj!) na
naszej stronie zaznacz go i w rozwijanym menu
 Format wybierz opcję  Nagłówek .
*Ustalanie co na naszej stronie jest nagłówkiem,
podnagłówkiem, a co drobnym nagłówkiem jest
przydatne np. gdy chcemy stworzyć spis treści.
3
Technologia Informacyjna 2011, IPs UJ, mgr Dominika Czajak
17. Teraz pod wpisanym na stronie głównej tekstem wstawmy obraz. W tym celu
w rozwijanym menu  Wstaw wybieramy opcję  Obraz .
Następnie wybierzmy opcję  Adres internetowy (URL) [1], wstawmy link do
obrazu, który chcemy wstawić [2] oraz napiszmy parę słów o obrazie [3].
Kliknijmy lewym przyciskiem myszy na obrazie, który przed chwilą wstawiliśmy
i [1] wyśrodkujmy go, [2] zlikwidujmy link do niego klikając  Usuń , [3] zmieńmy
jego rozmiar klikając  M oraz [4] wyłączmy otaczanie obrazu tekstem.
18. Za pomocą mniejszej niż w pozostałym tekście czcionki podpiszmy obraz, nie
zapomnijmy podać z
ródła fotografii.
19. Co prawda Google Sites na bieżąco zapisuje
kopię roboczą, jednak co jakiś czasu zapisuj swoje
postępy w pracy na stronie. Kliknij również przycisk
 Zapisz , gdy chcesz zatwierdzić zmiany
wprowadzone na danej stronie i skończyć pracę nad jej edycją.
20. Teraz stworzymy nową podstronę. W tym celu klikamy przycisk znajdujący się
u góry strony:
Następnie nazwijmy nową stronę [1]
(wpiszmy słowo  Informacje ). Google Sites
domyślnie ustala jej adres, można go jednak
zmienić [2]. Chcemy by podstrona była
podrzędna wobec strony głównej,
zaznaczamy więc opcję  Umieść stronę pod
Strona główna [3]. Klikamy w czerwony
przycisk u góry strony  Utwórz .
4
Technologia Informacyjna 2011, IPs UJ, mgr Dominika Czajak
21. Teraz zmienimy układ na tej podstronie. Warto wiedzieć, że Google Sites
oferuje kilka przydatnych sposobów zorganizowania informacji na danej
podstronie. Wchodzimy w menu  Układ i wybieramy opcję  Dwie kolumny (układ
prosty) .
22. Proszę wpisać tekst w obydwu kolumnach. Warto
wiedzieć, że w Google Sites znajduje się proste narzędzie
do tworzenia tabel. Proszę wstawić tabelę dowolnej
wielkości w jednej z kolumn na tej podstronie. Aby to
zrobić w zakładce  Tabela klikamy w opcję  Wstaw
tabelę a następnie określamy jej wymiary.
23. W drugiej kolumnie na tej podstronie proszę o wstawianie kilku
linków. Aby to zrobić najpierw klikamy przycisk  wstaw link ,
w kolejnym oknie. Mamy możliwość wstawienia linku do jednej ze stron
znajdujących się w ramach
naszej strony, lub też linku do
zewnętrznej strony. Skorzystamy
z tej drugiej opcji, klikamy więc
w opcję  Adres internetowy
i w polu obok wpisujemy adres
strony, którą chcemy zalinkować.
Można zrobić to również w inny sposób  najpierw w miejscu gdzie chcemy by
znajdował się link wpisujemy adres strony, zaznaczamy go, a następnie klikamy
przycisk  wstaw link .
24. Do podstrony możemy również załączyć kilka
plików. Aby to zrobić należy kliknąć  Wybierz plik ,
a następnie wybrać plik i zatwierdzić wybór. Proszę
załączyć jeden dowolny plik do tej podstrony (może to być np. plik z tym
tutorialem).
25. Proszę dodać kolejną podstronę. Tak jak poprzednio
klikamy przycisk  Nowa strona , nazwijmy ją
5
Technologia Informacyjna 2011, IPs UJ, mgr Dominika Czajak
 Aktualności , tym razem wybierzmy szablon
 ogłoszenia , jak poprzednio ustalmy by ta podstrona
była pod Stroną Główną. Aby to zrobić tym razem
musimy kliknąć w  Wybierz inną lokalizację
i wybrać w rozwijanym menu pole  Strona główna .
Następnie klikamy  Utwórz .
26. Stwórzmy nowy post na tej stronie klikając przycisk  Nowy post . Nadajmy mu
tytuł i wpiszmy kilka zdań w polu przeznaczonym
na treść postu. Jak widać jedną z cech tego
szablonu jest informacja o terminie opublikowania
postu, a także o jego autorze. Dodajmy komentarz do tej podstrony, taka
możliwość znajduje się w oknie na dole strony.
27. Jak widać na pasku bocznym kolejność naszych podstron
wygląda tak: Strona główna, aktualności, informacje. Chcemy
jednak zmienić ich kolejność by aktualności, znajdowały się niżej
niż informacje. Klikamy więc w opcję  Mapa witryny . Teraz
klikamy w opcję  Zarządzaj stronami .
Następnie klikamy w plusik koło napisu  Strona główna by
rozwinąć listę z podstronami. Najeżdżamy kursorem myszki
na  Aktualności tak by zmienił się on w krzyżyk ze
strzałkami na końcach, wtedy możemy przeciągnąć
 aktualności w dół, gdy napis  Informacje podświetli się
na niebiesko upuśćmy tam  aktualności . Teraz aktualności są stroną podrzędną
wobec aktualności, a my chcemy by były stroną podrzędną wobec strony głównej.
Przenosimy je więc (w taki sam sposób jak wcześniej) aż na niebiesko podświetli
się napis  Strona główna . Wtedy podstrony ustawią się w takiej kolejności jak tego
sobie życzymy. By wrócić do pracy nad stroną klikamy w tytuł naszej strony u góry
paska znajdującego się po lewej stronie.
28. Dodajmy teraz kolejną stronę. Tym razem niech
nazywa się  Pliki . Z listy szablonów do użycia wybierzmy
 Magazyn plików . W ustawieniach lokalizacji wybierzmy
opcję  Umieść stronę na najwyższym poziomie
29. Dodajmy plik na tej podstronie. By to
uczynić klikamy w przycisk  Dodaj plik .
W kolejnym oknie klikamy  Wybierz plik [1],
wybieramy plik, który chcemy przesłać
a następnie wpisujemy krótki opis pliku [2]
i klikamy  Przekaż .
6
Technologia Informacyjna 2011, IPs UJ, mgr Dominika Czajak
30. Jeżeli chcemy zmienić ustawienia naszej strony
klikamy w  Więcej . W rozwijanym menu wybierzmy
opcję  Zarządzaj witryną . Proszę przejrzeć dostępne w tym menu opcje.
Wejdz
my w  Kolory i czcionki , następnie kliknijmy w  Czcionka strony [1], w
menu  Wybierz czcionkę kliknijmy  Niestandardowe [2] a po kliknięciu w
 Normalne [3] wybierzmy inny rodzaj czcionki. Zauważmy, że na dole strony
widzimy pogląd naszych zmian. Kliknijmy  Zapisz .
Zachęcam do zapoznania się z pozostałymi funkcjami i opcjami narzędzia
Google Sites i tak jak zostało napisane na początku proszę o umieszczenie na
Pegazie linku do stworzonej przez siebie strony.
7
Technologia Informacyjna 2011, IPs UJ, mgr Dominika Czajak