Ćwiczenie nr 13 - Kreator witryn Google

Celem ćwiczenia jest utworzenie prostej witryny internetowej przy pomocy Kreatora Witryn Google.

Przed przystąpieniem do wykonywania poniższej instrukcji zapisz archiwum witryna.zip na dysku lokalnym.


Rozpakuj teraz pobrane przed chwilą archiwum. Otrzymasz katalog zawierający pliki potrzebne do wykonania witryny.

Pojawiające się w instrukcji czerwone cyfry w nawiasach, np. (1) odsyłać będą do odpowiednich cyfr umieszczonych na rysunkach znajdujących się zazwyczaj pod tekstem, aby ułatwić czytelnikowi znalezienie poszczególnych opcji kreatora. 

Aby rozpocząć pracę zaloguj się na swoje konto Google, a następnie w aplikacjach Google (1) wybierz Witryny (2).

 

Aby przejść do kreatora witryny internetowej, w lewym górnym rogu kliknij przycisk Utwórz i wybierz opcję w nowych Witrynach. W tym momencie na ekranie powinien pojawić się obraz podobny do tego, zaprezentowanego poniżej.

Po prawej stronie znajdują się opcje umożliwiające nam łatwe tworzenie oraz edytowanie witryny internetowej.

Zacznijmy od wprowadzenia tytułu. Aby to zrobić należy kliknąć przyciskiem myszy na napis Tytuł Twojej strony. Pole podświetli się, a my możemy wpisać teraz nowy tytuł. Bardzo proszę, aby każdy student nazwał swoją stronę Szkło laboratoryjne XXXXX, gdzie XXXXX oznaczać będzie twój numer indeksu. Następnie, po prawej stronie wybierzmy opcję Motywy (1), a w niej Dyplomatyczny (2) oraz ustawmy kolor na granatowy (drugi od lewej).

Gdy wskażemy teraz myszką granatowe pole, na którym znajduje się nasz tytuł pojawią się dwie opcje: Zmień obraz oraz Typ nagłówka (1).

Klikamy Zmień obraz>Prześlij i następnie z katalogu Witryny, który utworzony został przez Was na pulpicie na początku zajęć wybieramy plik o nazwie tapeta. Po chwili zamiast dotychczasowego, domyślnego tła pojawi się wybrany obrazek. Domyslnie tło jest widoczne jako ciemniejsze, tak, aby poprawić czytelność. Można to zmienić wybierając przycisk w lewym dolnym rogu "Usuń dostosowanie czytelności":

Wówczas tło zmieni się na jaśniejsze:

Możesz wybrać, który sposób wyświetlania bardziej Ci odpowiada.

Kolejno w lewym górnym rogu (strzałka na rysunku powyżej) wprowadzimy nazwę naszej witryny oraz logo. W tym celu proszę kliknąć na napis Wpisz nazwę witryny i wpisać Szkło laboratoryjne XXXXX (XXXXX to numer indeksu), a następnie kliknąć przycisk Dodaj logo, wybrać opcję prześlij (1) i z katalogu wybrać plik o nazwie logo. Gdy logo się załaduje, proszę wybrać opcję Tło – Przezroczysty (2) tak jak pokazano na rysunku poniżej.

Następnie na naszej stronie głównej wprowadzimy kilka słów wstępu i umieścimy zdjęcie. W tym celu z prawego panelu, z zakładki Układy proszę wybrać pierwszy układ (1). Taki wybór pozwoli nam na bardzo łatwe umieszczenie na projektowanej stronie jednego zdjęcia oraz tekstu (2).

  

 

Aby wstawić odpowiednie zdjęcie należy kliknąć na widoczny symbol + a następnie wybrać Prześlij i z katalogu wybrać plik o nazwie lab1. Kreator wstawi wybrane zdjęcie jednak może je dowolnie przyciąć. Aby uzyskać pełen obraz należy z ukazanego nad wstawionym obrazem menu (1) wybrać wskazaną na rysunku poniżej opcję, która pozwoli cofnąć wykonane przycięcie obrazu.

Po tej czynności zdjęcie wróci do swojego rozmiaru.

