Tworzenie stron WWW

Aplikacja KompoZer

Strony WWW da się tworzyć w notatniku, co udowodniła poprzednia lekcja, jednakże praca bezpośrednio w kodzie HTML nie jest prosta. Wymaga dobrej znajomości języka HTML. Z tego powodu opracowano różne edytory stron WWW, które pozwalają pracować w tzw. trybie WYSIWYG (What You See Is What You Get – to, co widzisz, jest tym, co dostaniesz). Polega to na tym, że użytkownik, tworząc stronę WWW, widzi bezpośrednio jej przyszły wygląd, a różne opcje są wprowadzane za pomocą menu lub narzędzi edycyjnych. Taką właśnie aplikacją jest KompoZer, dostępna darmowo w sieci Internet na różne systemy operacyjne. Pozwala ona tworzyć i zarządzać całymi witrynami WWW i dla początkującego twórcy stron jest zupełnie wystarczającym narzędziem.

Kliknij przycisk Start, a następnie wybierz opcję Programowanie. Tam znajdziesz aplikację KompoZer. Uruchom ją. Pojawi się okno robocze, które zmaksymalizuj na cały ekran monitora.

 

obrazek

 

Okno robocze podzielone jest na kilka obszarów:

Tworzymy swoją witrynę

Witryna (ang. site) jest katalogiem, który zawiera wszystkie strony WWW oraz ich elementy, które są ze sobą połączone tematycznie i tworzą pewną całość. Stworzymy teraz taką witrynę WWW i otworzymy ją w aplikacji KompoZer. W panelu Site Manager kliknij ikonkę: obrazek, która umożliwia edycję listy witryn. Jeśli lista ta jest pusta, to pojawi się okno dialogowe: Select Site Directory... (wybierz katalog witryny). Zamknij je, klikając w przycisk Anuluj (dodawanie witryny zrobimy od początku). Program otworzy wtedy okno Publish Setting (ustawienia publikowania).

 

obrazek

 

Po lewej stronie widzisz listę witryn. Pod nią znajdują się trzy przyciski. Kliknij przycisk New Site (nowa witryna). Pojawi się okno dialogowe Select site directory... (wybierz katalog witryny). Ponieważ dopiero rozpoczynamy pracę z witrynami, na dysku nie mamy jeszcze swojego katalogu. W lewym panelu wybierz swój katalog domowy, kliknij przycisk Utwórz katalog i nadaj temu katalogowi nazwę swojej klasy oraz numer grupy. Na przykład 1a1 (klasa I a, grupa 1). Zatwierdź ten katalog przyciskiem Otwórz.

 

obrazek

 

Nastąpi powrót do okna Publish Settings, jednakże teraz pola w tym oknie są wypełnione odpowiednimi informacjami, a na liście witryn pojawiła się nowa witryna 1a1.

 

obrazek

 

Nie zmieniaj nic więcej w tym oknie i zatwierdź je przyciskiem OK. Nastąpi powrót do aplikacji KompoZer, lecz w panelu Site Manager pojawi się twoja witryna 1a1:

 

obrazek

 

Otwórz tę witrynę klikając w plusik po lewej stronie jej nazwy. Teraz utworzymy katalog o nazwie Jowisz, w którym będziemy przechowywali pliki utworzone na dzisiejszej lekcji. U góry listy kliknij przycisk obrazek i w okienku Create a new directory? (Utworzyć jakiś nowy katalog?) wpisz:

 

obrazek

 

W witrynie 1a1 powstanie nowy katalog (jeśli go nie zobaczysz, to kliknij żółtą, zakręconą strzałkę, co odświeży widok listy):

 

obrazek

 

Mamy przygotowaną witrynę. Teraz zajmiemy się stroną WWW w edytorze. Najpierw musimy ją odpowiednio sformatować. Kliknij kursorem myszki puste miejsce na stronie (to ważne!) i z menu wybierz opcje:

 

Format → Page Title and Properties...

 

Otrzymasz okno dialogowe tytułu strony oraz jej własności.

 

obrazek

 

