Instalacja Microsoft Expression Web 4

Do tworzenia stron WWW potrzebne jest odpowiednie oprogramowanie. Firma Microsoft udostępniła darmowo pakiet Expression Web 4. Pozwala on wygodnie tworzyć strony WWW oraz zarządzać nimi. Wadą jest tutaj brak słownika polskiego do poprawiania tekstu, jednakże nie przeszkadza to w nauce. Pakiet ten będziemy wykorzystywać wspólnie z XAMPP.

Najpierw pobieramy instalator z tego adresu:

https://www.majorgeeks.com/mg/getmirror/microsoft_expression_web,1.html

Na twój komputer zostanie załadowany plik Web_Trial_en.exe. W nazwie jest słowo Trial (próbny), co sugeruje wersję próbną, jednakże jest to pełna wersja bez ograniczeń czasowych. Uruchom pobrany program.

	Okienko startowe instalatora
	Zgoda na instalację. Kliknij Accept (zgoda).
	Pytanie o przyłączenie się do programu Microsoft dotyczącego poprawy doświadczeń użytkowników. Wybierz No (nie, bo ten program i tak już nie jest aktywny). Kliknij Next → (dalej).
	Instalacja Nic tu nie zmieniaj. Kliknij Install.
	Rozpoczyna się instalacja. Poczekaj na jej zakończenie.
	Instalacja zakończona. Kliknij Finish.

Najpierw na dysku przygotuj katalog, w którym będą powstawały projekty witryn. Uchom Microsoft Expression Web 4. Jeśli Expression Web było używane (np. przez inną grupę w pracowni), to może być już otwarta jakaś witryna. W takim przypadku należy ją zamknąć. Z menu wybierz opcję:

Site → Close

Teraz utworzymy swoją witrynę. Z menu wybierz opcję:

Site → New Site

Pojawi się okienko dialogowe kreatora witryny, w którym musimy podać kilka informacji:

Wybierz w polu środkowym Empty Site (pusta witryna), w polu Location (położenie) wpisz adres witryny na dysku, u mnie C:\wwwprj\w1 – katalog witryn na dysku C:\wwwprj oraz wewnętrzny katalog witryny w1. Pole Name (nazwa) jest automatycznie uzupełniane nazwą katalogu witryny. Gdy wszystko będzie gotowe, kliknij przycisk OK. Kreator utworzy w katalogu w1 witrynę. W oknie Expression Web pojawi się panel Site View (widok witryny), który jest na razie pusty, ponieważ nasza witryna nie zawiera jeszcze żadnego pliku (w rzeczywistości Expression Web umieszcza w katalogu witryny własne dane, które służą mu do zarządzania witryną i nie są widoczne w panelu).

Panel widoku witryny pełni wiele różnych funkcji. Utwórzmy teraz stronę startową WWW. Strona startowa jest stroną WWW, którą serwer WWW przesyła do klienta WWW, gdy klient zaadresuje witrynę. Gdy powstawały pierwsze witryny WWW w Internecie, strona startowa zawierała spis stron zawartych w witrynie WWW, dlatego zwykle posiadała nazwę index (spis). Będziemy się trzymać tej umowy, zatem utworzymy plik o nazwie index.html. Rozszerzenie html (lub niekiedy htm) oznacza plik strony w języku HTML (o tym za chwilę).

Z menu wybierz opcję:

File → New → Page...

Pojawi się okienko dialogowe kreatora nowej strony:

W pierwszym polu wybierz rodzaj stron (General = ogólne). W środkowym polu wybierz typ pliku (HTML - strona WWW w języku HTML). Kliknij przycisk OK. Kreator utworzy plik strony i zostanie ona wstawiona do panelu, który teraz zmieni się w edytor:

Zauważ, iż strona ma nazwę Untitled_1.html. Na spodzie edytora znajdują się trzy przyciski:

• Design: edytor w trybie wizualnym, w którym będziemy pracować przy projektowaniu wyglądu strony. W tym trybie strona jest prezentowana w sposób zbliżony do tego, co zobaczy użytkownik w przeglądarce internetowej.
• Split: okno edytora jest podzielone na dwie części, w jednej znajduje się widok strony, w drugiej znajduje się kod strony.
• Code: w oknie edytora mamy kod strony, czyli to, co zawiera plik html.

Teraz odpowiednio sformatujemy stronę.

Kliknij w przycisk Design. Następnie wskaż kursorem białe tło strony i kliknij je prawym przyciskiem myszki. Otworzy się menu kontekstowe związane ze stroną, którą kliknąłeś. Z menu wybierz opcję:

Page Properties...

Otworzy się okienko dialogowe:

Na zakładce General wpisz tytuł strony do pola Title. Tytuł ten pojawi się na zakładce strony w przeglądarce. Staraj się, aby tytuł był raczej krótki. Pozostałe pola możesz zostawić puste.

Kliknij w zakładkę Formatting.

Wybierz kolor tła strony (Background) oraz kolor tekstu (Text), jeśli mają być inne od standardowych. Pozostałych kolorów na razie nie zmieniaj. Kolory tła i tekstu powinny być kontrastowe, inaczej utrudnisz użytkownikowi czytanie treści strony.

Kliknij w zakładkę Language (język).

Na liście rozwijanej Page language (język strony) wybierz Polish (polski: szybko przejdziesz do tej opcji wybierając to pole i wpisując dwie pierwsze literki – po).

Na liście Save the document as: (zapisz ten dokument jako) wybierz kodowanie Unicode (UTF-8) (jeśli jest tam coś innego).

Gdy to zrobisz, zatwierdź okienko, klikając w OK.

Strona powinna odpowiednio zmienić swój kolor tła. Kliknij przycisk Code. Kod HTML strony uwzględnia wprowadzone zmiany:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="pl" http-equiv="Content-Language" />
<title>Moja pierwsza strona WWW</title>
<meta content="informatyka, matura, liceum, strony WWW" name="keywords" />
<meta content="To jest pierwsza witryna ćwiczeniowa utworzona w Microsoft Expression Web 4" name="description" />
</head>

<body style="color: #993300; background-color: #CCFFFF">

</body>

</html>

Zauważ, iż tworzenie strony przy pomocy Expression Web 4 nie wymaga programowania bezpośrednio w języku HTML, jednakże znajomość tego języka jest pożądana w przypadku, gdy chcemy wprowadzić coś, czego Expression Web nie obsługuje. Praca w trybie Design jest zalecana, ponieważ od razu widzimy wygląd (przybliżony) tworzonej strony.

Strona została utworzona. Zapiszemy ją teraz w naszej witrynie. Z menu wybierz opcję:

File → Save

lub naciśnij klawisze Ctrl + S. Ponieważ jest to pierwszy zapis do witryny, zostanie wyświetlone okno dialogowe zapisu pliku:

W polu File name (nazwa pliku) wpisz: index i kliknij przycisk Save (zapisz). Twoja strona zostanie zapisana w katalogu witryny (katalog ten jest automatycznie wybrany).

Gdy wrócisz do edytora na zakładce u góry pojawi się nazwa pliku index.html. Kliknij zakładkę Site view.

Zobaczysz na niej swój plik wraz z różnymi informacjami na jego temat:

Name: nazwa pliku
Title: tytuł strony
Size: przybliżony rozmiar strony
Type: typ pliku, html: strona WWW w języku HTML
Modified Date: czas modyfikacji
Modified by: kto zmodyfikował

Kontynuujemy dalej tworzenie strony. Wróć do zakładki index.html i wybierz tryb Design. Z menu wybierz opcję:

Insert → HTML → Paragraf

Do kodu strony zostanie wstawiony znacznik akapitu (<p></p>) i kursor będzie ustawiony wewnątrz tego akapitu.

W edytorze pokazana jest ramka z literką p u góry po lewej stronie. To taka pomoc wizualna. Literka p oznacza znacznik <p>, czyli znacznik akapitu. Jest to znacznik blokowy, a zatem składa się ze znacznika rozpoczynającego blok <p> i znacznika kończącego blok </p>. Treść akapitu jest umieszczana pomiędzy tymi znacznikami.

Dodatkowo u góry okna edytor wyświetla ciąg znaczników HTML, wewnątrz których znajduje się kursor. Czytamy to tak:

<body> : znacznik obejmujący całą stronę
<p> : znacznik akapitu wewnątrz <body>, w którym aktualnie znajduje się kursor.

Jeśli przełączysz się teraz do trybu Code, to zobaczysz kod strony:

Zwróć uwagę na pozycję kursora. Zmiana trybu zawsze ją zachowuje.

Wróć do trybu Design. Wpisz tekst: Mój zwierzak domowy:

Zmienimy teraz znacznik akapitu na znacznik nagłówka. Sprawdź, czy u góry edytora jest wybrany znacznik <p>. Dla pewności kliknij go lewym przyciskiem myszki. Pod paskiem menu masz różne narzędzia edycyjne. Wyszukaj białe pole z napisem Paragraph i strzałką w dół. Kliknij strzałkę i z rozwiniętej listy wybierz Heading 1 <h1>. Jest to tzw. nagłówek pierwszego poziomu. W języku HTML reprezentuje go znacznik blokowy <h1>. Po wybraniu nagłówka zawartość okna edytora zmienia się:

Nagłówki pisane są pogrubioną czcionką i większymi literami niż tekst akapitu. Zwróć uwagę, iż u góry masz teraz znaczniki <body> i <h1>. Przejdź do trybu Code. Kod strony wygląda następująco:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="pl" http-equiv="Content-Language" />
<title>Moja pierwsza strona WWW</title>
<meta content="informatyka, matura, liceum, strony WWW" name="keywords" />
<meta content="To jest pierwsza witryna ćwiczeniowa utworzona w Microsoft Expression Web 4" name="description" />
</head>

<body style="color: #993300; background-color: #CCFFFF">

<h1>Mój zwierzak domowy</h1>

</body>

</html>

Wróć do trybu Design i wybierz nagłówek (kliknij w <h1> u góry edytora). Na pasku narzędziowym pod menu masz ikonki pozycjonowania tekstu w poziomie, takie jak w procesorze tekstu. Kliknij w ikonkę wyśrodkowania (lub naciśnij Ctrl + E). Tekst nagłówka powinien zostać wyśrodkowany:

Kliknij pod nagłówkiem i z menu wybierz opcję:

Insert → HTML → Paragraf

Pod nagłówkiem pojawi się nowy akapit:

Skopiuj do schowka poniższy tekst:

Chomik dżungarski to bardzo mały zwierzak, sympatyczny i towarzyski (w klatce może mieszkać kilka osobników). Mierzy ok. 9 cm, a jego waga to 30-40 g. Ma kolor jasnopopielaty, a na grzbiecie ciemniejszą pręgę. Nie polecany dzieciom, ponieważ ze względu na nieduże rozmiary wymaga delikatnego traktowania i ostrożności. Chomik dżungarski żyje do dwóch lat.

Kliknij wnętrze obszaru akapitu i wciśnij klawisze Ctrl + V. W akapicie pojawi się nasz tekst:

Zapisz stronę (menu: File → Save lub Ctrl + S).

Plik strony możesz zobaczyć w przeglądarce WWW (np. w Firefox). Na pasku narzędziowym u góry pod menu kliknij ikonę podglądu:

To wszystko na pierwszy raz, witryna jest utworzona. Temat tworzenia stron WWW jest bardzo obszerny, dlatego polecamy przerobienie jakiegoś dobrego kursu. Znajdziesz takie na YouTube, np:

• Kurs HTML odc. 1: Tworzenie stron www. Pierwszy projekt, wiedza podstawowa
• Kurs HTML odc. 2: Budowanie struktury strony www

Pliki graficzne mogą występować w kilku formatach:

Format JPG