W kolejnym kroku wstawimy tekst w przeznaczonym do tego miejscu. Aby to zrobić musimy kliknąć na widoczny napis Kliknij, by edytować tekst. Jak się dokładnie przyjrzymy to w wybranym przez nas układzie są dwa takie napisy: mniejszy, który odpowiada zwykłemu tekstowi, oraz większy pełniący funkcję tytułu. Tym razem wybieramy ten mniejszy i wpisujemy (można skopiować) następujące zdanie:

Praca w laboratorium chemicznym wymaga znajomości podstawowych naczyń i zestawów aparatury laboratoryjnej. Na tej stronie przedstawimy najczęściej wykorzystywane w studenckich pracowniach chemicznych naczynia laboratoryjne.

Następnie zaznacz wprowadzony tekst i używając widocznych nad tekstem opcji zmień format tekstu ze Zwykły tekst na Nagłówek oraz wybierz wyśrodkuj tekst. Po tych zmianach, kliknij również na większy napis Kliknij, by edytować tekst i tym razem z wyświetlonych opcji wybierz symbol śmietnika celem usunięcia tego pola.

Gdy najedziemy kursorem myszy na obszar obejmujący wprowadzony układ, po lewej stronie wyświetlą się trzy opcje (1) pozwalające na zmianę koloru, sklonowanie oraz usunięcie danej sekcji.

 

Wybieramy opcję pierwszą (oznaczoną jako paleta farb) aby zmienić kolor tła naszej sekcji i wybieramy Wyróżnienie 2. Po tej procedurze projektowana strona powinna wyglądać jak na obrazku poniżej.

 

PODSTRONY

To, co zrobiliśmy do tej pory stanowi naszą Stronę Główną. Kolejnym etapem naszej pracy będzie dodawanie podstron. Po prawej stronie ekranu kliknij Strony (1), a następnie kliknij na trzy małe kropeczki (2) znajdujące się po prawej stronie napisu Strona główna. Z rozwiniętych opcji wybierz Dodaj podstronę (3) i wtedy kreator poprosi o podanie nazwy dla tej podstrony. Proszę wpisać Kolby (4) i kliknąć Gotowe (5). W tym momencie program przeniesie nas właśnie na nowoprojektowaną podstronę o nazwie Kolby.

 

Na tej podstronie przedstawimy różne rodzaje kolb używanych w naszych laboratoriach. Zdjęcia poszczególnych kolb wstawimy zarówno używając gotowych w Kreatorze Układów (tak jak na stronie głównej) lub pojedynczo używając funkcji Wstaw.

Na samym początku, będąc na naszej podstronie o nazwie Kolby z prawej strony wybieramy Wstaw (1), następnie Obraz (2) oraz Prześlij (3).

Z otwartego okna wybieramy plik o nazwie 1-kulista, a program automatycznie wstawia wybrany obraz. Teraz podpiszemy wstawiony obrazek. W tym celu wybieramy opcję Pole tekstowe (opcja ta znajduje się również po prawej stronie ekranu, tuż obok opcji Obrazy) i wpisujemy tekst: Kolba kulista. Jak widać tekst ten jest znacznie krótszy niż zaproponowane przez kreator pole tekstowe, więc „łapiąc” kursorem niebieską kropkę znajdującą się po prawej stronie wstawionego pola tekstowego, zmniejszamy jego rozmiar dopasowując go do naszego podpisu (1). Zwróć uwagę, że podczas wykonywania tej czynności pojawią się pionowe kreseczki (prowadnice), wskazujące możliwe rozmiary modyfikowanego pola. Następnie zaznacz tekst i wybierz opcję wyśrodkuj tekst. Gdy już pole tekstu będzie sformatowane, to przeciągnij je na obszar obrazu z kolbą kulistą (2) tak, aby po tej czynności były jednym obiektem (3).

 

Teraz wykonując dokładnie tę samą procedurę wstawiamy obok obraz o nazwie 2-gruszkowata oraz wykonujemy podpis Kolba gruszkowata/sercowata. Następnie przesuwając obiekty za pomocą myszki ustaw je tak jak na rysunku poniżej.

 