Wypełnij trzy pierwsze pola jak powyżej. Pola Language (język) i Character set (zestaw znaków) określ za pomocą przycisków Choose a language (wybierz jakiś język) i Choose a charset (wybierz jakiś zestaw znaków) – nie wpisuj ich ręcznie! Dla zestawu znaków wybierz z listy:

 

obrazek

 

Zatwierdź okno dialogowe klawiszem OK. Zwróć uwagę, że zakładka u góry strony przyjęła tytuł Jowisz. Obok pojawiła się malutka czerwona dyskietka, co oznacza, że w pliku są zmiany jeszcze niezapisane na dysku. Zatem zapiszemy tę stronę WWW w katalogu jowisz naszej witryny 1a1. Na pasku narzędziowym u góry okna kliknij ikonę (lub naciśnij kombinację klawiszy Ctrl+S): obrazek.

Pojawi się okienko dialogowe Save Page As (zapisz stronę jako):

 

obrazek

 

Zmień nazwę pliku na index.html, ustaw katalog zapisu na /uczen/1a1/jowisz (dostosuj do swojej grupy) i kliknij przycisk Zapisz. Strona zostanie zapisana w witrynie. W panelu Site Manager otwórz katalog jowisz klikając na plus po lewej stronie nazwy. Powinieneś zobaczyć plik swojej strony (jeśli go nie widzisz, to odśwież listę, klikając w żółtą strzałkę w lewym górnym rogu).

 

obrazek

 

Przechodzimy do edycji strony WWW. Wpisz tekst:

 

obrazek

 

Teraz wykorzystujemy pierwszy pasek narzędziowy, aby zmienić formatowanie tekstu na nagłówek pierwszego poziomu:

 

obrazek

 

Napis zmieni się i będzie teraz pisany dużą, pogrubioną czcionką:

 

obrazek

 

Wciśnij klawisz Enter i wybierz u góry ekranu narzędzie tabelek: obrazek. Narzędzie to umożliwia tworzenie lub edycję tabel. Po kliknięciu otwarte zostanie okno dialogowe Insert Table (wstaw tabelę):

 

obrazek

 

W okienku zaznacz dwie komórki w wierszu i kliknij lewym przyciskiem myszki. Pod nagłówkiem zostanie wstawiona tabela z dwiema komórkami. Tabela ta posłuży nam do podzielenia strony na dwa obszary. Można to zrobić inaczej, ale tak jest najprościej.

 

obrazek

Na stronie WWW nie potrzebne nam są krawędzie tej tabelki. Dlatego usuniemy je. Kliknij myszką jedną z komórek, aby zaznaczyć tabelkę, po czym ponownie kliknij narzędzie tabelek: obrazek.

Tym razem zostanie otworzone okno dialogowe Table Properties (własności tabeli):

 

obrazek

 

W okienku wybierz zakładkę Table i ustaw wartość Border (linie brzegu) na 0, po czym kliknij w przycisk OK. W trybie Normal linie tabelki są zawsze widoczne, aby twórca strony mógł je łatwo zauważyć:

 

obrazek

 

Jednakże na stronie nie będą się one pojawiać (możesz przełączyć tryb Normal na Preview, aby to zaobserwować).

W lewą komórkę tabelki wstawimy obrazek Jowisza, który znajduje się poniżej:

 

obrazek

 

Kliknij obrazek prawym przyciskiem myszki i wybierz opcję Zapisz obrazek jako.... Obrazek zapisz w swoim katalogu /uczen/1a1/jowisz pod nazwą jowisz.jpg. Po tej operacji odśwież listę w panelu Site Manager. Powinien pojawić się twój obrazek.

 

obrazek

 

Obrazek chwyć lewym przyciskiem myszki, przeciągnij do lewej komórki tabelki i zwolnij przycisk.

 

obrazek

 

Do prawej komórki tabelki przekopiuj poniższy tekst (z Wikipedii):

 