Format JPG  (ang. JPG = Joint Photographic Experts Group [JPEG]) pozwala przechowywać obrazy o naturalnych kolorach, tak jak na zdjęciu. Grafika JPG może być kompresowana, co zmniejsza wielkość pliku graficznego. Stosowana jest tutaj tzw. kompresja stratna. Polega to na tym, iż w zależności od współczynnika kompresji obraz będzie przedstawiany mniej lub bardziej szczegółowo. Obrazy skompresowane z dużym współczynnikiem kompresji zajmują mniej miejsca, lecz zwykle wyglądają gorzej.

	Mały współczynnik kompresji.
	Średni współczynnik kompresji. Zwróć uwagę na futro chomika. Przejścia kolorów już nie są płynne.
	Wysoki współczynnik kompresji.

Format JPG nadaje się szczególnie dobrze do zdjęć.

Format GIF

Format GIF (ang. GIF = Graphics Interchange Format) stosuje kompresję bezstratną, co oznacza, iż nie następuje utrata jakości. Z drugiej strony GIFy mogą przechowywać obrazki o liczbie kolorów ograniczonej do 256. Format nadaje się głównie do grafiki komputerowej o małej liczbie kolorów. Zdjęcia wychodzą dużo gorzej niż w JPG.

	256 kolorów.
	16 kolorów
	2 kolory

Z kolei grafika pikselowa wygląda lepiej w GIF niż w JPG.

	GIF
	JPG

W formacie GIF można wybrać jeden z kolorów jako przezroczysty:

Można również stosować animacje:

Format PNG

Format PNG (ang. PNG = Portable Network Graphics) łączy zalety JPG i GIF: duża liczba kolorów i kompresja bezstratna. Pliki PNG mają zwykle większy rozmiar od plików JPG/GIF.

Oprócz formatów JPG, GIF i PNG są stosowane również inne, nam jednak wystarczą te trzy.

Do zapamiętania:

• Formaty plików graficznych JPG, GIF, PNG.

Tworzymy nową witrynę:

Zostanie utworzona witryna w wybranym katalogu, która będzie zawierała jedną stronę. Plik strony powinieneś zobaczyć w panelu Site View:

Tu musimy wykonać kilka zmian. Kliknij raz lewym przyciskiem myszki w nazwę pliku default.htm.. Cały wiersz powinien zostać podświetlony na zielono. Wciśnij klawisz F2 (edycja nazwy pliku) i wpisz nową nazwę: index.html.

Teraz tytuł. Kliknij jeden raz lewym przyciskiem myszki w kolumnie Title w tytuł index.html, odczekaj około sekundy i kliknij jeszcze raz. Teraz będziesz mógł zmienić tytuł. Wpisz Jowisz:

Wciśnij Enter (plik strony musi być podświetlony na zielono). Strona zostanie załadowana do edytora. Wybierz tryb Design. Kliknij prawym przyciskiem myszki w puste tło strony i z menu kontekstowego wybierz opcję Page Properties... (właściwości strony)

Gdy pojawi się okienko dialogowe własności, przejdź na zakładkę Formatting. Ustaw ciemne tło (Background) i jasny tekst (więcej kolorów do wyboru uzyskasz klikając w opcję More Colors...):

Kliknij w zakładkę Language i w pierwszym polu ustaw Polish (kliknij w to pole i wpisz 2 literki "po" i wciśnij Enter):

Zatwierdź okienko przyciskiem OK. Strona w edytorze odpowiednio zmieni kolor:

Zwróć uwagę, iż za nazwą pliku index.html na zakładce u góry pojawiła się gwiazdka. Oznacza ona, iż są zmiany w pliku strony, które nie zostały jeszcze zapisane na dysku. Wciśnij Ctrl+S. Strona zostanie zapisana w witrynie w2 i gwiazdka zniknie:

Umieść kursor w prostokącie body i wpisz:

Zauważ, iż prostokąt body zmienił się automatycznie na p wraz z pierwszą wpisaną literą. Oznacza to znacznik <p>, czyli akapit (ang. paragraph). Zmienimy ten akapit w nagłówek pierwszego poziomu. Na górnym pasku narzędziowym kliknij w narzędzie wyboru stylu (jest tam napis Paragraph) i z menu wybierz heading 1 <h1> (nagłówek 1). Tekst powinien się odpowiednio zmienić:

Zapisz stronę na dysku (Ctrl+S).

Teraz wkleimy na stronę obraz Jowisza. Przy stronach WWW obowiązuje taka zasada, aby pliki graficzne były przechowywane w witrynie w osobnym katalogu o nazwie images (obrazy) – unikniemy wtedy bałaganu przy większej liczbie plików. Utworzymy taki katalog.  Przejdź na zakładkę Site View. Kliknij w obszar okna prawym przyciskiem myszki i z menu kontekstowego wybierz:

New → Folder

Zostanie utworzony nowy katalog. Nadaj mu nazwę images:

Teraz skopiujemy do tego katalogu obrazek Jowisza, który widzisz poniżej:

Kliknij w ten obraz prawym przyciskiem myszki i wybierz opcję Zapisz obraz jako. Otworzy się okno dialogowe zapisu.

Wyszukaj swoją witrynę i wejdź w niej do katalogu images. Zmień nazwę pliku na jowisz.jpg. Zatwierdź przyciskiem Zapisz (lub klawiszem Enter). Plik obrazka zostanie pobrany z sieci i zapisany w twojej witrynie. Możesz sprawdzić, czy plik się pobrał:

Na zakładce Site View kliknij szybko dwa razy lewym przyciskiem myszki w nazwę katalogu images. Katalog zostanie otwarty i powinieneś zobaczyć jego zawartość. Jeśli nie widzisz tam swojego pliku, to wciśnij klawisz F5 (odświeżanie widoku):

Aby wyjść z katalogu images, kliknij ikonkę żółtej teczuszki z zieloną strzałką, która znajduje się po prawej stronie u góry panelu.

Wróć na zakładkę index.html. Kliknij lewym przyciskiem myszki pod nagłówkiem. Następnie na górnym pasku narzędziowym kliknij ikonę wstawiania obrazka z pliku:

Pojawi się okno dialogowe odczytu z pliku. Otwórz katalog images, kliknij w plik jowisz.jpg i zatwierdź przyciskiem Insert (wstaw).

Gdy obraz jest wstawiany na stronę WWW, powinieneś dla niego określić krótki tekst i opis. Potrzebne to jest w przypadku, gdy obraz długo się ładuje z sieci. Wtedy te opisy są odpowiednio wyświetlane w miejscu obrazka.

W końcu obrazek pojawi się w edytorze:

Skopiuj poniższy tekst do schowka Windows (źródło: Wikipedia). W  edytorze kliknij pod obrazkiem i wklej tekst ze schowka.

Jowisz – gazowy olbrzym, największa planeta Układu Słonecznego. Piąta planeta w kolejności od Słońca. Masa Jowisza jest nieco mniejsza niż jedna tysięczna masy Słońca, a zarazem dwa i pół razy większa niż łączna masa pozostałych planet w Układzie Słonecznym. Wraz z Saturnem, Uranem i Neptunem tworzą 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[3]. Obserwowany z Ziemi Jowisz może osiągnąć jasność do −2,95m. Jest to trzeci co do jasności naturalny obiekt na nocnym niebie po Księżycu i Wenus (okresowo, w momencie wielkiej opozycji, jasnością może mu dorównywać Mars).

Największa planeta Układu Słonecznego składa się w trzech czwartych z wodoru i w jednej czwartej z helu; może posiadać także skaliste jądro złożone z cięższych pierwiastków. Szybka rotacja nadaje mu kształt spłaszczonej elipsoidy obrotowej (ma też niewielkie, ale zauważalne zgrubienie w płaszczyźnie równika). Powierzchnię planety, którą stanowią nieprzezroczyste wyższe warstwy atmosfery, pokrywa kilka warstw chmur, układających się w charakterystyczne pasy widoczne z Ziemi. Najbardziej znanym szczegółem jego powierzchni jest odkryta w XVII wieku przy pomocy teleskopu Wielka Czerwona Plama, będąca antycyklonem o średnicy większej niż średnica Ziemi. Planeta ma słabo widoczne pierścienie i potężną magnetosferę. Okrążają ją cztery wielkie, kuliste księżyce zwane galileuszowymi, które odkrył Galileusz w 1610. Ganimedes, największy z księżyców, ma średnicę większą niż planeta Merkury. Ogółem są znane 95 księżyce Jowisza.

Gdy mamy już wszystkie elementy strony, możemy je odpowiednio sformatować.

Kliknij w nagłówek i wyśrodkuj go (klawisze Ctrl+E lub narzędzie wyśrodkowania na górnym pasku narzędziowym).

Kliknij w obrazek i wyśrodkuj go w ten sam sposób.

Zaznacz cały tekst i z menu wybierz opcję:

Format → Paragraph...

W okienku dialogowym poustawiaj parametry tekstu jak poniżej (możesz poeksperymentować):

Zatwierdź okno, zapisz stronę na dysk (Ctrl+S) i przeglądnij w przeglądarce:

Co to jest styl?

Styl to w skrócie sposób formatowania elementów strony. W edytorze Expression Web możemy używać styli w trybie Design, co znacznie ułatwia tworzenie stron WWW. Zobaczmy jak to działa.

Tworzymy nową witrynę:

Zmień nazwę pliku strony WWW na index.html (w widoku witryny [Site View] kliknij plik default.html i naciśnij klawisz F2, po czym wpisz nową nazwę i zatwierdź zmianę nazwy). Nadaj stronie tytuł Tworzenie stylów (kliknij dwukrotnie tytuł strony w odstępie 2 sekund i wpisz nowy tytuł) i załaduj stronę do edytora.

W edytorze (tryb Design) kliknij prawym przyciskiem w tło strony, z menu kontekstowego wybierz opcję Page Properties i na zakładce Language ustaw język Polski (Polish):

Zatwierdź okienko przyciskiem OK. W ten sposób wrócimy do edytora.

Skopiuj poniższy tekst do swojej strony WWW (treść nie jest istotna, pochodzi z artykułu w naszym serwisie):

Pierwszymi narzędziami używanymi w charakterze pomocy rachunkowych były prawie na pewno palce, a nie jest po prostu przypadkiem, iż słowo "digit" (ang. cyfra) jest używane w języku angielskim również w odniesieniu do palca (lub kciuka) oraz do wielkości liczbowej.

Gdy potrzeba zapisywania większych liczb rosła, pierwotny człowiek wykorzystywał chętnie do tego celu dostępne mu materiały. Małe, okrągłe kamyki mogły być używane do wyrażania większych liczb niż starcza na to palców, a posiadały one jeszcze dodatkową zaletę - możliwość przechowywania wyników pośrednich do późniejszego wykorzystania. Więc nie jest również przypadkiem, iż słowo "kalkulować" pochodzi od łacińskiego słowa "calculus" oznaczającego mały, okrągły kamyczek spotykany w korytach rzek.

Najstarszymi znanymi przedmiotami używanymi do przedstawiania liczb są kości z wyrytymi karbami. Kości te, odkryte w Zachodniej Europie, pochodzą z okresu od 20.000 do 30.000 lat p.n.e. i odpowiadają czasookresowi pierwszego pojawienia się człowieka z Cro-Magnon. (Określenie "Cro-Magnon" pochodzi od jaskiń o tej samej nazwie znajdujących się w Południowej Francji, gdzie znaleziono w roku 1868 pierwsze szkielety tej rasy.)

Tekst zawiera trzy akapity. Kliknij w pierwszy z nich, aby został objęty prostokątem p:

Sformatujemy ten akapit. Wybierz w menu opcję Panels i sprawdź, czy jest włączony panel CSS Properties. Jeśli nie, to go włącz. Panel pojawia się zwykle po lewej stronie okna Expression Web:

