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.
Zadanie 0. Zapoznanie się z pakietem OpenOffice [do 10 min.]
Wydział Elektroniki Mikrosystemów i Fotoniki
Politechnika Wrocławska
1
Technologie informacyjne — ETD1063
dr inż. Krzysztof Urbański
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.
Plik wynikowy nazwij lab1zad2.odt.
Wydział Elektroniki Mikrosystemów i Fotoniki
Politechnika Wrocławska
2
Technologie informacyjne — ETD1063
dr inż. Krzysztof Urbański
Przykładowo:
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
Wydział Elektroniki Mikrosystemów i Fotoniki
Politechnika Wrocławska
3
Technologie informacyjne — ETD1063
dr inż. Krzysztof Urbański
Rys. 4: 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.
Rys. 5: Przykładowe parametry pozwalające na utworzenie spisu treści na podstawie wybranych
stylów.
Wydział Elektroniki Mikrosystemów i Fotoniki
Politechnika Wrocławska
4
Technologie informacyjne — ETD1063
dr inż. Krzysztof Urbański
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>
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>
Wydział Elektroniki Mikrosystemów i Fotoniki
Politechnika Wrocławska
5
Technologie informacyjne — ETD1063
dr inż. Krzysztof Urbański
<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
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.
Wydział Elektroniki Mikrosystemów i Fotoniki
Politechnika Wrocławska
6
Technologie informacyjne — ETD1063
dr inż. Krzysztof Urbański
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:
Rys. 8: Zmiana atrybutów <H1> za pomocą znacznika <FONT
color="red">
Rys. 7: Interpretacja przykładowego dokumentu HTML bez arkusza CSS
Wydział Elektroniki Mikrosystemów i Fotoniki
Politechnika Wrocławska
7
Technologie informacyjne — ETD1063
dr inż. Krzysztof Urbański
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:
Rys. 9: Ten sam dokument HTML po dodaniu arkusza stylów
Zadanie 4. Modyfikacja istniejącego arkusza stylu [5 min.]
Na podstawie podanych powyżej kodów źródłowych utwóz w Notatniku 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
Wydział Elektroniki Mikrosystemów i Fotoniki
Politechnika Wrocławska
8
Technologie informacyjne — ETD1063
dr inż. Krzysztof Urbański
'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 (jako edytora
dokumentu HTML użyj Notatnika). 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
sam arkusz CSS mógł być używany w wielu plikach HTML)?
Plik
wynikowy
nazwij
lab1zad5.html.,
ew.
dodatkowo
dołącz
plik
lab1zad5.css.
Wydział Elektroniki Mikrosystemów i Fotoniki
Politechnika Wrocławska
9
Technologie informacyjne — ETD1063
dr inż. Krzysztof Urbański
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.........................................................................3
Nagłówek poziomu 2.........................................................................3
Wstawianie automatycznego spisu treści.................................................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
Przykładowe parametry pozwalające na utworzenie spisu treści na podstawie
wybranych stylów............................................................................4
Różnice w interpretacji identycznego pliku HTML w różnych przeglądarkach......6
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.].......................................................5
Arkusze stylów CSS/CSS2 w języku HTML.......................................................5
Zadanie 4. Modyfikacja istniejącego arkusza stylu [5 min.] ................................8
Zadanie 5. Tworzenie własnego pliku HTML z arkuszem CSS [20 min.]....................9
Wydział Elektroniki Mikrosystemów i Fotoniki
Politechnika Wrocławska
10