Jowisz – piąta w kolejności oddalenia od Słońca i największa planeta Układu Słonecznego. Jego masa jest nieco mniejsza niż jedna tysięczna masy Słońca, a zarazem dwa i pół razy większa niż łączna masa wszystkich innych planet w Układzie Słonecznym. Wraz z Saturnem, Uranem i Neptunem tworzy grupę gazowych olbrzymów, nazywaną czasem również planetami jowiszowymi.

Planetę znali astronomowie w czasach starożytnych, była związana z mitologią i wierzeniami religijnymi wielu kultur. Rzymianie nazwali planetę na cześć najważniejszego bóstwa swojej mitologii – Jowisza. Obserwowany z Ziemi Jowisz może osiągnąć jasność do −2,95m. Jest to trzeci najjaśniejszy obiekt na nocnym niebie po Księżycu i Wenus (okresowo, w momencie wielkiej opozycji, jasnością może mu dorównywać Mars).

 

obrazek

 

Klawiszem strzałka w dół przejdź pod tabelkę. W menu wybierz opcję:

 

Insert → Horizontal Line

 

Pod tabelką pojawi się linia pozioma. Wciśnij klawisz Enter, aby przejść pod linię. W tym miejscu dopisz tekst (C)2015 I LO w Tarnowie. Na stronie mamy wszystkie elementy:

 

obrazek

 

Przystępujemy teraz do formatowania strony. Z menu wybierz opcję:

 

Format → Page Colors and Background

 

W okienku dialogowym wybierz opcję Use custom colors: (użyj własnych kolorów), a następnie zmień kolejno kolory elementów. klikając w przyciski obok opisów i wybierając kolor w okienku dialogowym koloru:

 

obrazek

 

Okienko zatwierdź klawiszem OK. Strona zmieni wygląd:

 

obrazek

 

Zaznaczaj poszczególne teksty i za pomocą narzędzi pozycjonowania: obrazek zmień ich ułożenie. Nagłówek wyśrodkuj, tekst w prawej komórce tabelki wyjustuj (ostatnia ikonka), napis na spodzie wycentruj:

 

obrazek

 

Teksty kolorujemy za pomocą narzędzia: obrazek. Kliknięcie w prostokąt na wierzchu (ma zawsze aktualny kolor tekstu) otwiera okno dialogowe wyboru koloru dla tekstu. Kliknięcie w prostokąt w tle umożliwi określenie koloru tła. Aby pokolorować tekst, najpierw zaznaczamy przez przeciągnięcie myszką z wciśniętym lewym przyciskiem obszar tekstu, a później klikamy w odpowiedni prostokąt. Przy wyborze kolorów staraj się stosować zasadę dobrego kontrastu: tekst powinien być dobrze czytelny na tle.

Stronę zapisz na dysku. Możesz ją podglądnąć bezpośrednio w edytorze aplikacji KompoZer przez zmianę trybu na Preview (prawy dolny róg):

 

obrazek

 

Możesz również otworzyć swoją stronę lokalnie w przeglądarce Firefox. W tym celu kliknij u góry okna narzędzie przeglądarki: obrazek.

obrazek

 

Jeśli strona ma być widoczna w sieci, to musisz skopiować zawartość katalogu jowisz w swojej witrynie (tzn. pliki index.html i jowisz.jpg) do katalogu /var/www/html, który jest obsługiwany przez serwer Apache. Operację kopiowania wykonaj za pomocą menadżera plików. Gdy pliki zostaną przeniesione, uruchom przeglądarkę Firefox i w polu adresu wpisz localhost. Strony utworzone przez kolegów zobaczysz w swojej przeglądarce po wpisaniu w pasku adresowym numerów IP ich komputerów.

 


   I Liceum Ogólnokształcące   
im. Kazimierza Brodzińskiego
w Tarnowie

©2024 mgr Jerzy Wałaszek

Dokument ten rozpowszechniany jest zgodnie z zasadami licencji
GNU Free Documentation License.

Pytania proszę przesyłać na adres email: i-lo@eduinf.waw.pl

W artykułach serwisu są używane cookies. Jeśli nie chcesz ich otrzymywać,
zablokuj je w swojej przeglądarce.
Informacje dodatkowe