CSS jest skrótem angielskiej nazwy Cascade Style Sheet (kaskadowy arkusz stylów). Gdy masz wybrany element strony (w naszym przypadku jest to pierwszy akapit), kliknij prawym przyciskiem myszki w pole Applied Rules (zastosowane reguły) panelu CSS Properties i z menu kontekstowego wybierz opcję New Inline Style (nowy styl miejscowy).

Styl miejscowy odnosi się tylko do wybranego elementu. Po wyborze tej opcji w górnym polu pojawi się informacja, iż styl miejscowy zostanie utworzony wewnątrz wybranego znacznika (tutaj w <p>):

W dolnym polu CSS Properties pojawią się własności stylu, które dla tego znacznika możesz zmienić. Nie musisz od razu zmieniać wszystkiego, tylko to, co chcesz. Zmienimy kolor tła i tekstu w tym znaczniku.

W grupie Background (tło) we własności background-color wybierz kolor tła obszaru objętego przez znacznik <p>:

Kolor tła akapitu zostanie odpowiednio zmieniony:

Po prawej stronie pola CSS Properties znajduje się suwak przewijania treści tego pola. Przeciągnij go lewym przyciskiem myszki w dół, aż zobaczysz grupę Font (czcionka). Zmień kolor we własności color. We własności font-weight (waga czcionki) ustaw bold (gruba):

Efekt powinien być następujący:

Przełącz edytor w tryb Code i przyglądnij się kodowi strony. Styl miejscowy został zdefiniowany w pierwszym znaczniku akapitu i obowiązuje on tylko w obrębie tego akapitu:

<p style="background-color: #99FFCC; color: #800000; font-weight: bold">Pierwszymi narzędziami...

Kolory podawane są w postaci liczby szesnastkowej zbudowanej z 6 cyfr oraz znaku #.

Teraz zmienimy kolor i tło pierwszych dwóch wyrazów w pierwszym akapicie. Wróć do trybu Design. Zaznacz wciśniętym lewym przyciskiem myszki dwa pierwsze wyrazy:

W opcji menu Panels sprawdź, czy jest wybrane Toolbox (przybornik). Jeśli nie, to wybierz. Panel Toolbox pojawia się zwykle po prawej stronie okna Expression Web:

W panelu wyszukaj <span>. Kliknij w to narzędzie prawym przyciskiem myszki i z menu kontekstowego wybierz Wrap (owiń). W kodzie strony wokół wybranych wyrazów zostanie wstawiony znacznik <span>:

<p style="background-color: #99FFCC; color: #800000; font-weight: bold">
<span>Pierwszymi narzędziami</span> używanymi w charakterze pomocy...

Znacznik <span> sam nie ma określonego znaczenia. Obejmuje on fragment tekstu i tyle. Ale objęty fragment możesz sobie sformatować wg potrzeb. I to jest właśnie funkcja tego znacznika: zrobić coś z objętym nim fragmentem.

Wróć do trybu Design i kliknij w którykolwiek z dwóch początkowych wyrazów pierwszego akapitu. Ponad oknem edytora powinien pojawić się ciąg znaczników, w których jesteśmy:

Znaczniki te tworzą ciąg zależności:

<body> → <p> → <span>

Czytamy to od strony prawej do lewej: Jesteśmy w polu znacznika <span> obejmującego dwa pierwsze wyrazy. Znacznik <span> jest objęty znacznikiem <p>, w którym jest tekst tego akapitu. Znacznik <p> objęty jest znacznikiem <body>, w którym jest treść całej twojej strony WWW. Hierarchicznie wygląda to tak:

<body>
    ...
    <p>
        ...
        <span>
            ...
        </span>
        ...
    </p>
    ...
</body>

Kliknij prawym przyciskiem w regułę w polu Applied Rules panelu CSS Properties i z menu kontekstowego wybierz opcję New Inline Style:

W polu pojawi się nowa reguła dotycząca znacznika <span>:

Dodaliśmy pusty styl miejscowy. Wybierz go lewym przyciskiem myszki:

Przejdź do własności tego stylu i zmień kolor tła (bacground-color w grupie Background) oraz kolor tekstu (color w grupie Font). Jak widzisz, robimy to dokładnie tak samo, jak robiliśmy dla akapitu.

Przełącz w tryb Code i przyglądnij się dokładnie kodowi strony. Wróć do trybu Design. Kliknij u góry okna w znacznik <body>. Następnie w panelu własności CSS w polu Applied Rules kliknij prawym przyciskiem myszki i z menu kontekstowego wybierz opcję New Inline Style. W polu CSS Properties wybierz kolory tła i tekstu inne niż w pierwszym akapicie.

Styl zdefiniowany w znaczniku <body> obowiązuje na całej stronie WWW. Jednak każdy znacznik zawarty w <body> może definiować dla siebie własny styl. Zmianie ulegają tylko te własności, które nowy styl zmienił.

Przyglądnij się kodowi strony.

Zapisz stronę w witrynie, a następnie przeglądnij ją w przeglądarce. Wykorzystaj narzędzie podglądu strony:

Podsumowanie:

Styl miejscowy definiowany jest wewnątrz znacznika HTML:

<znacznik style="własności"> ...obszar obowiązywania stylu... </znacznik>

Klasy stylów

Wyczyść style (opcja Clear Styles w panelu Apply Styles).

W menu wybierz opcję:

Format → New Style...

Spowoduje to wyświetlenie okienka dialogowego New Style (nowy styl):

Załóżmy, iż chcielibyśmy mieć kilka akapitów wyjustowanych (wyrównanych do lewego i prawego marginesu). Najpierw w polu Selector określamy nazwę, którą chcemy mieć dla tego stylu. Nazwa klasy musi rozpoczynać się od kropki. Ja wybrałem:

Teraz w polu Category (kategoria stylu) wybierz Block i w polu Text-align (ułożenie tekstu) ustaw Justify (wyjustowany):

Zatwierdź okienko przyciskiem OK i przełącz się na widok kodu strony. W obszarze nagłówka (<head> ... </head>) pojawił się nowy wpis:

<style type="text/css">
.moje001 {
	text-align: justify;
}
</style>

W ten sposób została zdefiniowana klasa stylu o nazwie moje001. Sprawdź, czy masz widoczny panel Apply Styles (stosowanie styli). Jeśli nie, to go włącz w menu:

Panels → Apply Styles

W panelu tym pojawił się nasz styl o nazwie .moje001:

Zaznacz lewym przyciskiem myszki dwa ostatnie akapity:

Następnie w panelu Apply Styles kliknij lewym przyciskiem myszki w .moje001. Tekst w akapitach zostanie wyjustowany:

Przełącz się na widok kodu strony. W znacznikach akapitu pojawił się wpis:

<p class="moje001">...

W ten sposób określiliśmy, iż tekst tych znaczników ma być formatowany wg naszego stylu. Sam styl moje001 może być dowolnie skomplikowany, wystarczy go raz zdefiniować na stronie WWW, a następnie stosować wszędzie tam, gdzie chcemy.

Zapisz stronę w witrynie; prześlij witrynę na serwer Apache i przeglądnij ją w przeglądarce.

Podsumowanie:

Klasę stylu definiujemy w nagłówku strony WWW przy pomocy opcji Format → New Style. W nagłówku powstanie wpis:

<style type="text/css">.nazwa_klasy {
    ... opcje formatu ...
}

Tak zdefiniowaną klasę stylu stosujemy w wybranym elemencie strony WWW przy pomocy panelu Apply Styles.

Arkusz stylów

Na szczęście istnieje rozwiązanie tego problemu: arkusz stylów. Jest to zwykły plik tekstowy, w którym umieszczasz definicje klas stylów. Następnie plik arkusza stylów łączysz ze stronami WWW, na których te klasy będą używane:

Liczba stron WWW nie jest ograniczona, może być ich 1000 i więcej. Jeśli teraz należy zmodyfikować jakiś styl, to robisz to tylko w arkuszu stylów, a wprowadzona zmiana od razu rozpropaguje się na wszystkich stronach WWW, które są połączone z tym arkuszem. Widzisz, jaka oszczędność pracy?

Zrobimy teraz przykładowy arkusz stylów i połączymy go z naszą stroną WWW. Edytor Expression Web pozwala tworzyć i wygodnie edytować arkusze stylów.

Najpierw usuniemy z pliku index.html wszystkie style. W edytorze przełącz się w tryb Design, kliknij lewym przyciskiem myszki gdziekolwiek na stronie WWW, następnie naciśnij klawisze Ctrl+A. Spowoduje to wybranie całej treści strony.

Teraz w panelu Apply Styles kliknij w Clear Styles (usuń style):

Przełącz się w tryb Code. Z akapitów zniknęły wszystkie style i klasy. Jednak w nagłówku strony (<head> ... </head>) wciąż pozostała definicja klasy moje001:

<style type="text/css">
.moje001 {
	text-align: justify;
}
</style>

Usuń te wiersze i zapisz stronę w witrynie (Ctrl + S).

Utworzymy teraz pusty plik arkusza stylów.  W menu wybierz opcję:

File → New → CSS

W edytorze zostanie otwarty nowy plik o nazwie Untitled_1.css. Zapiszmy go w witrynie. Naciśnij klawisze Ctrl + S. Otworzy się okienko zapisu. W polu File name (nazwa pliku) wpisz style.css. Reszty pól nie zmieniaj i kliknij w przycisk Save. Przełącz się na zakładkę Site View. W witrynie będą dwa pliki:

Stronę WWW należy połączyć z arkuszem stylów. Przejdź na zakładkę index.html i ustaw tryb Design. W menu wybierz opcje:

Format → CSS Styles → Attach Style Sheet

Pojawi się okienko dialogowe dołączania arkusza stylów.

Obok pola URL  (Uniform Resource Lokator) znajduje się przycisk Browse (przeglądaj). Kliknij go lewym przyciskiem myszki. Pojawi się okienko Select Style Sheet (wybór arkusza stylów). W okienku masz już ustawiony katalog witryny i powinieneś zobaczyć plik arkusza stylów style.css. Kliknij w ten plik, a następnie w przycisk Open (otwórz). Nazwa wybranego pliku arkusza stylów pojawi się w polu URL. Kliknij w przycisk OK. Arkusz stylów został dołączony do strony index.html. Zapisz stronę w witrynie (Ctrl+S).

Przełącz się w tryb Code i zlokalizuj w nagłówku strony wpis:

<link href="style.css" rel="stylesheet" type="text/css" />

W ten sposób wstawiana jest do kodu HTML strony informacja o dołączonym arkuszu stylów.

Teraz musimy zdefiniować w arkuszu klasy stylów, które chcemy stosować na stronach WWW. W edytorze przełącz się na zakładkę style.css.

Z menu wybierz opcje:

Format → New Style...

Zobaczysz znajome okienko New Style (nowy styl).

Załóżmy, że chcemy mieć klasę wyjustowanego tekstu. W polu Selector wpisz nazwę .j1 (nie zapomnij o kropce przed nazwą). W polu Category wybierz Block i w polu text-align ustaw justify:

Zatwierdź okienko przyciskiem OK. W arkuszu stylów pojawi się wpis:

.j1 {
	text-align: justify;
}

Zapisz arkusz w witrynie (arkusz stylów "pracuje" dopiero po zapisaniu go w witrynie, pamiętaj o tym).

Przejdź na zakładkę index.html i przełącz się w tryb Design. W panelu Apply Styles powinna pojawić się klasa .j1:

Zaznacz lewym przyciskiem myszki dwa pierwsze akapity i kliknij nazwę .j1 w panelu Apply Styles. Akapity powinny zostać wyjustowane.

W arkuszu stylów można zdefiniować dowolną liczbę klas, a każda klasa może zawierać wiele opcji formatowania. Teraz zdefiniujemy klasę, która będzie kolorowała tekst na czerwono, a jego tło na żółto.

Przełącz się na zakładkę style.css. W panelu Apply Styles kliknij w New Style... (jest to równoważne opcji menu Format → New Style...).

