Lab.1. Praca z tekstem: stosowanie arkuszy stylów w dokumentach

Technologie informacyjne — ETD1063
dr inż. Krzysztof Urbański
Lab.1. Praca z tekstem: stosowanie arkuszy stylów w
dokumentach OO oraz HTML/CSS
Cel ćwiczenia: zapoznanie się z pojęciem stylów w dokumentach. Umiejętność
stosowania stylów do automatycznego przygotowania spisów treści. Tworzenie
autamatycznych spisów ilustracji. Przygotowanie prostych dokumentów HTML i
umiejętność stosowania arkuszy CSS.
Zaliczenie: Realizacja zadań od 1 do 5. Wyniki w postaci plików po przedstawieniu na
zajęciach należy spakować do postaci imię_nazwisko_numeralbumu.zip i przesłać
prowadzącemu zajęcia.
Wstęp
Tworząc dokumenty tekstowe najczęściej korzystamy z pakietów biurowych
OpenOffice lub Microsoft Office. Oba te narzędzia są na tyle wygodne w użyciu, że
zwykle nie zadajemy sobie trudu poznania bardziej zaawansowanych możliwości
tworzenia dokumentów tekstowych.
Jeśli spodziewanym efektem końcowym jest wydruk kilkustronicowego dokumentu
tekstowego (np. listu do cioci), to rzeczywiście korzystanie z zaawansowanych funkcji
składu tekstu może mijać się z celem. Jeśli jednak struktura dokumentu jest bardziej
skomplikowana, zawiera on rozdziały, podrozdziały, ilustracje i spisy treści, to warto
poświęcić trochę czasu i wysiłku na wykonanie tego zadania inteligentniej niż „na
piechotę”.
Praktyczne zastosowania tych umiejętności to sprawozdania i praca dyplomowa.
Praktyka kilku ostatnich lat pokazuje, że na ok. 200 dyplomantów tylko kilku potrafi
posłużyć się zaawansowanym systemem składu tekstu LaTeX, a zaledwie dalszych
kilkunastu radzi sobie z właściwym użyciem pakietów biurowych. Pisanie pracy
dyplomowej to częste modyfikacje układu i treści pracy, liczne rysunki, przypisy — próba
wykonania tego zadania „na piechotę” zwykle oznacza stratę czasu.
W przyszłości (2 rok) wrócimy na krótko do arkuszy CSS/CSS2 przy okazji
poznawania języka XML oraz w trakcie omawiania pewnych mechanizmów dziedziczenia
w programowaniu obiektowym.
Wydział Elektroniki Mikrosystemów i Fotoniki
Politechnika Wrocławska
1
Technologie informacyjne — ETD1063
dr inż. Krzysztof Urbański
Zadanie 0. Zapoznanie się z pakietem OpenOffice [do 10 min.]
Ci, którzy nie poslugiwali się jeszcze tym pakietem, powinni przejrzeć dostępne
opcje dotyczące formatowania tekstu. [F11] wyświetla okienko dialogowe zawierające
informacje o dostępnych w bieżącym dokumencie stylach. Style są podzielone na
kategorie, z których interesuje nas dzisiaj „Paragraph styles” oraz „Character styles”.
Style paragrafów dotyczą całych paragrafów, natomiast style znakowe odnoszą się do
fragmentów tekstu wewnątrz paragrafu.
Zadanie 1. Definicje stylów użytkownika [20 min.]
Zdefiniuj następujące style w kategorii Custom Styles:
 Paragraph styles
 Lista
 Nagłówek1
 Nagłówek2
 Tekst
Ponadto, o ile czas pozwoli, także następujące style:
 Character styles
 Nazwa pliku (przykład)
 Zwrot obcojęzyczny (przykład)
 List styles
 Lista1
 Lista2