Kolejno na naszej podstronie zaprezentujemy kolby płaskodenne. Zacznijmy od wstawienia opisu Kolby płaskodenne. W tym celu w znany już Ci sposób wstaw pole tekstowe, wpisz tekst (Kolby płaskodenne) i sformatuj go tak jak na rysunku poniżej, czyli ustaw: (1) Zwykły tekst; (2) - pogrubienie oraz (3) - bez zmiany rozmiaru ramki wybierz wyśrodkowanie.

Teraz wstawimy obrazki wspomnianych kolb płaskodennych. Tym razem użyjemy do tego szablonu.

A zatem :

(1)    z zakładki Układy wybieramy tym razem taki, który pozwoli nam na wstawienie trzech obrazków;

(2)    za pomocą plusika oraz opcji prześlij wstawiamy obraz o nazwie 3-kulista-płaskodenna, a następnie wybieramy opcję cofnij przycięcie (2a);

(3)    duży napis Kliknij by edytować usuwamy, czyli klikamy na niego i wybieramy ikonę śmietnika;

(4)    w miejsce małego napisu wpisujemy kulista z płaskim dnem.

Dokładnie te same czynności wykonujemy wstawiając na środkowe miejsce obraz o nazwie 4-stożkowa i wykonując pod nim podpis stożkowa oraz wstawiając po prawej stronie obraz o nazwie 5-ssawkowa i podpisując ssawkowa. Widzimy teraz, że wstawione obrazki mają nieco inne wielkości. Aby je choć trochę ujednolicić należy kliknąć na obrazek, a gdy ten zostanie zaznaczony należy za pomocą myszki ustawić pożądaną wielkość (1).

Na podstronie Kolby umieścimy teraz zdjęcie przedstawiające różne kolby wieloszyjne. Na początku wstawmy napis Kolby wieloszyjne:, czyli wybieramy z zakładki Wstaw > Pole tekstowe, tam wpisujemy tekst i formatujemy tak samo jak w przypadku napisu Kolby płaskodenne. Po tej czynności wybieramy Wstaw > Obrazy >Prześlij i z katalogu wybieramy plik o nazwie 6-wieloszyjne. Ustaw rysunek na środku strony.

Teraz czas na inny rodzaj naczyń używanych w laboratorium chemicznym, a mianowicie będą to chłodnice. Zaprezentujemy je na kolejnej podstronie. Zatem w zakładce Strony ustawiamy kursor myszy na napisie Strona główna i klikamy na widoczny po prawej stronie symbol trzech kropeczek. Następnie klikamy Dodaj podstronę i wprowadzamy nazwę dla nowej podstrony Chłodnice i klikamy Gotowe. Kreator przenosi nas na tę podstronę. Aby wstawić przygotowane przez prowadzącego zdjęcia wybieramy w zakładce Wstaw układ pozwalający na jednoczesne wstawianie dwóch zdjęć. Teraz w znany Ci już sposób umieść na stronie pliki o nazwie 7-chłodnica1 oraz 8-chłodnica2, a następnie podpisz je odpowiednio chłodnica destylacyjna oraz chłodnica destylacyjna z nasadką Claisena. Zwróć uwagę, że tym razem wstawione obrazki nie zostały przez program „obcięte” i nie musisz używać opcji cofającej przycięcie.

Teraz wstaw pole tekstowe, w którym napisz Chłodnice zwrotne oraz sformatuj napis jako nagłówek i wyśrodkuj. Następnie użyj opcji Wstaw>Obrazy>Prześlij i dodaj plik o nazwie 9-zwrotne. Przeciągnij obrazek na środek strony. Dodaj podpis tak jak pokazano na rysunku poniżej.

 

Na kolejnej podstronie zaprezentujemy wkraplacze i rozdzielacze. Zatem w zakładce Strony ustawiamy kursor myszy na napisie Strona główna i klikamy na widoczny po prawej stronie symbol trzech kropeczek. Następnie klikamy Dodaj podstronę i wprowadzamy nazwę dla nowej podstrony Wkraplacze i rozdzielacze i klikamy Gotowe. Kreator przenosi nas na tę podstronę. Aby wstawić przygotowane przez prowadzącego zdjęcia wybieramy w zakładce Wstaw układ pozwalający na jednoczesne wstawianie trzech zdjęć (identycznie jak w przypadku kolb płaskodennych). Następnie wstaw obrazy znajdujące się w plikach: 10-wkraplacz, 11-rozdzialcz_cylindyczny oraz 12-rozdzielacz stożkowy. Wstaw odpowiednie podpisy, aby uzyskać efekt jak na rysunku poniżej.

 