W polu Selector wpisz .cz.

W polu Category wybierz Font (czcionka). Na samym spodzie jest pole koloru color. Wybierz kolor czerwony:

W polu Category wybierz Background (tło), a następnie u samej góry w background-color wybierz kolor żółty:

Zatwierdź okno dialogowe kliknięciem w przycisk OK. W arkuszu stylów pojawi się nowy wpis:

.cz {
	color: #FF0000;
	background-color: #FFFF00;
}

Zapisz arkusz stylów w witrynie (Ctrl + S) i wróć na zakładkę index.html.

W panelu Apply Styles zobaczysz nową klasę .cz.

Zaznacz lewym przyciskiem myszki w pierwszym akapicie dwa początkowe wyrazy i kliknij w panelu Apply Styles klasę .cz. Efekt będzie następujący:

W drugim akapicie zaznacz tylko pierwszy wyraz i kliknij ponownie w klasę .cz. W trzecim akapicie zaznacz tylko pierwszą literę pierwszego wyrazu i kliknij w klasę .cz.

Przełącz tryb na Code i zlokalizuj wprowadzone zmiany.

Prześlij treść witryny na serwer i sprawdź efekt w przeglądarce.

Pobaw się tworzeniem klas styli w arkuszu. Biegłość wymaga czasu i dużo ćwiczeń. Tutaj podaliśmy jedynie podstawowe informacje.

Podsumowanie:

Użycie arkusza stylów wygląda następująco:

1. Tworzymy plik arkusza stylów i zapisujemy go w witrynie.
2. Arkusz stylów dołączamy do stron WWW wykorzystując opcję z menu Format → CSS Styles → Attach Style Sheet (opcję tę znajdziesz również w panelu Apply Styles).
3. W arkuszu definiujemy klasy stylów opcją Format → New Style... (opcję tę znajdziesz również w panelu Apply Styles).
4. Po każdorazowej zmianie treści arkusza stylów należy go zapisać w witrynie.
5. Na stronie WWW dostęp do zdefiniowanych klas w arkuszu mamy w panelu Apply Styles.

Hiperłącze

Hiperłącze (ang. link) jest elementem strony, który wskazuje inną stronę lub inny plik w Internecie. Uaktywnienie hiperłącza następuje po kliknięciu lewym przyciskiem myszki w element objęty hiperłączem. Po uaktywnieniu zostanie załadowany i wyświetlony wskazany plik (jeśli twoja przeglądarka potrafi obsłużyć ten plik, jeśli nie, to plik zostaje najczęściej załadowany do katalogu Pobrane i stamtąd można go uruchomić przy pomocy odpowiedniej aplikacji). Hiperłącze może też wskazywać inne miejsce strony WWW zawierającej hiperłącze. W takim przypadku kliknięcie w hiperłącze powoduje przewinięcie strony do wskazanego miejsca.

Hiperłącza do różnych plików

Uruchom Expression Web 4. Jeśli w aplikacji jest otwarta jakaś witryna, zamknij ją przy pomocy opcji menu

Site → Close

Utwórz nową witrynę z pustą stroną, zmień nazwę pliku strony na index.html i dodaj tytuł: Hiperłącza:

Załaduj stronę index.html do edytora i we własnościach strony ustaw język polski.

Zapisz stronę w witrynie (Ctrl+S).

Przejdź do widoku witryny (zakładka Site View) i utwórz nowy katalog o nazwie images (kliknij prawym przyciskiem muszki w puste miejsce pod index.html i z menu kontekstowego wybierz opcję New → Folder, a następnie nazwij katalog images):

Katalog możesz również utworzyć klikając w ikonę żółtej teczuszki w prawym górnym rogu okna widoku witryny:

Utwórz w ten sposób drugi katalog o nazwie files (pliki) i kliknij w Name (nazwa u góry kolumny)  (uporządkuje to alfabetycznie pliki i katalogi w widoku witryny):

Poniżej masz trzy obrazy. Skopiuj je do katalogu images następująco:

• Kliknij prawym przyciskiem myszki pierwszy obraz i wybierz z menu kontekstowego opcję: Kopiuj obraz. Obraz zostanie skopiowany do schowka.
• Przejdź do Expression Web na zakładkę Site View.
• Kliknij prawym przyciskiem myszki katalog images i z menu kontekstowego wybierz opcję Paste. Obraz w schowku zostanie skopiowany do katalogu images.
• Postąp podobnie z obrazem drugim i trzecim.
• Otwórz katalog images i zmień nazwy plików na o1.jpg, o2.jpg i o2.jpg (klikasz w nazwę pliku, aby go wybrać, po czym naciskasz klawisz F2 i zmieniasz nazwę i zatwierdzasz zmianę klawiszem Enter). Katalog powinien wyglądać następująco:

• Wróć do katalogu głównego witryny klikając ostatnią ikonę u góry okna po prawej stronie (teczka katalogu ze strzałką).

Obrazy do skopiowania do katalogu images:

Teraz do katalogu files skopiujemy trzy poniższe pliki następująco:

• Wskaż kursorem myszki plik i kliknij go prawym przyciskiem. Z menu kontekstowego wybierz opcję Zapisz element docelowy jako...
• Gdy pojawi się okienko zapisu, przejdź do katalogu files w twojej witrynie i kliknij w przycisk Zapisz.
• Gdy zapiszesz wszystkie trzy pliki, wróć do Expression Web. Otwórz katalog files i zmień nazwy plików odpowiednio na: p1.docx, p2.xls i p3.txt (nie zmieniaj rozszerzeń nazw plików):

Pliki do skopiowania do katalogu files:

Plik Word

Plik Excel

Plik tekstowy

Mamy już wszystko do utworzenia strony. Wróć na zakładkę index.html. Przekopiuj na stronę poniższy tekst:

Hiperłącza do plików graficznych:

Obraz nr 1
Obraz nr 2
Obraz nr 3

Hiperłącza do pozostałych plików:

Plik edytora tekstu Microsoft Word
Plik arkusza kalkulacyjnego Microsoft Excel
Plik tekstowy

Kliknij w pierwszy wiersz Hiperłącza do plików graficznych: (nie musisz go zaznaczać, wystarczy, aby w tym wierszu został umieszczony kursor). U góry w przyborniku zmień styl Paragraph (akapit) na Heading 2 (nagłówek drugiego poziomu), to samo zrób z drugim tekstem Hiperłącza do pozostałych plików:.

Zaznacz lewym przyciskiem myszki tekst: Obraz nr 1. Następnie kliknij w przedostatnią ikonę na pasku narzędziowym (kula ziemska z ogniwami łańcucha : hiperłącze po angielsku to link, czyli ogniwo):

Możesz również nacisnąć klawisze Ctrl+K.

Pojawi się okienko dialogowe wstawiania hiperłącza:

W okienku tym po lewej stronie mamy rodzaj hiperłącza (Link to = łącze do). W tym wypadku chcemy, aby hiperłącze wskazywało określony plik, zatem powinna być wybrana opcja pierwsza: Existing File or Web Page (istniejący plik lub strona WWW).

W centralnym obszarze okienka jest bieżący katalog witryny. Powinna być zaznaczona opcja pierwsza: Current Folder (bieżący katalog). Pierwszy link ma wskazywać na obrazek o1.jpg, który umieściliśmy w katalogu images. Kliknij zatem dwukrotnie lewym przyciskiem myszki w katalog images, a następnie w plik o1.jpg.

Kliknij w przycisk Target Frame... (ramka docelowa) i wybierz opcję New Window (nowe okno).

Spowoduje to, iż po kliknięciu w link obrazek zostanie załadowany na nowej zakładce w przeglądarce. Inaczej zastąpiłby bieżąco wyświetlaną stronę. Zatwierdź okienka przyciskami OK. Link jest gotowy:

Hiperłącza standardowo wyświetlane są tekstem w kolorze niebieskim i z podkreśleniem. Można to zmienić stylami, co zrobimy dalej w tym rozdziale.

W podobny sposób utwórz hiperłącza na dwóch pozostałych tekstach:

Obraz nr 2 → o2.jpg
Obraz nr 3 → o3.jpg

Przełącz edytor w tryb kodu i zlokalizuj hiperłącza. Hiperłącze używa znacznika <a...>tekst</a>. Wewnątrz znacznika zdefiniowane są parametry hiperłącza.

Zapisz stronę w witrynie i użyj przycisku przeglądania w przeglądarce:

Sprawdź, czy po kliknięciu hiperłącza ładowane są właściwe obrazki oraz czy są one ładowane na osobnych zakładkach.

Teraz utworzymy hiperłącza do pozostałych plików. W trybie Design zaznacz lewym przyciskiem myszki tekst: "Plik edytora tekstu Microsoft Word", a następnie naciśnij klawisze Ctrl+K. Pojawi się okienko wstawiania hiperłącza. Robimy to dokładnie tak samo, jak przy plikach graficznych. Otwierasz katalog files i wybierasz plik p1.docx.

Zanim zatwierdzisz okienko, kliknij w przycisk Target Frame... i wybierz opcję New Window:

Teraz zatwierdź okienka przyciskami OK. Link został utworzony. Tak samo zrób z pozostałymi hiperłączami:

Zapisz stronę w witrynie.

Style dla hiperłączy

Standardowo hiperłącza wyświetlane są z podkreśleniem w kolorze niebieskim (jeśli hiperłącze nie zostało wykorzystane) lub bordowym (gdy użytkownik już kliknął w hiperłącze). Przy pomocy stylów można to zmienić. Utworzymy dla poprzedniej witryny arkusz stylów. Uruchom Expression Web i otwórz witrynę w5 (jeśli nie jest już otwarta). Z menu wybierz opcję:

File → New → CSS

W edytorze zostanie utworzony nowy plik arkusza. Musisz go zapisać w katalogu witryny. Naciśnij klawisze Ctrl+S, po czym zmień nazwę pliku na style.css.

Łączymy plik arkusza ze stroną index.html. Przejdz na zakładkę Site View i załaduj do edytora plik index.html.

W panelu Apply Styles kliknij opcję Attach Style Sheet (dołącz arkusz stylów). W okienku dialogowym, które się pojawi, wpisz w polu URL nazwę pliku arkusza stylów: style.css:

Zapisz plik index.html w katalogu witryny (Ctrl+S).

Zatwierdź okno przyciskiem OK.

Teraz przechodzimy w edytorze na zakładkę style.css. W arkuszu stylów można przedefiniować każdy znacznik HTML. Tak właśnie zrobimy ze znacznikiem <a>, który wprowadza hiperłącze na stronie. W panelu Apply Styles kliknij w New Style... . Na ekranie pojawi się znane ci okno definiowania stylu. W polu Selector kliknij strzałkę w dół. Pojawi się lista znaczników, których styl możesz zdefiniować:

U samej góry listy mamy znacznik <a> wraz z czterema jego stanami:

Każdy z tych stanów można sformatować stylami. Ważna jest kolejność definiowania, taka jak podana wyżej. Kliknij w stan a:link. Teraz wybierz dla tego stanu odpowiedni styl, np. zmień kolor czcionki i jako text-decoration wybierz none:

Zatwierdź okno przyciskiem OK. W arkuszu stylów pojawi się definicja:

Styl tex-decoration określa ozdobniki tekstu. Jeśli wybierzesz none, to tekst będzie bez ozdobników.

Teraz w podobny sposób definiujemy pozostałe stany. W panelu Apply Styles klikasz w New Style... . W oknie dialogowym New Style jako Selector wybierasz z listy stany znacznika <a> zgodnie z podaną wyżej kolejnością i określasz dla nich odpowiednie style: Dekorację tekstu none użyj we wszystkich stanach, za wyjątkiem a:hover, w którym to wybierz underline. Gdy kursor myszki wskaże hiperłącze, to zostanie ono podkreślone, co nada stronie dynamiki.