Plik ze zdefiniowanymi stylami nazwij lab1zad1.odt.
Zadanie 2. Zastosowanie stylów w dokumencie [20 min.]
Zastosuj style w przygotowanym przez siebie dokumencie. W dokumencie powinny
znaleźć się przynajmniej jeden nagłówek poziomu pierwszego i dwa nagłówki poziomu 2
oraz kilka paragrafów tekstu. Sprawdź, w jaki sposób modyfikacja stylu wpływa na
wygląd dokumentu (bez konieczności edytowania dokumentu). Przygotuj automatyczny
spis treści. W tym celu w w dokumencie powinny wystąpić nagłówki z konsekwentnie
używanymi stylami.
Przykładowo:
Wydział Elektroniki Mikrosystemów i Fotoniki
Politechnika Wrocławska
2
Technologie informacyjne — ETD1063
dr inż. Krzysztof Urbański
Rys. 1: Nagłówek poziomu 1.
Rys. 2: Nagłówek poziomu 2
Tak zdefiniowane style pozwalają na utworzenie przykładowego spisu treści
w następujący sposób:
Rys. 3: Wstawianie automatycznego spisu treści
Rys. 4: Przykładowe parametry pozwalające na utworzenie spisu treści na
podstawie wybranych stylów.
Wydział Elektroniki Mikrosystemów i Fotoniki
Politechnika Wrocławska
3
Technologie informacyjne — ETD1063
dr inż. Krzysztof Urbański
Rys. 5: Określanie, które style mają być użyte do tworzenia spisu, jaka jest ich hierarchia oraz w jaki sposób mają być
tworzone wcięcia.
Plik wynikowy nazwij lab1zad2.odt.
Zadanie 3. Modyfikacja stylów [10 min.]
Zmień kolory nagłówków poziomu 1 na zielone, a nagłówków poziomu 2 na
niebieskie. Niech wszystkie nagłówki poziomu 2 będą pisane kursywą. Dla wszystkich
standardowych paragrafów w tym dokumencie ustal wielkość wcięcia akapitowego na 2
cm. Wszystkie zwroty obcojęzyczne mają być pogrubione zamiast pochylone.
Plik wynikowy nazwij lab1zad3.odt.
Arkusze stylów CSS/CSS2 w języku HTML
Dokładniej można się przyjrzeć działaniu arkuszy stylów próbując stworzyć prostą
stronę WWW (dokument HTML). Istnieje wiele gotowych edytorów działąjących w trybie
WYSIWYG (What You See Is What You Get), polega to na tym, że dokument HTML
edytujemy
tak
jak
zwykły
dokument
Office/OO.
Edytory
te
ukrywają
przed
użytkownikiem „techniczną” stronę języka HTML, czyli tzw. znaczniki.
Przyjrzyjmy się, jak w języku HTML moglibyśmy zapisać powyższy fragment tekstu:
<H2>Arkusze stylów CSS/CSS2 w języku HTML</H2>
<P>Dokładniej można się przyjrzeć działaniu arkuszy stylów próbując
stworzyć prostą stronę WWW (dokument HTML). Istnieje wiele gotowych
edytorów działąjących w trybie WYSIWYG (What You See Is What You Get),
polega to na tym, że dokument HTML edytujemy tak jak zwykły dokument
Office/OO. Edytory te ukrywają przed użytkownikiem „techniczną” stronę
języka HTML, czyli tzw. znaczniki.</P>
<P>Przyjrzyjmy się, jak w języku HTML moglibyśmy zapisać powyższy fragment
tekstu:</P>
Wydział Elektroniki Mikrosystemów i Fotoniki
Politechnika Wrocławska
4
Technologie informacyjne — ETD1063
dr inż. Krzysztof Urbański
Znaczniki <H1>, <H2>, ..., <H6> określają poziom nagłówka.
Znacznik <P> służy do określania paragrafów w dokumencie.
Znaczniki <I>, <B>, <U> dawniej służyły do ustalania atrybutów tekstu takich jak
kursywa, pogrubienie czy podkreślenie. Obecnie nie jest zalecane ich stosowanie,
ponieważ zostały zastąpione przez nowsze rozwiązania.
Istnieje wiele innych znaczników, z których potrzebne nam będą jeszcze <HTML>,
<HEAD>, <BODY>.
Zamknięcia znacznika dokonuje się poprzez dodanie ukośnika (/) przed jego nazwą,
np.: </BODY>
<HTML>
<HEAD>
<TITLE>Tytuł strony</TITLE>
</HEAD>
<BODY>
<H1>Nagłówek (np. tytuł)</H1>
<P>Paragraf, a w nim „zwykła” treść.</P>
</BODY>
</HTML>
Charakterystyczne jest zagnieżdżanie znaczników, np. wewnątrz <BODY> mamy
dwa znaczniki: <H1> oraz <P>. Nie wszystkie znaczniki można zagnieżdżać, są też
znaczniki które w ogóle nie posiadają części zamykającej (np. <BR>, znacznik złamania
wiersza).
Powyższy fragment kodu można wkleić do dowolnego edytora tekstowego
(wystarczy zwykły Notatnik) i zapisać pod nazwą z rozszerzeniem *.html. Taki plik
mógłby zostać zinterpretowany przez przeglądarki WWW następująco:
Rys. 6: Różnice w interpretacji identycznego pliku HTML w różnych przeglądarkach
Wydział Elektroniki Mikrosystemów i Fotoniki
Politechnika Wrocławska
5
Technologie informacyjne — ETD1063
dr inż. Krzysztof Urbański
Widoczne są różnice polegające przede wszystkim na interpretacji znaków
diakrytycznych. Poprawiony dokument będzie wyglądał następująco:
<HTML>
<HEAD>
<TITLE>Tytuł strony</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1250">
</HEAD>
<BODY>
<H1>Nagłówek (np. tytuł)</H1>
<P>Paragraf, a w nim „zwykła” treść.</P>
</BODY>
</HTML>
Użycie zestawu znaków Windows-1250 zamiast ISO-8859-2 nie jest zbyt eleganckim
rozwiązaniem, ale pozwoli nam bez problemu edytować stronę zawierającą polskie znaki
diakrytyczne nawet w tak prostym narzędziu jak Notatnik.
Załóżmy że nasz serwis internetowy zawiera nie jedną, lecz kilkadziesiąt
podobnych stron oraz że każda strona składa się z kilku-kilkunastu nagłówków różnych
poziomów. Chcemy, aby cały serwis wyglądał jednolicie, np. aby nagłówki pierwszego
poziomu były czerwone. Dawniej należałoby użyć zapisu:
<H1><FONT color=”red”>Nagłówek (np. tytuł)</FONT></H1>
Komplikacje zaczynały się, gdy zaszła potrzeba zmiany koloru czerwonego np. na
niebieski — modyfikacje musiały być przeprowadzone w setkach lub nawet tysiącach
miejsc.
Współcześnie oddziela się treść strony od jej wyglądu. Za wygląd stron odpowiada
najczęściej osobny plik, tzw. arkusz stylu CSS (Cascading Style Sheet). Można też arkusz
CSS umieścić wewnątrz dokumentu HTML.
Przed dodaniem informacji o stylach dokument o poniższej treści:
<HTML>
<HEAD>
<TITLE>Tytuł strony</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1250">
</HEAD>
<BODY>
<H1>Nagłówek 1</H1>
<P>Treść paragrafu treść paragrafu treść paragrafu treść paragrafu.</P>
<H2>Nagłówek 2</H2>
<H2>Nagłówek 2</H2>
<P>Treść paragrafu treść paragrafu treść paragrafu treść paragrafu.</P>
</BODY>
</HTML>
jest interpretowany następująco:
Wydział Elektroniki Mikrosystemów i Fotoniki
Politechnika Wrocławska
6
Technologie informacyjne — ETD1063
dr inż. Krzysztof Urbański
Rys. 8: Zmiana atrybutów <H1> za pomocą znacznika <FONT
color="red">
Rys. 7: Interpretacja przykładowego dokumentu HTML bez arkusza CSS
Następnie modyfikujemy plik HTML dodając znacznik <STYLE>:
<HTML>
<HEAD>
<TITLE>Tytuł strony</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1250">
<STYLE>
H1 { color: red; font-family: Tahoma; font-weight: bold; }
</STYLE>
</HEAD>
<BODY>
<H1>Nagłówek 1</H1>
<P>Treść paragrafu treść paragrafu treść paragrafu treść paragrafu.</P>
<H2>Nagłówek 2</H2>
<H2>Nagłówek 2</H2>
<P>Treść paragrafu treść paragrafu treść paragrafu treść paragrafu.</P>
</BODY>
</HTML>
Po wyświetleniu tak zmodyfikowanego dokumentu w przeglądarce internetowej
powinniśmy uzyskać poniższy efekt:
Wydział Elektroniki Mikrosystemów i Fotoniki
Politechnika Wrocławska
7
Technologie informacyjne — ETD1063
dr inż. Krzysztof Urbański
Rys. 9: Ten sam dokument HTML po dodaniu arkusza stylów
Zadanie 4. Modyfikacja istniejącego arkusza stylu [5 min.]
Utwórz na podstawie podanych powyżej kodów źródłowych plik o nazwie
lab1zad4.html. Zmodyfikuj arkusz stylów tak, aby nagłówki pierwszego poziomu były
zielone, a nagłówki drugiego poziomu żółte. Niech wszystkie domyślne paragrafy (<P>)
w dokumencie będą zapisane kursywą i czcionką wielkości 10pt. Zapis 'pt' to punkty, nie
mylić z pikselami ('px').
Zadanie 5. Tworzenie własnego pliku HTML z arkuszem CSS [20 min.]
Dwa akapity tej instrukcji przygotuj w postaci dokumentu HTML. W dokumencie
powinny znaleźć się przynajmniej jeden nagłówek poziomu pierwszego i dwa nagłówki
poziomu 2 oraz kilka paragrafów tekstu.
Do tak przygotowanego dokumentu HTML dodaj definicję stylów (znacznik
<STYLE>).
Zachowaj kolorystykę i typografię używaną w tej instrukcji.