Kolejna podstrona poświęcona zostanie lejkom używanym w pracowniach chemicznych. W znany już Ci sposób utwórz podstronę o nazwie Lejki, a tam wybierz Układ pozwalający na wprowadzenie czterech obrazów. Następnie umieść w szablonach pliki o nazwach: 13-zwykły, 14-analityczny,
15-Buchnera oraz 16-Schotta. Podpisy wykonaj zgodnie z rysunkiem przedstawionym poniżej.

 

Na ostatniej podstronie przedstawimy inne naczynia używane bardzo często w praktyce laboratoryjnej. Utwórz zatem podstronę o nazwie Inne i wykorzystując poznane narzędzia oraz pliki o nazwach
17-pipeta_pasteura, 18-pipety_miarowe, 19-zlewki, 20-cylindry, 21-eksykator_zwykły oraz
22-eksykator_próżniowy spróbuj przedstawić ją w postaci jak najbardziej zbliżonej do tej zaprezentowanej na rysunku poniżej.

 

Nawigacja

Aby ułatwić poruszanie się po naszej tworzonej stronie wstawimy teraz kilka przycisków, które ułatwią nam przenoszenie się pomiędzy podstronami, jak również odsyłanie do innych stron internetowych.

Przejdź zatem na stronę główną naszej projektowanej switryny i teraz z panelu po prawej stronie wybierz opcję Przycisk (1). W okienku, które się pokaże na ekranie wpisz nazwę dla naszego przycisku – proszę wpisać słowo Kolby (2), następnie kliknąć na pole o nazwie Link (3) i z rozwiniętej listy wybrać podstronę Kolby (4). Procedurę wprowadzania przycisku zakończ klikając Wstaw (5).

 

Gdy wszystko wykonasz poprawnie, na twojej głównej stronie pojawi się przycisk o nazwie Kolby. Postępując analogicznie dodaj na stronę główną przyciski, które odpowiadać będą pozostałym podstronom. Zobacz rysunek poniżej. 

 

Teraz wstawimy na naszej stronie link do interesującego nas zagadnienia w Wikipedii. Na początku otwórz nową zakładkę w przeglądarce i poszukaj artykułu o kolbach w Wikipedii (zwróć uwagę, aby artykuł ten miał napis chemia). Jeśli odnajdziesz interesujący Cię artykuł to skopiuj jego link. Na projektowanej stronie przejdź na podstronę kolby i tam w znany już Ci sposób wstaw przycisk o nazwie: Tutaj dowiesz się do czego służą przedstawione powyżej kolby. Następnie w polu Link wklej skopiowany wcześniej link i kliknij Gotowe. Jeśli wszystko poszło dobrze, na podstronie Kolby pojawił się przycisk. Powiększ teraz jego rozmiar, aby był widoczny cały napis (rysunek poniżej).

Następnie z paska w naszym kreatorze witryny wybierz podgląd (patrz rysunek powyżej) i w podglądzie sprawdź działanie wstawionego przycisku.

Gdy uznasz, że twoja strona jest gotowa, kliknij przycisk OPUBLIKUJ (1) znajdujący się w prawym górnym rogu kreatora. Pojawi się wtedy okienko z adresem internetowym twojej witryny. Kliknij tam na napis ZARZĄDZAJ, a wtedy pojawi się okienko pozwalające na udostępnianie twojej witryny innym osobom. W pierwszej zakładce dotyczącej, wersji roboczej zmień opcje na „Publiczne w Internecie” po to, aby twoja witryna była dostępna dla wszystkich. Kliknij Gotowe, a następnie OPUBLIKUJ. Po publikacji, w prawym górnym rogu kreatora uaktywni się przycisk pozwalający na skopiowanie bezpośredniego linku do twojej witryny (2).


Skopiuj link prowadzący do Twojej witryny i wyślij go w e-mailu do prowadzącego zajęcia. W tytule e-maila wpisz: tiwc13 - witryna, a link do strony wklej w treści wiadomości.