Zapisz arkusz stylów w katalogu witryny, przejdź na zakładkę index.html i uruchom podgląd w przeglądarce.

Projekt witryny

Zbudujemy prostą witrynę WWW składającą się z czterech stron WWW oraz arkusza stylów o następującej strukturze:

Stroną startową będzie strona index.html. Strona ta będzie połączona za pomocą hiperłączy ze stronami s1.html, s2.html i s3.html. Na każdej stronie s1...s3.html będzie się znajdowało hiperłącze powrotu do strony startowej index.html. Każda strona będzie połączona z arkuszem stylów style.css. Jako treść witryny wykorzystamy nowelę Henryka Sienkiewicza "Latarnik". Nowela składa się z trzech rozdziałów. Rozdziały umieścimy na stronach s1...s3.html. Na stronie startowej index.html będzie się znajdował spis treści.

Tworzenie witryny

Uruchom aplikację Expression Web. Jeśli masz otwartą witrynę, zamknij ją opcją menu:

Site → Close

Wybierz opcję menu:

Site → New Site...

W oknie dialogowym New zaznacz opcję Empty Site (pusta witryna), po czym kliknij w przycisk OK (zapamiętaj adres witryny na dysku z pola Location). Expression Web utworzy pusty katalog witryny (u mnie jest to C:\wwwprj\w6).

Utworzymy plik arkusza stylów. Z menu wybierz opcję:

File → New → CSS

W edytorze pojawi się plik arkusza stylów. Zapisz go w witrynie (Ctrl+S) pod nazwą style.css.

W arkuszu style.css zdefiniuj style dla stanów hiperłącz (opcja New Style... w panelu Apply Styles), np:

a:link {
	color: #336699;
	text-decoration: none;
}
a:visited {
	color: #9900CC;
	text-decoration: none;
}
a:hover {
	color: #FF0000;
	text-decoration: underline;
}
a:active {
	color: #FF0000;
	text-decoration: none;
}

Dodatkowo zmodyfikuj styl znacznika <body> (ciemny tekst, jasne tło, tekst wyjustowany):

body {
	color: #008080;
	background-color: #FFFFCC;
	text-align: justify;
}

Zapisz arkusz stylów w witrynie (Ctrl+S).

Teraz zajmiemy się stronami WWW. Najpierw utworzymy stronę szablonową, którą odpowiednio sformatujemy, a następnie skopiujemy kilka razy, aby otrzymać pozostałe strony WWW. Wybierz opcję menu:

File → New → HTML

W edytorze zostanie utworzona strona Untitled_1.html. Kliknij prawym przyciskiem myszki w tło strony (musisz pracować w trybie Design) i z menu kontekstowego wybierz opcję:

Page Properties...

W okienku własności strony kliknij w zakładkę Language i w pierwszym polu ustaw język strony na Polish:

Zatwierdź okienko dialogowe przyciskiem OK.

Zapisz stronę w witrynie pod nazwą szablon.html i zmień jej tytuł również na szablon:

Teraz połączymy stronę szablon.html z arkuszem style.css. Jeśli nie wybrałeś zakładki strony szablon.html, to wybierz ją. W panelu Apply Styles kliknij opcję Attach Style Sheet... i w polu URL: okienka dialogowego wpisz nazwę pliku arkusza stylów: style.css:

Zatwierdź okienko dialogowe przyciskiem OK. Strona w edytorze powinna zmienić kolor tła na taki, jaki wybrałeś w arkuszu stylów dla znacznika <body>. Zapisz stronę w witrynie (Ctrl+S).

Teraz skopiujemy stronę szablon.html cztery razy. Przełącz się na zakładkę Site View. Chwyć plik strony szablon.html prawym przyciskiem myszki i przeciągnij w dół. Gdy zwolnisz przycisk myszki, pojawi się menu kontekstowe. Wybierz z niego opcję Copy Here (kopiuj tutaj). W witrynie pojawi się nowy plik szablon_copy(1).html:

Jest on dokładną kopią pliku szablon.html. Operację tę powtórz jeszcze 3 razy, aby powstały 4 kopie:

Wybierz lewym przyciskiem myszki pierwszą kopię, naciśnij klawisz F2 i zmień jej nazwę na index.html. Naciśnij na klawiaturze strzałkę w dół i zmień nazwę drugiego pliku na s1.html. W podobny sposób zmień nazwy pozostałych dwóch plików na s2.html i s3.html:

Witryna jest utworzona i zawiera wszystkie potrzebne pliki.

Tworzenie treści

Teraz zajmiemy się zawartością stron w witrynie. Najpierw załadujemy pliki stron do edytora Expression Web. Kliknij jeden raz lewym przyciskiem myszki w plik index.html. Plik powinien zostać zaznaczony zielonym podświetleniem. Wciśnij i przytrzymaj klawisz Shift. Kliknij lewym przyciskiem myszki w plik s3.html. Spowoduje to zaznaczenie plików od index.html do s3.html:

Teraz naciśnij klawisz Enter. Zaznaczone pliki zostaną otwarte w edytorze i dostęp do nich masz poprzez zakładki:

Kliknij w zakładkę index.html i skopiuj do edytora poniższy tekst:

Henryk Sienkiewicz

LATARNIK

Opowiadanie to osnute jest na wypadku rzeczywistym, o którym w swoim czasie pisał J. Horain w jednej ze swoich korespondencyj z Ameryki.

Spis treści

Rozdział I
Rozdział II
Rozdział III

Kliknij w zakładkę s1.html i skopiuj do edytora poniższy tekst:

Powrót do menu

Rozdział I

Pewnego razu zdarzyło się, że latarnik w Aspinwall, niedaleko Panamy, przepadł bez wieści. Ponieważ stało się to wśród burzy, przypuszczano, że nieszczęśliwy musiał podejść nad sam brzeg skalistej wysepki, na której stoi latarnia, i został spłukany przez bałwan. Przypuszczenie to było tym prawdopodobniejsze, że na drugi dzień nie znaleziono jego łódki stojącej w skalistym wrębie. Zawakowało tedy miejsce latarnika, które trzeba było jak najprędzej obsadzić, ponieważ latarnia niemałe ma znaczenie tak dla ruchu miejscowego, jak i dla okrętów idących z New Yorku do Panamy. Zatoka Moskitów obfituje w piaszczyste ławice i zaspy, między którymi droga nawet w dzień jest trudna, w nocy zaś, zwłaszcza wśród mgieł podnoszących się często na tych ogrzewanych podzwrotnikowym słońcem wodach prawie niepodobna. Jedynym wówczas przewodnikiem dla licznych statków bywa światło latarni. Kłopot wynalezienia nowego latarnika spadł na konsula Stanów Zjednoczonych, rezydującego w Panamie, a był to kłopot niemały, raz z tego powodu, że następcę trzeba było znaleźć koniecznie w ciągu dwunastu godzin; po wtóre, następca musiał być nadzwyczaj sumiennym człowiekiem, nie można więc było przyjmować byle kogo; na koniec w ogóle kandydatów na posadę brakło. Życie na wieży jest nadzwyczaj trudne i bynajmniej nie uśmiecha się rozpróżniaczonym i lubiącym swobodną włóczęgę ludziom Południa. Latarnik jest niemal więźniem. Z wyjątkiem niedzieli nie może on wcale opuszczać swej skalistej wysepki. Łódź z Aspinwall przywozi mu raz na dzień zapasy żywności i świeżą wodę, po czym przywożący oddalają się natychmiast, na całej zaś wysepce, mającej morgę rozległości, nie ma nikogo. Latarnik mieszka w latarni, utrzymuje ją w porządku; w dzień daje znaki wywieszaniem różnokolorowych flag wedle wskazówek barometru, w wieczór zaś zapala światło. Nie byłaby to wielka robota, gdyby nie to, że chcąc się dostać z dołu do ognisk na szczyt wieży, trzeba przejść przeszło czterysta schodów krętych i nader wysokich, latarnik zaś musi odbywać tę podróż czasem i kilka razy dziennie. W ogóle jest to życie klasztorne, a nawet więcej niż klasztorne, bo pustelnicze. Nic też dziwnego, że Mr. Izaak Falconbridge był w niemałym kłopocie, gdzie znajdzie stałego następcę po nieboszczyku, i łatwo zrozumieć jego radość, gdy najniespodzianiej następca zgłosił się jeszcze tegoż samego dnia. Był to człowiek już stary, lat siedmiudziesiąt albo i więcej, ale czerstwy, wyprostowany, mający ruchy i postawę żołnierza. Włosy miał zupełnie białe, płeć spaloną, jak u Kreolów, ale sądząc z niebieskich oczu, nie należał do ludzi Południa. Twarz jego była przygnębiona i smutna, ale uczciwa. Na pierwszy rzut oka podobał się Falconbridge'owi. Pozostało go tylko wyegzaminować, wskutek czego wywiązała się następująca rozmowa:

— Skąd jesteście?

— Jestem Polak.

— Coście robili dotąd?

— Tułałem się.

— Latarnik powinien lubić siedzieć na miejscu.

— Potrzebuję odpoczynku.

— Czy służyliście kiedy? Czy macie świadectwa uczciwej służby rządowej?

Stary człowiek wyciągnął z zanadrza spłowiały jedwabny szmat, podobny do strzępu starej chorągwi. Rozwinął go i rzekł:

— Oto są świadectwa. Ten krzyż dostałem w roku trzydziestym. Ten drugi jest hiszpański z wojny karlistowskiej; trzeci to legia francuska; czwarty otrzymałem na Węgrzech. Potem biłem się w Stanach przeciw południowcom, ale tam nie dają krzyżów — więc oto papier.

Falconbridge wziął papier i zaczął czytać.

— Hm! Skawiński? To jest wasze nazwisko?… Hm!… Dwie chorągwie zdobyte własnoręcznie w ataku na bagnety… Byliście walecznym żołnierzem!

— Potrafię być i sumiennym latarnikiem.

— Trzeba tam co dzień wchodzić po kilka razy na wieżę. Czy nogi macie zdrowe?

— Przeszedłem piechotą „pleny”.

— All right! Czy jesteście obeznani ze służbą morską?

— Trzy lata służyłem na wielorybniku.

— Próbowaliście różnych zawodów?

— Nie zaznałem tylko spokojności.

— Dlaczego?

Stary człowiek ruszył ramionami.

— Taki los…

— Wszelako na latarnika wydajecie mi się za starzy.

— Sir — ozwał się nagle kandydat wzruszonym głosem. — Jestem bardzo znużony i skołatany. Dużo, widzicie, przeszedłem. Miejsce to jest jedno z takich, jakie najgoręcej pragnę otrzymać. Jestem stary, potrzebuję spokoju! Potrzebuję sobie powiedzieć: tu już będziesz siedział, to jest twój port. Ach, Sir! To od was tylko zależy. Drugi raz się może taka posada nie zdarzy. Co za szczęście, że byłem w Panamie… Błagam was… Jak mi Bóg miły, jestem jak statek, który jeśli nie wejdzie do portu, to zatonie… Jeśli chcecie uszczęśliwić człowieka starego… Przysięgam, że jestem uczciwy, ale… Dość mam już tego tułactwa…

Niebieskie oczy starca wyrażały tak gorącą prośbę, że Falconbridge, który miał dobre, proste serce, czuł się wzruszony.

— Well! — rzekł. — Przyjmuję was. Jesteście latarnikiem.

Twarz starego zajaśniała niewypowiedzianą radością.

— Dziękuję.

— Czy możecie dziś jechać na wieżę?

— Tak jest.

— Zatem good bye!… Jeszcze słowo: za każde uchybienie w służbie dostaniecie dymisję.

— All right!