W jaki sposób w języku HTML określamy kolory inne niż kolory podstawowe?
Jak zdefiniować wcięcie akapitowe (wcięcie pierwszego wiersza)?
Jak ustawić interlinię (odstępy między wierszami w akapicie) na 1, 1.5, 2?
W jaki sposób można umieścić arkusz CSS poza dokumentem HTML (tak, aby ten
Wydział Elektroniki Mikrosystemów i Fotoniki
Politechnika Wrocławska
8
Technologie informacyjne — ETD1063
dr inż. Krzysztof Urbański
sam arkusz CSS mógł być używany w wielu plikach HTML)?
Plik
wynikowy
nazwij
lab1zad5.html.,
ew.
dodatkowo
dołącz
plik
lab1zad5.css.
Spis rysunków
Rys.
Rys.
Rys.
Rys.
1:
2:
3:
4:
Rys. 5:
Rys.
Rys.
Rys.
Rys.
6:
7:
8:
9:
Nagłówek poziomu 1......................................................................... 2
Nagłówek poziomu 2......................................................................... 2
Wstawianie automatycznego spisu treści................................................. 3
Przykładowe parametry pozwalające na utworzenie spisu treści na podstawie
wybranych stylów............................................................................ 3
Określanie, które style mają być użyte do tworzenia spisu, jaka jest ich
hierarchia oraz w jaki sposób mają być tworzone wcięcia............................ 4
Różnice w interpretacji identycznego pliku HTML w różnych przeglądarkach...... 5
Interpretacja przykładowego dokumentu HTML bez arkusza CSS..................... 7
Zmiana atrybutów <H1> za pomocą znacznika <FONT color="red">.................. 7
Ten sam dokument HTML po dodaniu arkusza stylów................................... 8
Spis treści
Lab.1. Praca z tekstem: stosowanie arkuszy stylów w dokumentach OO oraz
HTML/CSS...............................................................................................1
Wstęp................................................................................................. 1
Zadanie 0. Zapoznanie się z pakietem OpenOffice [do 10 min.]............................1
Zadanie 1. Definicje stylów użytkownika [20 min.]........................................... 2
Zadanie 2. Zastosowanie stylów w dokumencie [20 min.]................................... 2
Zadanie 3. Modyfikacja stylów [10 min.]....................................................... 4
Arkusze stylów CSS/CSS2 w języku HTML....................................................... 4
Zadanie 4. Modyfikacja istniejącego arkusza stylu [5 min.] ................................ 8
Zadanie 5. Tworzenie własnego pliku HTML z arkuszem CSS [20 min.].................... 8
Wydział Elektroniki Mikrosystemów i Fotoniki
Politechnika Wrocławska
9