Tegoż samego jeszcze wieczora, gdy słońce stoczyło się na drugą stronę międzymorza, a po dniu promiennym nastąpiła noc bez zmierzchu, nowy latarnik widocznie był już na miejscu, bo latarnia rzuciła jak zwykle na wody swoje snopy jaskrawego światła. Noc była zupełnie spokojna, cicha, prawdziwie podzwrotnikowa, przesycona jasną mgłą, tworzącą koło księżyca wielki, zabarwiony tęczowo krąg o miękkich, nieujętych brzegach. Morze tylko burzyło się, ponieważ przypływ wzbierał. Skawiński stał na balkonie, tuż koło olbrzymich ognisk, podobny z dołu do małego, czarnego punkciku. Próbował zebrać myśl i objąć swe nowe położenie. Ale myśl jego była nadto pod naciskiem, by mogła snuć się prawidłowo. Czuł on coś takiego, co czuje szczuty zwierz, gdy wreszcie schroni się przed pogonią na jakiejś niedostępnej skale lub w pieczarze. Nadszedł nareszcie dla niego czas spokoju. Poczucie bezpieczeństwa napełniło jakąś niewysłowioną rozkoszą jego duszę. Oto mógł na tej skale po prostu urągać dawnemu tułactwu, dawnym nieszczęściom i niepowodzeniom. Był on naprawdę jak okręt, któremu burza łamała maszty, rwała liny, żagle, którym rzucała od chmur na dno morza, w który biła falą, pluła pianą — a który jednak zawinął do portu. Obrazy tej burzy przesuwały się teraz szybko w jego myśli w przeciwstawieniu do cichej przyszłości, jaka miała się rozpocząć. Część swych dziwnych kolei opowiadał sam Falconbridge'owi, nie wspomniał jednak o tysiącznych innych przygodach. Miał on nieszczęście, że ilekroć rozbił gdzie namiot i rozniecił ognisko, by się osiedlić stale, jakiś wiatr wyrywał kołki namiotu, rozwiewał ognisko, a jego samego niósł na stracenie. Spoglądając teraz z wieżowego balkonu na oświecone fale, wspominał o wszystkim, co przeszedł. Oto bił się w czterech częściach świata — i na tułaczce próbował wszystkich niemal zawodów. Pracowity i uczciwy, nieraz dorabiał się grosza i zawsze tracił go wbrew wszelkim przewidywaniom i największej ostrożności. Był kopaczem złota w Australii, poszukiwaczem diamentów w Afryce, strzelcem rządowym w Indiach Wschodnich. Gdy w swoim czasie założył w Kalifornii farmę, zgubiła go susza; próbował handlu z dzikimi plemionami zamieszkującymi wnętrze Brazylii: tratwa jego rozbiła się na Amazonce, on sam zaś bezbronny i prawie nagi tułał się w lasach przez kilka tygodni, żywiąc się dzikim owocem, narażony co chwila na śmierć w paszczy drapieżnych zwierząt. Założył warsztat kowalski w Helenie, w Arkansas, i — spalił się w wielkim pożarze całego miasta. Następnie w Górach Skalistych dostał się w ręce Indian i cudem tylko został wybawiony przez kanadyjskich strzelców. Służył jako majtek na statku kursującym między Bahią i Bordeaux, potem jako harpunnik na wielorybniku: oba statki rozbiły się. Miał fabrykę cygar w Hawanie — został okradziony przez wspólnika w chwili, gdy sam leżał chory na „vomito”.

Wreszcie przybył do Aspinwall — i tu miał być kres jego niepowodzeń. Cóż go bowiem mogło doścignąć jeszcze na tej skalistej wysepce? Ani woda, ani ogień, ani ludzie. Zresztą od ludzi Skawiński niewiele doznał złego. Częściej spotykał dobrych niż złych.

Zdawało się natomiast, że prześladują go wszystkie cztery żywioły. Ci, co go znali, mówili, że nie ma szczęścia, i tym objaśniali wszystko. On sam wreszcie stał się trochę maniakiem. Wierzył, że jakaś potężna a mściwa ręka ściga go wszędzie, po wszystkich lądach i wodach. Nie lubił jednak o tym mówić; czasem tylko, gdy go pytano, czyja to miała być ręka, ukazywał tajemniczo na Gwiazdę Polarną i odpowiadał, że to idzie stamtąd… Rzeczywiście, niepowodzenia jego były tak stałe, że aż dziwne, i łatwo mogły zabić gwóźdź w głowie, zwłaszcza temu, kto ich doznawał. Zresztą miał cierpliwość Indianina i wielką spokojną siłę oporu, jaka płynie z prawości serca. W swoim czasie na Węgrzech dostał kilkanaście pchnięć bagnetem, bo nie chciał chwycić za strzemię, które mu ukazywano jako środek ratunku, i krzyczeć: pardon. Tak samo nie poddawał się i nieszczęściu. Lazł pod górę tak pracowicie, jak mrówka. Zepchnięty sto razy, rozpoczynał spokojnie swoją podróż po raz setny pierwszy. Był to w swoim rodzaju szczególniejszy dziwak. Stary ten żołnierz, opalony Bóg wie w jakich ogniach, zahartowany w biedach, bity i kuty, miał serce dziecka. W czasie epidemii na Kubie zapadł na nią dlatego, że oddał chorym wszystką swoją chininę, której miał znaczny zapas, nie zostawiwszy sobie ani grama.

Było w nim jeszcze i to dziwnego, że po tylu zawodach zawsze był pełen ufności i nie tracił nadziei, że jeszcze wszystko będzie dobrze. W zimie ożywiał się zawsze i przepowiadał jakieś wielkie wypadki. Czekał ich niecierpliwie i myślą o nich żył lata całe… Ale zimy mijały jedne za drugimi i Skawiński doczekał się tylko tego, że ubieliły mu głowę. Wreszcie zestarzał się — począł tracić energię. Cierpliwość jego poczynała być coraz podobniejsza do rezygnacji. Dawny spokój zmienił się w skłonność do roztkliwiania się i ten hartowny żołnierz jął przeradzać się w beksę gotowego załzawić się z lada powodu. Prócz tego od czasu do czasu tłukła go najstraszliwsza nostalgia, którą podniecała lada okoliczność: widok jaskółek, szarych ptaków podobnych do wróbli, śniegi na górach lub zasłyszana jakaś nuta, podobna do słyszanej niegdyś… Na koniec opanowała go tylko jedna myśl: myśl spoczynku. Owładnęła ona starcem zupełnie i wchłonęła w siebie wszelkie inne pragnienia i nadzieje. Wieczny tułacz nie mógł już sobie wymarzyć nic bardziej upragnionego, nic droższego nad jaki spokojny kąt, w którym by mógł odpocząć i czekać cicho kresu. Może właśnie dlatego, że szczególne jakieś dziwactwo losu rzucało nim po wszystkich morzach i krajach tak, że prawie nie mógł tchu złapać, wyobrażał sobie, że największym ludzkim szczęściem jest — tylko nie tułać się. Co prawda, to i należało mu się takie skromne szczęście, ale tak już był zwyczajny zawodów, że myślał o tym, jak w ogóle ludzie marzą o czymś niedoścignionym. Spodziewać się nie śmiał. Tymczasem niespodzianie w ciągu dwunastu godzin dostał posadę jakby wybraną dla siebie ze wszystkich na świecie. Nic też dziwnego, że gdy wieczorem zapalił swoją latarnię, był jakby odurzony, że pytał sam siebie, czy to prawda, i nie śmiał odpowiedzieć: tak. A tymczasem rzeczywistość przemawiała do niego nieprzepartymi dowodami; więc godziny jedna za drugą spływały mu na balkonie. Patrzył, nasycał się, przekonywał. Mogłoby się zdawać, że pierwszy raz w życiu widział morze, bo północ wybiła już na aspinwallskich zegarach, a on jeszcze nie opuszczał swojej powietrznej wyżyny — i patrzył. W dole pod jego stopami grało morze. Soczewka latarni rzucała w ciemność olbrzymi ostrokrąg światła, poza którym oko starca ginęło w dali czarnej zupełnie, tajemniczej i strasznej. Ale dal owa zdawała się biegnąć ku światłu. Długie wiorstowe fale wytaczały się z ciemności i rycząc szły aż do stóp wysepki, a wówczas widać było spienione ich grzbiety, połyskujące różowo w świetle latarni.

Przypływ wzmagał się coraz bardziej i zalewał piaszczyste ławice. Tajemnicza mowa oceanu dochodziła z pełni coraz potężniej i głośniej, podobna czasem do huku armat, to do szumu olbrzymich lasów, to do dalekiego, zmąconego gwaru głosów ludzkich. Chwilami cichło. Potem o uszy starca odbijało się kilka wielkich westchnień, potem jakieś łkania — i znów groźne wybuchy. Wreszcie wiatr zwiał mgłę, ale napędził czarnych, poszarpanych chmur, które przysłaniały księżyc. Z zachodu poczynało dąć coraz mocniej. Bałwany skakały z wściekłością na urwisko latarni, oblizując już pianą i podmurowanie. W dali pomrukiwała burza. Na ciemnej, wzburzonej przestrzeni zabłysło kilka zielonych latarek, pouwieszanych do masztów okrętowych. Zielone owe punkciki to wznosiły się wysoko, to zapadały w dół, to chwiały się na prawo i na lewo. Skawiński zeszedł do swej izby. Burza poczęła wyć. Tam, na dworze, ludzie na owych okrętach walczyli z nocą, z ciemnością, z falą; w izbie zaś spokojnie było i cicho. Nawet odgłosy burzy słabo przedzierały się przez grube mury i tylko miarowe tik–tak! zegara kołysało utrudzonego starca jakby do snu.

Powrót na początek rozdziału

Kliknij zakładkę s2.html i skopiuj do edytora poniższy tekst drugiego rozdziału:

Powrót do menu

Rozdział II

Zaczęły płynąć godziny, dnie i tygodnie… Majtkowie twierdzą, że czasem, gdy morze bardzo jest rozhukane, woła coś na nich wśród nocy i ciemności po nazwisku. Jeżeli nieskończoność morska może tak wołać, to być może, że gdy się człowiek zestarzeje, woła także na niego i inna nieskończoność, jeszcze ciemniejsza i bardziej tajemnicza, a im jest bardziej zmęczony życiem, tym milsze są mu te nawoływania. Ale, by ich słuchać, trzeba ciszy. Prócz tego starość lubi się odosabniać, jakby w przeczuciu grobu. Latarnia była już dla Skawińskiego takim półgrobem. Nic jednostajniejszego, jak podobne życie na wieży. Młodzi ludzie, jeśli się na nie godzą, to po pewnym czasie opuszczają służbę. Latarnik też bywa zazwyczaj człekiem niemłodym, posępnym i zamkniętym w sobie. Gdy wypadkiem porzuci swoją latarnię i dostanie się między ludzi, chodzi wśród nich jak człowiek zbudzony z głębokiego snu. Na wieży brak wszelkich drobnych wrażeń, które w zwykłym życiu uczą stosować wszystko do siebie. Wszystko, z czym styka się latarnik, jest olbrzymie i pozbawione zwartych, określonych kształtów. Niebo — to jeden ogół, woda — to drugi, a wśród tych nieskończoności samotna dusza ludzka! Jest to życie, w którym myśl jest raczej ciągłym zadumaniem się, a z tego zadumania nie budzi latarnika nic, nawet jego zajęcia. Dzień do dnia staje się podobny jak dwa paciorki w różańcu i chyba zmiany pogody stanowią jedyną rozmaitość. Skawiński jednak czuł się tak szczęśliwym, jak nigdy w życiu nie był. Wstawał świtaniem, brał posiłek, czyścił soczewki latarni, a potem, siadłszy na balkonie, wpatrywał się w dal morską i oczy jego nie mogły się nigdy nasycić obrazami, które przed sobą widział. Zwykle na olbrzymim turkusowym tle widać było stada wydętych żagli, świecących w promieniach słońca tak mocno, że aż oczy mrużyły się pod nadmiarem blasku; czasem statki, korzystając z wiatrów, które pasatami zowią, szły wyciągniętym szeregiem jedne za drugimi, podobne do łańcucha mew lub albatrosów. Czerwone beczki wskazujące drogę kołysały się na fali lekkim, łagodnym ruchem; między żaglami pojawiał się co dnia w południe olbrzymi szarawy pióropusz dymu. To parowiec z New Yorku wiózł podróżnych i towary do Aspinwall, ciągnąc za sobą długi, spieniony szlak piany. Z drugiej strony balkonu widział Skawiński, jak na dłoni, Aspinwall i jego ruchliwy port, a w nim las masztów, łodzie i łódki; nieco zaś dalej białe domy i wieżyczki miasta. Z wysokości latarni domki były podobne do gniazd mew, łodzie do żuków, a ludzie poruszali się jak małe punkciki na białym, kamiennym bulwarku. Z rana lekki wschodni powiew przynosił zmieszany gwar życia ludzkiego, nad którym górował świst parowców. W południe nadchodziła godzina sjesty. Ruch w porcie ustawał; mewy kryły się w szczerby skał, fale słabły i stawały się jakieś leniwe, a wówczas na lądzie, na morzu i na latarni nastawała chwila niezmąconej niczym ciszy. Żółte piaski, z których odpłynęły fale, lśniły na kształt złotych plam na obszarach wodnych; słup wieżowy odrzynał się twardo w błękicie. Potoki promieni słonecznych lały się z nieba na wodę, na piaski i na urwiska. Wówczas i starca ogarniała jakaś niemoc, pełna słodyczy. Czuł, że ten odpoczynek, którego używa, jest wyborny, a gdy pomyślał, że będzie trwały, to mu już niczego nie brakło. Skawiński rozmarzał się własnym szczęściem, ale że człowiek łatwo oswaja się z lepszym losem, stopniowo nabierał wiary i ufności, myślał bowiem, że jeśli ludzie budują domy dla inwalidów, to dlaczegóżby Bóg nie miał wreszcie przygarnąć swego inwalidy? Czas upływał i utrwalał go w tym przekonaniu. Stary zżył się z wieżą, z latarnią, z urwiskiem, z ławicami piasku i samotnością. Poznał się także i z mewami, które niosły się w załamach skalnych, a wieczorem odprawiały wiece na dachu latarni. Skawiński rzucał im zwykle resztki swego jadła, tak zaś przyswoiły się wkrótce, że gdy to czynił potem, to otaczała go prawdziwa burza białych skrzydeł, stary zaś chodził między ptastwem jak pastuch między owcami. W czasie odpływu wyprawiał się na niskie piaszczyste ławice, na których zbierał smaczne ślimaki i piękne perłowe konchy żeglarków, które odpływająca fala osadzała na piasku. W nocy przy świetle księżyca i latarni chodził na ryby, którymi roiły się załamy skalne.

W końcu pokochał swoją skałę i swoją bezdrzewną wysepkę, porośniętą tylko drobnymi, tłustymi roślinkami, sączącymi lepką żywicę. Ubóstwo wysepki wynagradzały mu zresztą dalsze widoki. W południowych godzinach, gdy atmosfera stawała się bardzo przezroczystą, widać było całe międzymorze, aż do Pacyfiku, pokryte najbujniejszą roślinnością. Skawińskiemu wydawało się wówczas, że widzi jeden olbrzymi ogród. Pęki kokosów i olbrzymich muz układały się jakby w przepyszne czubiaste bukiety, tuż zaraz za domami Aspinwallu. Dalej, między Aspinwall a Panamą, widać było ogromny las, nad którym co rano i pod noc zwieszał się czerwonawy opar wyziewów — las prawdziwie podzwrotnikowy, zalany u spodu stojącą wodą, oplatany lianami, szumiący jedną falą olbrzymich storczyków, palm, drzew mlecznych, żelaznych i gumowych.

Przez swą strażniczą lunetę stary mógł dojrzeć nie tylko drzewa, nie tylko rozłożyste liście bananów, ale nawet gromady małp, wielkich marabutów i stada papug, wzbijające się czasem jak tęczowa chmura nad lasem. Skawiński znał z bliska podobne lasy, gdyż po rozbiciu się na Amazonce błąkał się całe tygodnie wśród podobnych zielonych sklepień i gąszczów. Wiedział, ile pod cudną, śmiejącą się powierzchnią ukrywa się niebezpieczeństw i śmierci. Wśród nocy, jakie w nich spędził, słyszał z bliska grobowe głosy wyjców i ryki jaguarów, widział olbrzymie węże kołyszące się na kształt lianów na drzewach; znał owe senne jeziora leśne, przepełnione drętwami i rojące się od krokodylów. Wiedział, pod jakim jarzmem żyje człowiek w tych niezgłębionych puszczach, w których pojedyncze liście przenoszą dziesięciokrotnie jego wielkość, w których mrowią się krwiożercze moskity, pijawki drzewne i olbrzymie jadowite pająki. Wszystkiego sam doznał, sam doświadczył, wszystko sam przecierpiał; toteż tym większą mu teraz sprawiało rozkosz patrzeć z wysokości na owe matos, podziwiać ich piękność, a być zasłoniętym od zdrad.

Jego wieża chroniła go przed wszelkim złem. Opuszczał ją też tylko czasami w niedzielę z rana. Przywdziewał wtedy granatową kapotę strażniczą ze srebrnymi guzami, na piersiach zawieszał swoje krzyże i jego mleczna głowa podnosiła się z pewną dumą, gdy słyszał przy wyjściu z kościoła, jak Kreole mówili między sobą: „Porządnego mamy latarnika”. — „I nie heretyk, chociaż Yankee!” Wracał jednak natychmiast po mszy na wyspę i wracał szczęśliwy, bo zawsze jeszcze nie dowierzał stałemu lądowi. W niedzielę także odczytywał sobie hiszpańską gazetę, którą zakupywał w mieście, lub nowojorskiego »Heralda«, pożyczanego u Falconbridge'a — i szukał w nich skwapliwie wiadomości z Europy. Biedne stare serce! Na tej wieży strażniczej i na drugiej półkuli biło jeszcze dla kraju… Czasem także, gdy łódź przywożąca mu co dzień żywność i wodę przybiła do wysepki, schodził z wieży na gawędę ze strażnikiem Johnsem. Potem jednak widocznie zdziczał. Przestał bywać w mieście, czytywać gazety i schodzić na polityczne rozprawy Johnsa. Upływały całe tygodnie w ten sposób, że nikt jego nie widział ani on nikogo. Jedynym znakiem, że stary żyje, było tylko znikanie żywności pozostawianej na brzegu i światło latarni zapalane co wieczór z taką regularnością, z jaką słońce wstaje rankiem z wody w tamtych stronach. Widocznie stary zobojętniał dla świata. Powodem tego nie była nostalgia, ale właśnie to, że przeszła i ona nawet w rezygnację. Cały świat teraz zaczynał się dla starca i kończył się na jego wysepce. Zżył się już z myślą, że nie opuści wieży do śmierci, i po prostu zapomniał, że jest jeszcze coś poza nią. Przy tym stał się mistykiem. Łagodne niebieskie jego oczy poczęły być jak oczy dziecka, zapatrzone wiecznie i jakby utkwione w jakiejś dali. W ciągłym odosobnieniu i wobec otoczenia nadzwyczaj prostego a wielkiego począł stary tracić poczucie własnej odrębności, przestawał istnieć jakoby osoba, a zlewał się coraz więcej z tym, co go otaczało. Nie rozumował nad tym, czuł tylko bezwiednie, ale w końcu zdawało mu się, że niebo, woda, jego skała, wieża i złote ławice piasku, i wydęte żagle, i mewy, odpływy i przypływy, to jakaś wielka jedność i jedna, ogromna tajemnicza dusza; on zaś sam pogrąża się w tej tajemnicy i czuje ową duszę, która żyje i koi się. Zatonął, ukołysał się, zapamiętał — i w tym ograniczeniu własnego, odrębnego bytu, w tym pół czuwaniu, pół śnie znalazł spokój tak wielki, że prawie podobny do półśmierci.

Powrót na początek rozdziału

Kliknij zakładkę s3.html i skopiuj do edytora poniższy tekst ostatniego rozdziału:

Powrót do menu

Rozdział III

Ale nadeszło przebudzenie.

Pewnego razu, gdy łódź przywiozła wodę i zapasy żywności, Skawiński, zeszedłszy w godzinę później z wieży, spostrzegł, że prócz zwykłego ładunku jest jeszcze jedna paczka więcej. Na wierzchu paczki były marki pocztowe Stanów Zjednoczonych i wyraźny adres „Skawiński Esq.”, wypisany na grubym żaglowym płótnie. Rozciekawiony starzec przeciął płótno i ujrzał książki: wziął jedną do ręki, spojrzał i położył na powrót, przy czym ręce poczęły mu drżeć mocno. Przysłonił oczy, jakby im nie wierząc; zdawało mu się, że śni — książka była polska. Co to miało znaczyć?! Kto mu mógł przysłać książkę? W pierwszej chwili zapomniał widocznie, iż jeszcze na początku swej latarniczej kariery przeczytał pewnego razu w pożyczonym od konsula »Heraldzie« o zawiązaniu polskiego Towarzystwa w New Yorku i że zaraz przesłał Towarzystwu połowę swej miesięcznej pensji, z którą zresztą nie miał co robić na wieży. Towarzystwo wywdzięczając się przysyłało książki. Przyszły one drogą naturalną, ale w pierwszej chwili starzec nie mógł pochwytać tych myśli. Polskie książki w Aspinwall, na jego wieży, wśród jego samotności, była to dla niego jakaś nadzwyczajność, jakieś tchnienie dawnych czasów, cud jakiś. Teraz wydało mu się, jak owym żeglarzom wśród nocy, że coś zawołało na niego po imieniu głosem bardzo kochanym, a zapomnianym prawie. Przesiedział chwilę z zamkniętymi oczyma i był prawie pewny, że gdy je otworzy, sen zniknie. Nie! Rozcięta paczka leżała przed nim wyraźnie, oświecona blaskiem popołudniowego słońca, a na niej otwarta już książka.

Gdy stary wyciągnął znowu po nią rękę, słyszał wśród ciszy bicie własnego serca. Spojrzał: były to wiersze. Na wierzchu stał wypisany wielkimi literami tytuł, pod spodem zaś imię autora. Imię to nie było Skawińskiemu obce; wiedział, że należy ono do wielkiego poety, którego nawet i utwory czytywał po trzydziestym roku w Paryżu. Potem, wojując w Algerze i w Hiszpanii, słyszał od rodaków o coraz wzrastającej sławie wielkiego wieszcza, ale tak przywykł wówczas do karabina, że i do ręki nie brał książek. W czterdziestym dziewiątym roku wyjechał do Ameryki i w awanturniczym życiu, jakie prowadził, prawie nie spotykał Polaków, a nigdy książek polskich. Z tym większą też skwapliwością i z tym żywiej bijącym sercem przewrócił kartę tytułową. Zdało mu się teraz, że na jego samotnej skale poczyna się dziać coś uroczystego. Jakoż była to chwila wielkiego spokoju i ciszy. Zegary aspinwallskie wybiły piątą po południu. Jasnego nieba nie zaciemniała żadna chmurka, kilka mew tylko pławiło się w błękitach. Ocean był ukołysany. Nadbrzeżne fale zaledwie bełkotały z cicha, rozpływając się łagodnie po piaskach. W dali śmiały się białe domy Aspinwallu i cudne grupy palm. Naprawdę było jakoś uroczyście, a cicho i poważnie. Nagle wśród tego spokoju natury rozległ się drżący głos starego, który czytał głośno, by się samemu lepiej rozumieć:

Litwo, ojczyzno moja, ty jesteś jak zdrowie!
Ile cię trzeba cenić, ten tylko się dowie,
Kto cię stracił. Dziś piękność twą w całej ozdobie
Widzę i opisuję, bo tęsknię po tobie…

Skawińskiemu zabrakło głosu. Litery poczęły mu skakać do oczu; w piersi coś urwało się i szło na kształt fali od serca wyżej i wyżej, tłumiąc głos, ściskając za gardło… Chwila jeszcze, opanował się i czytał dalej:

Panno Święta, co jasnej bronisz Częstochowy
I w Ostrej świecisz Bramie! Ty, co gród zamkowy
Nowogrodzki ochraniasz z jego wiernym ludem!
Jak mnie, dziecko, do zdrowia powróciłaś cudem,
(Gdy od płaczącej matki pod Twoją opiekę
Ofiarowany, martwą podniosłem powiekę
I zaraz mogłem pieszo do Twych świątyń progu
Iść, za zwrócone życie podziękować Bogu),
Tak nas powrócisz cudem na Ojczyzny łono…

Wezbrana fala przerwała tamę woli. Stary ryknął i rzucił się na ziemię; jego mleczne włosy zmieszały się z piaskiem nadmorskim. Oto czterdzieści lat dobiegało, jak nie widział kraju, i Bóg wie ile, jak nie słyszał mowy rodzinnej, a tu tymczasem ta mowa przyszła sama do niego — przepłynęła ocean i znalazła go, samotnika, na drugiej półkuli, taka kochana, taka droga, taka śliczna! We łkaniu, jakie nim wstrząsało, nie było bólu, ale tylko nagle rozbudzona niezmierna miłość, przy której wszystko jest niczym… On po prostu tym wielkim płaczem przepraszał tę ukochaną, oddaloną za to, że się już tak zestarzał, tak zżył z samotną skałą i tak zapamiętał, iż się w nim i tęsknota poczynała zacierać. A teraz „wracał cudem” — więc się w nim serce rwało. Chwile mijały jedna za drugą: on wciąż leżał. Mewy przyleciały nad latarnię, pokrzykując jakby niespokojne o swego starego przyjaciela. Nadchodziła godzina, w której je karmił resztkami swej żywności, więc kilka z nich zleciało z wierzchu latarni aż do niego. Potem przybyło ich coraz więcej i zaczęły go dziobać lekko i furkotać skrzydłami nad jego głową. Szumy skrzydeł zbudziły go. Wypłakawszy się, miał teraz w twarzy jakiś spokój i rozpromienienie, a oczy jego były jakby natchnione. Oddał bezwiednie całą swoją żywność ptakom, które rzuciły się na nią z wrzaskiem, a sam wziął znowu książkę. Słońce już było przeszło nad ogrodami i nad dziewiczym lasem Panamy i staczało się z wolna za międzymorze, ku drugiemu oceanowi, ale i Atlantyk był jeszcze pełen blasku, w powietrzu widno zupełnie, więc czytał dalej:

Tymczasem przenoś duszę moją utęsknioną
Do tych pagórków leśnych, do tych łąk zielonych…

Zmierzch dopiero zatarł litery na białej karcie, zmierzch krótki jak mgnienie oka. Starzec oparł głowę o skałę i przymknął oczy. A wówczas „Ta, co jasnej broni Częstochowy” zabrała jego duszę i przeniosła „do tych pól malowanych zbożem rozmaitym”. Na niebie paliły się jeszcze długie szlaki czerwone i złote, a on w tych światłościach leciał ku stronom kochanym. Zaszumiały mu w uszach lasy sosnowe, zabełkotały rzeki rodzinne. Widzi wszystko, jak było. Wszystko go pyta: „Pamiętasz?”. On pamięta! A zresztą widzi: pola przestronne, miedze, łąki, lasy i wioski. Noc już! O tej porze już zwykle jego latarnia rozświecała ciemności morskie — ale teraz on jest we wsi rodzinnej. Stara głowa pochyla się na piersi i śni. Obrazy przesuwają się przed jego oczyma szybko i trochę bezładnie. Nie widzi domu rodzinnego, bo starła go wojna, nie widzi ojca ani matki, bo go odumarli dzieckiem; ale zresztą wieś, jakby ją wczoraj opuścił: szereg chałup ze światełkami w oknach, grobla, młyn, dwa stawy podane ku sobie i brzmiące całą noc chórami żab. Niegdyś w tej swojej wiosce stał nocą na widecie, teraz przeszłość ta podstawia się nagle w szeregu widzeń. Oto znowu jest ułanem i stoi na widecie: z dala karczma pogląda płonącymi oczyma i brzmi, i śpiewa, i huczy wśród ciszy nocnej tupotaniem, głosami skrzypiec i basetli. „U-ha! U-ha!” To ułany krzeszą ognia podkówkami, a jemu tam nudno samemu na koniu! Godziny wloką się leniwo, wreszcie światła gasną; teraz, jak okiem sięgnąć, mgła i mgła nieprzejrzana: opar widocznie podnosi się z łąk i obejmuje świat cały białawym tumanem. Rzekłbyś: zupełnie ocean. Ale to łąki: rychło czekać, jak derkacz ozwie się w ciemności i bąki zahuczą po trzcinach. Noc jest spokojna i chłodna, prawdziwie polska noc! W oddali bór sosnowy szumi bez wiatru… Jak fala morska. Wkrótce świtanie wschód ubieli: jakoż i kury pieją już w zapłociach. Jeden drugiemu podaje głos z chaty do chaty; wraz i żurawie krzyczą już gdzieś z wysoka. Ułanowi jakoś rześko, zdrowo. Coś tam gadali o jutrzejszej bitwie. Hej! To i pójdzie, jak pójdą inni z krzykiem i furkotaniem chorągiewek. Młoda krew gra jak trąbka, choć powiew nocny ją chłodzi. Ale już świta, świta! Noc blednie: z cienia wychylają się lasy, zarośla, szereg chałup, młyn, topole. Studnie skrzypią, jakby blaszana chorągiewka na wieży. Jaka ta ziemia kochana, śliczna w różowych blaskach jutrzni! Oj, jedyna, jedyna!

Cicho! Czujna wideta słyszy, że się ktoś zbliża. Zapewne idą zluzować warty.

Nagle jakiś głos rozlega się nad Skawińskim:

— Hej, stary! Wstawajcie. Co to wam?

Stary otwiera oczy i patrzy ze zdziwieniem na stojącego przed sobą człowieka. Resztki snu widzeń walczą w jego głowie z rzeczywistością. Wreszcie widzenia bledną i nikną. Przed nim stoi Johns, strażnik portowy.

— Co to? — pyta Johns — Chorzyście?

— Nie.

— Nie zapaliliście latarni. Pójdziecie precz ze służby. Łódź z San–Geromo rozbiła się na mieliźnie, szczęściem, nikt nie utonął; inaczej poszlibyście pod sąd. Siadajcie ze mną, resztę usłyszycie w konsulacie.

Stary pobladł: istotnie nie zapalił tej nocy latarni.

W kilka dni później widziano Skawińskiego na pokładzie statku idącego z Aspinwall do New Yorku. Biedak stracił posadę. Otwierały się przed nim nowe drogi tułactwa; wiatr porywał znowu ten liść, by nim rzucać po lądach i morzach, by się nad nim znęcać do woli. Toteż stary przez te kilka dni posunął się bardzo i pochylił; oczy miał tylko błyszczące. Na nowe zaś drogi życia miał także na piersiach swoją książkę, którą od czasu do czasu przyciskał ręką, jakby w obawie, by mu i ona nie zginęła…

Powrót na początek rozdziału

Z menu wybierz opcję:

File → Save All

Wszystkie zmienione pliki zostaną zapisane w witrynie.

Tworzenie hiperłączy

Kliknij w zakładkę index.html. W tekście umieścimy linki do poszczególnych rozdziałów noweli Henryka Sienkiewicza. Zaznacz tekst Rozdział I. Następnie naciśnij klawisze Ctrl+K. W oknie dialogowym Insert Hyperlink wybierz plik s1.html i kliknij w przycisk OK.

W podobny sposób wstaw hiperłącza do pozostałych dwóch rozdziałów. Plik index.html zapisz w katalogu witryny (Ctrl+S) i sprawdź jego działanie w przeglądarce (kliknij ikonę na pasku narzędziowym).

W edytorze kliknij w zakładkę s1.html. Na początku znajduje się wiersz "Powrót do menu". Zaznacz go lewym przyciskiem myszki i wciśnij klawisze Ctrl+K. W okienku dialogowym Insert Hyperlink wybierz plik index.html i kliknij przycisk OK. Skopiuj to hiperłącze do schowka, przejdź kolejno do stron s2.html i s3.html (klikając w ich zakładki u góry okna edytora Expression Web). Na stronie zaznacz tekst "Powrót do menu" i wklej ze schowka skopiowany link.  W  ten sposób umieścisz na tych stronach linki do strony głównej index.html. Z menu wybierz opcję:

File → Save All

Sprawdź działanie tych hiperłączy w przeglądarce.

Przełącz się w tryb Code i zlokalizuj hiperłącze. Wykorzystuje ono znacznik <a> (ang. Anchor = kotwica):

<a href="Wskazywany plik">Tekst objęty hiperłączem</a>

Hiperłącze może również wskazywać wybrane miejsca na stronie WWW. Aby było to możliwe, musimy najpierw odpowiednio oznaczyć miejsce, na które ma wskazywać hiperłącze. Dokonujemy tego przy pomocy zakładek (ang. bookmarks). Przejdź do pliku s1.html, ustaw tryb Design i wstaw kursor bezpośrednio przed tekstem "Rozdział I". Następnie wybierz z menu opcję:

Insert → Bookmark...

lub naciśnij klawisze Ctrl+Shift+G. Zostanie wyświetlone okno dialogowe Bookmark:

Zakładkę należy sobie nazwać. Tutaj nazwa brzmi "P". Nazwę wpisujemy u góry w pole tekstowe. Zatwierdź okno i przełącz się w tryb kodu, a następnie zlokalizuj zakładkę w kodzie strony. To również będzie znacznik <a>, lecz w tym wypadku nie posiada on odwołania href:

<a name="Nazwa zakładki">Tekst objęty zakładką (może być pusty)</a>

Strona WWW może zawierać dowolną ilość zakładek. Zakładka jednoznacznie definiuje wybrane miejsce na stronie.

Wróć do trybu Design i wstaw takie same zakładki na stronach s2.html i s3.html (gdyby twoja witryna zawierała dużą liczbę stron, to warto rozważyć umieszczenie zakładek w szablonie stron WWW, wymaga to jednak dokładnego przemyślenia struktury stron w witrynie).

Wróć do strony s1.html i przejdź na koniec i zaznacz tekst "Powrót na początek rozdziału". Naciśnij klawisze Ctrl+K. W pierwszej kolumnie wybierz opcję Place in this document (miejsce na tej stronie):

Treść okienka zmieni się i będziesz miał możliwość wybrania zakładki na tej stronie WWW. Wybierz swoją zakładkę (u mnie P) i kliknij przycisk OK. Przełącz edytor w tryb kodu i zlokalizuj wstawione hiperłącze. Jeśli hiperłącze wskazuje  zakładkę na tej samej stronie, to ma formę:

<a href="#Nazwa zakładki">Tekst objęty hiperłączem</a>

Wróć do trybu Design i zaznacz hiperłącze, po  czym skopiuj je do schowka. Przełącz się na stronę s2.html i przejdź na koniec tekstu. Zaznacz wiersz z tekstem "Powrót na początek rozdziału" i naciśnij klawisze Ctrl+V. Spowoduje to zastąpienie zaznaczonego tekstu hiperłączem ze schowka. To samo powtórz na stronie s3.html. Zapisz wszystkie pliki w witrynie (File → Save All) i zrób ich podgląd w przeglądarce.